@backstage/plugin-catalog-react 0.6.12 → 0.6.14-next.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @backstage/plugin-catalog-react
 
+## 0.6.14-next.0
+
+### Patch Changes
+
+- 680e7c7452: Updated `useEntityListProvider` and catalog pickers to respond to external changes to query parameters in the URL, such as two sidebar links that apply different catalog filters.
+- 7bb1bde7f6: Minor API cleanups
+- Updated dependencies
+  - @backstage/core-components@0.8.8-next.0
+
+## 0.6.13
+
+### Patch Changes
+
+- f7257dff6f: The `<Link />` component now accepts a `noTrack` prop, which prevents the `click` event from being captured by the Analytics API. This can be used if tracking is explicitly not warranted, or in order to use custom link tracking in specific situations.
+- 300f8cdaee: Fix bug: previously the filter would be set to "all" on page load, even if the
+  `initiallySelectedFilter` on the `DefaultCatalogPage` was set to something else,
+  or a different query parameter was supplied. Now, the prop and query parameters
+  control the filter as expected. Additionally, after this change any filters
+  which match 0 items will be disabled, and the filter will be reverted to 'all'
+  if they're set on page load.
+- 6acc8f7db7: Add caching to the useEntityPermission hook
+
+  The hook now caches the authorization decision based on the permission + the entity, and returns the cache match value as the default `allowed` value while loading. This helps avoid flicker in UI elements that would be conditionally rendered based on the `allowed` result of this hook.
+
+- Updated dependencies
+  - @backstage/core-components@0.8.7
+
+## 0.6.13-next.1
+
+### Patch Changes
+
+- f7257dff6f: The `<Link />` component now accepts a `noTrack` prop, which prevents the `click` event from being captured by the Analytics API. This can be used if tracking is explicitly not warranted, or in order to use custom link tracking in specific situations.
+- 300f8cdaee: Fix bug: previously the filter would be set to "all" on page load, even if the
+  `initiallySelectedFilter` on the `DefaultCatalogPage` was set to something else,
+  or a different query parameter was supplied. Now, the prop and query parameters
+  control the filter as expected. Additionally, after this change any filters
+  which match 0 items will be disabled, and the filter will be reverted to 'all'
+  if they're set on page load.
+- 6acc8f7db7: Add caching to the useEntityPermission hook
+
+  The hook now caches the authorization decision based on the permission + the entity, and returns the cache match value as the default `allowed` value while loading. This helps avoid flicker in UI elements that would be conditionally rendered based on the `allowed` result of this hook.
+
+- Updated dependencies
+  - @backstage/core-components@0.8.7-next.1
+
+## 0.6.13-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.8.7-next.0
+
 ## 0.6.12
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -294,16 +294,18 @@ const EntityListProvider = ({
   const isMounted = useMountedState__default["default"]();
   const catalogApi = corePluginApi.useApi(catalogApiRef);
   const [requestedFilters, setRequestedFilters] = React.useState({});
-  const [outputState, setOutputState] = React.useState(() => {
+  const location = reactRouter.useLocation();
+  const queryParameters = React.useMemo(() => {
     var _a;
-    const query = qs__default["default"].parse(window.location.search, {
+    return (_a = qs__default["default"].parse(location.search, {
       ignoreQueryPrefix: true
-    });
+    }).filters) != null ? _a : {};
+  }, [location]);
+  const [outputState, setOutputState] = React.useState(() => {
     return {
       appliedFilters: {},
       entities: [],
-      backendEntities: [],
-      queryParameters: (_a = query.filters) != null ? _a : {}
+      backendEntities: []
     };
   });
   const [{ loading, error }, refresh] = useAsyncFn__default["default"](async () => {
@@ -326,26 +328,24 @@ const EntityListProvider = ({
       setOutputState({
         appliedFilters: requestedFilters,
         backendEntities: response.items,
-        entities: response.items.filter(entityFilter),
-        queryParameters: queryParams
+        entities: response.items.filter(entityFilter)
       });
     } else {
       setOutputState({
         appliedFilters: requestedFilters,
         backendEntities: outputState.backendEntities,
-        entities: outputState.backendEntities.filter(entityFilter),
-        queryParameters: queryParams
+        entities: outputState.backendEntities.filter(entityFilter)
       });
     }
     if (isMounted()) {
-      const oldParams = qs__default["default"].parse(window.location.search, {
+      const oldParams = qs__default["default"].parse(location.search, {
         ignoreQueryPrefix: true
       });
       const newParams = qs__default["default"].stringify({ ...oldParams, filters: queryParams }, { addQueryPrefix: true });
       const newUrl = `${window.location.pathname}${newParams}`;
       (_a = window.history) == null ? void 0 : _a.replaceState(null, document.title, newUrl);
     }
-  }, [catalogApi, requestedFilters, outputState], { loading: true });
+  }, [catalogApi, queryParameters, requestedFilters, outputState], { loading: true });
   useDebounce__default["default"](refresh, 10, [requestedFilters]);
   const updateFilters = React.useCallback((update) => {
     setRequestedFilters((prevFilters) => {
@@ -358,10 +358,10 @@ const EntityListProvider = ({
     entities: outputState.entities,
     backendEntities: outputState.backendEntities,
     updateFilters,
-    queryParameters: outputState.queryParameters,
+    queryParameters,
     loading,
     error
-  }), [outputState, updateFilters, loading, error]);
+  }), [outputState, updateFilters, queryParameters, loading, error]);
   return /* @__PURE__ */ React__default["default"].createElement(EntityListContext.Provider, {
     value
   }, children);
@@ -548,8 +548,13 @@ function useEntityTypeFilter() {
     queryParameters,
     updateFilters
   } = useEntityListProvider();
-  const queryParamTypes = [queryParameters.type].flat().filter(Boolean);
+  const queryParamTypes = React.useMemo(() => [queryParameters.type].flat().filter(Boolean), [queryParameters]);
   const [selectedTypes, setSelectedTypes] = React.useState(queryParamTypes.length ? queryParamTypes : (_a = typeFilter == null ? void 0 : typeFilter.getTypes()) != null ? _a : []);
+  React.useEffect(() => {
+    if (queryParamTypes.length) {
+      setSelectedTypes(queryParamTypes);
+    }
+  }, [queryParamTypes]);
   const [availableTypes, setAvailableTypes] = React.useState([]);
   const kind = React.useMemo(() => kindFilter == null ? void 0 : kindFilter.value, [kindFilter]);
   const {
@@ -796,11 +801,9 @@ function useEntityPermission(permission) {
   return { loading: false, allowed, error: permissionError };
 }
 
-const EntityKindPicker = ({
-  initialFilter,
-  hidden
-}) => {
+const EntityKindPicker = (props) => {
   var _a;
+  const { initialFilter, hidden } = props;
   const { updateFilters, queryParameters } = useEntityListProvider();
   const [selectedKind] = React.useState((_a = [queryParameters.kind].flat()[0]) != null ? _a : initialFilter);
   React.useEffect(() => {
@@ -830,8 +833,13 @@ const EntityLifecyclePicker = () => {
   var _a, _b;
   const classes = useStyles$6();
   const { updateFilters, backendEntities, filters, queryParameters } = useEntityListProvider();
-  const queryParamLifecycles = [queryParameters.lifecycles].flat().filter(Boolean);
+  const queryParamLifecycles = React.useMemo(() => [queryParameters.lifecycles].flat().filter(Boolean), [queryParameters]);
   const [selectedLifecycles, setSelectedLifecycles] = React.useState(queryParamLifecycles.length ? queryParamLifecycles : (_b = (_a = filters.lifecycles) == null ? void 0 : _a.values) != null ? _b : []);
+  React.useEffect(() => {
+    if (queryParamLifecycles.length) {
+      setSelectedLifecycles(queryParamLifecycles);
+    }
+  }, [queryParamLifecycles]);
   React.useEffect(() => {
     updateFilters({
       lifecycles: selectedLifecycles.length ? new EntityLifecycleFilter(selectedLifecycles) : void 0
@@ -891,8 +899,13 @@ const EntityOwnerPicker = () => {
   var _a, _b;
   const classes = useStyles$5();
   const { updateFilters, backendEntities, filters, queryParameters } = useEntityListProvider();
-  const queryParamOwners = [queryParameters.owners].flat().filter(Boolean);
+  const queryParamOwners = React.useMemo(() => [queryParameters.owners].flat().filter(Boolean), [queryParameters]);
   const [selectedOwners, setSelectedOwners] = React.useState(queryParamOwners.length ? queryParamOwners : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []);
+  React.useEffect(() => {
+    if (queryParamOwners.length) {
+      setSelectedOwners(queryParamOwners);
+    }
+  }, [queryParamOwners]);
   React.useEffect(() => {
     updateFilters({
       owners: selectedOwners.length ? new EntityOwnerFilter(selectedOwners) : void 0
@@ -976,9 +989,8 @@ const EntitySearchBar = () => {
   })));
 };
 
-function createEntityRefColumn({
-  defaultKind
-}) {
+function createEntityRefColumn(options) {
+  const { defaultKind } = options;
   function formatContent(entity) {
     var _a;
     return ((_a = entity.metadata) == null ? void 0 : _a.title) || formatEntityRefTitle(entity, {
@@ -1118,13 +1130,14 @@ const useStyles$3 = core.makeStyles((theme) => ({
     justifyContent: "center"
   }
 }));
-function EntityTable({
-  entities,
-  title,
-  emptyContent,
-  variant = "gridItem",
-  columns
-}) {
+function EntityTable(props) {
+  const {
+    entities,
+    title,
+    emptyContent,
+    variant = "gridItem",
+    columns
+  } = props;
   const classes = useStyles$3();
   const tableStyle = {
     minWidth: "0",
@@ -1168,8 +1181,13 @@ const EntityTagPicker = () => {
   var _a, _b;
   const classes = useStyles$2();
   const { updateFilters, backendEntities, filters, queryParameters } = useEntityListProvider();
-  const queryParamTags = [queryParameters.tags].flat().filter(Boolean);
+  const queryParamTags = React.useMemo(() => [queryParameters.tags].flat().filter(Boolean), [queryParameters]);
   const [selectedTags, setSelectedTags] = React.useState(queryParamTags.length ? queryParamTags : (_b = (_a = filters.tags) == null ? void 0 : _a.values) != null ? _b : []);
+  React.useEffect(() => {
+    if (queryParamTags.length) {
+      setSelectedTags(queryParamTags);
+    }
+  }, [queryParamTags]);
   React.useEffect(() => {
     updateFilters({
       tags: selectedTags.length ? new EntityTagFilter(selectedTags) : void 0
@@ -1516,11 +1534,11 @@ const UserListPicker = ({
   initialFilter,
   availableFilters
 }) => {
-  var _a, _b;
+  var _a;
   const classes = useStyles();
   const configApi = corePluginApi.useApi(corePluginApi.configApiRef);
   const orgName = (_a = configApi.getOptionalString("organization.name")) != null ? _a : "Company";
-  const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider();
+  const { filters, updateFilters, backendEntities, queryParameters, loading } = useEntityListProvider();
   const userAndGroupFilterIds = ["starred", "all"];
   const filterGroups = getFilterGroups(orgName).map((filterGroup) => ({
     ...filterGroup,
@@ -1530,28 +1548,29 @@ const UserListPicker = ({
   const { isOwnedEntity } = useEntityOwnership();
   const ownedFilter = React.useMemo(() => new UserListFilter("owned", isOwnedEntity, isStarredEntity), [isOwnedEntity, isStarredEntity]);
   const starredFilter = React.useMemo(() => new UserListFilter("starred", isOwnedEntity, isStarredEntity), [isOwnedEntity, isStarredEntity]);
-  const [entitiesWithoutUserFilter, setEntitiesWithoutUserFilter] = React.useState(backendEntities);
-  const totalOwnedUserEntities = entitiesWithoutUserFilter.filter((entity) => ownedFilter.filterEntity(entity)).length;
-  const [selectedUserFilter, setSelectedUserFilter] = React.useState(totalOwnedUserEntities > 0 ? (_b = [queryParameters.user].flat()[0]) != null ? _b : initialFilter : "all");
+  const queryParamUserFilter = React.useMemo(() => [queryParameters.user].flat()[0], [queryParameters]);
+  const [selectedUserFilter, setSelectedUserFilter] = React.useState(queryParamUserFilter != null ? queryParamUserFilter : initialFilter);
+  const entitiesWithoutUserFilter = React.useMemo(() => backendEntities.filter(reduceEntityFilters(lodash.compact(Object.values({ ...filters, user: void 0 })))), [filters, backendEntities]);
+  const filterCounts = React.useMemo(() => ({
+    all: entitiesWithoutUserFilter.length,
+    starred: entitiesWithoutUserFilter.filter((entity) => starredFilter.filterEntity(entity)).length,
+    owned: entitiesWithoutUserFilter.filter((entity) => ownedFilter.filterEntity(entity)).length
+  }), [entitiesWithoutUserFilter, starredFilter, ownedFilter]);
+  React.useEffect(() => {
+    if (queryParamUserFilter) {
+      setSelectedUserFilter(queryParamUserFilter);
+    }
+  }, [queryParamUserFilter]);
+  React.useEffect(() => {
+    if (!loading && !!selectedUserFilter && selectedUserFilter !== "all" && filterCounts[selectedUserFilter] === 0) {
+      setSelectedUserFilter("all");
+    }
+  }, [loading, filterCounts, selectedUserFilter, setSelectedUserFilter]);
   React.useEffect(() => {
     updateFilters({
       user: selectedUserFilter ? new UserListFilter(selectedUserFilter, isOwnedEntity, isStarredEntity) : void 0
     });
   }, [selectedUserFilter, isOwnedEntity, isStarredEntity, updateFilters]);
-  React.useEffect(() => {
-    const filterFn = reduceEntityFilters(lodash.compact(Object.values({ ...filters, user: void 0 })));
-    setEntitiesWithoutUserFilter(backendEntities.filter(filterFn));
-  }, [filters, backendEntities]);
-  function getFilterCount(id) {
-    switch (id) {
-      case "owned":
-        return totalOwnedUserEntities;
-      case "starred":
-        return entitiesWithoutUserFilter.filter((entity) => starredFilter.filterEntity(entity)).length;
-      default:
-        return entitiesWithoutUserFilter.length;
-    }
-  }
   return /* @__PURE__ */ React__default["default"].createElement(core.Card, {
     className: classes.root
   }, filterGroups.map((group) => /* @__PURE__ */ React__default["default"].createElement(React.Fragment, {
@@ -1565,22 +1584,23 @@ const UserListPicker = ({
     disablePadding: true,
     dense: true
   }, group.items.map((item) => {
-    var _a2, _b2;
+    var _a2, _b;
     return /* @__PURE__ */ React__default["default"].createElement(core.MenuItem, {
       key: item.id,
       button: true,
       divider: true,
       onClick: () => setSelectedUserFilter(item.id),
       selected: item.id === ((_a2 = filters.user) == null ? void 0 : _a2.value),
-      className: classes.menuItem
+      className: classes.menuItem,
+      disabled: filterCounts[item.id] === 0,
+      "data-testid": `user-picker-${item.id}`
     }, item.icon && /* @__PURE__ */ React__default["default"].createElement(core.ListItemIcon, {
       className: classes.listIcon
     }, /* @__PURE__ */ React__default["default"].createElement(item.icon, {
       fontSize: "small"
     })), /* @__PURE__ */ React__default["default"].createElement(core.ListItemText, null, /* @__PURE__ */ React__default["default"].createElement(core.Typography, {
-      variant: "body1",
-      "data-testid": `user-picker-${item.id}`
-    }, item.label)), /* @__PURE__ */ React__default["default"].createElement(core.ListItemSecondaryAction, null, (_b2 = getFilterCount(item.id)) != null ? _b2 : "-"));
+      variant: "body1"
+    }, item.label)), /* @__PURE__ */ React__default["default"].createElement(core.ListItemSecondaryAction, null, (_b = filterCounts[item.id]) != null ? _b : "-"));
   }))))));
 };
 
@@ -1596,17 +1616,25 @@ const MockEntityListContextProvider = ({
       return { ...prevFilters, ...newFilters };
     });
   }, []);
-  const defaultContext = {
+  const defaultValues = React.useMemo(() => ({
     entities: [],
     backendEntities: [],
-    updateFilters,
-    filters,
-    loading: false,
     queryParameters: {}
-  };
-  const { filters: _, ...otherContextFields } = value != null ? value : {};
+  }), []);
+  const resolvedValue = React.useMemo(() => {
+    var _a2, _b, _c, _d, _e;
+    return {
+      entities: (_a2 = value == null ? void 0 : value.entities) != null ? _a2 : defaultValues.entities,
+      backendEntities: (_b = value == null ? void 0 : value.backendEntities) != null ? _b : defaultValues.backendEntities,
+      updateFilters: (_c = value == null ? void 0 : value.updateFilters) != null ? _c : updateFilters,
+      filters,
+      loading: (_d = value == null ? void 0 : value.loading) != null ? _d : false,
+      queryParameters: (_e = value == null ? void 0 : value.queryParameters) != null ? _e : defaultValues.queryParameters,
+      error: value == null ? void 0 : value.error
+    };
+  }, [value, defaultValues, filters, updateFilters]);
   return /* @__PURE__ */ React__default["default"].createElement(EntityListContext.Provider, {
-    value: { ...defaultContext, ...otherContextFields }
+    value: resolvedValue
   }, children);
 };