diff --git a/.changeset/many-kangaroos-raise.md b/.changeset/many-kangaroos-raise.md new file mode 100644 index 0000000000..11c0e82668 --- /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 for emptyContent of the Catalog Table. 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..ed782c4e9a 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -32,14 +32,14 @@ import { useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; -import { Typography } from '@material-ui/core'; +import { makeStyles, Typography } from '@material-ui/core'; import { withStyles } from '@material-ui/core/styles'; import Edit from '@material-ui/icons/Edit'; 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,9 +52,18 @@ export interface CatalogTableProps { columns?: TableColumn[]; actions?: TableProps['actions']; tableOptions?: TableProps['options']; + emptyContent?: ReactNode; subtitle?: string; } +const useStyles = makeStyles(theme => ({ + empty: { + padding: theme.spacing(2), + display: 'flex', + justifyContent: 'center', + }, +})); + const YellowStar = withStyles({ root: { color: '#f3ba37', @@ -63,9 +72,10 @@ 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(); + const classes = useStyles(); const defaultColumns: TableColumn[] = useMemo(() => { return [ @@ -228,6 +238,9 @@ export const CatalogTable = (props: CatalogTableProps) => { data={rows} actions={actions || defaultActions} subtitle={subtitle} + emptyContent={ + emptyContent &&
{emptyContent}
+ } /> ); };