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/.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/.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/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-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(); }); }); }); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 7d693d1bc8..5a8040cd5b 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -97,6 +97,7 @@ const columns: TableColumn[] = [ placement="bottom-start" /> ), + width: 'auto', }, { title: 'Tags', 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[]} /> );