@backstage/plugin-catalog-react 1.7.0-next.0 → 1.7.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @backstage/plugin-catalog-react
 
+## 1.7.0-next.1
+
+### Patch Changes
+
+- 429319d080cd: `EntityAutocompletePicker` add `initialSelectedOptions` prop
+- 429319d080cd: `EntityLifecycleFilter` loads data using the facets endpoint
+- Updated dependencies
+  - @backstage/integration@1.5.0-next.0
+  - @backstage/errors@1.2.0-next.0
+  - @backstage/core-components@0.13.2-next.1
+  - @backstage/catalog-model@1.4.0-next.0
+  - @backstage/core-plugin-api@1.5.2-next.0
+  - @backstage/catalog-client@1.4.2-next.1
+  - @backstage/plugin-permission-common@0.7.6-next.0
+  - @backstage/plugin-catalog-common@1.0.14-next.0
+  - @backstage/theme@0.4.0-next.0
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.4
+  - @backstage/plugin-permission-react@0.4.13-next.0
+
 ## 1.7.0-next.0
 
 ### Minor Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.7.0-next.0",
+  "version": "1.7.0-next.1",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/index.d.ts

@@ -91,7 +91,7 @@ type CatalogReactEntityLifecyclePickerClassKey = 'input';
 /** @public */
 declare const EntityLifecyclePicker: (props: {
     initialFilter?: string[];
-}) => JSX.Element | null;
+}) => JSX.Element;
 
 /** @public */
 type CatalogReactEntityOwnerPickerClassKey = 'input';

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { createApiRef, useApi, identityApiRef, alertApiRef, createRouteRef, useRouteRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
-import React, { useState, createContext, useMemo, useCallback, useContext, useEffect, useRef, forwardRef, memo, useLayoutEffect, Fragment } from 'react';
-import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, makeStyles, FormControlLabel, Checkbox, TextField, Tooltip, IconButton, Card, CardContent, Chip, CardActions, Toolbar, FormControl, Input, InputAdornment, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
+import React, { useState, createContext, useMemo, useCallback, useContext, useEffect, useRef, memo, forwardRef, useLayoutEffect, Fragment } from 'react';
+import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, FormControlLabel, Checkbox, makeStyles, TextField, Tooltip, IconButton, Card, CardContent, Chip, CardActions, Toolbar, FormControl, Input, InputAdornment, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import { Select, Link, Progress, ErrorPanel, ResponseErrorPanel, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
 import { ANNOTATION_SOURCE_LOCATION, parseLocationRef, stringifyEntityRef, parseEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, getCompoundEntityRef, isUserEntity, isGroupEntity, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
@@ -18,10 +18,11 @@ import useAsync from 'react-use/lib/useAsync';
 import isEqual$1 from 'lodash/isEqual';
 import sortBy from 'lodash/sortBy';
 import useObservable from 'react-use/lib/useObservable';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete, Alert } from '@material-ui/lab';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import classNames from 'classnames';
 import { useDebouncedEffect } from '@react-hookz/web';
 import PersonIcon from '@material-ui/icons/Person';
 import GroupIcon from '@material-ui/icons/Group';
@@ -33,7 +34,6 @@ import InfoIcon from '@material-ui/icons/Info';
 import EmailIcon from '@material-ui/icons/Email';
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
-import classNames from 'classnames';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import WorkIcon from '@material-ui/icons/Work';
@@ -726,91 +726,143 @@ const EntityKindPicker = (props) => {
   ));
 };
 
+const icon$2 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+function OptionCheckbox({ selected }) {
+  return /* @__PURE__ */ React.createElement(Checkbox, { icon: icon$2, checkedIcon: checkedIcon$2, checked: selected });
+}
+const EntityAutocompletePickerOption = memo((props) => {
+  const { selected, value, availableOptions, showCounts } = props;
+  const label = showCounts ? `${value} (${availableOptions == null ? void 0 : availableOptions[value]})` : value;
+  return /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React.createElement(OptionCheckbox, { selected }),
+      label,
+      onClick: (event) => event.preventDefault()
+    }
+  );
+});
+
 const useStyles$f = makeStyles(
   {
     input: {}
   },
   {
-    name: "CatalogReactEntityLifecyclePicker"
+    name: "CatalogReactEntityAutocompletePickerInput"
   }
 );
