@backstage/plugin-catalog-react 1.9.0 → 1.9.2-next.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @backstage/plugin-catalog-react
 
+## 1.9.2-next.0
+
+### Patch Changes
+
+- 8587f067d2: Added pagination support to `EntityListProvider`.
+- aaa6fb3bc9: Minor updates for TypeScript 5.2.2+ compatibility
+- 4d9e3b39e4: Register component overrides in the global `OverrideComponentNameToClassKeys` provided by `@backstage/theme`. This will in turn will provide component style override types for `createUnifiedTheme`.
+- eee0ff2946: Fixed a issue where `CatalogPage` wasn't using the chosen `initiallySelectedFilter` as intended.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.8.1-next.0
+  - @backstage/core-components@0.13.9-next.0
+  - @backstage/theme@0.5.0-next.0
+  - @backstage/frontend-plugin-api@0.3.1-next.0
+  - @backstage/integration-react@1.1.22-next.0
+  - @backstage/plugin-permission-react@0.4.18-next.0
+  - @backstage/catalog-client@1.4.6
+  - @backstage/catalog-model@1.4.3
+  - @backstage/errors@1.2.3
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+  - @backstage/plugin-catalog-common@1.0.18
+  - @backstage/plugin-permission-common@0.7.10
+
 ## 1.9.0
 
 ### Minor Changes

package/alpha/package.json

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

package/dist/index.d.ts

@@ -678,17 +678,29 @@ type EntityListContextProps<EntityFilters extends DefaultEntityFilters = Default
     queryParameters: Partial<Record<keyof EntityFilters, string | string[]>>;
     loading: boolean;
     error?: Error;
+    pageInfo?: {
+        next?: () => void;
+        prev?: () => void;
+    };
 };
 /**
  * Creates new context for entity listing and filtering.
  * @public
  */
 declare const EntityListContext: React.Context<EntityListContextProps<any> | undefined>;
+/**
+ * @public
+ */
+type EntityListProviderProps = PropsWithChildren<{
+    pagination?: boolean | {
+        limit?: number;
+    };
+}>;
 /**
  * Provides entities and filters for a catalog listing.
  * @public
  */
-declare const EntityListProvider: <EntityFilters extends DefaultEntityFilters>(props: PropsWithChildren<{}>) => React.JSX.Element;
+declare const EntityListProvider: <EntityFilters extends DefaultEntityFilters>(props: EntityListProviderProps) => React.JSX.Element;
 /**
  * Hook for interacting with the entity list context provided by the {@link EntityListProvider}.
  * @public
@@ -883,6 +895,10 @@ type CatalogReactComponentsNameToClassKey = {
 type BackstageOverrides = Overrides & {
     [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial<StyleRules<CatalogReactComponentsNameToClassKey[Name]>>;
 };
+declare module '@backstage/theme' {
+    interface OverrideComponentNameToClassKeys extends CatalogReactComponentsNameToClassKey {
+    }
+}
 
 /**
  * Get the related entity references.
@@ -901,4 +917,4 @@ type EntitySourceLocation = {
 /** @public */
 declare function getEntitySourceLocation(entity: Entity, scmIntegrationsApi: typeof scmIntegrationsApiRef.T): EntitySourceLocation | undefined;
 
-export { AllowedEntityFilters, AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityDisplayNameClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityAutocompletePicker, EntityAutocompletePickerProps, EntityDisplayName, EntityDisplayNameProps, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityOwnerPickerProps, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityPresentationApi, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntityRefPresentation, EntityRefPresentationSnapshot, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, EntityUserFilter, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, defaultEntityPresentation, entityPresentationApiRef, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPresentation, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AllowedEntityFilters, AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityDisplayNameClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityAutocompletePicker, EntityAutocompletePickerProps, EntityDisplayName, EntityDisplayNameProps, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityListProviderProps, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityOwnerPickerProps, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityPresentationApi, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntityRefPresentation, EntityRefPresentationSnapshot, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, EntityUserFilter, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, defaultEntityPresentation, entityPresentationApiRef, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPresentation, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };

package/dist/index.esm.js

@@ -52,6 +52,7 @@ import YAML from 'yaml';
 import Alert$1 from '@material-ui/lab/Alert';
 import { assertError } from '@backstage/errors';
 import SettingsIcon from '@material-ui/icons/Settings';
+import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
 import Box$1 from '@material-ui/core/Box';
 import Button$1 from '@material-ui/core/Button';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
@@ -560,21 +561,26 @@ const EntityListProvider = (props) => {
     {}
   );
   const location = useLocation();
