From f2d0ea9f42c37cc61554ff301b2adfe01b988e52 Mon Sep 17 00:00:00 2001 From: Miguel Alexandre Date: Thu, 28 Jul 2022 10:40:37 +0200 Subject: [PATCH 1/4] Allow setting the subtitle in the CatalogTable component Signed-off-by: Miguel Alexandre --- .../CatalogTable/CatalogTable.test.tsx | 29 ++++++++++++++-- .../components/CatalogTable/CatalogTable.tsx | 34 ++++++++++--------- 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx index c59b10281c..bd78cecaf0 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx @@ -21,12 +21,12 @@ import { } from '@backstage/catalog-model'; import { ApiProvider } from '@backstage/core-app-api'; import { + EntityKindFilter, entityRouteRef, MockEntityListContextProvider, + MockStarredEntitiesApi, starredEntitiesApiRef, UserListFilter, - EntityKindFilter, - MockStarredEntitiesApi, } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { act, fireEvent } from '@testing-library/react'; @@ -306,4 +306,29 @@ describe('CatalogTable component', () => { }, 20_000, ); + it('should render the subtitle when it is specified', async () => { + const entity = { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'component1', + annotations: { [ANNOTATION_EDIT_URL]: 'https://other.place' }, + }, + }; + + const { getByText } = await renderInTestApp( + + + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect(getByText('Should be rendered')).toBeInTheDocument(); + }); }); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 005a00c48e..6bc18d7a90 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -19,18 +19,6 @@ import { RELATION_OWNED_BY, RELATION_PART_OF, } from '@backstage/catalog-model'; -import { - humanizeEntityRef, - getEntityRelations, - useEntityList, - useStarredEntities, -} from '@backstage/plugin-catalog-react'; -import Edit from '@material-ui/icons/Edit'; -import OpenInNew from '@material-ui/icons/OpenInNew'; -import { capitalize } from 'lodash'; -import React, { useMemo } from 'react'; -import { columnFactories } from './columns'; -import { CatalogTableRow } from './types'; import { CodeSnippet, Table, @@ -38,10 +26,22 @@ import { TableProps, WarningPanel, } from '@backstage/core-components'; -import StarBorder from '@material-ui/icons/StarBorder'; -import { withStyles } from '@material-ui/core/styles'; -import Star from '@material-ui/icons/Star'; +import { + getEntityRelations, + humanizeEntityRef, + useEntityList, + useStarredEntities, +} from '@backstage/plugin-catalog-react'; 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'; +import Star from '@material-ui/icons/Star'; +import StarBorder from '@material-ui/icons/StarBorder'; +import { capitalize } from 'lodash'; +import React, { useMemo } from 'react'; +import { columnFactories } from './columns'; +import { CatalogTableRow } from './types'; /** * Props for {@link CatalogTable}. @@ -52,6 +52,7 @@ export interface CatalogTableProps { columns?: TableColumn[]; actions?: TableProps['actions']; tableOptions?: TableProps['options']; + subtitle?: string; } const YellowStar = withStyles({ @@ -62,7 +63,7 @@ const YellowStar = withStyles({ /** @public */ export const CatalogTable = (props: CatalogTableProps) => { - const { columns, actions, tableOptions } = props; + const { columns, actions, tableOptions, subtitle } = props; const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const { loading, error, entities, filters } = useEntityList(); @@ -226,6 +227,7 @@ export const CatalogTable = (props: CatalogTableProps) => { title={`${titlePreamble} (${entities.length})`} data={rows} actions={actions || defaultActions} + subtitle={subtitle} /> ); }; From fe94398418a148dfc7fd82fbd0795b564bfceb34 Mon Sep 17 00:00:00 2001 From: Miguel Alexandre Date: Thu, 28 Jul 2022 10:44:58 +0200 Subject: [PATCH 2/4] Add changeset Signed-off-by: Miguel Alexandre --- .changeset/little-laws-heal.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/little-laws-heal.md diff --git a/.changeset/little-laws-heal.md b/.changeset/little-laws-heal.md new file mode 100644 index 0000000000..d701a6e763 --- /dev/null +++ b/.changeset/little-laws-heal.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': minor +--- + +Allow changing the subtitle of the CatalogTable component From 97108b948b198f6fe9eb8ec2bb5790f5aae2b464 Mon Sep 17 00:00:00 2001 From: Miguel Alexandre Date: Thu, 28 Jul 2022 11:16:40 +0200 Subject: [PATCH 3/4] Add API report Signed-off-by: Miguel Alexandre --- plugins/catalog/api-report.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index d13f2acbc2..98bc7ab89e 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -157,6 +157,8 @@ export interface CatalogTableProps { // (undocumented) columns?: TableColumn[]; // (undocumented) + subtitle?: string; + // (undocumented) tableOptions?: TableProps['options']; } From 5abeb3df2d5f09ccbc5bcc5a8f85312dc93833c0 Mon Sep 17 00:00:00 2001 From: Ben Lambert Date: Thu, 28 Jul 2022 11:32:27 +0200 Subject: [PATCH 4/4] code block the changeset Signed-off-by: Ben Lambert --- .changeset/little-laws-heal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-laws-heal.md b/.changeset/little-laws-heal.md index d701a6e763..cd1505540e 100644 --- a/.changeset/little-laws-heal.md +++ b/.changeset/little-laws-heal.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog': minor --- -Allow changing the subtitle of the CatalogTable component +Allow changing the subtitle of the `CatalogTable` component