@backstage/plugin-catalog-react 1.7.0-next.2 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @backstage/plugin-catalog-react
 
+## 1.7.0
+
+### Minor Changes
+
+- cb4c15989b6b: The `EntityOwnerPicker` component has undergone improvements to enhance its performance.
+  The previous implementation inferred users and groups displayed by the `EntityOwnerPicker` component based on the entities available in the `EntityListContext`. The updated version no longer relies on the `EntityListContext` for inference, allowing for better decoupling and improved performance.
+
+  The component now loads entities asynchronously, resulting in improved performance and responsiveness. A new `mode` prop has been introduced which provides two different behaviours:
+
+  - `<EntityOwnerPicker mode="owners-only" />`: loads the owners data asynchronously using the facets endpoint. The data is kept in memory and rendered asynchronously as the user scrolls. This is the default mode and is supposed to be retro-compatible with the previous implementation.
+
+  - `<EntityOwnerPicker mode="all" />` loads all users and groups present in the catalog asynchronously. The data is loaded in batches as the user scrolls. This is more efficient than `owners-only`, but has the drawback of displaying users and groups who aren't owner of any entity.
+
+### Patch Changes
+
+- d68692aee97e: Make `useRelatedEntities` use `getEntitiesByRefs` under the hood
+- 429319d080cd: `EntityAutocompletePicker` add `initialSelectedOptions` prop
+- 429319d080cd: `EntityLifecycleFilter` loads data using the facets endpoint
+- Updated dependencies
+  - @backstage/core-plugin-api@1.5.2
+  - @backstage/catalog-client@1.4.2
+  - @backstage/core-components@0.13.2
+  - @backstage/types@1.1.0
+  - @backstage/theme@0.4.0
+  - @backstage/integration@1.5.0
+  - @backstage/catalog-model@1.4.0
+  - @backstage/errors@1.2.0
+  - @backstage/plugin-permission-react@0.4.13
+  - @backstage/version-bridge@1.0.4
+  - @backstage/plugin-catalog-common@1.0.14
+  - @backstage/plugin-permission-common@0.7.6
+
+## 1.7.0-next.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.13.2-next.3
+  - @backstage/catalog-model@1.4.0-next.1
+  - @backstage/catalog-client@1.4.2-next.2
+  - @backstage/core-plugin-api@1.5.2-next.0
+  - @backstage/errors@1.2.0-next.0
+  - @backstage/integration@1.5.0-next.0
+  - @backstage/theme@0.4.0-next.1
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.4
+  - @backstage/plugin-catalog-common@1.0.14-next.1
+  - @backstage/plugin-permission-common@0.7.6-next.0
+  - @backstage/plugin-permission-react@0.4.13-next.0
+
 ## 1.7.0-next.2
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.7.0-next.2",
+  "version": "1.7.0",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/index.d.ts

