catalog: enable paginated page through app-config

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

packages/app/src/App.tsx

@@ -182,7 +182,7 @@ const routes = (
     <Route path="/home" element={<HomepageCompositionRoot />}>
       {homePage}
     </Route>
-    <Route path="/catalog" element={<CatalogIndexPage enablePagination />} />
+    <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}

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

@@ -50,21 +50,20 @@ import { CatalogTableColumnsFunc } from '../CatalogTable/types';
 export interface BaseCatalogPageProps {
   filters: ReactNode;
   content?: ReactNode;
-  enablePagination?: boolean;
 }
 
 /** @internal */
 export function BaseCatalogPage(props: BaseCatalogPageProps) {
-  const {
-    filters,
-    enablePagination,
-    content = <CatalogTable enablePagination={enablePagination} />,
-  } = props;
+  const { filters, content = <CatalogTable /> } = props;
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
   const createComponentLink = useRouteRef(createComponentRouteRef);
   const { t } = useTranslationRef(catalogTranslationRef);
 
+  const enablePagination = useApi(configApiRef).getOptionalBoolean(
+    'catalog.experimental.paginatedEntities',
+  );
+
   return (
     <PageWithHeader title={t('catalog_page_title', { orgName })} themeId="home">
       <Content>
@@ -99,7 +98,6 @@ export interface DefaultCatalogPageProps {
   tableOptions?: TableProps<CatalogTableRow>['options'];
   emptyContent?: ReactNode;
   ownerPickerMode?: EntityOwnerPickerProps['mode'];
-  enablePagination?: boolean;
 }
 
 export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
@@ -111,12 +109,10 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
     tableOptions = {},
     emptyContent,
     ownerPickerMode,
-    enablePagination,
   } = props;
 
   return (
     <BaseCatalogPage
-      enablePagination={enablePagination}
       filters={
         <>
           <EntityKindPicker initialFilter={initialKind} />
@@ -135,7 +131,6 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
           actions={actions}
           tableOptions={tableOptions}
           emptyContent={emptyContent}
-          enablePagination={enablePagination}
         />
       }
     />

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -59,7 +59,6 @@ export interface CatalogTableProps {
   tableOptions?: TableProps<CatalogTableRow>['options'];
   emptyContent?: ReactNode;
   subtitle?: string;
-  enablePagination?: boolean;
 }
 
 const YellowStar = withStyles({
@@ -131,7 +130,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
   } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const entityListContext = useEntityList();
-  const { loading, error, entities, filters } = entityListContext;
+  const { loading, error, entities, filters, pageInfo } = entityListContext;
+  const enablePagination = !!pageInfo;
 
   const tableColumns = useMemo(
     () =>
@@ -217,7 +217,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
     .filter(s => s)
     .join(' ');
 
-  if (props.enablePagination) {
+  if (enablePagination) {
     return (
       <PaginatedCatalogTable
         columns={tableColumns}