From d6593abe6f414248d6ae172afd63201c78617313 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Fri, 19 Feb 2021 16:42:11 +0100 Subject: [PATCH 1/3] Remove columns from cards where it's duplicate information Resolves #4553 Signed-off-by: Oliver Sand --- .changeset/healthy-schools-kneel.md | 7 +++++++ .../src/components/ApisCards/HasApisCard.tsx | 13 +++++++++++-- .../HasComponentsCard/HasComponentsCard.tsx | 10 +++++++++- .../HasSubcomponentsCard/HasSubcomponentsCard.tsx | 10 +++++++++- .../components/HasSystemsCard/HasSystemsCard.tsx | 8 +++++++- 5 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 .changeset/healthy-schools-kneel.md diff --git a/.changeset/healthy-schools-kneel.md b/.changeset/healthy-schools-kneel.md new file mode 100644 index 0000000000..fa7b98a256 --- /dev/null +++ b/.changeset/healthy-schools-kneel.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch +--- + +Remove domain column from `HasSystemsCard` and system from `HasComponentsCard`, +`HasSubcomponentsCard`, and `HasApisCard`. diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx index 9f1d487b65..c3e636b1f1 100644 --- a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx @@ -20,6 +20,7 @@ import { InfoCard, Link, Progress, + TableColumn, WarningPanel, } from '@backstage/core'; import { @@ -28,12 +29,20 @@ import { useRelatedEntities, } from '@backstage/plugin-catalog-react'; import React from 'react'; -import { apiEntityColumns } from './presets'; +import { createSpecApiTypeColumn } from './presets'; type Props = { variant?: 'gridItem'; }; +const columns: TableColumn[] = [ + EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }), + EntityTable.columns.createOwnerColumn(), + EntityTable.columns.createSpecLifecycleColumn(), + createSpecApiTypeColumn(), + EntityTable.columns.createMetadataDescriptionColumn(), +]; + export const HasApisCard = ({ variant = 'gridItem' }: Props) => { const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { @@ -73,7 +82,7 @@ export const HasApisCard = ({ variant = 'gridItem' }: Props) => { } - columns={apiEntityColumns} + columns={columns} entities={entities as ApiEntity[]} /> ); diff --git a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx index 6485d4f525..eb8e96d9b3 100644 --- a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx +++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx @@ -33,6 +33,14 @@ type Props = { variant?: 'gridItem'; }; +const columns = [ + EntityTable.columns.createEntityRefColumn({ defaultKind: 'component' }), + EntityTable.columns.createOwnerColumn(), + EntityTable.columns.createSpecTypeColumn(), + EntityTable.columns.createSpecLifecycleColumn(), + EntityTable.columns.createMetadataDescriptionColumn(), +]; + export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => { const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { @@ -72,7 +80,7 @@ export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => { } - columns={EntityTable.componentEntityColumns} + columns={columns} entities={entities as ComponentEntity[]} /> ); diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx index c2635b68e1..778ec1dec5 100644 --- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx +++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx @@ -33,6 +33,14 @@ type Props = { variant?: 'gridItem'; }; +const columns = [ + EntityTable.columns.createEntityRefColumn({ defaultKind: 'component' }), + EntityTable.columns.createOwnerColumn(), + EntityTable.columns.createSpecTypeColumn(), + EntityTable.columns.createSpecLifecycleColumn(), + EntityTable.columns.createMetadataDescriptionColumn(), +]; + export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => { const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { @@ -72,7 +80,7 @@ export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => { } - columns={EntityTable.componentEntityColumns} + columns={columns} entities={entities as ComponentEntity[]} /> ); diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx index 9faa640060..5b18711d44 100644 --- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx +++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx @@ -33,6 +33,12 @@ type Props = { variant?: 'gridItem'; }; +const columns = [ + EntityTable.columns.createEntityRefColumn({ defaultKind: 'system' }), + EntityTable.columns.createOwnerColumn(), + EntityTable.columns.createMetadataDescriptionColumn(), +]; + export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => { const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { @@ -71,7 +77,7 @@ export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => { } - columns={EntityTable.systemEntityColumns} + columns={columns} entities={entities as SystemEntity[]} /> ); From 437bac5490096849de9471a20a7325b7a51f235c Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Fri, 19 Feb 2021 16:54:44 +0100 Subject: [PATCH 2/3] Make the description column in the catalog table use up as much space as possible before hiding overflowing text Signed-off-by: Oliver Sand --- .changeset/olive-moons-melt.md | 7 +++++++ .../examples/components/petstore-component.yaml | 3 ++- .../src/components/ApiExplorerTable/ApiExplorerTable.tsx | 1 + .../catalog/src/components/CatalogTable/CatalogTable.tsx | 1 + 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/olive-moons-melt.md diff --git a/.changeset/olive-moons-melt.md b/.changeset/olive-moons-melt.md new file mode 100644 index 0000000000..415c4cb8cb --- /dev/null +++ b/.changeset/olive-moons-melt.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-catalog': patch +'@backstage/plugin-api-docs': patch +--- + +Make the description column in the catalog table and api-docs table use up as +much space as possible before hiding overflowing text. diff --git a/packages/catalog-model/examples/components/petstore-component.yaml b/packages/catalog-model/examples/components/petstore-component.yaml index 48286f9b74..878fabd551 100644 --- a/packages/catalog-model/examples/components/petstore-component.yaml +++ b/packages/catalog-model/examples/components/petstore-component.yaml @@ -2,7 +2,8 @@ apiVersion: backstage.io/v1alpha1 kind: Component metadata: name: petstore - description: Petstore + # This is an extra long description + description: The Petstore is an example API used to show features of the OpenAPI spec. links: - url: https://github.com/swagger-api/swagger-petstore title: GitHub Repo diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx index 729f659b56..5b9808e26d 100644 --- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx +++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx @@ -99,6 +99,7 @@ const columns: TableColumn[] = [ placement="bottom-start" /> ), + width: 'auto', }, { title: 'Tags', diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 91f187855a..ce2203bfbb 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -98,6 +98,7 @@ const columns: TableColumn[] = [ placement="bottom-start" /> ), + width: 'auto', }, { title: 'Tags', From 88f1f1b607f021a64393b3760f551852aedc217e Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Fri, 19 Feb 2021 16:56:56 +0100 Subject: [PATCH 3/3] Truncate and show ellipsis with tooltip if content of `createMetadataDescriptionColumn` is too wide Signed-off-by: Oliver Sand --- .changeset/gentle-zoos-pump.md | 6 ++++++ .../catalog-react/src/components/EntityTable/columns.tsx | 8 +++++++- .../src/components/EntityTable/presets.test.tsx | 4 ++-- 3 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/gentle-zoos-pump.md diff --git a/.changeset/gentle-zoos-pump.md b/.changeset/gentle-zoos-pump.md new file mode 100644 index 0000000000..77e996cbcc --- /dev/null +++ b/.changeset/gentle-zoos-pump.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Truncate and show ellipsis with tooltip if content of +`createMetadataDescriptionColumn` is too wide. diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx index 7ca99b1100..7f5417df4e 100644 --- a/plugins/catalog-react/src/components/EntityTable/columns.tsx +++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx @@ -20,7 +20,7 @@ import { RELATION_OWNED_BY, RELATION_PART_OF, } from '@backstage/catalog-model'; -import { TableColumn } from '@backstage/core'; +import { OverflowTooltip, TableColumn } from '@backstage/core'; import React from 'react'; import { getEntityRelations } from '../../utils'; import { @@ -139,6 +139,12 @@ export function createMetadataDescriptionColumn< return { title: 'Description', field: 'metadata.description', + render: entity => ( + + ), width: 'auto', }; } diff --git a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx index b6b8c26e37..0f87c4132f 100644 --- a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx +++ b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx @@ -74,7 +74,7 @@ describe('systemEntityColumns', () => { expect(getByText('my-namespace/my-system')).toBeInTheDocument(); expect(getByText('my-namespace/my-domain')).toBeInTheDocument(); expect(getByText('Test')).toBeInTheDocument(); - expect(getByText('Some description')).toBeInTheDocument(); + expect(getByText(/Some/)).toBeInTheDocument(); }); }); }); @@ -131,7 +131,7 @@ describe('componentEntityColumns', () => { expect(getByText('Test')).toBeInTheDocument(); expect(getByText('production')).toBeInTheDocument(); expect(getByText('service')).toBeInTheDocument(); - expect(getByText('Some description')).toBeInTheDocument(); + expect(getByText(/Some/)).toBeInTheDocument(); }); }); });