From 4f3d0dce094f305c8ca27850449cc9062a944050 Mon Sep 17 00:00:00 2001
From: Andrew Thauer <athauer@wealthsimple.com>
Date: Tue, 9 Mar 2021 07:38:16 -0500
Subject: [PATCH] feat(catalog): make other tab list non well known types

Signed-off-by: Andrew Thauer <athauer@wealthsimple.com>
---
 .changeset/brown-flowers-visit.md                    |  5 +++++
 .../src/components/CatalogPage/CatalogPage.tsx       |  1 +
 .../src/components/CatalogPage/CatalogTabs.tsx       | 12 +++++++++++-
 .../src/components/CatalogTable/CatalogTable.tsx     | 12 ++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brown-flowers-visit.md

diff --git a/.changeset/brown-flowers-visit.md b/.changeset/brown-flowers-visit.md
new file mode 100644
index 0000000000..e62c97d932
--- /dev/null
+++ b/.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.
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 0ec5dd31af..4679c10096 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/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}
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx b/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx
index ae1e2a4e5a..f00c892ed3 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx
+++ b/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]);
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index dc80622bbe..04c800d3db 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/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}