-const icon$3 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon$3 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-const EntityLifecyclePicker = (props) => {
-  var _a, _b;
-  const { initialFilter = [] } = props;
+function EntityAutocompletePickerInput(params) {
   const classes = useStyles$f();
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      variant: "outlined",
+      ...params,
+      className: classNames(classes.input, params.className)
+    }
+  );
+}
+
+function EntityAutocompletePicker(props) {
+  var _a, _b;
+  const {
+    label,
+    name,
+    path,
+    showCounts,
+    Filter,
+    InputProps,
+    initialSelectedOptions = []
+  } = props;
   const {
     updateFilters,
-    backendEntities,
     filters,
-    queryParameters: { lifecycles: lifecyclesParameter }
+    queryParameters: { [name]: queryParameter }
   } = useEntityList();
-  const queryParamLifecycles = useMemo(
-    () => [lifecyclesParameter].flat().filter(Boolean),
-    [lifecyclesParameter]
+  const catalogApi = useApi(catalogApiRef);
+  const { value: availableValues } = useAsync(async () => {
+    var _a2;
+    const facet = path;
+    const { facets } = await catalogApi.getEntityFacets({
+      facets: [facet],
+      filter: (_a2 = filters.kind) == null ? void 0 : _a2.getCatalogFilters()
+    });
+    return Object.fromEntries(
+      facets[facet].map(({ value, count }) => [value, count])
+    );
+  }, [filters.kind]);
+  const queryParameters = useMemo(
+    () => [queryParameter].flat().filter(Boolean),
+    [queryParameter]
   );
-  const [selectedLifecycles, setSelectedLifecycles] = useState(
-    queryParamLifecycles.length ? queryParamLifecycles : (_b = (_a = filters.lifecycles) == null ? void 0 : _a.values) != null ? _b : initialFilter
+  const [selectedOptions, setSelectedOptions] = useState(
+    queryParameters.length ? queryParameters : (_b = (_a = filters[name]) == null ? void 0 : _a.values) != null ? _b : initialSelectedOptions
   );
   useEffect(() => {
-    if (queryParamLifecycles.length) {
-      setSelectedLifecycles(queryParamLifecycles);
+    if (queryParameters.length) {
+      setSelectedOptions(queryParameters);
     }
-  }, [queryParamLifecycles]);
-  const availableLifecycles = useMemo(
-    () => [
-      ...new Set(
-        backendEntities.map((e) => {
-          var _a2;
-          return (_a2 = e.spec) == null ? void 0 : _a2.lifecycle;
-        }).filter(Boolean)
-      )
-    ].sort(),
-    [backendEntities]
-  );
+  }, [queryParameters]);
+  const availableOptions = Object.keys(availableValues != null ? availableValues : {});
+  const shouldAddFilter = selectedOptions.length && availableOptions.length;
   useEffect(() => {
     updateFilters({
-      lifecycles: selectedLifecycles.length && availableLifecycles.length ? new EntityLifecycleFilter(selectedLifecycles) : void 0
+      [name]: shouldAddFilter ? new Filter(selectedOptions) : void 0
     });
-  }, [selectedLifecycles, updateFilters, availableLifecycles]);
-  if (!availableLifecycles.length)
+  }, [name, shouldAddFilter, selectedOptions, Filter, updateFilters]);
+  const filter = filters[name];
+  if (filter && typeof filter === "object" && !("values" in filter) || !availableOptions.length) {
+    return null;
+  }
+  if (availableOptions.length <= 1)
     return null;
-  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button", component: "label" }, "Lifecycle", /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button", component: "label" }, label, /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
       multiple: true,
       disableCloseOnSelect: true,
