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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.7.0-next.2",
+  "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}.
@@ -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",