diff --git a/.changeset/little-laws-heal.md b/.changeset/little-laws-heal.md new file mode 100644 index 0000000000..cd1505540e --- /dev/null +++ b/.changeset/little-laws-heal.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': minor +--- + +Allow changing the subtitle of the `CatalogTable` component 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']; } 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} /> ); };