refactor(catalog): create base catalog page component

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/catalog/src/alpha.tsx

@@ -231,9 +231,9 @@ export const CatalogIndexPage = createPageExtension({
     }),
   },
   loader: async ({ inputs }) => {
-    const { DefaultCatalogPage } = await import('./components/CatalogPage');
+    const { BaseCatalogPage } = await import('./components/CatalogPage');
     const filters = inputs.filters.map(filter => filter.element);
-    return <DefaultCatalogPage filters={filters} />;
+    return <BaseCatalogPage filters={<>{filters}</>} />;
   },
 });
 

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

@@ -44,33 +44,15 @@ import { CatalogTable, CatalogTableRow } from '../CatalogTable';
 import { catalogTranslationRef } from '../../translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
-/**
- * Props for root catalog pages.
- *
- * @public
- */
-export interface DefaultCatalogPageProps {
-  initiallySelectedFilter?: UserListFilterKind;
-  columns?: TableColumn<CatalogTableRow>[];
-  actions?: TableProps<CatalogTableRow>['actions'];
-  initialKind?: string;
-  tableOptions?: TableProps<CatalogTableRow>['options'];
-  emptyContent?: ReactNode;
-  ownerPickerMode?: EntityOwnerPickerProps['mode'];
-  filters?: ReactNode;
+/** @internal */
+export interface BaseCatalogPageProps {
+  filters: ReactNode;
+  content?: ReactNode;
 }
 
-export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
-  const {
-    columns,
-    actions,
-    initiallySelectedFilter = 'owned',
-    initialKind = 'component',
-    tableOptions = {},
-    emptyContent,
-    ownerPickerMode,
-    filters,
-  } = props;
+/** @internal */
+export function BaseCatalogPage(props: BaseCatalogPageProps) {
+  const { filters, content = <CatalogTable /> } = props;
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
   const createComponentLink = useRouteRef(createComponentRouteRef);
@@ -88,31 +70,63 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
         </ContentHeader>
         <EntityListProvider>
           <CatalogFilterLayout>
-            <CatalogFilterLayout.Filters>
-              {filters ?? (
-                <>
-                  <EntityKindPicker initialFilter={initialKind} />
-                  <EntityTypePicker />
-                  <UserListPicker initialFilter={initiallySelectedFilter} />
-                  <EntityOwnerPicker mode={ownerPickerMode} />
-                  <EntityLifecyclePicker />
-                  <EntityTagPicker />
-                  <EntityProcessingStatusPicker />
-                  <EntityNamespacePicker />
-                </>
-              )}
-            </CatalogFilterLayout.Filters>
-            <CatalogFilterLayout.Content>
-              <CatalogTable
-                columns={columns}
-                actions={actions}
-                tableOptions={tableOptions}
-                emptyContent={emptyContent}
-              />
-            </CatalogFilterLayout.Content>
+            <CatalogFilterLayout.Filters>{filters}</CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>{content}</CatalogFilterLayout.Content>
           </CatalogFilterLayout>
         </EntityListProvider>
       </Content>
     </PageWithHeader>
   );
 }
+
+/**
+ * Props for root catalog pages.
+ *
+ * @public
+ */
+export interface DefaultCatalogPageProps {
+  initiallySelectedFilter?: UserListFilterKind;
+  columns?: TableColumn<CatalogTableRow>[];
+  actions?: TableProps<CatalogTableRow>['actions'];
+  initialKind?: string;
+  tableOptions?: TableProps<CatalogTableRow>['options'];
+  emptyContent?: ReactNode;
+  ownerPickerMode?: EntityOwnerPickerProps['mode'];
+}
+
+export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
+  const {
+    columns,
+    actions,
+    initiallySelectedFilter = 'owned',
+    initialKind = 'component',
+    tableOptions = {},
+    emptyContent,
+    ownerPickerMode,
+  } = props;
+
+  return (
+    <BaseCatalogPage
+      filters={
+        <>
+          <EntityKindPicker initialFilter={initialKind} />
+          <EntityTypePicker />
+          <UserListPicker initialFilter={initiallySelectedFilter} />
+          <EntityOwnerPicker mode={ownerPickerMode} />
+          <EntityLifecyclePicker />
+          <EntityTagPicker />
+          <EntityProcessingStatusPicker />
+          <EntityNamespacePicker />
+        </>
+      }
+      content={
+        <CatalogTable
+          columns={columns}
+          actions={actions}
+          tableOptions={tableOptions}
+          emptyContent={emptyContent}
+        />
+      }
+    />
+  );
+}

plugins/catalog/src/components/CatalogPage/index.ts

@@ -15,5 +15,8 @@
  */
 
 export { CatalogPage } from './CatalogPage';
-export { DefaultCatalogPage } from './DefaultCatalogPage';
-export type { DefaultCatalogPageProps } from './DefaultCatalogPage';
+export { BaseCatalogPage, DefaultCatalogPage } from './DefaultCatalogPage';
+export type {
+  BaseCatalogPageProps,
+  DefaultCatalogPageProps,
+} from './DefaultCatalogPage';