@@ -95,8 +95,14 @@ declare const EntityLifecyclePicker: (props: {
 
 /** @public */
 type CatalogReactEntityOwnerPickerClassKey = 'input';
+/**
+ * @public
+ */
+type EntityOwnerPickerProps = {
+    mode?: 'owners-only' | 'all';
+};
 /** @public */
-declare const EntityOwnerPicker: () => JSX.Element | null;
+declare const EntityOwnerPicker: (props?: EntityOwnerPickerProps) => JSX.Element | null;
 
 /**
  * Props for {@link EntityRefLink}.
@@ -673,4 +679,4 @@ type EntitySourceLocation = {
 /** @public */
 declare function getEntitySourceLocation(entity: Entity, scmIntegrationsApi: ScmIntegrationRegistry): EntitySourceLocation | undefined;
 
-export { AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityOwnerPickerProps, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };

package/dist/index.esm.js

@@ -23,7 +23,7 @@ import { Autocomplete, Alert } from '@material-ui/lab';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import classNames from 'classnames';
-import { useDebouncedEffect } from '@react-hookz/web';
+import { useMountEffect, useDebouncedEffect } from '@react-hookz/web';
 import PersonIcon from '@material-ui/icons/Person';
 import GroupIcon from '@material-ui/icons/Group';
 import get from 'lodash/get';
@@ -875,42 +875,105 @@ function humanizeEntity(entity, defaultName) {
   return defaultName;
 }
 
-const useStyles$d = makeStyles(
-  {
-    input: {}
-  },
-  {
-    name: "CatalogReactEntityOwnerPicker"
+function useFacetsEntities({ enabled }) {
+  const catalogApi = useApi(catalogApiRef);
+  const [facetsPromise] = useState(async () => {
+    if (!enabled) {
+      return [];
+    }
+    const facet = "relations.ownedBy";
+    return catalogApi.getEntityFacets({ facets: [facet] }).then(
+      (response) => response.facets[facet].map((e) => e.value).map((ref) => {
+        const { kind, name, namespace } = parseEntityRef(ref);
+        return {
+          apiVersion: "backstage.io/v1beta1",
+          kind,
+          metadata: { name, namespace }
+        };
+      }).sort(
+        (a, b) => (a.metadata.namespace || "").localeCompare(
+          b.metadata.namespace || "",
+          "en-US"
+        ) || a.metadata.name.localeCompare(b.metadata.name, "en-US") || a.kind.localeCompare(b.kind, "en-US")
+      )
+    ).catch(() => []);
+  });
+  return useAsyncFn(
+    async (request, options) => {
+      var _a;
+      const facets = await facetsPromise;
+      if (!facets) {
+        return {
+          items: []
+        };
+      }
+      const limit = (_a = options == null ? void 0 : options.limit) != null ? _a : 20;
+      const { text, start } = decodeCursor(request);
+      const filteredRefs = facets.filter((e) => filterEntity(text, e));
+      const end = start + limit;
+      return {
+        items: filteredRefs.slice(0, end),
+        ...encodeCursor({
+          entities: filteredRefs,
+          limit: end,
+          payload: {
+            text,
+            start: end
+          }
+        })
+      };
+    },
+    [facetsPromise],
+    { loading: true, value: { items: [] } }
+  );
+}
+function decodeCursor(request) {
+  if (isFacetsResponse(request) && request.cursor) {
+    return JSON.parse(atob(request.cursor));
   }
-);
-const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-const EntityOwnerPicker = () => {
-  var _a, _b, _c;
-  const classes = useStyles$d();
-  const {
-    updateFilters,
-    filters,
-    queryParameters: { owners: ownersParameter }
-  } = useEntityList();
+  return {
+    text: request.text || "",
+    start: 0
+  };
+}
+function isFacetsResponse(request) {
+  return !!request.cursor;
+}
+function encodeCursor({
+  entities,
+  limit,
+  payload
+}) {
+  if (entities.length > limit) {
+    return { cursor: btoa(JSON.stringify(payload)) };
+  }
+  return {};
+}
+function filterEntity(text, entity) {
+  var _a;
+  const normalizedText = text.trim();
+  return entity.kind.includes(normalizedText) || ((_a = entity.metadata.namespace) == null ? void 0 : _a.includes(normalizedText)) || entity.metadata.name.includes(normalizedText);
+}
+
+function useQueryEntities() {
   const catalogApi = useApi(catalogApiRef);
-  const [text, setText] = useState("");
-  const [{ value, loading }, handleFetch] = useAsyncFn(
-    async (request) => {
+  return useAsyncFn(
+    async (request, options) => {
+      var _a;
       const initialRequest = request;
       const cursorRequest = request;
-      const limit = 20;
+      const limit = (_a = options == null ? void 0 : options.limit) != null ? _a : 20;
       if (cursorRequest.cursor) {
-        const response = await catalogApi.queryEntities({
+        const response2 = await catalogApi.queryEntities({
           cursor: cursorRequest.cursor,
           limit
         });
         return {
-          ...response,
-          items: [...cursorRequest.prev, ...response.items]
+          cursor: response2.pageInfo.nextCursor,
+          items: [...cursorRequest.items, ...response2.items]
         };
       }
-      return catalogApi.queryEntities({
+      const response = await catalogApi.queryEntities({
         fullTextFilter: {
           term: initialRequest.text || "",
           fields: [
@@ -924,11 +987,84 @@ const EntityOwnerPicker = () => {
         orderFields: [{ field: "metadata.name", order: "asc" }],
         limit
       });
+      return {
+        cursor: response.pageInfo.nextCursor,
+        items: response.items
+      };
     },
-    [text]
+    [],
+    { loading: true }
   );
-  useDebouncedEffect(() => handleFetch({ text }), [text], 250);
-  const availableOwners = (value == null ? void 0 : value.items) || [];
+}
+
+function useFetchEntities({
+  mode,
+  initialSelectedOwnersRefs
+}) {
+  const isOwnersOnlyMode = mode === "owners-only";
+  const queryEntitiesResponse = useQueryEntities();
+  const facetsEntitiesResponse = useFacetsEntities({
+    enabled: isOwnersOnlyMode
+  });
+  const [state, handleFetch] = isOwnersOnlyMode ? facetsEntitiesResponse : queryEntitiesResponse;
+  return [
+    state,
+    handleFetch,
+    useSelectedOwners({
+      enabled: !isOwnersOnlyMode,
+      initialSelectedOwnersRefs
+    })
+  ];
+}
+function useSelectedOwners({
+  enabled,
+  initialSelectedOwnersRefs
+}) {
+  const allEntities = useRef({});
+  const catalogApi = useApi(catalogApiRef);
+  const [, handleFetch] = useAsyncFn(async () => {
+    const initialSelectedEntities = await catalogApi.getEntitiesByRefs({
+      entityRefs: initialSelectedOwnersRefs
+    });
+    initialSelectedEntities.items.forEach((e) => {
+      if (e) {
+        allEntities.current[stringifyEntityRef(e)] = e;
+      }
+    });
+  }, []);
+  useMountEffect(() => {
+    if (enabled && initialSelectedOwnersRefs.length > 0) {
+      handleFetch();
+    }
+  });
+  return {
+    getEntity: (entityRef) => allEntities.current[entityRef],
+    setEntity: (entity) => {
+      allEntities.current[stringifyEntityRef(entity)] = entity;
+    }
+  };
+}
+
+const useStyles$d = makeStyles(
+  {
+    input: {}
+  },
+  {
+    name: "CatalogReactEntityOwnerPicker"
+  }
+);
+const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+const EntityOwnerPicker = (props) => {
+  var _a, _b, _c;
+  const classes = useStyles$d();
+  const { mode = "owners-only" } = props || {};
+  const {
+    updateFilters,
+    filters,
+    queryParameters: { owners: ownersParameter }
+  } = useEntityList();
+  const [text, setText] = useState("");
   const queryParamOwners = useMemo(
     () => [ownersParameter].flat().filter(Boolean),
     [ownersParameter]
@@ -936,7 +1072,12 @@ const EntityOwnerPicker = () => {
   const [selectedOwners, setSelectedOwners] = useState(
     queryParamOwners.length ? queryParamOwners : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []
   );
-  const { getEntity, setEntity } = useSelectedOwners(selectedOwners);
+  const [{ value, loading }, handleFetch, cache] = useFetchEntities({
+    mode,
+    initialSelectedOwnersRefs: selectedOwners
+  });
+  useDebouncedEffect(() => handleFetch({ text }), [text, handleFetch], 250);
+  const availableOwners = (value == null ? void 0 : value.items) || [];
   useEffect(() => {
     if (queryParamOwners.length) {
       const filter = new EntityOwnerFilter(queryParamOwners);
@@ -968,8 +1109,11 @@ const EntityOwnerPicker = () => {
         return o === v;
       },
       getOptionLabel: (o) => {
-        const entity = typeof o === "string" ? getEntity(o) || o : o;
-        return typeof entity === "string" ? entity : humanizeEntity(entity, entity.metadata.name);
+        const entity = typeof o === "string" ? cache.getEntity(o) || parseEntityRef(o, {
+          defaultKind: "group",
+          defaultNamespace: "default"
+        }) : o;
+        return humanizeEntity(entity, humanizeEntityRef(entity));
       },
       onChange: (_, owners) => {
         setText("");
@@ -977,7 +1121,7 @@ const EntityOwnerPicker = () => {
           owners.map((e) => {
             const entityRef = typeof e === "string" ? e : stringifyEntityRef(e);
             if (typeof e !== "string") {
-              setEntity(e);
+              cache.setEntity(e);
             }
             return entityRef;
           })
@@ -985,7 +1129,7 @@ const EntityOwnerPicker = () => {
       },
       filterOptions: (x) => x,
       renderOption: (entity, { selected }) => {
-        const isGroup = entity.kind === "Group";
+        const isGroup = entity.kind.toLocaleLowerCase("en-US") === "group";
         return /* @__PURE__ */ React.createElement(
           FormControlLabel,
           {
@@ -998,7 +1142,10 @@ const EntityOwnerPicker = () => {
               }
             ),
             onClick: (event) => event.preventDefault(),
-            label: /* @__PURE__ */ React.createElement(Box, { display: "flex", flexWrap: "wrap", alignItems: "center" }, isGroup ? /* @__PURE__ */ React.createElement(GroupIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(PersonIcon, { fontSize: "small" }), "\xA0", humanizeEntity(entity, entity.metadata.name))
+            label: /* @__PURE__ */ React.createElement(Box, { display: "flex", flexWrap: "wrap", alignItems: "center" }, isGroup ? /* @__PURE__ */ React.createElement(GroupIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(PersonIcon, { fontSize: "small" }), "\xA0", humanizeEntity(
+              entity,
+              humanizeEntityRef(entity, { defaultKind: entity.kind })
+            ))
           }
         );
       },
@@ -1021,11 +1168,8 @@ const EntityOwnerPicker = () => {
           const hasReachedEnd = Math.abs(
             element.scrollHeight - element.clientHeight - element.scrollTop
           ) < 1;
-          if (hasReachedEnd && (value == null ? void 0 : value.pageInfo.nextCursor)) {
-            handleFetch({
-              cursor: value.pageInfo.nextCursor,
-              prev: value.items
-            });
+          if (hasReachedEnd && (value == null ? void 0 : value.cursor)) {
+            handleFetch({ items: value.items, cursor: value.cursor });
           }
         },
         "data-testid": "owner-picker-listbox"
@@ -1033,29 +1177,6 @@ const EntityOwnerPicker = () => {
     }
   )));
 };
-function useSelectedOwners(initialSelectedOwnersRefs) {
-  const allEntities = useRef({});
-  const catalogApi = useApi(catalogApiRef);
-  useAsync(async () => {
-    if (initialSelectedOwnersRefs.length === 0) {
-      return;
-    }
-    const initialSelectedEntities = await catalogApi.getEntitiesByRefs({
-      entityRefs: initialSelectedOwnersRefs
-    });
-    initialSelectedEntities.items.forEach((e) => {
-      if (e) {
-        allEntities.current[stringifyEntityRef(e)] = e;
-      }
-    });
-  }, []);
-  return {
-    getEntity: (entityRef) => allEntities.current[entityRef],
-    setEntity: (entity) => {
-      allEntities.current[stringifyEntityRef(entity)] = entity;
-    }
-  };
-}
 
 const entityRouteRef = getOrCreateGlobalSingleton(
   "catalog:entity-route-ref",