diff --git a/.changeset/many-kangaroos-raise.md b/.changeset/many-kangaroos-raise.md new file mode 100644 index 0000000000..3d1a25d47e --- /dev/null +++ b/.changeset/many-kangaroos-raise.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Added `emptyContent` property to CatalogTable and DefaultCatalogPage to support customization of the Catalog Table. diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 71006b53b5..3f72df00e2 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -167,6 +167,8 @@ export interface CatalogTableProps { // (undocumented) columns?: TableColumn[]; // (undocumented) + emptyContent?: ReactNode; + // (undocumented) subtitle?: string; // (undocumented) tableOptions?: TableProps['options']; @@ -196,6 +198,8 @@ export interface DefaultCatalogPageProps { // (undocumented) columns?: TableColumn[]; // (undocumented) + emptyContent?: ReactNode; + // (undocumented) initialKind?: string; // (undocumented) initiallySelectedFilter?: UserListFilterKind; diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx index 2bae104d90..c5208c94f5 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx @@ -36,7 +36,7 @@ import { UserListPicker, EntityKindPicker, } from '@backstage/plugin-catalog-react'; -import React from 'react'; +import React, { ReactNode } from 'react'; import { createComponentRouteRef } from '../../routes'; import { CatalogTable, CatalogTableRow } from '../CatalogTable'; import { CatalogKindHeader } from '../CatalogKindHeader'; @@ -53,6 +53,7 @@ export interface DefaultCatalogPageProps { actions?: TableProps['actions']; initialKind?: string; tableOptions?: TableProps['options']; + emptyContent?: ReactNode; } export function DefaultCatalogPage(props: DefaultCatalogPageProps) { @@ -62,6 +63,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) { initiallySelectedFilter = 'owned', initialKind = 'component', tableOptions = {}, + emptyContent, } = props; const orgName = useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; @@ -97,6 +99,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) { columns={columns} actions={actions} tableOptions={tableOptions} + emptyContent={emptyContent} /> diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 6bc18d7a90..935e002375 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -39,7 +39,7 @@ import OpenInNew from '@material-ui/icons/OpenInNew'; import Star from '@material-ui/icons/Star'; import StarBorder from '@material-ui/icons/StarBorder'; import { capitalize } from 'lodash'; -import React, { useMemo } from 'react'; +import React, { ReactNode, useMemo } from 'react'; import { columnFactories } from './columns'; import { CatalogTableRow } from './types'; @@ -52,6 +52,7 @@ export interface CatalogTableProps { columns?: TableColumn[]; actions?: TableProps['actions']; tableOptions?: TableProps['options']; + emptyContent?: ReactNode; subtitle?: string; } @@ -63,7 +64,7 @@ const YellowStar = withStyles({ /** @public */ export const CatalogTable = (props: CatalogTableProps) => { - const { columns, actions, tableOptions, subtitle } = props; + const { columns, actions, tableOptions, subtitle, emptyContent } = props; const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const { loading, error, entities, filters } = useEntityList(); @@ -228,6 +229,7 @@ export const CatalogTable = (props: CatalogTableProps) => { data={rows} actions={actions || defaultActions} subtitle={subtitle} + emptyContent={emptyContent} /> ); };