diff --git a/plugins/catalog/src/alpha.tsx b/plugins/catalog/src/alpha.tsx
index 86ff0a1846..3cc34b5c96 100644
--- a/plugins/catalog/src/alpha.tsx
+++ b/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 ;
+ return {filters}>} />;
},
});
diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
index 7d75ce4b1d..e50c69b8ec 100644
--- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+++ b/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[];
- actions?: TableProps['actions'];
- initialKind?: string;
- tableOptions?: TableProps['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 = } = props;
const orgName =
useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
const createComponentLink = useRouteRef(createComponentRouteRef);
@@ -88,31 +70,63 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
-
- {filters ?? (
- <>
-
-
-
-
-
-
-
-
- >
- )}
-
-
-
-
+ {filters}
+ {content}
);
}
+
+/**
+ * Props for root catalog pages.
+ *
+ * @public
+ */
+export interface DefaultCatalogPageProps {
+ initiallySelectedFilter?: UserListFilterKind;
+ columns?: TableColumn[];
+ actions?: TableProps['actions'];
+ initialKind?: string;
+ tableOptions?: TableProps['options'];
+ emptyContent?: ReactNode;
+ ownerPickerMode?: EntityOwnerPickerProps['mode'];
+}
+
+export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
+ const {
+ columns,
+ actions,
+ initiallySelectedFilter = 'owned',
+ initialKind = 'component',
+ tableOptions = {},
+ emptyContent,
+ ownerPickerMode,
+ } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+ >
+ }
+ content={
+
+ }
+ />
+ );
+}
diff --git a/plugins/catalog/src/components/CatalogPage/index.ts b/plugins/catalog/src/components/CatalogPage/index.ts
index 9a3d083f41..258fedf15c 100644
--- a/plugins/catalog/src/components/CatalogPage/index.ts
+++ b/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';