@backstage/plugin-catalog-react 0.5.1 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @backstage/plugin-catalog-react
 
+## 0.6.2
+
+### Patch Changes
+
+- f9cc2509f8: EntityTypePicker can be hidden and have an initial filter value set, similar to EntityKindPicker
+- 10615525f3: Switch to use the json and observable types from `@backstage/types`
+- Updated dependencies
+  - @backstage/errors@0.1.4
+  - @backstage/integration@0.6.9
+  - @backstage/core-components@0.7.2
+  - @backstage/catalog-model@0.9.6
+  - @backstage/core-app-api@0.1.19
+  - @backstage/core-plugin-api@0.1.12
+
+## 0.6.1
+
+### Patch Changes
+
+- 36e67d2f24: Internal updates to apply more strict checks to throw errors.
+- Updated dependencies
+  - @backstage/core-components@0.7.1
+  - @backstage/errors@0.1.3
+  - @backstage/core-app-api@0.1.18
+  - @backstage/core-plugin-api@0.1.11
+  - @backstage/catalog-model@0.9.5
+
+## 0.6.0
+
+### Minor Changes
+
+- 82fbda923e: Introduce a new `StarredEntitiesApi` that is used in the `useStarredEntities` hook.
+  The `@backstage/plugin-catalog` installs a default implementation that is backed by the `StorageApi`, but one can also override the `starredEntitiesApiRef`.
+
+  This change also updates the storage format from a custom string to an entity reference and moves the location in the local storage.
+  A migration will convert the previously starred entities to the location on the first load of Backstage.
+
+### Patch Changes
+
+- 0366c9b667: Introduce a `useStarredEntity` hook to check if a single entity is starred.
+  It provides a more efficient implementation compared to the `useStarredEntities` hook, because the rendering is only triggered if the selected entity is starred, not if _any_ entity is starred.
+- 4aca84f86b: Support `material-ui` overrides in plugin-catalog-react components
+- b03b9f19e0: added sorting in entity `Name` column by `metadata.title` if present
+- Updated dependencies
+  - @backstage/integration@0.6.8
+  - @backstage/core-app-api@0.1.17
+  - @backstage/core-components@0.7.0
+
+## 0.5.2
+
+### Patch Changes
+
+- 5aae9bb61e: Name column will now render entity `metadata.title` if its present
+- ca0559444c: Avoid usage of `.to*Case()`, preferring `.toLocale*Case('en-US')` instead.
+- Updated dependencies
+  - @backstage/core-components@0.6.1
+  - @backstage/core-plugin-api@0.1.10
+  - @backstage/core-app-api@0.1.16
+  - @backstage/catalog-model@0.9.4
+  - @backstage/catalog-client@0.5.0
+  - @backstage/integration@0.6.7
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -4,30 +4,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var catalogClient = require('@backstage/catalog-client');
 var corePluginApi = require('@backstage/core-plugin-api');
+var ObservableImpl = require('zen-observable');
+var catalogModel = require('@backstage/catalog-model');
+var lodash = require('lodash');
 var React = require('react');
 var lab = require('@material-ui/lab');
 var versionBridge = require('@backstage/version-bridge');
 var reactRouter = require('react-router');
 var reactUse = require('react-use');
-var catalogModel = require('@backstage/catalog-model');
-var lodash = require('lodash');
 var qs = require('qs');
 var coreComponents = require('@backstage/core-components');
-var jwtDecoder = require('jwt-decode');
 var core = require('@material-ui/core');
+var jwtDecoder = require('jwt-decode');
 var CheckBoxIcon = require('@material-ui/icons/CheckBox');
 var CheckBoxOutlineBlankIcon = require('@material-ui/icons/CheckBoxOutlineBlank');
 var ExpandMoreIcon = require('@material-ui/icons/ExpandMore');
 var Clear = require('@material-ui/icons/Clear');
 var Search = require('@material-ui/icons/Search');
 var capitalize = require('lodash/capitalize');
