@backstage/plugin-catalog-react 0.0.0-nightly-20230214023046 → 0.0.0-nightly-20230218023213

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 # @backstage/plugin-catalog-react
 
-## 0.0.0-nightly-20230214023046
+## 0.0.0-nightly-20230218023213
+
+### Minor Changes
+
+- 0a5b73b292: Add possibility to re-use EntityPicker for filters with multiple select.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-client@1.3.1
+  - @backstage/catalog-model@1.2.0
+  - @backstage/core-components@0.12.4
+  - @backstage/core-plugin-api@1.4.0
+  - @backstage/errors@1.1.4
+  - @backstage/integration@1.4.2
+  - @backstage/theme@0.2.17
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.3
+  - @backstage/plugin-catalog-common@1.0.11
+  - @backstage/plugin-permission-common@0.7.3
+  - @backstage/plugin-permission-react@0.4.10
+
+## 1.3.0
 
 ### Minor Changes
 
@@ -10,18 +32,18 @@
 ### Patch Changes
 
 - Updated dependencies
-  - @backstage/core-components@0.0.0-nightly-20230214023046
-  - @backstage/catalog-model@0.0.0-nightly-20230214023046
-  - @backstage/theme@0.0.0-nightly-20230214023046
-  - @backstage/core-plugin-api@0.0.0-nightly-20230214023046
-  - @backstage/catalog-client@0.0.0-nightly-20230214023046
+  - @backstage/core-components@0.12.4
+  - @backstage/catalog-model@1.2.0
+  - @backstage/theme@0.2.17
+  - @backstage/core-plugin-api@1.4.0
+  - @backstage/catalog-client@1.3.1
   - @backstage/errors@1.1.4
   - @backstage/integration@1.4.2
   - @backstage/types@1.0.2
   - @backstage/version-bridge@1.0.3
-  - @backstage/plugin-catalog-common@0.0.0-nightly-20230214023046
+  - @backstage/plugin-catalog-common@1.0.11
   - @backstage/plugin-permission-common@0.7.3
-  - @backstage/plugin-permission-react@0.0.0-nightly-20230214023046
+  - @backstage/plugin-permission-react@0.4.10
 
 ## 1.3.0-next.2
 

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "0.0.0-nightly-20230214023046",
+  "version": "0.0.0-nightly-20230218023213",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/index.alpha.d.ts

@@ -462,7 +462,7 @@ export declare class EntityTagFilter implements EntityFilter {
 }
 
 /** @public */
