feat: add hidden title column to catalog and API table to enable filtering by title

Signed-off-by: David Weber <david.weber@w3tec.ch>

.changeset/silly-geese-design.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': minor
+---
+
+Add hidden title column to catalog and API table to enable filtering by title.

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx

@@ -40,6 +40,7 @@ import React from 'react';
 import { registerComponentRouteRef } from '../../routes';
 
 const defaultColumns: TableColumn<CatalogTableRow>[] = [
+  CatalogTable.columns.createTitleColumn({ hidden: true }),
   CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
   CatalogTable.columns.createSystemColumn(),
   CatalogTable.columns.createOwnerColumn(),

plugins/catalog/api-report.md

@@ -136,6 +136,13 @@ export const CatalogTable: {
     createSpecLifecycleColumn(): TableColumn<CatalogTableRow>;
     createMetadataDescriptionColumn(): TableColumn<CatalogTableRow>;
     createTagsColumn(): TableColumn<CatalogTableRow>;
+    createTitleColumn(
+      options?:
+        | {
+            hidden?: boolean | undefined;
+          }
+        | undefined,
+    ): TableColumn<CatalogTableRow>;
   }>;
 };
 

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -68,6 +68,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
 
   const defaultColumns: TableColumn<CatalogTableRow>[] = useMemo(() => {
     return [
+      columnFactories.createTitleColumn({ hidden: true }),
       columnFactories.createNameColumn({ defaultKind: filters.kind?.value }),
       ...createEntitySpecificColumns(),
       columnFactories.createMetadataDescriptionColumn(),

plugins/catalog/src/components/CatalogTable/columns.tsx

@@ -131,4 +131,14 @@ export const columnFactories = Object.freeze({
       ),
     };
   },
+  createTitleColumn(options?: {
+    hidden?: boolean;
+  }): TableColumn<CatalogTableRow> {
+    return {
+      title: 'Title',
+      field: 'entity.metadata.title',
+      hidden: options?.hidden,
+      searchable: true,
+    };
+  },
 });