-      options: availableLifecycles,
-      value: selectedLifecycles,
-      onChange: (_, value) => setSelectedLifecycles(value),
+      options: availableOptions,
+      value: selectedOptions,
+      onChange: (_event, options) => setSelectedOptions(options),
       renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
-        FormControlLabel,
+        EntityAutocompletePickerOption,
         {
-          control: /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              icon: icon$3,
-              checkedIcon: checkedIcon$3,
-              checked: selected
-            }
-          ),
-          onClick: (event) => event.preventDefault(),
-          label: option
+          selected,
+          value: option,
+          availableOptions: availableValues,
+          showCounts: !!showCounts
         }
       ),
       size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "lifecycle-picker-expand" }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          className: classes.input,
-          variant: "outlined"
-        }
-      )
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": `${String(name)}-picker-expand` }),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(EntityAutocompletePickerInput, { ...params, ...InputProps })
     }
   )));
+}
+
+const useStyles$e = makeStyles(
+  {
+    input: {}
+  },
+  {
+    name: "CatalogReactEntityLifecyclePicker"
+  }
+);
+const EntityLifecyclePicker = (props) => {
+  const { initialFilter = [] } = props;
+  const classes = useStyles$e();
+  return /* @__PURE__ */ React.createElement(
+    EntityAutocompletePicker,
+    {
+      label: "Lifecycle",
+      name: "lifecycles",
+      path: "spec.lifecycle",
+      Filter: EntityLifecycleFilter,
+      InputProps: { className: classes.input },
+      initialSelectedOptions: initialFilter
+    }
+  );
 };
 
 function humanizeEntityRef(entityRef, opts) {
@@ -851,7 +903,7 @@ function humanizeEntity(entity, defaultName) {
   return defaultName;
 }
 
-const useStyles$e = makeStyles(
+const useStyles$d = makeStyles(
   {
     input: {}
   },
@@ -859,11 +911,11 @@ const useStyles$e = makeStyles(
     name: "CatalogReactEntityOwnerPicker"
   }
 );
-const icon$2 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityOwnerPicker = () => {
   var _a, _b, _c;
-  const classes = useStyles$e();
+  const classes = useStyles$d();
   const {
     updateFilters,
     filters,
@@ -968,8 +1020,8 @@ const EntityOwnerPicker = () => {
             control: /* @__PURE__ */ React.createElement(
               Checkbox,
               {
-                icon: icon$2,
-                checkedIcon: checkedIcon$2,
+                icon: icon$1,
+                checkedIcon: checkedIcon$1,
                 checked: selected
               }
             ),
@@ -1195,7 +1247,7 @@ const UserCardActions = (props) => {
   return email ? /* @__PURE__ */ React.createElement(EmailCardAction, { email }) : null;
 };
 
-const useStyles$d = makeStyles(() => {
+const useStyles$c = makeStyles(() => {
   return {
     popoverPaper: {
       width: "30em"
@@ -1213,7 +1265,7 @@ const maxTagChips = 4;
 const EntityPeekAheadPopover = (props) => {
   var _a, _b, _c;
   const { entityRef, children, delayTime = 500 } = props;
-  const classes = useStyles$d();
+  const classes = useStyles$c();
   const apiHolder = useApiHolder();
   const popupState = usePopupState({
     variant: "popover",
@@ -1282,7 +1334,7 @@ const EntityPeekAheadPopover = (props) => {
   ));
 };
 
-const useStyles$c = makeStyles(
+const useStyles$b = makeStyles(
   (_theme) => ({
     searchToolbar: {
       paddingLeft: 0,
@@ -1296,7 +1348,7 @@ const useStyles$c = makeStyles(
 );
 const EntitySearchBar = () => {
   var _a, _b;
-  const classes = useStyles$c();
+  const classes = useStyles$b();
   const { filters, updateFilters } = useEntityList();
   const [search, setSearch] = useState((_b = (_a = filters.text) == null ? void 0 : _a.value) != null ? _b : "");
   useDebounce(
@@ -1461,7 +1513,7 @@ const componentEntityColumns = [
   columnFactories.createMetadataDescriptionColumn()
 ];
 
-const useStyles$b = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1476,7 +1528,7 @@ const EntityTable = (props) => {
     variant = "gridItem",
     columns
   } = props;
-  const classes = useStyles$b();
+  const classes = useStyles$a();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1507,113 +1559,6 @@ EntityTable.columns = columnFactories;
 EntityTable.systemEntityColumns = systemEntityColumns;
 EntityTable.componentEntityColumns = componentEntityColumns;
 
-const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-function OptionCheckbox({ selected }) {
-  return /* @__PURE__ */ React.createElement(Checkbox, { icon: icon$1, checkedIcon: checkedIcon$1, checked: selected });
-}
-const EntityAutocompletePickerOption = memo((props) => {
-  const { selected, value, availableOptions, showCounts } = props;
-  const label = showCounts ? `${value} (${availableOptions == null ? void 0 : availableOptions[value]})` : value;
-  return /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(OptionCheckbox, { selected }),
-      label,
-      onClick: (event) => event.preventDefault()
-    }
-  );
-});
-
-const useStyles$a = makeStyles(
-  {
-    input: {}
-  },
-  {
-    name: "CatalogReactEntityAutocompletePickerInput"
-  }
-);
-function EntityAutocompletePickerInput(params) {
-  const classes = useStyles$a();
-  return /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      variant: "outlined",
-      ...params,
-      className: classNames(classes.input, params.className)
-    }
-  );
-}
-
-function EntityAutocompletePicker(props) {
-  var _a, _b;
-  const { label, name, path, showCounts, Filter, InputProps } = props;
-  const {
-    updateFilters,
-    filters,
-    queryParameters: { [name]: queryParameter }
-  } = useEntityList();
-  const catalogApi = useApi(catalogApiRef);
-  const { value: availableValues } = useAsync(async () => {
-    var _a2;
-    const facet = path;
-    const { facets } = await catalogApi.getEntityFacets({
-      facets: [facet],
-      filter: (_a2 = filters.kind) == null ? void 0 : _a2.getCatalogFilters()
-    });
-    return Object.fromEntries(
-      facets[facet].map(({ value, count }) => [value, count])
-    );
-  }, [filters.kind]);
-  const queryParameters = useMemo(
-    () => [queryParameter].flat().filter(Boolean),
-    [queryParameter]
-  );
-  const [selectedOptions, setSelectedOptions] = useState(
-    queryParameters.length ? queryParameters : (_b = (_a = filters[name]) == null ? void 0 : _a.values) != null ? _b : []
-  );
-  useEffect(() => {
-    if (queryParameters.length) {
-      setSelectedOptions(queryParameters);
-    }
-  }, [queryParameters]);
-  const availableOptions = Object.keys(availableValues != null ? availableValues : {});
-  const shouldAddFilter = selectedOptions.length && availableOptions.length;
-  useEffect(() => {
-    updateFilters({
-      [name]: shouldAddFilter ? new Filter(selectedOptions) : void 0
-    });
-  }, [name, shouldAddFilter, selectedOptions, Filter, updateFilters]);
-  const filter = filters[name];
-  if (filter && typeof filter === "object" && !("values" in filter) || !availableOptions.length) {
-    return null;
-  }
-  if (availableOptions.length <= 1)
-    return null;
-  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button", component: "label" }, label, /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      multiple: true,
-      disableCloseOnSelect: true,
-      options: availableOptions,
-      value: selectedOptions,
-      onChange: (_event, options) => setSelectedOptions(options),
-      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
-        EntityAutocompletePickerOption,
-        {
-          selected,
-          value: option,
-          availableOptions: availableValues,
-          showCounts: !!showCounts
-        }
-      ),
-      size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": `${String(name)}-picker-expand` }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(EntityAutocompletePickerInput, { ...params, ...InputProps })
-    }
-  )));
-}
-
 const useStyles$9 = makeStyles(
   { input: {} },
   { name: "CatalogReactEntityTagPicker" }