Switch useEntityKinds to useAsync

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

plugins/catalog-react/src/hooks/useEntityKinds.test.tsx

@@ -74,7 +74,8 @@ describe('useEntityKinds', () => {
       },
     );
     await waitForValueToChange(() => result.current);
-    expect(result.current.length).toBe(3);
+    expect(result.current.kinds).toBeDefined();
+    expect(result.current.kinds!.length).toBe(3);
   });
 
   it('sorts entity kinds', async () => {
@@ -85,6 +86,6 @@ describe('useEntityKinds', () => {
       },
     );
     await waitForValueToChange(() => result.current);
-    expect(result.current).toEqual(['Component', 'System', 'Template']);
+    expect(result.current.kinds).toEqual(['Component', 'System', 'Template']);
   });
 });

plugins/catalog-react/src/hooks/useEntityKinds.ts

@@ -14,24 +14,24 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useAsync } from 'react-use';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '../api';
 
 // Retrieve a list of unique entity kinds present in the catalog
 export function useEntityKinds() {
-  const [kinds, setKinds] = useState(['Component']);
   const catalogApi = useApi(catalogApiRef);
 
-  useEffect(() => {
-    async function loadKinds() {
-      const entities = await catalogApi
-        .getEntities({ fields: ['kind'] })
-        .then(response => response.items);
-      setKinds([...new Set(entities.map(e => e.kind))].sort());
-    }
-    loadKinds();
-  }, [catalogApi]);
+  const {
+    error,
+    loading,
+    value: kinds,
+  } = useAsync(async () => {
+    const entities = await catalogApi
+      .getEntities({ fields: ['kind'] })
+      .then(response => response.items);
 
-  return kinds;
+    return [...new Set(entities.map(e => e.kind))].sort();
+  });
+  return { error, loading, kinds };
 }

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

@@ -46,7 +46,7 @@ export const CatalogKindHeader = ({
   initialFilter = 'Component',
 }: CatalogKindHeaderProps) => {
   const classes = useStyles();
-  const allKinds = useEntityKinds();
+  const { kinds: allKinds } = useEntityKinds();
   const { updateFilters, queryParameters } = useEntityListProvider();
 
   const [selectedKind, setSelectedKind] = useState(
@@ -66,7 +66,7 @@ export const CatalogKindHeader = ({
       onChange={e => setSelectedKind(e.target.value as string)}
       classes={classes}
     >
-      {allKinds.map(kind => (
+      {(allKinds ?? ['Component']).map(kind => (
         <MenuItem value={kind} key={kind}>
           {`${capitalize(kind)}s`}
         </MenuItem>