Merge pull request #10462 from afscrome/TuneCatalogColumns

Updated Columns in Catalog Table

.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.

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(
+        <ApiProvider apis={mockApis}>
+          <MockEntityListContextProvider
+            value={{
+              entities,
+              filters: {
+                kind: kind ? new EntityKindFilter(kind) : undefined,
+              },
+            }}
+          >
+            <CatalogTable />
+          </MockEntityListContextProvider>
+        </ApiProvider>,
+        {
+          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,
+  );
 });

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<CatalogTableRow>[] = useMemo(
-    () => [
+  const defaultColumns: TableColumn<CatalogTableRow>[] = 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<CatalogTableRow>[] {
+      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