@backstage/plugin-catalog-react 1.2.2-next.1 → 1.2.2-next.3

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @backstage/plugin-catalog-react
 
+## 1.2.2-next.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.12.1-next.3
+  - @backstage/catalog-client@1.2.0-next.1
+  - @backstage/catalog-model@1.1.4-next.1
+  - @backstage/core-plugin-api@1.2.0-next.2
+  - @backstage/errors@1.1.4-next.1
+  - @backstage/integration@1.4.1-next.1
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2-next.1
+  - @backstage/version-bridge@1.0.3-next.0
+  - @backstage/plugin-catalog-common@1.0.9-next.2
+  - @backstage/plugin-permission-common@0.7.2-next.1
+  - @backstage/plugin-permission-react@0.4.8-next.2
+
+## 1.2.2-next.2
+
+### Patch Changes
+
+- 6ffa47bb0a: Cleanup and small fixes for the kind selector
+- Updated dependencies
+  - @backstage/core-plugin-api@1.2.0-next.2
+  - @backstage/core-components@0.12.1-next.2
+  - @backstage/plugin-permission-react@0.4.8-next.2
+  - @backstage/catalog-client@1.2.0-next.1
+  - @backstage/catalog-model@1.1.4-next.1
+  - @backstage/errors@1.1.4-next.1
+  - @backstage/integration@1.4.1-next.1
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2-next.1
+  - @backstage/version-bridge@1.0.3-next.0
+  - @backstage/plugin-catalog-common@1.0.9-next.2
+  - @backstage/plugin-permission-common@0.7.2-next.1
+
 ## 1.2.2-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.2.2-next.1",
+  "version": "1.2.2-next.3",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/index.alpha.d.ts

@@ -191,6 +191,11 @@ export declare const EntityKindPicker: (props: EntityKindPickerProps) => JSX.Ele
  * @public
  */
 export declare 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;
 }

package/dist/index.beta.d.ts

@@ -191,6 +191,11 @@ export declare const EntityKindPicker: (props: EntityKindPickerProps) => JSX.Ele
  * @public
  */
 export declare 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;
 }

package/dist/index.d.ts

@@ -191,6 +191,11 @@ export declare const EntityKindPicker: (props: EntityKindPickerProps) => JSX.Ele
  * @public
  */
 export declare 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;
 }

package/dist/index.esm.js

