From 182000c663e28d45c4671ec679e4f6dbed8b1b9d Mon Sep 17 00:00:00 2001 From: irma12 Date: Wed, 5 Oct 2022 15:23:18 +0200 Subject: [PATCH 1/5] Added emptyContent to properties of Catalog Table Signed-off-by: irma12 --- .changeset/many-kangaroos-raise.md | 5 +++++ .../CatalogPage/DefaultCatalogPage.tsx | 5 ++++- .../components/CatalogTable/CatalogTable.tsx | 19 ++++++++++++++++--- 3 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 .changeset/many-kangaroos-raise.md 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}
+ } /> ); }; From 0ba0883570682596a78187291f9031d611c6f5ba Mon Sep 17 00:00:00 2001 From: irma12 Date: Fri, 7 Oct 2022 09:44:16 +0200 Subject: [PATCH 2/5] Fixed changelog spelling Signed-off-by: irma12 --- .changeset/many-kangaroos-raise.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/many-kangaroos-raise.md b/.changeset/many-kangaroos-raise.md index 11c0e82668..3d1a25d47e 100644 --- a/.changeset/many-kangaroos-raise.md +++ b/.changeset/many-kangaroos-raise.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog': patch --- -Added emptyContent property to CatalogTable and DefaultCatalogPage to support customization for emptyContent of the Catalog Table. +Added `emptyContent` property to CatalogTable and DefaultCatalogPage to support customization of the Catalog Table. From fe0a65e7a7c591611d146bea8d8f5f93b7396123 Mon Sep 17 00:00:00 2001 From: irma12 Date: Mon, 17 Oct 2022 14:48:43 +0200 Subject: [PATCH 3/5] Add api report Signed-off-by: irma12 --- plugins/catalog/api-report.md | 4 ++++ 1 file changed, 4 insertions(+) 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; From 6dd7d7f018ee4cdd6611b3d88cf6e2edd60e7d20 Mon Sep 17 00:00:00 2001 From: irma12 Date: Mon, 17 Oct 2022 20:19:55 +0200 Subject: [PATCH 4/5] Remove styling Signed-off-by: irma12 --- .../src/components/CatalogTable/CatalogTable.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index ed782c4e9a..482352c2f8 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -56,14 +56,6 @@ export interface CatalogTableProps { subtitle?: string; } -const useStyles = makeStyles(theme => ({ - empty: { - padding: theme.spacing(2), - display: 'flex', - justifyContent: 'center', - }, -})); - const YellowStar = withStyles({ root: { color: '#f3ba37', @@ -75,7 +67,6 @@ export const CatalogTable = (props: CatalogTableProps) => { 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 [ @@ -238,9 +229,7 @@ export const CatalogTable = (props: CatalogTableProps) => { data={rows} actions={actions || defaultActions} subtitle={subtitle} - emptyContent={ - emptyContent &&
{emptyContent}
- } + emptyContent={emptyContent} /> ); }; From 42c22f2695ed05572e8f87383548d8bb783923c5 Mon Sep 17 00:00:00 2001 From: irma12 Date: Mon, 17 Oct 2022 20:20:43 +0200 Subject: [PATCH 5/5] Remove unused components Signed-off-by: irma12 --- plugins/catalog/src/components/CatalogTable/CatalogTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 482352c2f8..935e002375 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -32,7 +32,7 @@ import { useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; -import { makeStyles, Typography } from '@material-ui/core'; +import { 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';