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(); }); }); });