@backstage/plugin-catalog-react 1.7.0-next.1 → 1.7.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @backstage/plugin-catalog-react
 
+## 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
+
+- d68692aee97e: Make `useRelatedEntities` use `getEntitiesByRefs` under the hood
+- Updated dependencies
+  - @backstage/theme@0.4.0-next.1
+  - @backstage/core-components@0.13.2-next.2
+  - @backstage/core-plugin-api@1.5.2-next.0
+  - @backstage/plugin-permission-react@0.4.13-next.0
+
 ## 1.7.0-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.7.0-next.1",
+  "version": "1.7.0-next.3",
   "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}.
@@ -569,7 +575,12 @@ declare function useEntityTypeFilter(): {
     setSelectedTypes: (types: string[]) => void;
 };
 
-/** @public */
+/**
+ * Fetches all entities that appear in the entity's relations, optionally
+ * filtered by relation type and kind.
+ *
+ * @public
+ */
 declare function useRelatedEntities(entity: Entity, relationFilter: {
     type?: string;
     kind?: string;
@@ -668,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

@@ -8,7 +8,7 @@ import { Select, Link, Progress, ErrorPanel, ResponseErrorPanel, OverflowTooltip
 import { ANNOTATION_SOURCE_LOCATION, parseLocationRef, stringifyEntityRef, parseEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, getCompoundEntityRef, isUserEntity, isGroupEntity, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
 import { g as getEntityRelations } from './esm/useEntity-de64059a.esm.js';
 export { A as AsyncEntityProvider, E as EntityProvider, g as getEntityRelations, a as useAsyncEntity, u as useEntity } from './esm/useEntity-de64059a.esm.js';
-import { compact, isEqual, groupBy, chunk, debounce } from 'lodash';
+import { compact, isEqual, debounce } from 'lodash';
 import qs from 'qs';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
@@ -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';
@@ -38,7 +38,7 @@ import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import WorkIcon from '@material-ui/icons/Work';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
-import groupBy$1 from 'lodash/groupBy';
+import groupBy from 'lodash/groupBy';
 import DialogContentText$1 from '@material-ui/core/DialogContentText';
 import YAML from 'yaml';
 import Alert$1 from '@material-ui/lab/Alert';
@@ -489,7 +489,6 @@ function useEntityTypeFilter() {
   };
 }
 
-const BATCH_SIZE = 20;
 function useRelatedEntities(entity, relationFilter) {
   var _a, _b;
   const filterByTypeLower = (_a = relationFilter == null ? void 0 : relationFilter.type) == null ? void 0 : _a.toLocaleLowerCase("en-US");
@@ -501,43 +500,16 @@ function useRelatedEntities(entity, relationFilter) {
     error
   } = useAsync(async () => {
     var _a2;
-    const relations = (_a2 = entity.relations) == null ? void 0 : _a2.map((r) => ({ type: r.type, target: parseEntityRef(r.targetRef) })).filter(
-      (r) => (!filterByTypeLower || r.type.toLocaleLowerCase("en-US") === filterByTypeLower) && (!filterByKindLower || r.target.kind === filterByKindLower)
+    const relations = (_a2 = entity.relations) == null ? void 0 : _a2.filter(
+      (r) => (!filterByTypeLower || r.type.toLocaleLowerCase("en-US") === filterByTypeLower) && (!filterByKindLower || parseEntityRef(r.targetRef).kind === filterByKindLower)
     );
-    if (!relations) {
+    if (!(relations == null ? void 0 : relations.length)) {
       return [];
     }
-    const relationsByKindAndNamespace = Object.values(
-      groupBy(relations, ({ target }) => {
-        return `${target.kind}:${target.namespace}`.toLocaleLowerCase("en-US");
-      })
-    );
-    const batchedRelationsByKindAndNamespace = [];
-    for (const rs of relationsByKindAndNamespace) {
-      batchedRelationsByKindAndNamespace.push({
-        // All relations in a group have the same kind and namespace, so its arbitrary which we pick
-        kind: rs[0].target.kind,
-        namespace: rs[0].target.namespace,
-        nameBatches: chunk(
-          rs.map((r) => r.target.name),
-          BATCH_SIZE
-        )
-      });
-    }
-    const results = await Promise.all(
-      batchedRelationsByKindAndNamespace.flatMap((rs) => {
-        return rs.nameBatches.map((names) => {
-          return catalogApi.getEntities({
-            filter: {
-              kind: rs.kind,
-              "metadata.namespace": rs.namespace,
-              "metadata.name": names
-            }
-          });
-        });
-      })
-    );
-    return results.flatMap((r) => r.items);
+    const { items } = await catalogApi.getEntitiesByRefs({
+      entityRefs: relations.map((r) => r.targetRef)
+    });
+    return items.filter((x) => Boolean(x));
   }, [entity, filterByTypeLower, filterByKindLower]);
   return {
     entities,
@@ -903,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: [
@@ -952,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]
@@ -964,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);
@@ -996,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("");
@@ -1005,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;
           })
@@ -1013,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,
           {
@@ -1026,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 })
+            ))
           }
         );
       },
@@ -1049,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"
@@ -1061,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",
@@ -1996,7 +2089,7 @@ function OverviewPage(props) {
     relations = [],
     status = {}
   } = props.entity;
-  const groupedRelations = groupBy$1(
+  const groupedRelations = groupBy(
     sortBy(relations, (r) => r.targetRef),
     "type"
   );