-export declare const EntityTagPicker: (props: EntityTagPickerProps) => JSX.Element | null;
+export declare const EntityTagPicker: (props: EntityTagPickerProps) => JSX.Element;
 
 /** @public */
 export declare type EntityTagPickerProps = {
@@ -562,9 +562,9 @@ export declare function InspectEntityDialog(props: {
 export declare function isOwnerOf(owner: Entity, entity: Entity): boolean;
 
 /** @public */
-export declare const MockEntityListContextProvider: ({ children, value, }: React_2.PropsWithChildren<{
-    value?: Partial<EntityListContextProps<DefaultEntityFilters>> | undefined;
-}>) => JSX.Element;
+export declare function MockEntityListContextProvider<T extends DefaultEntityFilters = DefaultEntityFilters>({ children, value, }: PropsWithChildren<{
+    value?: Partial<EntityListContextProps<T>>;
+}>): JSX.Element;
 
 /**
  * An in-memory mock implementation of the StarredEntitiesApi.

package/dist/index.beta.d.ts

@@ -462,7 +462,7 @@ export declare class EntityTagFilter implements EntityFilter {
 }
 
 /** @public */
-export declare const EntityTagPicker: (props: EntityTagPickerProps) => JSX.Element | null;
+export declare const EntityTagPicker: (props: EntityTagPickerProps) => JSX.Element;
 
 /** @public */
 export declare type EntityTagPickerProps = {
@@ -553,9 +553,9 @@ export declare function InspectEntityDialog(props: {
 /* Excluded from this release type: isOwnerOf */
 
 /** @public */
-export declare const MockEntityListContextProvider: ({ children, value, }: React_2.PropsWithChildren<{
-    value?: Partial<EntityListContextProps<DefaultEntityFilters>> | undefined;
-}>) => JSX.Element;
+export declare function MockEntityListContextProvider<T extends DefaultEntityFilters = DefaultEntityFilters>({ children, value, }: PropsWithChildren<{
+    value?: Partial<EntityListContextProps<T>>;
+}>): JSX.Element;
 
 /**
  * An in-memory mock implementation of the StarredEntitiesApi.

package/dist/index.d.ts

@@ -462,7 +462,7 @@ export declare class EntityTagFilter implements EntityFilter {
 }
 
 /** @public */
-export declare const EntityTagPicker: (props: EntityTagPickerProps) => JSX.Element | null;
+export declare const EntityTagPicker: (props: EntityTagPickerProps) => JSX.Element;
 
 /** @public */
 export declare type EntityTagPickerProps = {
@@ -553,9 +553,9 @@ export declare function InspectEntityDialog(props: {
 /* Excluded from this release type: isOwnerOf */
 
 /** @public */
-export declare const MockEntityListContextProvider: ({ children, value, }: React_2.PropsWithChildren<{
-    value?: Partial<EntityListContextProps<DefaultEntityFilters>> | undefined;
-}>) => JSX.Element;
+export declare function MockEntityListContextProvider<T extends DefaultEntityFilters = DefaultEntityFilters>({ children, value, }: PropsWithChildren<{
+    value?: Partial<EntityListContextProps<T>>;
+}>): JSX.Element;
 
 /**
  * An in-memory mock implementation of the StarredEntitiesApi.

package/dist/index.esm.js

@@ -1,14 +1,14 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { createApiRef, createRouteRef, useRouteRef, useApi, AnalyticsContext, identityApiRef, alertApiRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
-import React, { useState, forwardRef, createContext, useMemo, useCallback, useContext, useEffect, useRef, useLayoutEffect, Fragment } from 'react';
+import React, { useState, forwardRef, createContext, useMemo, useCallback, useContext, useEffect, useRef, memo, useLayoutEffect, Fragment } from 'react';
 import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, Tooltip, makeStyles, FormControlLabel, Checkbox, TextField, 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 { Link, Progress, ErrorPanel, Select, ResponseErrorPanel, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
 import { DEFAULT_NAMESPACE, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, isUserEntity, isGroupEntity, 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, debounce } from 'lodash';
+import _, { compact, isEqual, groupBy, chunk, debounce } from 'lodash';
 import qs from 'qs';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
@@ -28,9 +28,9 @@ 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 classNames from 'classnames';
 import WorkIcon from '@material-ui/icons/Work';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import groupBy$1 from 'lodash/groupBy';
@@ -964,7 +964,7 @@ const EntityKindPicker = (props) => {
   ));
 };
 
-const useStyles$d = makeStyles(
+const useStyles$e = makeStyles(
   {
     input: {}
   },
@@ -977,7 +977,7 @@ const checkedIcon$3 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSi
 const EntityLifecyclePicker = (props) => {
   var _a, _b;
   const { initialFilter = [] } = props;
-  const classes = useStyles$d();
+  const classes = useStyles$e();
   const {
     updateFilters,
     backendEntities,
@@ -1049,7 +1049,7 @@ const EntityLifecyclePicker = (props) => {
   )));
 };
 
-const useStyles$c = makeStyles(
+const useStyles$d = makeStyles(
   {
     input: {}
   },
@@ -1061,7 +1061,7 @@ const icon$2 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { f
 const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityOwnerPicker = () => {
   var _a, _b;
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const {
     updateFilters,
     backendEntities,
@@ -1173,7 +1173,7 @@ const UserCardActions = (props) => {
   return email ? /* @__PURE__ */ React.createElement(EmailCardAction, { email }) : null;
 };
 
-const useStyles$b = makeStyles(() => {
+const useStyles$c = makeStyles(() => {
   return {
     popoverPaper: {
       width: "30em"
@@ -1191,7 +1191,7 @@ const maxTagChips = 4;
 const EntityPeekAheadPopover = (props) => {
   var _a, _b, _c;
   const { entityRef, children, delayTime = 500 } = props;
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const apiHolder = useApiHolder();
   const popupState = usePopupState({
     variant: "popover",
@@ -1260,7 +1260,7 @@ const EntityPeekAheadPopover = (props) => {
   ));
 };
 
-const useStyles$a = makeStyles(
+const useStyles$b = makeStyles(
   (_theme) => ({
     searchToolbar: {
       paddingLeft: 0,
@@ -1274,7 +1274,7 @@ const useStyles$a = makeStyles(
 );
 const EntitySearchBar = () => {
   var _a, _b;
-  const classes = useStyles$a();
+  const classes = useStyles$b();
   const { filters, updateFilters } = useEntityList();
   const [search, setSearch] = useState((_b = (_a = filters.text) == null ? void 0 : _a.value) != null ? _b : "");
   useDebounce(
@@ -1439,7 +1439,7 @@ const componentEntityColumns = [
   columnFactories.createMetadataDescriptionColumn()
 ];
 
-const useStyles$9 = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1454,7 +1454,7 @@ const EntityTable = (props) => {
     variant = "gridItem",
     columns
   } = props;
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1485,28 +1485,55 @@ EntityTable.columns = columnFactories;
 EntityTable.systemEntityColumns = systemEntityColumns;
 EntityTable.componentEntityColumns = componentEntityColumns;
 
-const useStyles$8 = makeStyles(
+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
+    }
+  );
+});
+
+const useStyles$9 = makeStyles(
   {
     input: {}
   },
   {
-    name: "CatalogReactEntityTagPicker"
+    name: "CatalogReactEntityAutocompletePickerInput"
   }
 );
-const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-const EntityTagPicker = (props) => {
+function EntityAutocompletePickerInput(params) {
+  const classes = useStyles$9();
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      variant: "outlined",
+      ...params,
+      className: classNames(classes.input, params.className)
+    }
+  );
+}
+
+function EntityAutocompletePicker(props) {
   var _a, _b;
-  const classes = useStyles$8();
+  const { label, name, path, showCounts, Filter, InputProps } = props;
   const {
     updateFilters,
     filters,
-    queryParameters: { tags: tagsParameter }
+    queryParameters: { [name]: queryParameter }
   } = useEntityList();
   const catalogApi = useApi(catalogApiRef);
-  const { value: availableTags } = useAsync(async () => {
+  const { value: availableValues } = useAsync(async () => {
     var _a2;
-    const facet = "metadata.tags";
+    const facet = path;
     const { facets } = await catalogApi.getEntityFacets({
       facets: [facet],
       filter: (_a2 = filters.kind) == null ? void 0 : _a2.getCatalogFilters()
@@ -1515,59 +1542,68 @@ const EntityTagPicker = (props) => {
       facets[facet].map(({ value, count }) => [value, count])
     );
   }, [filters.kind]);
-  const queryParamTags = useMemo(
-    () => [tagsParameter].flat().filter(Boolean),
-    [tagsParameter]
+  const queryParameters = useMemo(
+    () => [queryParameter].flat().filter(Boolean),
+    [queryParameter]
   );
-  const [selectedTags, setSelectedTags] = useState(
-    queryParamTags.length ? queryParamTags : (_b = (_a = filters.tags) == null ? void 0 : _a.values) != null ? _b : []
+  const [selectedOptions, setSelectedOptions] = useState(
+    queryParameters.length ? queryParameters : (_b = (_a = filters[name]) == null ? void 0 : _a.values) != null ? _b : []
   );
   useEffect(() => {
-    if (queryParamTags.length) {
-      setSelectedTags(queryParamTags);
+    if (queryParameters.length && !_.isEqual(selectedOptions, queryParameters)) {
+      setSelectedOptions(queryParameters);
     }
-  }, [queryParamTags]);
+  }, [selectedOptions, queryParameters]);
+  const availableOptions = Object.keys(availableValues != null ? availableValues : {});
+  const shouldAddFilter = selectedOptions.length && availableOptions.length;
   useEffect(() => {
-    const tags = Object.keys(availableTags != null ? availableTags : {});
     updateFilters({
-      tags: selectedTags.length && tags.length ? new EntityTagFilter(selectedTags) : void 0
+      [name]: shouldAddFilter ? new Filter(selectedOptions) : void 0
     });
-  }, [selectedTags, updateFilters, availableTags]);
-  if (!Object.keys(availableTags != null ? availableTags : {}).length)
+  }, [name, shouldAddFilter, selectedOptions, Filter, updateFilters]);
+  if (filters[name] && !("values" in filters[name]) || !availableOptions.length) {
     return null;
-  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button", component: "label" }, "Tags", /* @__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,
-      options: Object.keys(availableTags != null ? availableTags : {}),
-      value: selectedTags,
-      onChange: (_, value) => setSelectedTags(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$1,
-              checkedIcon: checkedIcon$1,
-              checked: selected
-            }
-          ),
-          label: props.showCounts ? `${option} (${availableTags == null ? void 0 : availableTags[option]})` : option
+          selected,
+          value: option,
+          availableOptions: availableValues,
+          showCounts: !!showCounts
         }
       ),
       size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "tag-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$8 = makeStyles(
+  { input: {} },
+  { name: "CatalogReactEntityTagPicker" }
+);
+const EntityTagPicker = (props) => {
+  const classes = useStyles$8();
+  return /* @__PURE__ */ React.createElement(
+    EntityAutocompletePicker,
+    {
+      label: "Tags",
+      name: "tags",
+      path: "metadata.tags",
+      Filter: EntityTagFilter,
+      showCounts: props.showCounts,
+      InputProps: { className: classes.input }
+    }
+  );
 };
 
 const EntityTypePicker = (props) => {
@@ -2548,14 +2584,12 @@ const EntityProcessingStatusPicker = () => {
   )));
 };
 
-const MockEntityListContextProvider = ({
+function MockEntityListContextProvider({
   children,
   value
-}) => {
+}) {
   var _a;
-  const [filters, setFilters] = useState(
-    (_a = value == null ? void 0 : value.filters) != null ? _a : {}
-  );
+  const [filters, setFilters] = useState((_a = value == null ? void 0 : value.filters) != null ? _a : {});
   const updateFilters = useCallback(
     (update) => {
       setFilters((prevFilters) => {
@@ -2589,7 +2623,7 @@ const MockEntityListContextProvider = ({
     [value, defaultValues, filters, updateFilters]
   );
   return /* @__PURE__ */ React.createElement(EntityListContext.Provider, { value: resolvedValue }, children);
-};
+}
 
 export { AsyncEntityProvider, CatalogFilterLayout, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityProcessingStatusPicker, EntityProvider, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, isOwnerOf, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPermission, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
 //# sourceMappingURL=index.esm.js.map