@@ -5,11 +5,9 @@ import React, { useState, forwardRef, createContext, useMemo, useCallback, useCo
 import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, Tooltip, makeStyles, FormControlLabel, Checkbox, TextField, Toolbar, FormControl, Input, InputAdornment, IconButton, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, Card, CardContent, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import { Link, Progress, ErrorPanel, Select, OverflowTooltip, Table, ResponseErrorPanel, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
-import capitalize from 'lodash/capitalize';
-import sortBy from 'lodash/sortBy';
-import useAsync from 'react-use/lib/useAsync';
 import { DEFAULT_NAMESPACE, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
 import { getOrCreateGlobalSingleton, createVersionedContext, createVersionedValueMap, useVersionedContext } from '@backstage/version-bridge';
+import useAsync from 'react-use/lib/useAsync';
 import { compact, isEqual, groupBy, chunk } from 'lodash';
 import qs from 'qs';
 import { useLocation, useNavigate } from 'react-router';
@@ -17,6 +15,7 @@ import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import useMountedState from 'react-use/lib/useMountedState';
 import isEqual$1 from 'lodash/isEqual';
+import sortBy from 'lodash/sortBy';
 import useObservable from 'react-use/lib/useObservable';
 import { usePermission } from '@backstage/plugin-permission-react';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -852,38 +851,42 @@ function useEntityPermission(permission) {
   return { loading: false, allowed, error: permissionError };
 }
 
-function useAvailableKinds() {
+function useAllKinds() {
   const catalogApi = useApi(catalogApiRef);
-  const [availableKinds, setAvailableKinds] = useState([]);
   const {
     error,
     loading,
-    value: facets
+    value: allKinds
   } = useAsync(async () => {
-    const facet = "kind";
-    const items = await catalogApi.getEntityFacets({
-      facets: [facet]
-    }).then((response) => response.facets[facet] || []);
+    const items = await catalogApi.getEntityFacets({ facets: ["kind"] }).then((response) => {
+      var _a;
+      return ((_a = response.facets.kind) == null ? void 0 : _a.map((f) => f.value).sort()) || [];
+    });
     return items;
   }, [catalogApi]);
-  const facetsRef = useRef(facets);
-  useEffect(() => {
-    const oldFacets = facetsRef.current;
-    facetsRef.current = facets;
-    if (loading || oldFacets === facets || !facets) {
-      return;
-    }
-    const newKinds = [
-      ...new Set(
-        sortBy(facets, (f) => f.value).map(
-          (f) => f.value.toLocaleLowerCase("en-US")
-        )
+  return { loading, error, allKinds: allKinds != null ? allKinds : [] };
+}
+function filterKinds(allKinds, allowedKinds, forcedKinds) {
+  let availableKinds = allKinds;
+  if (allowedKinds) {
+    availableKinds = availableKinds.filter(
+      (k) => allowedKinds.some(
+        (a) => a.toLocaleLowerCase("en-US") === k.toLocaleLowerCase("en-US")
       )
-    ];
-    setAvailableKinds(newKinds);
-  }, [loading, facets, setAvailableKinds]);
-  return { loading, error, availableKinds };
+    );
+  }
+  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;
+  }, {});
+  return kindsMap;
 }
+
 function useEntityKindFilter(opts) {
   var _a, _b;
   const {
@@ -891,42 +894,42 @@ function useEntityKindFilter(opts) {
     queryParameters: { kind: kindParameter },
     updateFilters
   } = useEntityList();
-  const flattenedQueryKind = useMemo(
+  const queryParamKind = useMemo(
     () => [kindParameter].flat()[0],
     [kindParameter]
   );
   const [selectedKind, setSelectedKind] = useState(
-    (_b = flattenedQueryKind != null ? flattenedQueryKind : (_a = filters.kind) == null ? void 0 : _a.value) != null ? _b : opts.initialFilter
+    (_b = queryParamKind != null ? queryParamKind : (_a = filters.kind) == null ? void 0 : _a.value) != null ? _b : opts.initialFilter
   );
   useEffect(() => {
-    if (flattenedQueryKind) {
-      setSelectedKind(flattenedQueryKind);
+    if (queryParamKind) {
+      setSelectedKind(queryParamKind);
     }
-  }, [flattenedQueryKind]);
+  }, [queryParamKind]);
   useEffect(() => {
     var _a2, _b2;
     if ((_a2 = filters.kind) == null ? void 0 : _a2.value) {
       setSelectedKind((_b2 = filters.kind) == null ? void 0 : _b2.value);
     }
   }, [filters.kind]);
-  const { availableKinds, loading, error } = useAvailableKinds();
   useEffect(() => {
     updateFilters({
       kind: selectedKind ? new EntityKindFilter(selectedKind) : void 0
     });
   }, [selectedKind, updateFilters]);
+  const { allKinds, loading, error } = useAllKinds();
   return {
     loading,
     error,
-    availableKinds,
+    allKinds: allKinds != null ? allKinds : [],
     selectedKind,
     setSelectedKind
   };
 }
 const EntityKindPicker = (props) => {
-  const { hidden, initialFilter = "component" } = props;
+  const { allowedKinds, hidden, initialFilter = "component" } = props;
   const alertApi = useApi(alertApiRef);
-  const { error, availableKinds, selectedKind, setSelectedKind } = useEntityKindFilter({
+  const { error, allKinds, selectedKind, setSelectedKind } = useEntityKindFilter({
     initialFilter
   });
   useEffect(() => {
@@ -937,20 +940,19 @@ const EntityKindPicker = (props) => {
       });
     }
   }, [error, alertApi]);
-  if ((availableKinds == null ? void 0 : availableKinds.length) === 0 || error)
+  if (error)
     return null;
-  const items = [
-    ...availableKinds.map((kind) => ({
-      value: kind,
-      label: capitalize(kind)
-    }))
-  ];
+  const options = filterKinds(allKinds, allowedKinds, selectedKind);
+  const items = Object.keys(options).map((key) => ({
+    value: key,
+    label: options[key]
+  }));
   return hidden ? null : /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
     Select,
     {
       label: "Kind",
       items,
-      selected: selectedKind,
+      selected: selectedKind.toLocaleLowerCase("en-US"),
       onChange: (value) => setSelectedKind(String(value))
     }
   ));