catalog: customize limit

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

.changeset/silly-numbers-wash.md

@@ -10,6 +10,5 @@ To activate the pagination mode, simply update your configuration as follows:
 
 ```diff
   catalog:
-+  experimental:
-+    paginatedEntities: true
++   experimentalPagination: true
 ```

plugins/catalog-react/api-report.md

@@ -297,7 +297,11 @@ export const EntityListProvider: <EntityFilters extends DefaultEntityFilters>(
 
 // @public (undocumented)
 export type EntityListProviderProps = PropsWithChildren<{
-  enablePagination?: boolean;
+  enablePagination?:
+    | boolean
+    | {
+        limit?: number;
+      };
 }>;
 
 // @public (undocumented)

plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx

@@ -275,7 +275,7 @@ describe('<EntityListProvider />', () => {
 describe('<EntityListProvider enablePagination />', () => {
   const origReplaceState = window.history.replaceState;
   const enablePagination = true;
-  const limit = 2;
+  const limit = 20;
   const orderFields = [{ field: 'metadata.name', order: 'asc' }];
 
   beforeEach(() => {

plugins/catalog-react/src/hooks/useEntityListProvider.tsx

@@ -130,7 +130,7 @@ type OutputState<EntityFilters extends DefaultEntityFilters> = {
  * @public
  */
 export type EntityListProviderProps = PropsWithChildren<{
-  enablePagination?: boolean;
+  enablePagination?: boolean | { limit?: number };
 }>;
 
 /**
@@ -152,6 +152,17 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
   // update of the URL or two catalog sidebar links with different catalog filters.
   const location = useLocation();
 
+  const enablePagination =
+    props.enablePagination === true ||
+    typeof props.enablePagination === 'object';
+
+  const limit =
+    props.enablePagination &&
+    typeof props.enablePagination === 'object' &&
+    typeof props.enablePagination.limit === 'number'
+      ? props.enablePagination.limit
+      : 20;
+
   const { queryParameters, cursor: initialCursor } = useMemo(() => {
     const parsed = qs.parse(location.search, {
       ignoreQueryPrefix: true,
@@ -174,7 +185,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
         appliedFilters: {} as EntityFilters,
         entities: [],
         backendEntities: [],
-        pageInfo: props.enablePagination ? {} : undefined,
+        pageInfo: enablePagination ? {} : undefined,
       };
     },
   );
@@ -199,8 +210,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
         {} as Record<string, string | string[]>,
       );
 
-      if (props.enablePagination) {
-        const limit = 2;
+      if (enablePagination) {
         if (cursor) {
           if (cursor !== outputState.appliedCursor) {
             const entityFilter = reduceEntityFilters(compacted);
@@ -290,7 +300,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
       requestedFilters,
       outputState,
       cursor,
-      props.enablePagination,
+      enablePagination,
     ],
     { loading: true },
   );
@@ -321,7 +331,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
   );
 
   const pageInfo = useMemo(() => {
-    if (!props.enablePagination) {
+    if (!enablePagination) {
       return undefined;
     }
 
@@ -331,7 +341,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
       prev: prevCursor ? () => setCursor(prevCursor) : undefined,
       next: nextCursor ? () => setCursor(nextCursor) : undefined,
     };
-  }, [props.enablePagination, outputState.pageInfo]);
+  }, [enablePagination, outputState.pageInfo]);
 
   const value = useMemo(
     () => ({

plugins/catalog/config.d.ts

@@ -15,11 +15,13 @@
  */
 export interface Config {
   catalog?: {
-    experimental?: {
-      /**
-       * @visibility frontend
-       */
-      paginatedEntities?: boolean;
-    };
+    /**
+     * @deepVisibility frontend
+     */
+    experimentalPagination?:
+      | boolean
+      | {
+          limit?: number;
+        };
   };
 }

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx

@@ -60,9 +60,9 @@ export function BaseCatalogPage(props: BaseCatalogPageProps) {
   const createComponentLink = useRouteRef(createComponentRouteRef);
   const { t } = useTranslationRef(catalogTranslationRef);
 
-  const enablePagination = useApi(configApiRef).getOptionalBoolean(
-    'catalog.experimental.paginatedEntities',
-  );
+  const experimentalPagination = useApi(configApiRef).getOptional(
+    'catalog.experimentalPagination',
+  ) as boolean | { limit: number } | undefined;
 
   return (
     <PageWithHeader title={t('catalog_page_title', { orgName })} themeId="home">
@@ -74,7 +74,7 @@ export function BaseCatalogPage(props: BaseCatalogPageProps) {
           />
           <SupportButton>All your software catalog entities</SupportButton>
         </ContentHeader>
-        <EntityListProvider enablePagination={enablePagination}>
+        <EntityListProvider enablePagination={experimentalPagination}>
           <CatalogFilterLayout>
             <CatalogFilterLayout.Filters>{filters}</CatalogFilterLayout.Filters>
             <CatalogFilterLayout.Content>{content}</CatalogFilterLayout.Content>