From 5af3be07bb17cefaf72f8a3bfb49f3fe2841b901 Mon Sep 17 00:00:00 2001 From: Blake Stoddard Date: Mon, 28 Nov 2022 09:05:36 -0500 Subject: [PATCH 1/5] Add a title prop to DependsOnResourcesCard The 'Depends on X' naming scheme can be cumbersome to users and being able to change the component titles in the UI to be clearer is great. The sibling card (DependsOnComponentsCard) already supports a title prop. Signed-off-by: Blake Stoddard --- .../DependsOnResourcesCard/DependsOnResourcesCard.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx index a0f4d399f9..0ae6601a4a 100644 --- a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx +++ b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx @@ -27,14 +27,15 @@ import { /** @public */ export interface DependsOnResourcesCardProps { variant?: InfoCardVariants; + title?: string; } export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) { - const { variant = 'gridItem' } = props; + const { variant = 'gridItem', title = 'Depends on resources' } = props; return ( Date: Mon, 28 Nov 2022 09:41:17 -0500 Subject: [PATCH 2/5] Extend certain entity tables to accept a columns prop Prevents a user fromhaving to spin out a custom component that is essentially an exact duplicate of the Backstage-provided components just to remove or add columns. Our (Epic) implementation doesn't care about system or description for these cards, but it's annoying to maintain a seperate component for the sole purpose of different columns. Signed-off-by: Blake Stoddard --- .../src/components/ApisCards/ConsumedApisCard.tsx | 10 +++++++--- .../src/components/ApisCards/HasApisCard.tsx | 9 ++++++--- .../src/components/ApisCards/ProvidedApisCard.tsx | 10 +++++++--- .../DependsOnComponentsCard.tsx | 13 +++++++++---- .../DependsOnResourcesCard.tsx | 13 +++++++++---- 5 files changed, 38 insertions(+), 17 deletions(-) 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/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', title = 'Depends on resources' } = props; + const { + variant = 'gridItem', + title = 'Depends on resources', + columns = resourceEntityColumns, + } = props; return ( Date: Mon, 28 Nov 2022 10:12:29 -0500 Subject: [PATCH 3/5] Add changeset Signed-off-by: Blake Stoddard --- .changeset/wild-ads-pull.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/wild-ads-pull.md diff --git a/.changeset/wild-ads-pull.md b/.changeset/wild-ads-pull.md new file mode 100644 index 0000000000..1fee3e52d8 --- /dev/null +++ b/.changeset/wild-ads-pull.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch +--- + +Add a columns prop to certain components that use the EntityTable for easier extensibility. From e4f1071e2a8a53b79e7316745b1722f5e81f5056 Mon Sep 17 00:00:00 2001 From: Blake Stoddard Date: Fri, 3 Feb 2023 13:12:02 -0500 Subject: [PATCH 4/5] update api-report files to show the new props Signed-off-by: Blake Stoddard --- plugins/api-docs/api-report.md | 6 ++++++ plugins/catalog/api-report.md | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md index a4f61872f2..a44f09ed03 100644 --- a/plugins/api-docs/api-report.md +++ b/plugins/api-docs/api-report.md @@ -78,6 +78,7 @@ export type AsyncApiDefinitionWidgetProps = { // @public (undocumented) export const ConsumedApisCard: (props: { variant?: InfoCardVariants; + columns?: TableColumn[]; }) => JSX.Element; // @public (undocumented) @@ -106,6 +107,7 @@ export const EntityApiDefinitionCard: () => JSX.Element; // @public (undocumented) export const EntityConsumedApisCard: (props: { variant?: InfoCardVariants | undefined; + columns?: TableColumn[] | undefined; }) => JSX.Element; // @public (undocumented) @@ -116,11 +118,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) @@ -141,6 +145,7 @@ export type GraphQlDefinitionWidgetProps = { // @public (undocumented) export const HasApisCard: (props: { variant?: InfoCardVariants; + columns?: TableColumn[]; }) => JSX.Element; // @public (undocumented) @@ -167,6 +172,7 @@ export type PlainApiDefinitionWidgetProps = { // @public (undocumented) export const ProvidedApisCard: (props: { variant?: InfoCardVariants; + columns?: TableColumn[]; }) => JSX.Element; // @public (undocumented) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 6d746f6a7c..5762bbbb74 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; } From c9a9f3c834f56efdebd3f0038ff8ebed1a775fd3 Mon Sep 17 00:00:00 2001 From: Blake Stoddard Date: Mon, 27 Feb 2023 10:19:20 -0500 Subject: [PATCH 5/5] Split + update the changeset descriptions Signed-off-by: Blake Stoddard --- .changeset/warm-vans-fail.md | 5 +++++ .changeset/wild-ads-pull.md | 3 +-- 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 .changeset/warm-vans-fail.md 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 index 1fee3e52d8..5a40787358 100644 --- a/.changeset/wild-ads-pull.md +++ b/.changeset/wild-ads-pull.md @@ -1,6 +1,5 @@ --- '@backstage/plugin-api-docs': patch -'@backstage/plugin-catalog': patch --- -Add a columns prop to certain components that use the EntityTable for easier extensibility. +Add a `columns` prop to certain components that use the `EntityTable` for easier extensibility.