feat(catalog): make other tab list non well known types

Signed-off-by: Andrew Thauer <athauer@wealthsimple.com>

.changeset/brown-flowers-visit.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+This is a quick fix (while #2791 is being implemented) to make it possible view non well known component types listed in the catalog index page. It buckets any component entities that are not a `service`, `library`, or `documentation` into the `Other` tab. It also displays a `Type` column when on Other tab.

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -203,6 +203,7 @@ const CatalogPageContents = () => {
           </div>
           <CatalogTable
             titlePreamble={selectedSidebarItem?.label ?? ''}
+            view={selectedTab}
             entities={matchingEntities}
             loading={loading}
             error={error}

plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx

@@ -48,9 +48,19 @@ type Props = {
  */
 export const CatalogTabs = ({ tabs, onChange }: Props) => {
   const filterGroup = useMemo<FilterGroup>(() => {
+    const otherType = 'other';
+    const wellKnownTypes = tabs.map(t => t.id).filter(t => t !== otherType);
+    const isOtherType = (entity: Entity) =>
+      !wellKnownTypes.includes(entity.spec?.type as string);
+
     return {
       filters: Object.fromEntries(
-        tabs.map(t => [t.id, (entity: Entity) => entity.spec?.type === t.id]),
+        tabs.map(t => [
+          t.id,
+          (entity: Entity) =>
+            (t.id === otherType && isOtherType(entity)) ||
+            entity.spec?.type === t.id,
+        ]),
       ),
     };
   }, [tabs]);

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

@@ -87,6 +87,11 @@ const columns: TableColumn<EntityRow>[] = [
       />
     ),
   },
+  {
+    title: 'Type',
+    field: 'entity.spec.type',
+    hidden: true,
+  },
   {
     title: 'Lifecycle',
     field: 'entity.spec.lifecycle',
@@ -130,6 +135,7 @@ type CatalogTableProps = {
   titlePreamble: string;
   loading: boolean;
   error?: any;
+  view?: string;
 };
 
 export const CatalogTable = ({
@@ -137,6 +143,7 @@ export const CatalogTable = ({
   loading,
   error,
   titlePreamble,
+  view,
 }: CatalogTableProps) => {
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
 
@@ -217,6 +224,11 @@ export const CatalogTable = ({
     };
   });
 
+  const typeColumn = columns.find(c => c.title === 'Type');
+  if (typeColumn) {
+    typeColumn.hidden = view !== 'Other';
+  }
+
   return (
     <Table<EntityRow>
       isLoading={loading}