-var StarBorder = require('@material-ui/icons/StarBorder');
 var Star = require('@material-ui/icons/Star');
+var StarBorder = require('@material-ui/icons/StarBorder');
 var Alert = require('@material-ui/lab/Alert');
+var errors = require('@backstage/errors');
 var SettingsIcon = require('@material-ui/icons/Settings');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var ObservableImpl__default = /*#__PURE__*/_interopDefaultLegacy(ObservableImpl);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var qs__default = /*#__PURE__*/_interopDefaultLegacy(qs);
 var jwtDecoder__default = /*#__PURE__*/_interopDefaultLegacy(jwtDecoder);
@@ -37,8 +40,8 @@ var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon)
 var Clear__default = /*#__PURE__*/_interopDefaultLegacy(Clear);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
-var StarBorder__default = /*#__PURE__*/_interopDefaultLegacy(StarBorder);
 var Star__default = /*#__PURE__*/_interopDefaultLegacy(Star);
+var StarBorder__default = /*#__PURE__*/_interopDefaultLegacy(StarBorder);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var SettingsIcon__default = /*#__PURE__*/_interopDefaultLegacy(SettingsIcon);
 
@@ -46,6 +49,69 @@ const catalogApiRef = corePluginApi.createApiRef({
   id: "plugin.catalog.service"
 });
 
