Prefer catalog kind casing

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

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 };
 }

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(

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>