@backstage/plugin-catalog-react 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @backstage/plugin-catalog-react
 
+## 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

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 {
@@ -723,6 +788,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"
 });
@@ -731,6 +801,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 : []);
@@ -772,11 +843,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"
 });
@@ -785,6 +862,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 : []);
@@ -823,20 +901,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(() => {
@@ -845,9 +927,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),
@@ -870,7 +953,8 @@ function createEntityRefColumn({
   defaultKind
 }) {
   function formatContent(entity) {
-    return formatEntityRefTitle(entity, {
+    var _a;
+    return ((_a = entity.metadata) == null ? void 0 : _a.title) || formatEntityRefTitle(entity, {
       defaultKind
     });
   }
@@ -1000,7 +1084,7 @@ const componentEntityColumns = [
   createMetadataDescriptionColumn()
 ];
 
-const useStyles$2 = core.makeStyles((theme) => ({
+const useStyles$3 = core.makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1014,7 +1098,7 @@ function EntityTable({
   variant = "gridItem",
   columns
 }) {
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1042,6 +1126,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"
 });
@@ -1050,6 +1139,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 : []);
@@ -1088,6 +1178,7 @@ const EntityTagPicker = () => {
     }),
     renderInput: (params) => /* @__PURE__ */ React__default['default'].createElement(core.TextField, {
       ...params,
+      className: classes.input,
       variant: "outlined"
     })
   }));
@@ -1133,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) {
@@ -1358,7 +1448,9 @@ const useStyles = core.makeStyles((theme) => ({
   groupWrapper: {
     margin: theme.spacing(1, 1, 2, 1)
   }
-}));
+}), {
+  name: "CatalogReactUserListPicker"
+});
 function getFilterGroups(orgName) {
   return [
     {
@@ -1490,6 +1582,7 @@ Object.defineProperty(exports, 'CATALOG_FILTER_EXISTS', {
   }
 });
 exports.AsyncEntityProvider = AsyncEntityProvider;
+exports.DefaultStarredEntitiesApi = DefaultStarredEntitiesApi;
 exports.EntityContext = EntityContext;
 exports.EntityKindFilter = EntityKindFilter;
 exports.EntityKindPicker = EntityKindPicker;
@@ -1530,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;
@@ -1540,4 +1634,5 @@ exports.useEntityTypeFilter = useEntityTypeFilter;
 exports.useOwnUser = useOwnUser;
 exports.useRelatedEntities = useRelatedEntities;
 exports.useStarredEntities = useStarredEntities;
+exports.useStarredEntity = useStarredEntity;
 //# sourceMappingURL=index.cjs.js.map