+async function performMigrationToTheNewBucket({
+  storageApi
+}) {
+  var _a;
+  const source = storageApi.forBucket("settings");
+  const target = storageApi.forBucket("starredEntities");
+  const oldStarredEntities = source.get("starredEntities");
+  if (!lodash.isArray(oldStarredEntities)) {
+    return;
+  }
+  const targetEntities = new Set((_a = target.get("entityRefs")) != null ? _a : []);
+  oldStarredEntities.filter(lodash.isString).map((old) => old.split(":")).filter((split) => split.length === 4 && split[0] === "entity").map(([_, kind, namespace, name]) => catalogModel.stringifyEntityRef({kind, namespace, name})).forEach((e) => targetEntities.add(e));
+  await target.set("entityRefs", Array.from(targetEntities));
+  await source.remove("starredEntities");
+}
+
+class DefaultStarredEntitiesApi {
+  constructor(opts) {
+    this.subscribers = new Set();
+    this.observable = new ObservableImpl__default['default']((subscriber) => {
+      subscriber.next(this.starredEntities);
+      this.subscribers.add(subscriber);
+      return () => {
+        this.subscribers.delete(subscriber);
+      };
+    });
+    var _a;
+    performMigrationToTheNewBucket(opts).then();
+    this.settingsStore = opts.storageApi.forBucket("starredEntities");
+    this.starredEntities = new Set((_a = this.settingsStore.get("entityRefs")) != null ? _a : []);
+    this.settingsStore.observe$("entityRefs").subscribe({
+      next: (next) => {
+        var _a2;
+        this.starredEntities = new Set((_a2 = next.newValue) != null ? _a2 : []);
+        this.notifyChanges();
+      }
+    });
+  }
+  async toggleStarred(entityRef) {
+    if (this.starredEntities.has(entityRef)) {
+      this.starredEntities.delete(entityRef);
+    } else {
+      this.starredEntities.add(entityRef);
+    }
+    await this.settingsStore.set("entityRefs", Array.from(this.starredEntities));
+  }
+  starredEntitie$() {
+    return this.observable;
+  }
+  isStarred(entityRef) {
+    return this.starredEntities.has(entityRef);
+  }
+  notifyChanges() {
+    for (const subscription of this.subscribers) {
+      subscription.next(this.starredEntities);
+    }
+  }
+}
+
+const starredEntitiesApiRef = corePluginApi.createApiRef({
+  id: "catalog-react.starred-entities"
+});
+
 const NoIcon = () => null;
 const rootRoute = corePluginApi.createRouteRef({
   icon: NoIcon,
@@ -63,8 +129,8 @@ const entityRouteRef = entityRoute;
 function entityRouteParams(entity) {
   var _a, _b;
   return {
-    kind: entity.kind.toLowerCase(),
-    namespace: (_b = (_a = entity.metadata.namespace) == null ? void 0 : _a.toLowerCase()) != null ? _b : catalogModel.ENTITY_DEFAULT_NAMESPACE,
+    kind: entity.kind.toLocaleLowerCase("en-US"),
+    namespace: (_b = (_a = entity.metadata.namespace) == null ? void 0 : _a.toLocaleLowerCase("en-US")) != null ? _b : catalogModel.ENTITY_DEFAULT_NAMESPACE,
     name: entity.metadata.name
   };
 }
@@ -177,7 +243,7 @@ function getEntityRelations(entity, relationType, filter) {
   var _a, _b;
   let entityNames = ((_b = (_a = entity == null ? void 0 : entity.relations) == null ? void 0 : _a.filter((r) => r.type === relationType)) == null ? void 0 : _b.map((r) => r.target)) || [];
   if (filter == null ? void 0 : filter.kind) {
-    entityNames = entityNames == null ? void 0 : entityNames.filter((e) => e.kind.toLowerCase() === filter.kind.toLowerCase());
+    entityNames = entityNames == null ? void 0 : entityNames.filter((e) => e.kind.toLocaleLowerCase("en-US") === filter.kind.toLocaleLowerCase("en-US"));
   }
   return entityNames;
 }
@@ -317,9 +383,9 @@ function formatEntityRefTitle(entityRef, opts) {
   if (namespace === catalogModel.ENTITY_DEFAULT_NAMESPACE) {
     namespace = void 0;
   }
-  kind = kind.toLowerCase();
+  kind = kind.toLocaleLowerCase("en-US");
   return `${catalogModel.serializeEntityRef({
-    kind: defaultKind && defaultKind.toLowerCase() === kind ? void 0 : kind,
+    kind: defaultKind && defaultKind.toLocaleLowerCase("en-US") === kind ? void 0 : kind,
     name,
     namespace
   })}`;
@@ -327,7 +393,8 @@ function formatEntityRefTitle(entityRef, opts) {
 
 const EntityRefLink = React.forwardRef((props, ref) => {
   var _a;
-  const {entityRef, defaultKind, children, ...linkProps} = props;
+  const {entityRef, defaultKind, title, children, ...linkProps} = props;
+  const entityRoute = corePluginApi.useRouteRef(entityRouteRef);
   let kind;
   let namespace;
   let name;
@@ -346,11 +413,17 @@ const EntityRefLink = React.forwardRef((props, ref) => {
     namespace: (_a = namespace == null ? void 0 : namespace.toLocaleLowerCase("en-US")) != null ? _a : catalogModel.ENTITY_DEFAULT_NAMESPACE,
     name
   };
-  return /* @__PURE__ */ React__default['default'].createElement(coreComponents.Link, {
+  const formattedEntityRefTitle = formatEntityRefTitle(entityRef, {
+    defaultKind
+  });
+  const link = /* @__PURE__ */ React__default['default'].createElement(coreComponents.Link, {
     ...linkProps,
     ref,
-    to: reactRouter.generatePath(`/catalog/${entityRoute.path}`, routeParams)
-  }, children, !children && formatEntityRefTitle(entityRef, {defaultKind}));
+    to: entityRoute(routeParams)
+  }, children, !children && (title != null ? title : formattedEntityRefTitle));
+  return title ? /* @__PURE__ */ React__default['default'].createElement(core.Tooltip, {
+    title: formattedEntityRefTitle
+  }, link) : link;
 });
 
 const EntityRefLinks = ({
@@ -556,12 +629,12 @@ function useRelatedEntities(entity, {type, kind}) {
     value: entities,
     error
   } = reactUse.useAsync(async () => {
-    const relations = entity.relations && entity.relations.filter((r) => (!type || r.type.toLowerCase() === type.toLowerCase()) && (!kind || r.target.kind.toLowerCase() === kind.toLowerCase()));
+    const relations = entity.relations && entity.relations.filter((r) => (!type || r.type.toLocaleLowerCase("en-US") === type.toLocaleLowerCase("en-US")) && (!kind || r.target.kind.toLocaleLowerCase("en-US") === kind.toLocaleLowerCase("en-US")));
     if (!relations) {
       return [];
     }
     const relationsByKindAndNamespace = Object.values(lodash.groupBy(relations, ({target}) => {
-      return `${target.kind}:${target.namespace}`.toLowerCase();
+      return `${target.kind}:${target.namespace}`.toLocaleLowerCase("en-US");
     }));
     const batchedRelationsByKindAndNamespace = [];
     for (const rs of relationsByKindAndNamespace) {
@@ -591,43 +664,43 @@ function useRelatedEntities(entity, {type, kind}) {
   };
 }
 
-const buildEntityKey = (component) => {
-  var _a;
-  return `entity:${component.kind}:${(_a = component.metadata.namespace) != null ? _a : "default"}:${component.metadata.name}`;
-};
-const useStarredEntities = () => {
-  var _a;
-  const storageApi = corePluginApi.useApi(corePluginApi.storageApiRef);
-  const settingsStore = storageApi.forBucket("settings");
-  const rawStarredEntityKeys = (_a = settingsStore.get("starredEntities")) != null ? _a : [];
-  const [starredEntities, setStarredEntities] = React.useState(new Set(rawStarredEntityKeys));
-  const observedItems = reactUse.useObservable(settingsStore.observe$("starredEntities"));
-  React.useEffect(() => {
-    var _a2;
-    if (observedItems == null ? void 0 : observedItems.newValue) {
-      const currentValue = (_a2 = observedItems == null ? void 0 : observedItems.newValue) != null ? _a2 : [];
-      setStarredEntities(new Set(currentValue));
-    }
-  }, [observedItems == null ? void 0 : observedItems.newValue]);
-  const toggleStarredEntity = React.useCallback((entity) => {
-    const entityKey = buildEntityKey(entity);
-    if (starredEntities.has(entityKey)) {
-      starredEntities.delete(entityKey);
-    } else {
-      starredEntities.add(entityKey);
-    }
-    settingsStore.set("starredEntities", Array.from(starredEntities));
-  }, [starredEntities, settingsStore]);
-  const isStarredEntity = React.useCallback((entity) => {
-    const entityKey = buildEntityKey(entity);
-    return starredEntities.has(entityKey);
-  }, [starredEntities]);
+function getEntityRef$1(entityOrRef) {
+  return typeof entityOrRef === "string" ? entityOrRef : catalogModel.stringifyEntityRef(entityOrRef);
+}
+function useStarredEntities() {
+  const starredEntitiesApi = corePluginApi.useApi(starredEntitiesApiRef);
+  const starredEntities = reactUse.useObservable(starredEntitiesApi.starredEntitie$(), new Set());
+  const isStarredEntity = React.useCallback((entityOrRef) => starredEntities.has(getEntityRef$1(entityOrRef)), [starredEntities]);
+  const toggleStarredEntity = React.useCallback((entityOrRef) => starredEntitiesApi.toggleStarred(getEntityRef$1(entityOrRef)).then(), [starredEntitiesApi]);
   return {
     starredEntities,
     toggleStarredEntity,
     isStarredEntity
   };
-};
+}
+
+function getEntityRef(entityOrRef) {
+  return typeof entityOrRef === "string" ? entityOrRef : catalogModel.stringifyEntityRef(entityOrRef);
+}
+function useStarredEntity(entityOrRef) {
+  const starredEntitiesApi = corePluginApi.useApi(starredEntitiesApiRef);
+  const [isStarredEntity, setIsStarredEntity] = React.useState(false);
+  React.useEffect(() => {
+    const subscription = starredEntitiesApi.starredEntitie$().subscribe({
+      next(starredEntities) {
+        setIsStarredEntity(starredEntities.has(getEntityRef(entityOrRef)));
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [entityOrRef, starredEntitiesApi]);
+  const toggleStarredEntity = React.useCallback(() => starredEntitiesApi.toggleStarred(getEntityRef(entityOrRef)).then(), [entityOrRef, starredEntitiesApi]);
+  return {
+    toggleStarredEntity,
+    isStarredEntity
+  };
+}
 
 function extendUserId(id) {
   try {
@@ -716,6 +789,11 @@ const EntityKindPicker = ({
   }, "Kind filter not yet available");
 };
 
+const useStyles$6 = core.makeStyles({
+  input: {}
+}, {
+  name: "CatalogReactEntityLifecyclePicker"
+});
 const icon$2 = /* @__PURE__ */ React__default['default'].createElement(CheckBoxOutlineBlankIcon__default['default'], {
   fontSize: "small"
 });
@@ -724,6 +802,7 @@ const checkedIcon$2 = /* @__PURE__ */ React__default['default'].createElement(Ch
 });
 const EntityLifecyclePicker = () => {
   var _a, _b;
+  const classes = useStyles$6();
   const {updateFilters, backendEntities, filters, queryParameters} = useEntityListProvider();
   const queryParamLifecycles = [queryParameters.lifecycles].flat().filter(Boolean);
   const [selectedLifecycles, setSelectedLifecycles] = React.useState(queryParamLifecycles.length ? queryParamLifecycles : (_b = (_a = filters.lifecycles) == null ? void 0 : _a.values) != null ? _b : []);
@@ -765,11 +844,17 @@ const EntityLifecyclePicker = () => {
     }),
     renderInput: (params) => /* @__PURE__ */ React__default['default'].createElement(core.TextField, {
       ...params,
+      className: classes.input,
       variant: "outlined"
     })
   }));
 };
 
+const useStyles$5 = core.makeStyles({
+  input: {}
+}, {
+  name: "CatalogReactEntityOwnerPicker"
+});
 const icon$1 = /* @__PURE__ */ React__default['default'].createElement(CheckBoxOutlineBlankIcon__default['default'], {
   fontSize: "small"
 });
@@ -778,6 +863,7 @@ const checkedIcon$1 = /* @__PURE__ */ React__default['default'].createElement(Ch
 });
 const EntityOwnerPicker = () => {
   var _a, _b;
+  const classes = useStyles$5();
   const {updateFilters, backendEntities, filters, queryParameters} = useEntityListProvider();
   const queryParamOwners = [queryParameters.owners].flat().filter(Boolean);
   const [selectedOwners, setSelectedOwners] = React.useState(queryParamOwners.length ? queryParamOwners : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []);
@@ -816,20 +902,24 @@ const EntityOwnerPicker = () => {
     }),
     renderInput: (params) => /* @__PURE__ */ React__default['default'].createElement(core.TextField, {
       ...params,
+      className: classes.input,
       variant: "outlined"
     })
   }));
 };
 
-const useStyles$3 = core.makeStyles((_theme) => ({
+const useStyles$4 = core.makeStyles((_theme) => ({
   searchToolbar: {
     paddingLeft: 0,
     paddingRight: 0
-  }
-}));
+  },
+  input: {}
+}), {
+  name: "CatalogReactEntitySearchBar"
+});
 const EntitySearchBar = () => {
   var _a, _b;
-  const styles = useStyles$3();
+  const classes = useStyles$4();
   const {filters, updateFilters} = useEntityListProvider();
   const [search, setSearch] = React.useState((_b = (_a = filters.text) == null ? void 0 : _a.value) != null ? _b : "");
   reactUse.useDebounce(() => {
@@ -838,9 +928,10 @@ const EntitySearchBar = () => {
     });
   }, 250, [search, updateFilters]);
   return /* @__PURE__ */ React__default['default'].createElement(core.Toolbar, {
-    className: styles.searchToolbar
+    className: classes.searchToolbar
   }, /* @__PURE__ */ React__default['default'].createElement(core.FormControl, null, /* @__PURE__ */ React__default['default'].createElement(core.Input, {
     id: "input-with-icon-adornment",
+    className: classes.input,
     placeholder: "Search",
     autoComplete: "off",
     onChange: (event) => setSearch(event.target.value),
@@ -863,7 +954,8 @@ function createEntityRefColumn({
   defaultKind
 }) {
   function formatContent(entity) {
-    return formatEntityRefTitle(entity, {
+    var _a;
+    return ((_a = entity.metadata) == null ? void 0 : _a.title) || formatEntityRefTitle(entity, {
       defaultKind
     });
   }
@@ -876,10 +968,14 @@ function createEntityRefColumn({
     customSort(entity1, entity2) {
       return formatContent(entity1).localeCompare(formatContent(entity2));
     },
-    render: (entity) => /* @__PURE__ */ React__default['default'].createElement(EntityRefLink, {
-      entityRef: entity,
-      defaultKind
-    })
+    render: (entity) => {
+      var _a;
+      return /* @__PURE__ */ React__default['default'].createElement(EntityRefLink, {
+        entityRef: entity,
+        defaultKind,
+        title: (_a = entity.metadata) == null ? void 0 : _a.title
+      });
+    }
   };
 }
 function createEntityRelationColumn({
@@ -989,7 +1085,7 @@ const componentEntityColumns = [
   createMetadataDescriptionColumn()
 ];
 
-const useStyles$2 = core.makeStyles((theme) => ({
+const useStyles$3 = core.makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1003,7 +1099,7 @@ function EntityTable({
   variant = "gridItem",
   columns
 }) {
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1031,6 +1127,11 @@ EntityTable.columns = columnFactories;
 EntityTable.systemEntityColumns = systemEntityColumns;
 EntityTable.componentEntityColumns = componentEntityColumns;
 
+const useStyles$2 = core.makeStyles({
+  input: {}
+}, {
+  name: "CatalogReactEntityTagPicker"
+});
 const icon = /* @__PURE__ */ React__default['default'].createElement(CheckBoxOutlineBlankIcon__default['default'], {
   fontSize: "small"
 });
@@ -1039,6 +1140,7 @@ const checkedIcon = /* @__PURE__ */ React__default['default'].createElement(Chec
 });
 const EntityTagPicker = () => {
   var _a, _b;
+  const classes = useStyles$2();
   const {updateFilters, backendEntities, filters, queryParameters} = useEntityListProvider();
   const queryParamTags = [queryParameters.tags].flat().filter(Boolean);
   const [selectedTags, setSelectedTags] = React.useState(queryParamTags.length ? queryParamTags : (_b = (_a = filters.tags) == null ? void 0 : _a.values) != null ? _b : []);
@@ -1077,13 +1179,15 @@ const EntityTagPicker = () => {
     }),
     renderInput: (params) => /* @__PURE__ */ React__default['default'].createElement(core.TextField, {
       ...params,
+      className: classes.input,
       variant: "outlined"
     })
   }));
 };
 
-const EntityTypePicker = () => {
+const EntityTypePicker = (props) => {
   var _a;
+  const {hidden, initialFilter} = props;
   const alertApi = corePluginApi.useApi(corePluginApi.alertApiRef);
   const {error, availableTypes, selectedTypes, setSelectedTypes} = useEntityTypeFilter();
   React.useEffect(() => {
@@ -1093,7 +1197,10 @@ const EntityTypePicker = () => {
         severity: "error"
       });
     }
-  }, [error, alertApi]);
+    if (initialFilter) {
+      setSelectedTypes([initialFilter]);
+    }
+  }, [error, alertApi, initialFilter, setSelectedTypes]);
   if (availableTypes.length === 0 || error)
     return null;
   const items = [
@@ -1103,7 +1210,7 @@ const EntityTypePicker = () => {
       label: capitalize__default['default'](type)
     }))
   ];
-  return /* @__PURE__ */ React__default['default'].createElement(core.Box, {
+  return hidden ? null : /* @__PURE__ */ React__default['default'].createElement(core.Box, {
     pb: 1,
     pt: 1
   }, /* @__PURE__ */ React__default['default'].createElement(coreComponents.Select, {
@@ -1122,15 +1229,14 @@ const YellowStar = core.withStyles({
 const favoriteEntityTooltip = (isStarred) => isStarred ? "Remove from favorites" : "Add to favorites";
 const favoriteEntityIcon = (isStarred) => isStarred ? /* @__PURE__ */ React__default['default'].createElement(YellowStar, null) : /* @__PURE__ */ React__default['default'].createElement(StarBorder__default['default'], null);
 const FavoriteEntity = (props) => {
-  const {toggleStarredEntity, isStarredEntity} = useStarredEntities();
-  const isStarred = isStarredEntity(props.entity);
+  const {toggleStarredEntity, isStarredEntity} = useStarredEntity(props.entity);
   return /* @__PURE__ */ React__default['default'].createElement(core.IconButton, {
     color: "inherit",
     ...props,
-    onClick: () => toggleStarredEntity(props.entity)
+    onClick: () => toggleStarredEntity()
   }, /* @__PURE__ */ React__default['default'].createElement(core.Tooltip, {
-    title: favoriteEntityTooltip(isStarred)
-  }, favoriteEntityIcon(isStarred)));
+    title: favoriteEntityTooltip(isStarredEntity)
+  }, favoriteEntityIcon(isStarredEntity)));
 };
 
 function useUnregisterEntityDialogState(entity) {
@@ -1215,6 +1321,7 @@ const Contents = ({
         await state.unregisterLocation();
         onConfirm();
       } catch (err) {
+        errors.assertError(err);
         alertApi.post({message: err.message});
       } finally {
         setBusy(false);
@@ -1228,6 +1335,7 @@ const Contents = ({
         await state.deleteEntity();
         onConfirm();
       } catch (err) {
+        errors.assertError(err);
         alertApi.post({message: err.message});
       } finally {
         setBusy(false);
@@ -1347,7 +1455,9 @@ const useStyles = core.makeStyles((theme) => ({
   groupWrapper: {
     margin: theme.spacing(1, 1, 2, 1)
   }
-}));
+}), {
+  name: "CatalogReactUserListPicker"
+});
 function getFilterGroups(orgName) {
   return [
     {
@@ -1479,6 +1589,7 @@ Object.defineProperty(exports, 'CATALOG_FILTER_EXISTS', {
   }
 });
 exports.AsyncEntityProvider = AsyncEntityProvider;
+exports.DefaultStarredEntitiesApi = DefaultStarredEntitiesApi;
 exports.EntityContext = EntityContext;
 exports.EntityKindFilter = EntityKindFilter;
 exports.EntityKindPicker = EntityKindPicker;
@@ -1519,6 +1630,7 @@ exports.isOwnerOf = isOwnerOf;
 exports.reduceCatalogFilters = reduceCatalogFilters;
 exports.reduceEntityFilters = reduceEntityFilters;
 exports.rootRoute = rootRoute;
+exports.starredEntitiesApiRef = starredEntitiesApiRef;
 exports.useEntity = useEntity;
 exports.useEntityCompoundName = useEntityCompoundName;
 exports.useEntityFromUrl = useEntityFromUrl;
@@ -1529,4 +1641,5 @@ exports.useEntityTypeFilter = useEntityTypeFilter;
 exports.useOwnUser = useOwnUser;
 exports.useRelatedEntities = useRelatedEntities;
 exports.useStarredEntities = useStarredEntities;
+exports.useStarredEntity = useStarredEntity;
 //# sourceMappingURL=index.cjs.js.map