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}
/>
);
};