-  const queryParameters = useMemo(
-    () => {
-      var _a;
-      return (_a = qs.parse(location.search, {
-        ignoreQueryPrefix: true
-      }).filters) != null ? _a : {};
-    },
-    [location]
-  );
+  const enablePagination = props.pagination === true || typeof props.pagination === "object";
+  const limit = props.pagination && typeof props.pagination === "object" && typeof props.pagination.limit === "number" ? props.pagination.limit : 20;
+  const { queryParameters, cursor: initialCursor } = useMemo(() => {
+    var _a;
+    const parsed = qs.parse(location.search, {
+      ignoreQueryPrefix: true
+    });
+    return {
+      queryParameters: (_a = parsed.filters) != null ? _a : {},
+      cursor: typeof parsed.cursor === "string" ? parsed.cursor : void 0
+    };
+  }, [location]);
+  const [cursor, setCursor] = useState(initialCursor);
   const [outputState, setOutputState] = useState(
     () => {
       return {
         appliedFilters: {},
         entities: [],
-        backendEntities: []
+        backendEntities: [],
+        pageInfo: enablePagination ? {} : void 0
       };
     }
   );
@@ -582,11 +588,6 @@ const EntityListProvider = (props) => {
     async () => {
       var _a;
       const compacted = compact(Object.values(requestedFilters));
-      const entityFilter = reduceEntityFilters(compacted);
-      const backendFilter = reduceBackendCatalogFilters(compacted);
-      const previousBackendFilter = reduceBackendCatalogFilters(
-        compact(Object.values(outputState.appliedFilters))
-      );
       const queryParams = Object.keys(requestedFilters).reduce(
         (params, key) => {
           const filter = requestedFilters[key];
@@ -597,40 +598,91 @@ const EntityListProvider = (props) => {
         },
         {}
       );
-      if (!isEqual(previousBackendFilter, backendFilter)) {
-        const response = await catalogApi.getEntities({
-          filter: backendFilter
-        });
-        setOutputState({
-          appliedFilters: requestedFilters,
-          backendEntities: response.items,
-          entities: response.items.filter(entityFilter)
-        });
+      if (enablePagination) {
+        if (cursor) {
+          if (cursor !== outputState.appliedCursor) {
+            const entityFilter = reduceEntityFilters(compacted);
+            const response = await catalogApi.queryEntities({
+              cursor,
+              limit
+            });
+            setOutputState({
+              appliedFilters: requestedFilters,
+              appliedCursor: cursor,
+              backendEntities: response.items,
+              entities: response.items.filter(entityFilter),
+              pageInfo: response.pageInfo
+            });
+          }
+        } else {
+          const entityFilter = reduceEntityFilters(compacted);
+          const backendFilter = reduceCatalogFilters(compacted);
+          const previousBackendFilter = reduceCatalogFilters(
+            compact(Object.values(outputState.appliedFilters))
+          );
+          if (!isEqual(previousBackendFilter, backendFilter)) {
+            const response = await catalogApi.queryEntities({
+              filter: backendFilter,
+              limit,
+              orderFields: [{ field: "metadata.name", order: "asc" }]
+            });
+            setOutputState({
+              appliedFilters: requestedFilters,
+              backendEntities: response.items,
+              entities: response.items.filter(entityFilter),
+              pageInfo: response.pageInfo
+            });
+          }
+        }
       } else {
-        setOutputState({
-          appliedFilters: requestedFilters,
-          backendEntities: outputState.backendEntities,
-          entities: outputState.backendEntities.filter(entityFilter)
-        });
+        const entityFilter = reduceEntityFilters(compacted);
+        const backendFilter = reduceBackendCatalogFilters(compacted);
+        const previousBackendFilter = reduceBackendCatalogFilters(
+          compact(Object.values(outputState.appliedFilters))
+        );
+        if (!isEqual(previousBackendFilter, backendFilter)) {
+          const response = await catalogApi.getEntities({
+            filter: backendFilter
+          });
+          setOutputState({
+            appliedFilters: requestedFilters,
+            backendEntities: response.items,
+            entities: response.items.filter(entityFilter)
+          });
+        } else {
+          setOutputState({
+            appliedFilters: requestedFilters,
+            backendEntities: outputState.backendEntities,
+            entities: outputState.backendEntities.filter(entityFilter)
+          });
+        }
       }
       if (isMounted()) {
         const oldParams = qs.parse(location.search, {
           ignoreQueryPrefix: true
         });
         const newParams = qs.stringify(
-          { ...oldParams, filters: queryParams },
+          { ...oldParams, filters: queryParams, cursor },
           { addQueryPrefix: true, arrayFormat: "repeat" }
         );
         const newUrl = `${window.location.pathname}${newParams}`;
         (_a = window.history) == null ? void 0 : _a.replaceState(null, document.title, newUrl);
       }
     },
-    [catalogApi, queryParameters, requestedFilters, outputState],
+    [
+      catalogApi,
+      queryParameters,
+      requestedFilters,
+      outputState,
+      cursor,
+      enablePagination
+    ],
     { loading: true }
   );
-  useDebounce(refresh, 10, [requestedFilters]);
+  useDebounce(refresh, 10, [requestedFilters, cursor]);
   const updateFilters = useCallback(
     (update) => {
+      setCursor(void 0);
       setRequestedFilters((prevFilters) => {
         const newFilters = typeof update === "function" ? update(prevFilters) : update;
         return { ...prevFilters, ...newFilters };
@@ -638,6 +690,18 @@ const EntityListProvider = (props) => {
     },
     []
   );
+  const pageInfo = useMemo(() => {
+    var _a, _b;
+    if (!enablePagination) {
+      return void 0;
+    }
+    const prevCursor = (_a = outputState.pageInfo) == null ? void 0 : _a.prevCursor;
+    const nextCursor = (_b = outputState.pageInfo) == null ? void 0 : _b.nextCursor;
+    return {
+      prev: prevCursor ? () => setCursor(prevCursor) : void 0,
+      next: nextCursor ? () => setCursor(nextCursor) : void 0
+    };
+  }, [enablePagination, outputState.pageInfo]);
   const value = useMemo(
     () => ({
       filters: outputState.appliedFilters,
@@ -646,9 +710,10 @@ const EntityListProvider = (props) => {
       updateFilters,
       queryParameters,
       loading,
-      error
+      error,
+      pageInfo
     }),
-    [outputState, updateFilters, queryParameters, loading, error]
+    [outputState, updateFilters, queryParameters, loading, error, pageInfo]
   );
   return /* @__PURE__ */ React.createElement(EntityListContext.Provider, { value }, props.children);
 };
@@ -2671,58 +2736,48 @@ function useOwnedEntitiesCount() {
     // load only on mount
     []
   );
-  const prevRequest = useRef();
-  const request = useMemo(() => {
-    const { user, owners, ...allFilters } = filters;
-    const compacted = compact(Object.values(allFilters));
-    const allFilter = reduceCatalogFilters(compacted);
-    const { ["metadata.name"]: metadata, ...filter2 } = allFilter;
-    const countFilter = getOwnedCountClaims(owners, ownershipEntityRefs);
-    if ((ownershipEntityRefs == null ? void 0 : ownershipEntityRefs.length) === 0 || countFilter === void 0 || Object.keys(filter2).length === 0) {
-      prevRequest.current = void 0;
-      return void 0;
-    }
-    const newRequest = {
-      filter: {
-        ...filter2,
-        "relations.ownedBy": countFilter
-      },
-      limit: 0
-    };
-    if (isEqual(newRequest, prevRequest.current)) {
-      return prevRequest.current;
-    }
-    prevRequest.current = newRequest;
-    return newRequest;
-  }, [filters, ownershipEntityRefs]);
+  const { user, owners, ...allFilters } = filters;
+  const { ["metadata.name"]: metadata, ...filter } = reduceCatalogFilters(
+    compact(Object.values(allFilters))
+  );
   const [{ value: count, loading: loadingEntityOwnership }, fetchEntities] = useAsyncFn(
-    async (req, ownershipEntityRefsParam) => {
-      if (ownershipEntityRefsParam && !req) {
+    async (req) => {
+      const ownedClaims = getOwnedCountClaims(
+        req.owners,
+        req.ownershipEntityRefs
+      );
+      if (ownedClaims === void 0) {
         return 0;
       }
-      const { totalItems } = await catalogApi.queryEntities(req);
+      const { totalItems } = await catalogApi.queryEntities({
+        filter: {
+          ...req.filter,
+          "relations.ownedBy": ownedClaims
+        },
+        limit: 0
+      });
       return totalItems;
     },
     [],
     { loading: true }
   );
-  useEffect(() => {
-    if (ownershipEntityRefs) {
-      if (request && Object.keys(request).length === 0) {
-        return;
-      }
-      fetchEntities(request, ownershipEntityRefs);
+  useDeepCompareEffect(() => {
+    if (Object.keys(filter).length === 0) {
+      return;
     }
-  }, [fetchEntities, request, ownershipEntityRefs]);
+    if (ownershipEntityRefs === void 0) {
+      return;
+    }
+    fetchEntities({ ownershipEntityRefs, owners, filter });
+  }, [ownershipEntityRefs, owners, filter]);
   const loading = loadingEntityRefs || loadingEntityOwnership;
-  const filter = useMemo(
-    () => EntityUserFilter.owned(ownershipEntityRefs != null ? ownershipEntityRefs : []),
-    [ownershipEntityRefs]
-  );
   return {
     count,
     loading,
-    filter,
+    filter: useMemo(
+      () => EntityUserFilter.owned(ownershipEntityRefs != null ? ownershipEntityRefs : []),
+      [ownershipEntityRefs]
+    ),
     ownershipEntityRefs
   };
 }