@backstage/plugin-catalog-react 0.0.0-nightly-20219132255 → 0.0.0-nightly-202191822546

package/CHANGELOG.md

@@ -1,14 +1,25 @@
 # @backstage/plugin-catalog-react
 
-## 0.0.0-nightly-20219132255
+## 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/core-app-api@0.0.0-nightly-20219132255
-  - @backstage/core-components@0.0.0-nightly-20219132255
+  - @backstage/integration@0.6.8
+  - @backstage/core-app-api@0.1.17
+  - @backstage/core-components@0.7.0
 
 ## 0.5.2
 

package/dist/index.cjs.js

@@ -4,13 +4,14 @@ 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 core = require('@material-ui/core');
@@ -21,13 +22,14 @@ 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 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 +39,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 +48,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,
@@ -598,43 +663,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 {
@@ -1159,15 +1224,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) {
@@ -1518,6 +1582,7 @@ Object.defineProperty(exports, 'CATALOG_FILTER_EXISTS', {
   }
 });
 exports.AsyncEntityProvider = AsyncEntityProvider;
+exports.DefaultStarredEntitiesApi = DefaultStarredEntitiesApi;
 exports.EntityContext = EntityContext;
 exports.EntityKindFilter = EntityKindFilter;
 exports.EntityKindPicker = EntityKindPicker;
@@ -1558,6 +1623,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;
@@ -1568,4 +1634,5 @@ exports.useEntityTypeFilter = useEntityTypeFilter;
 exports.useOwnUser = useOwnUser;
 exports.useRelatedEntities = useRelatedEntities;
 exports.useStarredEntities = useStarredEntities;
+exports.useStarredEntity = useStarredEntity;
 //# sourceMappingURL=index.cjs.js.map