From 5d5fdbe541a41f2d961d3b4aebf0ca2cbc6c054e Mon Sep 17 00:00:00 2001 From: Alex Crome Date: Sat, 26 Mar 2022 20:29:34 +0000 Subject: [PATCH 1/5] Updated Columns in Catalog Table Updated columns in the catalog table view to vary columns based on entity kind. Specifically excluding columns that aren't supported by that entity kind. Signed-off-by: Alex Crome --- .changeset/poor-knives-boil.md | 6 +++ .../components/CatalogTable/CatalogTable.tsx | 52 +++++++++++++++---- 2 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 .changeset/poor-knives-boil.md diff --git a/.changeset/poor-knives-boil.md b/.changeset/poor-knives-boil.md new file mode 100644 index 0000000000..08d3534eb6 --- /dev/null +++ b/.changeset/poor-knives-boil.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-catalog': minor +'@backstage/plugin-catalog-react': minor +--- + +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.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 9d59d57647..addd2af7ec 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -64,18 +64,52 @@ 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 'api': + return [ + columnFactories.createSystemColumn(), + columnFactories.createOwnerColumn(), + columnFactories.createSpecTypeColumn(), + columnFactories.createSpecLifecycleColumn(), + ]; + case 'component': + return [ + columnFactories.createSystemColumn(), + columnFactories.createOwnerColumn(), + columnFactories.createSpecTypeColumn(), + columnFactories.createSpecLifecycleColumn(), + ]; + case 'domain': + return [columnFactories.createOwnerColumn()]; + case 'group': + return [columnFactories.createSpecTypeColumn()]; + case 'location': + return [columnFactories.createSpecTypeColumn()]; + case 'resource': + return [ + columnFactories.createSystemColumn(), + columnFactories.createOwnerColumn(), + columnFactories.createSpecTypeColumn(), + columnFactories.createSpecLifecycleColumn(), + ]; + case 'system': + return [columnFactories.createOwnerColumn()]; + case 'template': + return [columnFactories.createSpecTypeColumn()]; + default: + return []; + } + } + }, [filters.kind?.value]); const showTypeColumn = filters.type === undefined; // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar From 4e69339444f2aa3751a29fa0a44ce2f3bb170a2c Mon Sep 17 00:00:00 2001 From: Alex Crome Date: Sun, 27 Mar 2022 09:46:19 +0100 Subject: [PATCH 2/5] Fixed DefaultCatalogPage tests Signed-off-by: Alex Crome --- .../src/components/CatalogPage/DefaultCatalogPage.test.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx index c3135e5697..ef9bce507e 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx @@ -169,10 +169,6 @@ describe('DefaultCatalogPage', () => { expect(columnHeaderLabels).toEqual([ 'Name', - 'System', - 'Owner', - 'Type', - 'Lifecycle', 'Description', 'Tags', 'Actions', From 97f6300460cd24a8f141ae4874210394e4b4123f Mon Sep 17 00:00:00 2001 From: Alex Crome Date: Wed, 30 Mar 2022 19:52:24 +0100 Subject: [PATCH 3/5] Improve test coverage for CatalogTable Signed-off-by: Alex Crome --- .../CatalogPage/DefaultCatalogPage.test.tsx | 4 + .../CatalogTable/CatalogTable.test.tsx | 134 ++++++++++++++++++ .../components/CatalogTable/CatalogTable.tsx | 37 ++--- 3 files changed, 148 insertions(+), 27 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx index ef9bce507e..c3135e5697 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx @@ -169,6 +169,10 @@ describe('DefaultCatalogPage', () => { expect(columnHeaderLabels).toEqual([ 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', 'Description', 'Tags', 'Actions', diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx index cc05bbe2ae..572586b777 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,137 @@ 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); + + // expect(columnHeaderLabels).toEqual([ + // 'Name', + // 'System', + // 'Owner', + // 'Type', + // 'Lifecycle', + // 'Description', + // 'Tags', + // 'Actions' + // ]); + }, + 20_000, + ); }); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index addd2af7ec..114c3faab7 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -74,39 +74,22 @@ export const CatalogTable = (props: CatalogTableProps) => { function createEntitySpecificColumns(): TableColumn[] { switch (filters.kind?.value) { - case 'api': - return [ - columnFactories.createSystemColumn(), - columnFactories.createOwnerColumn(), - columnFactories.createSpecTypeColumn(), - columnFactories.createSpecLifecycleColumn(), - ]; - case 'component': - return [ - columnFactories.createSystemColumn(), - columnFactories.createOwnerColumn(), - columnFactories.createSpecTypeColumn(), - columnFactories.createSpecLifecycleColumn(), - ]; + case 'user': + return []; case 'domain': - return [columnFactories.createOwnerColumn()]; - case 'group': - return [columnFactories.createSpecTypeColumn()]; - case 'location': - return [columnFactories.createSpecTypeColumn()]; - case 'resource': - return [ - columnFactories.createSystemColumn(), - columnFactories.createOwnerColumn(), - columnFactories.createSpecTypeColumn(), - columnFactories.createSpecLifecycleColumn(), - ]; case 'system': return [columnFactories.createOwnerColumn()]; + case 'group': + case 'location': case 'template': return [columnFactories.createSpecTypeColumn()]; default: - return []; + return [ + columnFactories.createSystemColumn(), + columnFactories.createOwnerColumn(), + columnFactories.createSpecTypeColumn(), + columnFactories.createSpecLifecycleColumn(), + ]; } } }, [filters.kind?.value]); From d209705efa17edf5cf677eab2821744923424f49 Mon Sep 17 00:00:00 2001 From: Alex Crome Date: Wed, 30 Mar 2022 19:59:36 +0100 Subject: [PATCH 4/5] Ammend changeset to be a patch bump rather than minor Signed-off-by: Alex Crome --- .changeset/poor-knives-boil.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/poor-knives-boil.md b/.changeset/poor-knives-boil.md index 08d3534eb6..dfdc09cdbe 100644 --- a/.changeset/poor-knives-boil.md +++ b/.changeset/poor-knives-boil.md @@ -1,6 +1,6 @@ --- -'@backstage/plugin-catalog': minor -'@backstage/plugin-catalog-react': minor +'@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. From 63aa47a8b90e80072856767b843af9646d9384f8 Mon Sep 17 00:00:00 2001 From: Alex Crome Date: Wed, 30 Mar 2022 21:13:37 +0100 Subject: [PATCH 5/5] Removed some commented out code Signed-off-by: Alex Crome --- .../src/components/CatalogTable/CatalogTable.test.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx index 572586b777..0d2b80e3c1 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx @@ -296,17 +296,6 @@ describe('CatalogTable component', () => { ); const columnHeaderLabels = columnHeader.map(c => c.textContent); expect(columnHeaderLabels).toEqual(expectedColumns); - - // expect(columnHeaderLabels).toEqual([ - // 'Name', - // 'System', - // 'Owner', - // 'Type', - // 'Lifecycle', - // 'Description', - // 'Tags', - // 'Actions' - // ]); }, 20_000, );