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