diff --git a/.changeset/warm-vans-fail.md b/.changeset/warm-vans-fail.md new file mode 100644 index 0000000000..6cbd3a4e8f --- /dev/null +++ b/.changeset/warm-vans-fail.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': minor +--- + +Add a `columns` prop to certain components that use the `EntityTable` for easier extensibility. diff --git a/.changeset/wild-ads-pull.md b/.changeset/wild-ads-pull.md new file mode 100644 index 0000000000..5a40787358 --- /dev/null +++ b/.changeset/wild-ads-pull.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-api-docs': patch +--- + +Add a `columns` prop to certain components that use the `EntityTable` for easier extensibility. diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md index c00f9f8e00..a9b21664c3 100644 --- a/plugins/api-docs/api-report.md +++ b/plugins/api-docs/api-report.md @@ -85,6 +85,7 @@ export type AsyncApiDefinitionWidgetProps = { // @public (undocumented) export const ConsumedApisCard: (props: { variant?: InfoCardVariants; + columns?: TableColumn[]; }) => JSX.Element; // @public (undocumented) @@ -113,6 +114,7 @@ export const EntityApiDefinitionCard: () => JSX.Element; // @public (undocumented) export const EntityConsumedApisCard: (props: { variant?: InfoCardVariants | undefined; + columns?: TableColumn[] | undefined; }) => JSX.Element; // @public (undocumented) @@ -123,11 +125,13 @@ export const EntityConsumingComponentsCard: (props: { // @public (undocumented) export const EntityHasApisCard: (props: { variant?: InfoCardVariants | undefined; + columns?: TableColumn[] | undefined; }) => JSX.Element; // @public (undocumented) export const EntityProvidedApisCard: (props: { variant?: InfoCardVariants | undefined; + columns?: TableColumn[] | undefined; }) => JSX.Element; // @public (undocumented) @@ -148,6 +152,7 @@ export type GraphQlDefinitionWidgetProps = { // @public (undocumented) export const HasApisCard: (props: { variant?: InfoCardVariants; + columns?: TableColumn[]; }) => JSX.Element; // @public (undocumented) @@ -174,6 +179,7 @@ export type PlainApiDefinitionWidgetProps = { // @public (undocumented) export const ProvidedApisCard: (props: { variant?: InfoCardVariants; + columns?: TableColumn[]; }) => JSX.Element; // @public (undocumented) diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx index 588e62ceb7..f56bd3e1a7 100644 --- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx @@ -29,14 +29,18 @@ import { InfoCardVariants, Link, Progress, + TableColumn, WarningPanel, } from '@backstage/core-components'; /** * @public */ -export const ConsumedApisCard = (props: { variant?: InfoCardVariants }) => { - const { variant = 'gridItem' } = props; +export const ConsumedApisCard = (props: { + variant?: InfoCardVariants; + columns?: TableColumn[]; +}) => { + const { variant = 'gridItem', columns = apiEntityColumns } = props; const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { type: RELATION_CONSUMES_API, @@ -79,7 +83,7 @@ export const ConsumedApisCard = (props: { variant?: InfoCardVariants }) => { } - columns={apiEntityColumns} + columns={columns} entities={entities as ApiEntity[]} /> ); diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx index b09cafacda..b8aef1bca4 100644 --- a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx @@ -33,7 +33,7 @@ import { WarningPanel, } from '@backstage/core-components'; -const columns: TableColumn[] = [ +const presetColumns: TableColumn[] = [ EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }), EntityTable.columns.createOwnerColumn(), createSpecApiTypeColumn(), @@ -44,8 +44,11 @@ const columns: TableColumn[] = [ /** * @public */ -export const HasApisCard = (props: { variant?: InfoCardVariants }) => { - const { variant = 'gridItem' } = props; +export const HasApisCard = (props: { + variant?: InfoCardVariants; + columns?: TableColumn[]; +}) => { + const { variant = 'gridItem', columns = presetColumns } = props; const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { type: RELATION_HAS_PART, diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx index e9c63d9956..886ba17ba5 100644 --- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx @@ -29,14 +29,18 @@ import { InfoCardVariants, Link, Progress, + TableColumn, WarningPanel, } from '@backstage/core-components'; /** * @public */ -export const ProvidedApisCard = (props: { variant?: InfoCardVariants }) => { - const { variant = 'gridItem' } = props; +export const ProvidedApisCard = (props: { + variant?: InfoCardVariants; + columns?: TableColumn[]; +}) => { + const { variant = 'gridItem', columns = apiEntityColumns } = props; const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { type: RELATION_PROVIDES_API, @@ -79,7 +83,7 @@ export const ProvidedApisCard = (props: { variant?: InfoCardVariants }) => { } - columns={apiEntityColumns} + columns={columns} entities={entities as ApiEntity[]} /> ); diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index ee0ca180f4..5720ee60da 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -7,6 +7,7 @@ import { ApiHolder } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; +import { ComponentEntity } from '@backstage/catalog-model'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { Entity } from '@backstage/catalog-model'; import { ExternalRouteRef } from '@backstage/core-plugin-api'; @@ -17,6 +18,7 @@ import { Observable } from '@backstage/types'; import { Overrides } from '@material-ui/core/styles/overrides'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; +import { ResourceEntity } from '@backstage/catalog-model'; import { ResultHighlight } from '@backstage/plugin-search-common'; import { RouteRef } from '@backstage/core-plugin-api'; import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react'; @@ -227,6 +229,8 @@ export interface DependencyOfComponentsCardProps { // @public (undocumented) export interface DependsOnComponentsCardProps { + // (undocumented) + columns?: TableColumn[]; // (undocumented) title?: string; // (undocumented) @@ -235,6 +239,10 @@ export interface DependsOnComponentsCardProps { // @public (undocumented) export interface DependsOnResourcesCardProps { + // (undocumented) + columns?: TableColumn[]; + // (undocumented) + title?: string; // (undocumented) variant?: InfoCardVariants; } diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx index 4f30c17a84..a7ff97ec73 100644 --- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx +++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import { RELATION_DEPENDS_ON } from '@backstage/catalog-model'; -import { InfoCardVariants } from '@backstage/core-components'; +import { RELATION_DEPENDS_ON, ComponentEntity } from '@backstage/catalog-model'; +import { InfoCardVariants, TableColumn } from '@backstage/core-components'; import React from 'react'; import { asComponentEntities, @@ -28,17 +28,22 @@ import { export interface DependsOnComponentsCardProps { variant?: InfoCardVariants; title?: string; + columns?: TableColumn[]; } export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) { - const { variant = 'gridItem', title = 'Depends on components' } = props; + const { + variant = 'gridItem', + title = 'Depends on components', + columns = componentEntityColumns, + } = props; return ( []; } export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) { - const { variant = 'gridItem' } = props; + const { + variant = 'gridItem', + title = 'Depends on resources', + columns = resourceEntityColumns, + } = props; return (