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';