paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: provide table options everywhere and add title to api tables

Browse Source 
Signed-off-by: David Weber <david.weber@w3tec.ch>
Signed-off-by: David Weber <david.weber.schenker@gmail.com>
This commit is contained in:
David Weber
2024-07-08 17:35:59 +02:00
parent 2bae52597d
commit 658279973e
11 changed files with 151 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/weak-jobs-joke.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/plugin-api-docs': patch
'@backstage/plugin-catalog': patch
---
Add `tableOptions` to all tables and additionally `title` to API tables.
plugins/api-docs/api-report.md
+13
View File
@@ -16,6 +16,7 @@ import { JSX as JSX_2 } from 'react';
import { default as React_2 } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
import { TableColumn } from '@backstage/core-components';
import { TableOptions } from '@backstage/core-components';
import { TableProps } from '@backstage/core-components';
import { UserListFilterKind } from '@backstage/plugin-catalog-react';
@@ -88,7 +89,9 @@ export type AsyncApiDefinitionWidgetProps = {
// @public (undocumented)
export const ConsumedApisCard: (props: {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ApiEntity>[];
tableOptions?: TableOptions;
}) => React_2.JSX.Element;
// @public (undocumented)
@@ -118,7 +121,9 @@ export const EntityApiDefinitionCard: () => JSX_2.Element;
// @public (undocumented)
export const EntityConsumedApisCard: (props: {
variant?: InfoCardVariants | undefined;
title?: string | undefined;
columns?: TableColumn<ApiEntity>[] | undefined;
tableOptions?: TableOptions<{}> | undefined;
}) => JSX_2.Element;
// @public (undocumented)
@@ -129,13 +134,17 @@ export const EntityConsumingComponentsCard: (props: {
// @public (undocumented)
export const EntityHasApisCard: (props: {
variant?: InfoCardVariants | undefined;
title?: string | undefined;
columns?: TableColumn<ApiEntity>[] | undefined;
tableOptions?: TableOptions<{}> | undefined;
}) => JSX_2.Element;
// @public (undocumented)
export const EntityProvidedApisCard: (props: {
variant?: InfoCardVariants | undefined;
title?: string | undefined;
columns?: TableColumn<ApiEntity>[] | undefined;
tableOptions?: TableOptions<{}> | undefined;
}) => JSX_2.Element;
// @public (undocumented)
@@ -156,7 +165,9 @@ export type GraphQlDefinitionWidgetProps = {
// @public (undocumented)
export const HasApisCard: (props: {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ApiEntity>[];
tableOptions?: TableOptions;
}) => React_2.JSX.Element;
// @public (undocumented)
@@ -185,7 +196,9 @@ export type PlainApiDefinitionWidgetProps = {
// @public (undocumented)
export const ProvidedApisCard: (props: {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ApiEntity>[];
tableOptions?: TableOptions;
}) => React_2.JSX.Element;
// @public (undocumented)
plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
+13 -4
View File
@@ -30,6 +30,7 @@ import {
Link,
Progress,
TableColumn,
TableOptions,
WarningPanel,
} from '@backstage/core-components';
@@ -38,9 +39,16 @@ import {
*/
export const ConsumedApisCard = (props: {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ApiEntity>[];
tableOptions?: TableOptions;
}) => {
const { variant = 'gridItem', columns = apiEntityColumns } = props;
const {
variant = 'gridItem',
title = 'Consumed APIs',
columns = apiEntityColumns,
tableOptions = {},
} = props;
const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(entity, {
type: RELATION_CONSUMES_API,
@@ -48,7 +56,7 @@ export const ConsumedApisCard = (props: {
if (loading) {
return (
<InfoCard variant={variant} title="Consumed APIs">
<InfoCard variant={variant} title={title}>
<Progress />
</InfoCard>
);
@@ -56,7 +64,7 @@ export const ConsumedApisCard = (props: {
if (error || !entities) {
return (
<InfoCard variant={variant} title="Consumed APIs">
<InfoCard variant={variant} title={title}>
<WarningPanel
severity="error"
title="Could not load APIs"
@@ -68,7 +76,7 @@ export const ConsumedApisCard = (props: {
return (
<EntityTable
title="Consumed APIs"
title={title}
variant={variant}
emptyContent={
<div style={{ textAlign: 'center' }}>
@@ -84,6 +92,7 @@ export const ConsumedApisCard = (props: {
</div>
}
columns={columns}
tableOptions={tableOptions}
entities={entities as ApiEntity[]}
/>
);
plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
+13 -4
View File
@@ -30,6 +30,7 @@ import {
Link,
Progress,
TableColumn,
TableOptions,
WarningPanel,
} from '@backstage/core-components';
@@ -46,9 +47,16 @@ const presetColumns: TableColumn<ApiEntity>[] = [
*/
export const HasApisCard = (props: {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ApiEntity>[];
tableOptions?: TableOptions;
}) => {
const { variant = 'gridItem', columns = presetColumns } = props;
const {
variant = 'gridItem',
title = 'APIs',
columns = presetColumns,
tableOptions = {},
} = props;
const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(entity, {
type: RELATION_HAS_PART,
@@ -57,7 +65,7 @@ export const HasApisCard = (props: {
if (loading) {
return (
<InfoCard variant={variant} title="APIs">
<InfoCard variant={variant} title={title}>
<Progress />
</InfoCard>
);
@@ -65,7 +73,7 @@ export const HasApisCard = (props: {
if (error || !entities) {
return (
<InfoCard variant={variant} title="APIs">
<InfoCard variant={variant} title={title}>
<WarningPanel
severity="error"
title="Could not load APIs"
@@ -77,7 +85,7 @@ export const HasApisCard = (props: {
return (
<EntityTable
title="APIs"
title={title}
variant={variant}
emptyContent={
<div style={{ textAlign: 'center' }}>
@@ -93,6 +101,7 @@ export const HasApisCard = (props: {
</div>
}
columns={columns}
tableOptions={tableOptions}
entities={entities as ApiEntity[]}
/>
);
plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
+13 -4
View File
@@ -30,6 +30,7 @@ import {
Link,
Progress,
TableColumn,
TableOptions,
WarningPanel,
} from '@backstage/core-components';
@@ -38,9 +39,16 @@ import {
*/
export const ProvidedApisCard = (props: {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ApiEntity>[];
tableOptions?: TableOptions;
}) => {
const { variant = 'gridItem', columns = apiEntityColumns } = props;
const {
variant = 'gridItem',
title = 'Provided APIs',
columns = apiEntityColumns,
tableOptions = {},
} = props;
const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(entity, {
type: RELATION_PROVIDES_API,
@@ -48,7 +56,7 @@ export const ProvidedApisCard = (props: {
if (loading) {
return (
<InfoCard variant={variant} title="Provided APIs">
<InfoCard variant={variant} title={title}>
<Progress />
</InfoCard>
);
@@ -56,7 +64,7 @@ export const ProvidedApisCard = (props: {
if (error || !entities) {
return (
<InfoCard variant={variant} title="Provided APIs">
<InfoCard variant={variant} title={title}>
<WarningPanel
severity="error"
title="Could not load APIs"
@@ -68,7 +76,7 @@ export const ProvidedApisCard = (props: {
return (
<EntityTable
title="Provided APIs"
title={title}
variant={variant}
emptyContent={
<div style={{ textAlign: 'center' }}>
@@ -84,6 +92,7 @@ export const ProvidedApisCard = (props: {
</div>
}
columns={columns}
tableOptions={tableOptions}
entities={entities as ApiEntity[]}
/>
);
plugins/catalog/api-report.md
+19
View File
@@ -33,6 +33,7 @@ import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-rea
import { StarredEntitiesApi } from '@backstage/plugin-catalog-react';
import { StorageApi } from '@backstage/core-plugin-api';
import { StyleRules } from '@material-ui/core/styles/withStyles';
import { SystemEntity } from '@backstage/catalog-model';
import { TableColumn } from '@backstage/core-components';
import { TableOptions } from '@backstage/core-components';
import { TableProps } from '@backstage/core-components';
@@ -304,6 +305,10 @@ export class DefaultStarredEntitiesApi implements StarredEntitiesApi {
// @public (undocumented)
export interface DependencyOfComponentsCardProps {
// (undocumented)
columns?: TableColumn<ComponentEntity>[];
// (undocumented)
tableOptions?: TableOptions;
// (undocumented)
title?: string;
// (undocumented)
@@ -516,6 +521,10 @@ export function hasCatalogProcessingErrors(
// @public (undocumented)
export interface HasComponentsCardProps {
// (undocumented)
columns?: TableColumn<ComponentEntity>[];
// (undocumented)
tableOptions?: TableOptions;
// (undocumented)
title?: string;
// (undocumented)
@@ -535,6 +544,10 @@ export function hasRelationWarnings(
// @public (undocumented)
export interface HasResourcesCardProps {
// (undocumented)
columns?: TableColumn<ResourceEntity>[];
// (undocumented)
tableOptions?: TableOptions;
// (undocumented)
title?: string;
// (undocumented)
@@ -543,6 +556,8 @@ export interface HasResourcesCardProps {
// @public (undocumented)
export interface HasSubcomponentsCardProps {
// (undocumented)
columns?: TableColumn<ComponentEntity>[];
// (undocumented)
tableOptions?: TableOptions;
// (undocumented)
@@ -553,6 +568,10 @@ export interface HasSubcomponentsCardProps {
// @public (undocumented)
export interface HasSystemsCardProps {
// (undocumented)
columns?: TableColumn<SystemEntity>[];
// (undocumented)
tableOptions?: TableOptions;
// (undocumented)
title?: string;
// (undocumented)
plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx
+15 -3
View File
@@ -14,8 +14,15 @@
* limitations under the License.
*/
import { RELATION_DEPENDENCY_OF } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import {
ComponentEntity,
RELATION_DEPENDENCY_OF,
} from '@backstage/catalog-model';
import {
InfoCardVariants,
TableColumn,
TableOptions,
} from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -30,6 +37,8 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
export interface DependencyOfComponentsCardProps {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ComponentEntity>[];
tableOptions?: TableOptions;
}
export function DependencyOfComponentsCard(
@@ -39,6 +48,8 @@ export function DependencyOfComponentsCard(
const {
variant = 'gridItem',
title = t('dependencyOfComponentsCard.title'),
columns = componentEntityColumns,
tableOptions = {},
} = props;
return (
<RelatedEntitiesCard
@@ -46,10 +57,11 @@ export function DependencyOfComponentsCard(
title={title}
entityKind="Component"
relationType={RELATION_DEPENDENCY_OF}
columns={componentEntityColumns}
columns={columns}
emptyMessage={t('dependencyOfComponentsCard.emptyMessage')}
emptyHelpLink={componentEntityHelpLink}
asRenderableEntities={asComponentEntities}
tableOptions={tableOptions}
/>
);
}
plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
+16 -4
View File
@@ -14,8 +14,12 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { ComponentEntity, RELATION_HAS_PART } from '@backstage/catalog-model';
import {
InfoCardVariants,
TableColumn,
TableOptions,
} from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -30,21 +34,29 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
export interface HasComponentsCardProps {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ComponentEntity>[];
tableOptions?: TableOptions;
}
export function HasComponentsCard(props: HasComponentsCardProps) {
const { t } = useTranslationRef(catalogTranslationRef);
const { variant = 'gridItem', title = t('hasComponentsCard.title') } = props;
const {
variant = 'gridItem',
title = t('hasComponentsCard.title'),
columns = componentEntityColumns,
tableOptions = {},
} = props;
return (
<RelatedEntitiesCard
variant={variant}
title={title}
entityKind="Component"
relationType={RELATION_HAS_PART}
columns={componentEntityColumns}
columns={columns}
emptyMessage={t('hasComponentsCard.emptyMessage')}
emptyHelpLink={componentEntityHelpLink}
asRenderableEntities={asComponentEntities}
tableOptions={tableOptions}
/>
);
}
plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx
+16 -4
View File
@@ -14,8 +14,12 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { RELATION_HAS_PART, ResourceEntity } from '@backstage/catalog-model';
import {
InfoCardVariants,
TableColumn,
TableOptions,
} from '@backstage/core-components';
import React from 'react';
import {
asResourceEntities,
@@ -30,21 +34,29 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
export interface HasResourcesCardProps {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<ResourceEntity>[];
tableOptions?: TableOptions;
}
export function HasResourcesCard(props: HasResourcesCardProps) {
const { t } = useTranslationRef(catalogTranslationRef);
const { variant = 'gridItem', title = t('hasResourcesCard.title') } = props;
const {
variant = 'gridItem',
title = t('hasResourcesCard.title'),
columns = resourceEntityColumns,
tableOptions = {},
} = props;
return (
<RelatedEntitiesCard
variant={variant}
title={title}
entityKind="Resource"
relationType={RELATION_HAS_PART}
columns={resourceEntityColumns}
columns={columns}
asRenderableEntities={asResourceEntities}
emptyMessage={t('hasResourcesCard.emptyMessage')}
emptyHelpLink={resourceEntityHelpLink}
tableOptions={tableOptions}
/>
);
}
plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
+11 -5
View File
@@ -14,8 +14,12 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants, TableOptions } from '@backstage/core-components';
import { ComponentEntity, RELATION_HAS_PART } from '@backstage/catalog-model';
import {
InfoCardVariants,
TableColumn,
TableOptions,
} from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -28,16 +32,18 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
/** @public */
export interface HasSubcomponentsCardProps {
variant?: InfoCardVariants;
tableOptions?: TableOptions;
title?: string;
columns?: TableColumn<ComponentEntity>[];
tableOptions?: TableOptions;
}
export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
const { t } = useTranslationRef(catalogTranslationRef);
const {
variant = 'gridItem',
tableOptions = {},
title = t('hasSubcomponentsCard.title'),
columns = componentEntityColumns,
tableOptions = {},
} = props;
return (
<RelatedEntitiesCard
@@ -45,7 +51,7 @@ export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
title={title}
entityKind="Component"
relationType={RELATION_HAS_PART}
columns={componentEntityColumns}
columns={columns}
asRenderableEntities={asComponentEntities}
emptyMessage={t('hasSubcomponentsCard.emptyMessage')}
emptyHelpLink="https://backstage.io/docs/features/software-catalog/descriptor-format#specsubcomponentof-optional"
plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
+16 -4
View File
@@ -14,8 +14,12 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { RELATION_HAS_PART, SystemEntity } from '@backstage/catalog-model';
import {
InfoCardVariants,
TableColumn,
TableOptions,
} from '@backstage/core-components';
import React from 'react';
import {
asSystemEntities,
@@ -30,21 +34,29 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
export interface HasSystemsCardProps {
variant?: InfoCardVariants;
title?: string;
columns?: TableColumn<SystemEntity>[];
tableOptions?: TableOptions;
}
export function HasSystemsCard(props: HasSystemsCardProps) {
const { t } = useTranslationRef(catalogTranslationRef);
const { variant = 'gridItem', title = t('hasSystemsCard.title') } = props;
const {
variant = 'gridItem',
title = t('hasSystemsCard.title'),
columns = systemEntityColumns,
tableOptions = {},
} = props;
return (
<RelatedEntitiesCard
variant={variant}
title={title}
entityKind="System"
relationType={RELATION_HAS_PART}
columns={systemEntityColumns}
columns={columns}
asRenderableEntities={asSystemEntities}
emptyMessage={t('hasSystemsCard.emptyMessage')}
emptyHelpLink={systemEntityHelpLink}
tableOptions={tableOptions}
/>
);
}