diff --git a/.changeset/poor-knives-boil.md b/.changeset/poor-knives-boil.md new file mode 100644 index 0000000000..dfdc09cdbe --- /dev/null +++ b/.changeset/poor-knives-boil.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-catalog': patch +'@backstage/plugin-catalog-react': patch +--- + +Columns in CatalogTable now change depending on the entity kind, ensuring only relevant columns are displayed. diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx index cc05bbe2ae..0d2b80e3c1 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx @@ -25,6 +25,7 @@ import { MockEntityListContextProvider, starredEntitiesApiRef, UserListFilter, + EntityKindFilter, MockStarredEntitiesApi, } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; @@ -176,4 +177,126 @@ describe('CatalogTable component', () => { expect(window.open).toHaveBeenCalledWith('https://other.place', '_blank'); }); + + it.each([ + { + kind: 'api', + expectedColumns: [ + 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', + 'Description', + 'Tags', + 'Actions', + ], + }, + { + kind: 'component', + expectedColumns: [ + 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', + 'Description', + 'Tags', + 'Actions', + ], + }, + { + kind: 'domain', + expectedColumns: ['Name', 'Owner', 'Description', 'Tags', 'Actions'], + }, + { + kind: 'group', + expectedColumns: ['Name', 'Type', 'Description', 'Tags', 'Actions'], + }, + { + kind: 'location', + expectedColumns: ['Name', 'Type', 'Description', 'Tags', 'Actions'], + }, + { + kind: 'resource', + expectedColumns: [ + 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', + 'Description', + 'Tags', + 'Actions', + ], + }, + { + kind: 'system', + expectedColumns: ['Name', 'Owner', 'Description', 'Tags', 'Actions'], + }, + { + kind: 'template', + expectedColumns: ['Name', 'Type', 'Description', 'Tags', 'Actions'], + }, + { + kind: 'user', + expectedColumns: ['Name', 'Description', 'Tags', 'Actions'], + }, + { + kind: 'custom', + expectedColumns: [ + 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', + 'Description', + 'Tags', + 'Actions', + ], + }, + { + kind: null, + expectedColumns: [ + 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', + 'Description', + 'Tags', + 'Actions', + ], + }, + ])( + 'should render correct columns with kind filter $kind', + async ({ kind, expectedColumns }) => { + const { getAllByRole } = await renderInTestApp( + + + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + const columnHeader = getAllByRole('button').filter( + c => c.tagName === 'SPAN', + ); + const columnHeaderLabels = columnHeader.map(c => c.textContent); + expect(columnHeaderLabels).toEqual(expectedColumns); + }, + 20_000, + ); }); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 433032a69e..2f346e4e08 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -65,18 +65,35 @@ export const CatalogTable = (props: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const { loading, error, entities, filters } = useEntityList(); - const defaultColumns: TableColumn[] = useMemo( - () => [ + const defaultColumns: TableColumn[] = useMemo(() => { + return [ columnFactories.createNameColumn({ defaultKind: filters.kind?.value }), - columnFactories.createSystemColumn(), - columnFactories.createOwnerColumn(), - columnFactories.createSpecTypeColumn(), - columnFactories.createSpecLifecycleColumn(), + ...createEntitySpecificColumns(), columnFactories.createMetadataDescriptionColumn(), columnFactories.createTagsColumn(), - ], - [filters.kind?.value], - ); + ]; + + function createEntitySpecificColumns(): TableColumn[] { + switch (filters.kind?.value) { + case 'user': + return []; + case 'domain': + case 'system': + return [columnFactories.createOwnerColumn()]; + case 'group': + case 'location': + case 'template': + return [columnFactories.createSpecTypeColumn()]; + default: + return [ + columnFactories.createSystemColumn(), + columnFactories.createOwnerColumn(), + columnFactories.createSpecTypeColumn(), + columnFactories.createSpecLifecycleColumn(), + ]; + } + } + }, [filters.kind?.value]); const showTypeColumn = filters.type === undefined; // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar