From 6ffa47bb0ac7527730211bcb124b73f58f77965e Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Thu, 27 Oct 2022 19:34:58 +0200
Subject: [PATCH 1/7] Catalog kind filter fixes & clean-up

Various fixes:
* CatalogDefaultPage cannot handle Capitalized kinds from the kind query
  parameter. This breaks ownership cards and both CatalogKindHeader and
  EntityKindPicker turns up empty.

  There may be other places where the catalog expects to handle capitalized
  Kinds. After all, the default Kinds are capitalized in the entities.

* If a non existing kind is specified, CatalogKindHeader works but not
  the EntityKindPicker. Well, at least as long as the non-existing kind
  is not capitalized(!)

* The CatalogKindHeader supports allowed kinds, but not the
  EntityKindFilter. So depending on Catalog-setup they will list different
  kinds.

Refactoring:
* Refactored out helper functions to a util library. This ensured that
  similar logic can be shared between the Kind pickers (and in turn their
  behaviour is similar).

Tests:
* Relevant tests added

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .changeset/brave-bags-sniff.md                |   5 +
 .changeset/neat-lies-know.md                  |   5 +
 plugins/catalog-react/api-report.md           |  15 +++
 .../EntityKindPicker.test.tsx                 |  57 ++++++++++
 .../EntityKindPicker/EntityKindPicker.tsx     | 106 +++++-------------
 plugins/catalog-react/src/index.ts            |   2 +
 plugins/catalog-react/src/utils/index.ts      |   1 +
 .../src/utils/kindFilterUtils.ts              |  82 ++++++++++++++
 .../CatalogKindHeader/CatalogKindHeader.tsx   |  41 ++-----
 9 files changed, 207 insertions(+), 107 deletions(-)
 create mode 100644 .changeset/brave-bags-sniff.md
 create mode 100644 .changeset/neat-lies-know.md
 create mode 100644 plugins/catalog-react/src/utils/kindFilterUtils.ts

diff --git a/.changeset/brave-bags-sniff.md b/.changeset/brave-bags-sniff.md
new file mode 100644
index 0000000000..2608ca7f1e
--- /dev/null
+++ b/.changeset/brave-bags-sniff.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Fixes in kind selectors (now OwnershipCards work again)
diff --git a/.changeset/neat-lies-know.md b/.changeset/neat-lies-know.md
new file mode 100644
index 0000000000..cb355c638f
--- /dev/null
+++ b/.changeset/neat-lies-know.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': minor
+---
+
+Cleanup and small fixes for the kind selector
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index e8f0b0e6ee..ea67702c9b 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -175,6 +175,7 @@ export const EntityKindPicker: (
 
 // @public
 export interface EntityKindPickerProps {
+  allowedKinds?: string[];
   // (undocumented)
   hidden?: boolean;
   // (undocumented)
@@ -431,6 +432,13 @@ export type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
   entity: Entity;
 };
 
+// @public
+export function filterAndCapitalize(
+  allKinds: string[],
+  allowedKinds?: string[],
+  forcedKinds?: string[],
+): Record<string, string>;
+
 // @public
 export function getEntityRelations(
   entity: Entity | undefined,
@@ -503,6 +511,13 @@ export type UnregisterEntityDialogProps = {
   entity: Entity;
 };
 
+// @public
+export function useAllKinds(): {
+  loading: boolean;
+  error?: Error;
+  allKinds: string[];
+};
+
 // @public
 export function useAsyncEntity<
   TEntity extends Entity = Entity,
diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx
index 65ad3f227a..a62669caf9 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx
@@ -147,6 +147,43 @@ describe('<EntityKindPicker/>', () => {
     });
   });
 
+  it('renders unknown kinds provided in query parameters', async () => {
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{ queryParameters: { kind: 'frob' } }}
+        >
+          <EntityKindPicker />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText('Frob')).toBeInTheDocument();
+  });
+
+  it('limits kinds when allowedKinds is set', async () => {
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider>
+          <EntityKindPicker allowedKinds={['component', 'domain']} />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+
+    const input = rendered.getByTestId('select');
+    fireEvent.click(input);
+
+    expect(
+      rendered.getByRole('option', { name: 'Component' }),
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByRole('option', { name: 'Domain' }),
+    ).toBeInTheDocument();
+    expect(
+      rendered.queryByRole('option', { name: 'Template' }),
+    ).not.toBeInTheDocument();
+  });
+
   it('responds to external queryParameters changes', async () => {
     const updateFilters = jest.fn();
     const rendered = await renderWithEffects(
@@ -180,4 +217,24 @@ describe('<EntityKindPicker/>', () => {
       kind: new EntityKindFilter('domain'),
     });
   });
+
+  it('renders kind from the query parameter even when not in allowedKinds', async () => {
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{ queryParameters: { kind: 'Frob' } }}
+        >
+          <EntityKindPicker allowedKinds={['domain']} />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText('Frob')).toBeInTheDocument();
+
+    const input = rendered.getByTestId('select');
+    fireEvent.click(input);
+    expect(
+      rendered.getByRole('option', { name: 'Domain' }),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
index c626a68d10..89313790f5 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
@@ -17,64 +17,15 @@
 import { Select } from '@backstage/core-components';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import { Box } from '@material-ui/core';
-import capitalize from 'lodash/capitalize';
-import sortBy from 'lodash/sortBy';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
-import { catalogApiRef } from '../../api';
+import React, { useEffect, useMemo, useState } from 'react';
 import { EntityKindFilter } from '../../filters';
 import { useEntityList } from '../../hooks';
-
-function useAvailableKinds() {
-  const catalogApi = useApi(catalogApiRef);
-
-  const [availableKinds, setAvailableKinds] = useState<string[]>([]);
-
-  const {
-    error,
-    loading,
-    value: facets,
-  } = useAsync(async () => {
-    const facet = 'kind';
-    const items = await catalogApi
-      .getEntityFacets({
-        facets: [facet],
-      })
-      .then(response => response.facets[facet] || []);
-
-    return items;
-  }, [catalogApi]);
-
-  const facetsRef = useRef(facets);
-  useEffect(() => {
-    const oldFacets = facetsRef.current;
-    facetsRef.current = facets;
-    // Delay processing hook until facets load updates have settled to generate list of kinds;
-    // This prevents resetting the kind filter due to saved kind value from query params not matching the
-    // empty set of kind values while values are still being loaded; also only run this hook on changes
-    // to facets
-    if (loading || oldFacets === facets || !facets) {
-      return;
-    }
-
-    const newKinds = [
-      ...new Set(
-        sortBy(facets, f => f.value).map(f =>
-          f.value.toLocaleLowerCase('en-US'),
-        ),
-      ),
-    ];
-
-    setAvailableKinds(newKinds);
-  }, [loading, facets, setAvailableKinds]);
-
-  return { loading, error, availableKinds };
-}
+import { filterAndCapitalize, useAllKinds } from '../../utils/kindFilterUtils';
 
 function useEntityKindFilter(opts: { initialFilter: string }): {
   loading: boolean;
   error?: Error;
-  availableKinds: string[];
+  allKinds: string[];
   selectedKind: string;
   setSelectedKind: (kind: string) => void;
 } {
@@ -84,23 +35,15 @@ function useEntityKindFilter(opts: { initialFilter: string }): {
     updateFilters,
   } = useEntityList();
 
-  const flattenedQueryKind = useMemo(
+  const queryParamKind = useMemo(
     () => [kindParameter].flat()[0],
     [kindParameter],
   );
 
   const [selectedKind, setSelectedKind] = useState(
-    flattenedQueryKind ?? filters.kind?.value ?? opts.initialFilter,
+    queryParamKind ?? filters.kind?.value ?? opts.initialFilter,
   );
 
-  // Set selected kinds on query parameter updates; this happens at initial page load and from
-  // external updates to the page location.
-  useEffect(() => {
-    if (flattenedQueryKind) {
-      setSelectedKind(flattenedQueryKind);
-    }
-  }, [flattenedQueryKind]);
-
   // Set selected kind from filters; this happens when the kind filter is
   // updated from another component
   useEffect(() => {
@@ -109,18 +52,26 @@ function useEntityKindFilter(opts: { initialFilter: string }): {
     }
   }, [filters.kind]);
 
-  const { availableKinds, loading, error } = useAvailableKinds();
-
   useEffect(() => {
     updateFilters({
       kind: selectedKind ? new EntityKindFilter(selectedKind) : undefined,
     });
   }, [selectedKind, updateFilters]);
 
+  // Set selected kinds on query parameter updates; this happens at initial page load and from
+  // external updates to the page location.
+  useEffect(() => {
+    if (queryParamKind) {
+      setSelectedKind(queryParamKind);
+    }
+  }, [queryParamKind]);
+
+  const { allKinds, loading, error } = useAllKinds();
+
   return {
     loading,
     error,
-    availableKinds,
+    allKinds: allKinds ?? [],
     selectedKind,
     setSelectedKind,
   };
@@ -132,17 +83,22 @@ function useEntityKindFilter(opts: { initialFilter: string }): {
  * @public
  */
 export interface EntityKindPickerProps {
+  /**
+   * Entity kinds to show in the dropdown; by default all kinds are fetched from the catalog and
+   * displayed.
+   */
+  allowedKinds?: string[];
   initialFilter?: string;
   hidden?: boolean;
 }
 
 /** @public */
 export const EntityKindPicker = (props: EntityKindPickerProps) => {
-  const { hidden, initialFilter = 'component' } = props;
+  const { allowedKinds, hidden, initialFilter = 'component' } = props;
 
   const alertApi = useApi(alertApiRef);
 
-  const { error, availableKinds, selectedKind, setSelectedKind } =
+  const { error, allKinds, selectedKind, setSelectedKind } =
     useEntityKindFilter({
       initialFilter: initialFilter,
     });
@@ -156,21 +112,21 @@ export const EntityKindPicker = (props: EntityKindPickerProps) => {
     }
   }, [error, alertApi]);
 
-  if (availableKinds?.length === 0 || error) return null;
+  if (error) return null;
 
-  const items = [
-    ...availableKinds.map((kind: string) => ({
-      value: kind,
-      label: capitalize(kind),
-    })),
-  ];
+  const options = filterAndCapitalize(allKinds, allowedKinds, [selectedKind]);
+
+  const items = Object.keys(options).map(key => ({
+    value: key,
+    label: options[key],
+  }));
 
   return hidden ? null : (
     <Box pb={1} pt={1}>
       <Select
         label="Kind"
         items={items}
-        selected={selectedKind}
+        selected={selectedKind.toLocaleLowerCase('en-US')}
         onChange={value => setSelectedKind(String(value))}
       />
     </Box>
diff --git a/plugins/catalog-react/src/index.ts b/plugins/catalog-react/src/index.ts
index 2ca7d67d59..783b9c1959 100644
--- a/plugins/catalog-react/src/index.ts
+++ b/plugins/catalog-react/src/index.ts
@@ -35,5 +35,7 @@ export {
   getEntityRelations,
   getEntitySourceLocation,
   isOwnerOf,
+  useAllKinds,
+  filterAndCapitalize,
 } from './utils';
 export type { EntitySourceLocation } from './utils';
diff --git a/plugins/catalog-react/src/utils/index.ts b/plugins/catalog-react/src/utils/index.ts
index 5afc32af63..197eff3a55 100644
--- a/plugins/catalog-react/src/utils/index.ts
+++ b/plugins/catalog-react/src/utils/index.ts
@@ -18,3 +18,4 @@ export { getEntityRelations } from './getEntityRelations';
 export { getEntitySourceLocation } from './getEntitySourceLocation';
 export type { EntitySourceLocation } from './getEntitySourceLocation';
 export { isOwnerOf } from './isOwnerOf';
+export { useAllKinds, filterAndCapitalize } from './kindFilterUtils';
diff --git a/plugins/catalog-react/src/utils/kindFilterUtils.ts b/plugins/catalog-react/src/utils/kindFilterUtils.ts
new file mode 100644
index 0000000000..939c7296dd
--- /dev/null
+++ b/plugins/catalog-react/src/utils/kindFilterUtils.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useApi } from '@backstage/core-plugin-api';
+import { capitalize } from '@material-ui/core';
+import useAsync from 'react-use/lib/useAsync';
+import { catalogApiRef } from '../api';
+
+/**
+ * Fetch and return all availible kinds.
+ *
+ * @public
+ */
+export function useAllKinds(): {
+  loading: boolean;
+  error?: Error;
+  allKinds: string[];
+} {
+  const catalogApi = useApi(catalogApiRef);
+
+  const {
+    error,
+    loading,
+    value: allKinds,
+  } = useAsync(async () => {
+    const items = await catalogApi
+      .getEntityFacets({ facets: ['kind'] })
+      .then(response => response.facets.kind?.map(f => f.value).sort() || []);
+    return items;
+  }, [catalogApi]);
+
+  return { loading, error, allKinds: allKinds ?? [] };
+}
+
+/**
+ * Filter and capitalize accessible kinds.
+ *
+ * @public
+ */
+export function filterAndCapitalize(
+  allKinds: string[],
+  allowedKinds?: string[],
+  forcedKinds?: string[],
+): Record<string, string> {
+  // 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 availableKinds = allKinds
+    .concat(forcedKinds ?? [])
+    .filter(k =>
+      allowedKinds
+        ? allowedKinds.some(
+            a => a.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
+          ) ||
+          forcedKinds?.some(
+            f => f.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
+          )
+        : true,
+    );
+
+  const capitalizedKinds = availableKinds.sort().reduce((acc, kind) => {
+    acc[kind.toLocaleLowerCase('en-US')] = capitalize(kind);
+    return acc;
+  }, {} as Record<string, string>);
+
+  return capitalizedKinds;
+}
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index b0aaeae658..7de842abe6 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState, useMemo } from 'react';
 import {
-  capitalize,
   createStyles,
   InputBase,
   makeStyles,
@@ -25,12 +24,11 @@ import {
   Theme,
 } from '@material-ui/core';
 import {
-  catalogApiRef,
   EntityKindFilter,
+  filterAndCapitalize,
+  useAllKinds,
   useEntityList,
 } from '@backstage/plugin-catalog-react';
-import useAsync from 'react-use/lib/useAsync';
-import { useApi } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -62,12 +60,7 @@ export interface CatalogKindHeaderProps {
 export function CatalogKindHeader(props: CatalogKindHeaderProps) {
   const { initialFilter = 'component', allowedKinds } = props;
   const classes = useStyles();
-  const catalogApi = useApi(catalogApiRef);
-  const { value: allKinds } = useAsync(async () => {
-    return await catalogApi
-      .getEntityFacets({ facets: ['kind'] })
-      .then(response => response.facets.kind?.map(f => f.value).sort() || []);
-  });
+  const { allKinds } = useAllKinds();
   const {
     filters,
     updateFilters,
@@ -75,11 +68,12 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) {
   } = useEntityList();
 
   const queryParamKind = useMemo(
-    () => [kindParameter].flat()[0]?.toLocaleLowerCase('en-US'),
+    () => [kindParameter].flat()[0],
     [kindParameter],
   );
+
   const [selectedKind, setSelectedKind] = useState(
-    queryParamKind ?? initialFilter,
+    queryParamKind ?? filters.kind?.value ?? initialFilter,
   );
 
   // Set selected kind from filters; this happens when the kind filter is
@@ -104,29 +98,12 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) {
     }
   }, [queryParamKind]);
 
-  // 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 availableKinds = [capitalize(selectedKind)].concat(
-    allKinds?.filter(k =>
-      allowedKinds
-        ? allowedKinds.some(
-            a => a.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
-          )
-        : true,
-    ) ?? [],
-  );
-  const options = availableKinds.sort().reduce((acc, kind) => {
-    acc[kind.toLocaleLowerCase('en-US')] = kind;
-    return acc;
-  }, {} as Record<string, string>);
+  const options = filterAndCapitalize(allKinds, allowedKinds, [selectedKind]);
 
   return (
     <Select
-      input={<InputBase value={selectedKind} />}
-      value={selectedKind}
+      input={<InputBase />}
+      value={selectedKind.toLocaleLowerCase('en-US')}
       onChange={e => setSelectedKind(e.target.value as string)}
       classes={classes}
     >

From 8ba66bd0ac044759e1ca70ba4566cfbe1af9897b Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Sun, 20 Nov 2022 22:53:31 +0100
Subject: [PATCH 2/7] Fixed review comments

* Now we don't react on external changes to the query kindParameter
* Casing is always correct (APIs instead of Apis etc)

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .changeset/brave-bags-sniff.md                |  1 +
 .changeset/neat-lies-know.md                  |  2 +-
 plugins/catalog-react/api-report.md           |  6 ++
 .../EntityKindPicker.test.tsx                 | 62 ++++---------------
 .../EntityKindPicker/EntityKindPicker.tsx     | 12 +---
 plugins/catalog-react/src/index.ts            |  2 +-
 plugins/catalog-react/src/utils/index.ts      |  2 +-
 .../src/utils/kindFilterUtils.ts              | 43 +++++++------
 .../CatalogKindHeader.test.tsx                | 38 +-----------
 .../CatalogKindHeader/CatalogKindHeader.tsx   | 12 +---
 10 files changed, 51 insertions(+), 129 deletions(-)

diff --git a/.changeset/brave-bags-sniff.md b/.changeset/brave-bags-sniff.md
index 2608ca7f1e..3fa542a4e3 100644
--- a/.changeset/brave-bags-sniff.md
+++ b/.changeset/brave-bags-sniff.md
@@ -3,3 +3,4 @@
 ---
 
 Fixes in kind selectors (now OwnershipCards work again)
+EntityKindPicker now accepts an optional allowedKinds prop, just like CatalogKindHeader.
diff --git a/.changeset/neat-lies-know.md b/.changeset/neat-lies-know.md
index cb355c638f..01fc002668 100644
--- a/.changeset/neat-lies-know.md
+++ b/.changeset/neat-lies-know.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-catalog-react': minor
+'@backstage/plugin-catalog-react': patch
 ---
 
 Cleanup and small fixes for the kind selector
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index ea67702c9b..91c57c3498 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -432,6 +432,9 @@ export type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
   entity: Entity;
 };
 
+// Warning: (tsdoc-undefined-tag) The TSDoc tag "@private" is not defined in this configuration
+// Warning: (ae-missing-release-tag) "filterAndCapitalize" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
 // @public
 export function filterAndCapitalize(
   allKinds: string[],
@@ -511,6 +514,9 @@ export type UnregisterEntityDialogProps = {
   entity: Entity;
 };
 
+// Warning: (tsdoc-undefined-tag) The TSDoc tag "@private" is not defined in this configuration
+// Warning: (ae-missing-release-tag) "useAllKinds" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
 // @public
 export function useAllKinds(): {
   loading: boolean;
diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx
index 784580b636..04d8df3d16 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.test.tsx
@@ -148,21 +148,21 @@ describe('<EntityKindPicker/>', () => {
   });
 
   it('renders unknown kinds provided in query parameters', async () => {
-    const rendered = await renderWithEffects(
+    await renderWithEffects(
       <ApiProvider apis={apis}>
         <MockEntityListContextProvider
-          value={{ queryParameters: { kind: 'frob' } }}
+          value={{ queryParameters: { kind: 'FROb' } }}
         >
           <EntityKindPicker />
         </MockEntityListContextProvider>
       </ApiProvider>,
     );
 
-    expect(rendered.getByText('Frob')).toBeInTheDocument();
+    expect(screen.getByText('FROb')).toBeInTheDocument();
   });
 
   it('limits kinds when allowedKinds is set', async () => {
-    const rendered = await renderWithEffects(
+    await renderWithEffects(
       <ApiProvider apis={apis}>
         <MockEntityListContextProvider>
           <EntityKindPicker allowedKinds={['component', 'domain']} />
@@ -170,56 +170,20 @@ describe('<EntityKindPicker/>', () => {
       </ApiProvider>,
     );
 
-    const input = rendered.getByTestId('select');
+    const input = screen.getByTestId('select');
     fireEvent.click(input);
 
     expect(
-      rendered.getByRole('option', { name: 'Component' }),
+      screen.getByRole('option', { name: 'Component' }),
     ).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Domain' })).toBeInTheDocument();
     expect(
-      rendered.getByRole('option', { name: 'Domain' }),
-    ).toBeInTheDocument();
-    expect(
-      rendered.queryByRole('option', { name: 'Template' }),
+      screen.queryByRole('option', { name: 'Template' }),
     ).not.toBeInTheDocument();
   });
 
-  it('responds to external queryParameters changes', async () => {
-    const updateFilters = jest.fn();
-    const rendered = await renderWithEffects(
-      <ApiProvider apis={apis}>
-        <MockEntityListContextProvider
-          value={{
-            updateFilters,
-            queryParameters: { kind: 'component' },
-          }}
-        >
-          <EntityKindPicker />
-        </MockEntityListContextProvider>
-      </ApiProvider>,
-    );
-    expect(updateFilters).toHaveBeenLastCalledWith({
-      kind: new EntityKindFilter('component'),
-    });
-    rendered.rerender(
-      <ApiProvider apis={apis}>
-        <MockEntityListContextProvider
-          value={{
-            updateFilters,
-            queryParameters: { kind: 'domain' },
-          }}
-        >
-          <EntityKindPicker />
-        </MockEntityListContextProvider>
-      </ApiProvider>,
-    );
-    expect(updateFilters).toHaveBeenLastCalledWith({
-      kind: new EntityKindFilter('domain'),
-    });
-  });
-
   it('renders kind from the query parameter even when not in allowedKinds', async () => {
-    const rendered = await renderWithEffects(
+    await renderWithEffects(
       <ApiProvider apis={apis}>
         <MockEntityListContextProvider
           value={{ queryParameters: { kind: 'Frob' } }}
@@ -229,12 +193,10 @@ describe('<EntityKindPicker/>', () => {
       </ApiProvider>,
     );
 
-    expect(rendered.getByText('Frob')).toBeInTheDocument();
+    expect(screen.getByText('Frob')).toBeInTheDocument();
 
-    const input = rendered.getByTestId('select');
+    const input = screen.getByTestId('select');
     fireEvent.click(input);
-    expect(
-      rendered.getByRole('option', { name: 'Domain' }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Domain' })).toBeInTheDocument();
   });
 });
diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
index 89313790f5..b0d1565cfb 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
@@ -20,7 +20,7 @@ import { Box } from '@material-ui/core';
 import React, { useEffect, useMemo, useState } from 'react';
 import { EntityKindFilter } from '../../filters';
 import { useEntityList } from '../../hooks';
-import { filterAndCapitalize, useAllKinds } from '../../utils/kindFilterUtils';
+import { filterKinds, useAllKinds } from '../../utils/kindFilterUtils';
 
 function useEntityKindFilter(opts: { initialFilter: string }): {
   loading: boolean;
@@ -58,14 +58,6 @@ function useEntityKindFilter(opts: { initialFilter: string }): {
     });
   }, [selectedKind, updateFilters]);
 
-  // Set selected kinds on query parameter updates; this happens at initial page load and from
-  // external updates to the page location.
-  useEffect(() => {
-    if (queryParamKind) {
-      setSelectedKind(queryParamKind);
-    }
-  }, [queryParamKind]);
-
   const { allKinds, loading, error } = useAllKinds();
 
   return {
@@ -114,7 +106,7 @@ export const EntityKindPicker = (props: EntityKindPickerProps) => {
 
   if (error) return null;
 
-  const options = filterAndCapitalize(allKinds, allowedKinds, [selectedKind]);
+  const options = filterKinds(allKinds, allowedKinds, selectedKind);
 
   const items = Object.keys(options).map(key => ({
     value: key,
diff --git a/plugins/catalog-react/src/index.ts b/plugins/catalog-react/src/index.ts
index 783b9c1959..de8b32282a 100644
--- a/plugins/catalog-react/src/index.ts
+++ b/plugins/catalog-react/src/index.ts
@@ -36,6 +36,6 @@ export {
   getEntitySourceLocation,
   isOwnerOf,
   useAllKinds,
-  filterAndCapitalize,
+  filterKinds,
 } from './utils';
 export type { EntitySourceLocation } from './utils';
diff --git a/plugins/catalog-react/src/utils/index.ts b/plugins/catalog-react/src/utils/index.ts
index 197eff3a55..8262d1cc81 100644
--- a/plugins/catalog-react/src/utils/index.ts
+++ b/plugins/catalog-react/src/utils/index.ts
@@ -18,4 +18,4 @@ export { getEntityRelations } from './getEntityRelations';
 export { getEntitySourceLocation } from './getEntitySourceLocation';
 export type { EntitySourceLocation } from './getEntitySourceLocation';
 export { isOwnerOf } from './isOwnerOf';
-export { useAllKinds, filterAndCapitalize } from './kindFilterUtils';
+export { useAllKinds, filterKinds } from './kindFilterUtils';
diff --git a/plugins/catalog-react/src/utils/kindFilterUtils.ts b/plugins/catalog-react/src/utils/kindFilterUtils.ts
index 939c7296dd..a0441db33f 100644
--- a/plugins/catalog-react/src/utils/kindFilterUtils.ts
+++ b/plugins/catalog-react/src/utils/kindFilterUtils.ts
@@ -15,14 +15,12 @@
  */
 
 import { useApi } from '@backstage/core-plugin-api';
-import { capitalize } from '@material-ui/core';
 import useAsync from 'react-use/lib/useAsync';
 import { catalogApiRef } from '../api';
 
 /**
  * Fetch and return all availible kinds.
- *
- * @public
+ * @internal
  */
 export function useAllKinds(): {
   loading: boolean;
@@ -48,35 +46,40 @@ export function useAllKinds(): {
 /**
  * Filter and capitalize accessible kinds.
  *
- * @public
+ * @internal
  */
-export function filterAndCapitalize(
+export function filterKinds(
   allKinds: string[],
   allowedKinds?: string[],
-  forcedKinds?: string[],
+  forcedKinds?: string,
 ): Record<string, string> {
   // 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 availableKinds = allKinds
-    .concat(forcedKinds ?? [])
-    .filter(k =>
-      allowedKinds
-        ? allowedKinds.some(
-            a => a.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
-          ) ||
-          forcedKinds?.some(
-            f => f.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
-          )
-        : true,
+  let availableKinds = allKinds;
+  if (allowedKinds) {
+    availableKinds = availableKinds.filter(k =>
+      allowedKinds.some(
+        a => a.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
+      ),
     );
+  }
+  if (
+    forcedKinds &&
+    !allKinds.some(
+      a =>
+        a.toLocaleLowerCase('en-US') === forcedKinds.toLocaleLowerCase('en-US'),
+    )
+  ) {
+    availableKinds = availableKinds.concat([forcedKinds]);
+  }
 
-  const capitalizedKinds = availableKinds.sort().reduce((acc, kind) => {
-    acc[kind.toLocaleLowerCase('en-US')] = capitalize(kind);
+  const kindsMap = availableKinds.sort().reduce((acc, kind) => {
+    acc[kind.toLocaleLowerCase('en-US')] = kind;
     return acc;
   }, {} as Record<string, string>);
 
-  return capitalizedKinds;
+  return kindsMap;
 }
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
index 9f68252ca7..acff9e3cda 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -105,14 +105,14 @@ describe('<CatalogKindHeader />', () => {
     await renderWithEffects(
       <ApiProvider apis={apis}>
         <MockEntityListContextProvider
-          value={{ queryParameters: { kind: 'frob' } }}
+          value={{ queryParameters: { kind: 'FROb' } }}
         >
           <CatalogKindHeader />
         </MockEntityListContextProvider>
       </ApiProvider>,
     );
 
-    expect(screen.getByText('Frobs')).toBeInTheDocument();
+    expect(screen.getByText('FRObs')).toBeInTheDocument();
   });
 
   it('updates the kind filter', async () => {
@@ -136,40 +136,6 @@ describe('<CatalogKindHeader />', () => {
     });
   });
 
-  it('responds to external queryParameters changes', async () => {
-    const updateFilters = jest.fn();
-    const rendered = await renderWithEffects(
-      <ApiProvider apis={apis}>
-        <MockEntityListContextProvider
-          value={{
-            updateFilters,
-            queryParameters: { kind: ['components'] },
-          }}
-        >
-          <CatalogKindHeader />
-        </MockEntityListContextProvider>
-      </ApiProvider>,
-    );
-    expect(updateFilters).toHaveBeenLastCalledWith({
-      kind: new EntityKindFilter('components'),
-    });
-    rendered.rerender(
-      <ApiProvider apis={apis}>
-        <MockEntityListContextProvider
-          value={{
-            updateFilters,
-            queryParameters: { kind: ['template'] },
-          }}
-        >
-          <CatalogKindHeader />
-        </MockEntityListContextProvider>
-      </ApiProvider>,
-    );
-    expect(updateFilters).toHaveBeenLastCalledWith({
-      kind: new EntityKindFilter('template'),
-    });
-  });
-
   it('limits kinds when allowedKinds is set', async () => {
     await renderWithEffects(
       <ApiProvider apis={apis}>
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index 7de842abe6..5a69f89106 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -25,7 +25,7 @@ import {
 } from '@material-ui/core';
 import {
   EntityKindFilter,
-  filterAndCapitalize,
+  filterKinds,
   useAllKinds,
   useEntityList,
 } from '@backstage/plugin-catalog-react';
@@ -90,15 +90,7 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) {
     });
   }, [selectedKind, updateFilters]);
 
-  // Set selected Kind on query parameter updates; this happens at initial page load and from
-  // external updates to the page location.
-  useEffect(() => {
-    if (queryParamKind) {
-      setSelectedKind(queryParamKind);
-    }
-  }, [queryParamKind]);
-
-  const options = filterAndCapitalize(allKinds, allowedKinds, [selectedKind]);
+  const options = filterKinds(allKinds, allowedKinds, selectedKind);
 
   return (
     <Select

From 8ecd2efb11dc64a61ad22a5068d5c81071610ccb Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Tue, 29 Nov 2022 01:01:37 +0100
Subject: [PATCH 3/7] Fixed act-issues and review comments

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 plugins/catalog-react/api-report.md           | 20 -------------------
 .../src/hooks/useEntityListProvider.test.tsx  |  2 +-
 plugins/catalog-react/src/index.ts            |  2 --
 .../src/utils/kindFilterUtils.ts              |  3 ---
 .../CatalogKindHeader/CatalogKindHeader.tsx   |  3 +--
 5 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 91c57c3498..92bfc4de96 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -432,16 +432,6 @@ export type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
   entity: Entity;
 };
 
-// Warning: (tsdoc-undefined-tag) The TSDoc tag "@private" is not defined in this configuration
-// Warning: (ae-missing-release-tag) "filterAndCapitalize" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export function filterAndCapitalize(
-  allKinds: string[],
-  allowedKinds?: string[],
-  forcedKinds?: string[],
-): Record<string, string>;
-
 // @public
 export function getEntityRelations(
   entity: Entity | undefined,
@@ -514,16 +504,6 @@ export type UnregisterEntityDialogProps = {
   entity: Entity;
 };
 
-// Warning: (tsdoc-undefined-tag) The TSDoc tag "@private" is not defined in this configuration
-// Warning: (ae-missing-release-tag) "useAllKinds" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export function useAllKinds(): {
-  loading: boolean;
-  error?: Error;
-  allKinds: string[];
-};
-
 // @public
 export function useAsyncEntity<
   TEntity extends Entity = Entity,
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
index d8c89e0858..b77c7f5619 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
@@ -166,7 +166,7 @@ describe('<EntityListProvider />', () => {
         location: `/catalog?${query}`,
       },
     });
-    await waitFor(() => !!result.current.queryParameters);
+    await act(() => waitFor(() => !!result.current.queryParameters));
     expect(result.current.queryParameters).toEqual({
       kind: 'component',
       type: 'service',
diff --git a/plugins/catalog-react/src/index.ts b/plugins/catalog-react/src/index.ts
index de8b32282a..2ca7d67d59 100644
--- a/plugins/catalog-react/src/index.ts
+++ b/plugins/catalog-react/src/index.ts
@@ -35,7 +35,5 @@ export {
   getEntityRelations,
   getEntitySourceLocation,
   isOwnerOf,
-  useAllKinds,
-  filterKinds,
 } from './utils';
 export type { EntitySourceLocation } from './utils';
diff --git a/plugins/catalog-react/src/utils/kindFilterUtils.ts b/plugins/catalog-react/src/utils/kindFilterUtils.ts
index a0441db33f..851dcfb702 100644
--- a/plugins/catalog-react/src/utils/kindFilterUtils.ts
+++ b/plugins/catalog-react/src/utils/kindFilterUtils.ts
@@ -20,7 +20,6 @@ import { catalogApiRef } from '../api';
 
 /**
  * Fetch and return all availible kinds.
- * @internal
  */
 export function useAllKinds(): {
   loading: boolean;
@@ -45,8 +44,6 @@ export function useAllKinds(): {
 
 /**
  * Filter and capitalize accessible kinds.
- *
- * @internal
  */
 export function filterKinds(
   allKinds: string[],
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index 5a69f89106..9ab2c4cb36 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -25,10 +25,9 @@ import {
 } from '@material-ui/core';
 import {
   EntityKindFilter,
-  filterKinds,
-  useAllKinds,
   useEntityList,
 } from '@backstage/plugin-catalog-react';
+import { filterKinds, useAllKinds } from '@backstage/plugin-catalog-react/src/utils';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

From 54b5c430c5bdaeb81b8cfde3bf15d14a99303bc8 Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Wed, 30 Nov 2022 15:48:09 +0100
Subject: [PATCH 4/7] Bring back queryParameterKind effect.

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .../EntityKindPicker/EntityKindPicker.tsx     |  8 ++++
 .../CatalogKindHeader.test.tsx                | 38 ++++++++++++++++++-
 .../CatalogKindHeader/CatalogKindHeader.tsx   |  8 ++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
index b0d1565cfb..e0564d170e 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
@@ -44,6 +44,14 @@ function useEntityKindFilter(opts: { initialFilter: string }): {
     queryParamKind ?? filters.kind?.value ?? opts.initialFilter,
   );
 
+  // Set selected kinds on query parameter updates; this happens at initial page load and from
+  // external updates to the page location.
+  useEffect(() => {
+    if (queryParamKind) {
+      setSelectedKind(queryParamKind);
+    }
+  }, [queryParamKind]);
+
   // Set selected kind from filters; this happens when the kind filter is
   // updated from another component
   useEffect(() => {
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
index 67481c5488..6f5e8dc904 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { GetEntityFacetsResponse } from '@backstage/catalog-client';
 import { Entity } from '@backstage/catalog-model';
 import {
@@ -137,6 +137,42 @@ describe('<CatalogKindHeader />', () => {
     });
   });
 
+  it('responds to external queryParameters changes', async () => {
+    const updateFilters = jest.fn();
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{
+            updateFilters,
+            queryParameters: { kind: ['components'] },
+          }}
+        >
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+    expect(updateFilters).toHaveBeenLastCalledWith({
+      kind: new EntityKindFilter('components'),
+    });
+    rendered.rerender(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{
+            updateFilters,
+            queryParameters: { kind: ['template'] },
+          }}
+        >
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+    await waitFor(() =>
+      expect(updateFilters).toHaveBeenLastCalledWith({
+        kind: new EntityKindFilter('template'),
+      })
+    );
+  });
+
   it('limits kinds when allowedKinds is set', async () => {
     await renderWithEffects(
       <ApiProvider apis={apis}>
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index 49eec1982d..f88173706f 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -76,6 +76,14 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) {
     queryParamKind ?? filters.kind?.value ?? initialFilter,
   );
 
+  // Set selected kinds on query parameter updates; this happens at initial page load and from
+  // external updates to the page location.
+  useEffect(() => {
+    if (queryParamKind) {
+      setSelectedKind(queryParamKind);
+    }
+  }, [queryParamKind]);
+
   // Set selected kind from filters; this happens when the kind filter is
   // updated from another component
   useEffect(() => {

From df639e86ab85d8645307f32e280d1892b4947604 Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Wed, 30 Nov 2022 15:52:56 +0100
Subject: [PATCH 5/7] Update .github/vale/**/accept.txt

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .github/vale/Vocab/Backstage/accept.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/vale/Vocab/Backstage/accept.txt b/.github/vale/Vocab/Backstage/accept.txt
index bba59094e3..e05f1acd91 100644
--- a/.github/vale/Vocab/Backstage/accept.txt
+++ b/.github/vale/Vocab/Backstage/accept.txt
@@ -9,6 +9,7 @@ Airbrake
 Airbrakes
 Alaria
 Alef
+allowedKinds
 Anddddd
 Apdex
 api

From 8cd7acf865a3027011f82601004305485559302f Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Wed, 30 Nov 2022 16:23:39 +0100
Subject: [PATCH 6/7] Prettier

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .../components/CatalogKindHeader/CatalogKindHeader.test.tsx  | 2 +-
 .../src/components/CatalogKindHeader/CatalogKindHeader.tsx   | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
index 6f5e8dc904..d6a1fb433a 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -169,7 +169,7 @@ describe('<CatalogKindHeader />', () => {
     await waitFor(() =>
       expect(updateFilters).toHaveBeenLastCalledWith({
         kind: new EntityKindFilter('template'),
-      })
+      }),
     );
   });
 
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index f88173706f..0b27cf9ccb 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -27,7 +27,10 @@ import {
   EntityKindFilter,
   useEntityList,
 } from '@backstage/plugin-catalog-react';
-import { filterKinds, useAllKinds } from '@backstage/plugin-catalog-react/src/utils';
+import {
+  filterKinds,
+  useAllKinds,
+} from '@backstage/plugin-catalog-react/src/utils';
 import pluralize from 'pluralize';
 
 const useStyles = makeStyles((theme: Theme) =>

From d48165dde8f136805f379b7f4ee3c06daa1f27d1 Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Thu, 1 Dec 2022 14:15:17 +0100
Subject: [PATCH 7/7] Add useAllKinds & filterKinds() to both plugin-catalog
 and plugin-catalog-react

We really don't want to expose and export the helper functions, hence
some code duplication is needed (for now).

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .../EntityKindPicker/EntityKindPicker.tsx     |  2 +-
 .../EntityKindPicker}/kindFilterUtils.ts      |  2 +-
 plugins/catalog-react/src/utils/index.ts      |  1 -
 .../CatalogKindHeader/CatalogKindHeader.tsx   |  5 +-
 .../CatalogKindHeader/kindFilterUtils.ts      | 82 +++++++++++++++++++
 5 files changed, 85 insertions(+), 7 deletions(-)
 rename plugins/catalog-react/src/{utils => components/EntityKindPicker}/kindFilterUtils.ts (98%)
 create mode 100644 plugins/catalog/src/components/CatalogKindHeader/kindFilterUtils.ts

diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
index e0564d170e..65ec949b4a 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
@@ -20,7 +20,7 @@ import { Box } from '@material-ui/core';
 import React, { useEffect, useMemo, useState } from 'react';
 import { EntityKindFilter } from '../../filters';
 import { useEntityList } from '../../hooks';
-import { filterKinds, useAllKinds } from '../../utils/kindFilterUtils';
+import { filterKinds, useAllKinds } from './kindFilterUtils';
 
 function useEntityKindFilter(opts: { initialFilter: string }): {
   loading: boolean;
diff --git a/plugins/catalog-react/src/utils/kindFilterUtils.ts b/plugins/catalog-react/src/components/EntityKindPicker/kindFilterUtils.ts
similarity index 98%
rename from plugins/catalog-react/src/utils/kindFilterUtils.ts
rename to plugins/catalog-react/src/components/EntityKindPicker/kindFilterUtils.ts
index 851dcfb702..aed4c41295 100644
--- a/plugins/catalog-react/src/utils/kindFilterUtils.ts
+++ b/plugins/catalog-react/src/components/EntityKindPicker/kindFilterUtils.ts
@@ -16,7 +16,7 @@
 
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
-import { catalogApiRef } from '../api';
+import { catalogApiRef } from '../../api';
 
 /**
  * Fetch and return all availible kinds.
diff --git a/plugins/catalog-react/src/utils/index.ts b/plugins/catalog-react/src/utils/index.ts
index 8262d1cc81..5afc32af63 100644
--- a/plugins/catalog-react/src/utils/index.ts
+++ b/plugins/catalog-react/src/utils/index.ts
@@ -18,4 +18,3 @@ export { getEntityRelations } from './getEntityRelations';
 export { getEntitySourceLocation } from './getEntitySourceLocation';
 export type { EntitySourceLocation } from './getEntitySourceLocation';
 export { isOwnerOf } from './isOwnerOf';
-export { useAllKinds, filterKinds } from './kindFilterUtils';
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index 0b27cf9ccb..8247116e4a 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -27,11 +27,8 @@ import {
   EntityKindFilter,
   useEntityList,
 } from '@backstage/plugin-catalog-react';
-import {
-  filterKinds,
-  useAllKinds,
-} from '@backstage/plugin-catalog-react/src/utils';
 import pluralize from 'pluralize';
+import { filterKinds, useAllKinds } from './kindFilterUtils';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
diff --git a/plugins/catalog/src/components/CatalogKindHeader/kindFilterUtils.ts b/plugins/catalog/src/components/CatalogKindHeader/kindFilterUtils.ts
new file mode 100644
index 0000000000..4f74d10a6c
--- /dev/null
+++ b/plugins/catalog/src/components/CatalogKindHeader/kindFilterUtils.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useApi } from '@backstage/core-plugin-api';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import useAsync from 'react-use/lib/useAsync';
+
+/**
+ * Fetch and return all availible kinds.
+ */
+export function useAllKinds(): {
+  loading: boolean;
+  error?: Error;
+  allKinds: string[];
+} {
+  const catalogApi = useApi(catalogApiRef);
+
+  const {
+    error,
+    loading,
+    value: allKinds,
+  } = useAsync(async () => {
+    const items = await catalogApi
+      .getEntityFacets({ facets: ['kind'] })
+      .then(response => response.facets.kind?.map(f => f.value).sort() || []);
+    return items;
+  }, [catalogApi]);
+
+  return { loading, error, allKinds: allKinds ?? [] };
+}
+
+/**
+ * Filter and capitalize accessible kinds.
+ */
+export function filterKinds(
+  allKinds: string[],
+  allowedKinds?: string[],
+  forcedKinds?: string,
+): Record<string, string> {
+  // 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.
+  let availableKinds = allKinds;
+  if (allowedKinds) {
+    availableKinds = availableKinds.filter(k =>
+      allowedKinds.some(
+        a => a.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
+      ),
+    );
+  }
+  if (
+    forcedKinds &&
+    !allKinds.some(
+      a =>
+        a.toLocaleLowerCase('en-US') === forcedKinds.toLocaleLowerCase('en-US'),
+    )
+  ) {
+    availableKinds = availableKinds.concat([forcedKinds]);
+  }
+
+  const kindsMap = availableKinds.sort().reduce((acc, kind) => {
+    acc[kind.toLocaleLowerCase('en-US')] = kind;
+    return acc;
+  }, {} as Record<string, string>);
+
+  return kindsMap;
+}