Merge pull request #12874 from Symbianx/allow-subtitle-in-catalog-table

Allow setting the subtitle in the CatalogTable component

.changeset/little-laws-heal.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Allow changing the subtitle of the `CatalogTable` component

plugins/catalog/api-report.md

@@ -157,6 +157,8 @@ export interface CatalogTableProps {
   // (undocumented)
   columns?: TableColumn<CatalogTableRow>[];
   // (undocumented)
+  subtitle?: string;
+  // (undocumented)
   tableOptions?: TableProps<CatalogTableRow>['options'];
 }
 

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(
+      <ApiProvider apis={mockApis}>
+        <MockEntityListContextProvider value={{ entities: [entity] }}>
+          <CatalogTable subtitle="Should be rendered" />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(getByText('Should be rendered')).toBeInTheDocument();
+  });
 });

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<CatalogTableRow>[];
   actions?: TableProps<CatalogTableRow>['actions'];
   tableOptions?: TableProps<CatalogTableRow>['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}
     />
   );
 };