From e6c88df0161e44a5c53945d4e9921011c9564b84 Mon Sep 17 00:00:00 2001
From: Tim Hansen <timbonicus@gmail.com>
Date: Thu, 26 Aug 2021 13:20:58 -0600
Subject: [PATCH] Prefer catalog kind casing

Signed-off-by: Tim Hansen <timbonicus@gmail.com>
---
 .../catalog-react/src/hooks/useEntityKinds.ts   |  4 +---
 .../CatalogKindHeader.test.tsx                  | 14 ++++++++++++++
 .../CatalogKindHeader/CatalogKindHeader.tsx     | 17 ++++++++++++++---
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/plugins/catalog-react/src/hooks/useEntityKinds.ts b/plugins/catalog-react/src/hooks/useEntityKinds.ts
index 5dae9c4c7f..082e4a207d 100644
--- a/plugins/catalog-react/src/hooks/useEntityKinds.ts
+++ b/plugins/catalog-react/src/hooks/useEntityKinds.ts
@@ -31,9 +31,7 @@ export function useEntityKinds() {
       .getEntities({ fields: ['kind'] })
       .then(response => response.items);
 
-    return [
-      ...new Set(entities.map(e => e.kind.toLocaleLowerCase('en-US'))),
-    ].sort();
+    return [...new Set(entities.map(e => e.kind))].sort();
   });
   return { error, loading, kinds };
 }
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
index bdf5b51b65..c15c50a239 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -89,6 +89,20 @@ describe('<CatalogKindHeader />', () => {
     });
   });
 
+  it('renders unknown kinds provided in query parameters', async () => {
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{ queryParameters: { kind: 'frob' } }}
+        >
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText('Frobs')).toBeInTheDocument();
+  });
+
   it('updates the kind filter', async () => {
     const updateFilters = jest.fn();
     const rendered = await renderWithEffects(
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index e4318a6078..41c5888d79 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -61,7 +61,18 @@ export const CatalogKindHeader = ({
     });
   }, [selectedKind, updateFilters]);
 
-  const options = [...new Set([selectedKind, ...allKinds])].sort();
+  // Before allKinds is loaded, or when a kind is entered manually in the URL, selectedKind may not
+  // be present in allKinds. It should still be shown in the dropdown, but may not have the nice
+  // enforced casing from the catalog-backend. This makes a key/value record for the Select options,
+  // including selectedKind if it's unknown - but allows the selectedKind to get clobbered by the
+  // more proper catalog kind if it exists.
+  const options = [capitalize(selectedKind)]
+    .concat(allKinds)
+    .sort()
+    .reduce((acc, kind) => {
+      acc[kind.toLocaleLowerCase('en-US')] = kind;
+      return acc;
+    }, {} as Record<string, string>);
 
   return (
     <Select
@@ -70,9 +81,9 @@ export const CatalogKindHeader = ({
       onChange={e => setSelectedKind(e.target.value as string)}
       classes={classes}
     >
-      {options.map(kind => (
+      {Object.keys(options).map(kind => (
         <MenuItem value={kind} key={kind}>
-          {`${kind === 'api' ? 'API' : capitalize(kind)}s`}
+          {`${options[kind]}s`}
         </MenuItem>
       ))}
     </Select>