Merge pull request backstage#17847 from SnowBlitzer/catalogTableTitles

Adding info on entities selected to catalog table title

.changeset/tiny-shrimps-beam.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Adding in type and kind entity details to catalog table title for user clarity

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx

@@ -168,7 +168,7 @@ describe('DefaultApiExplorerPage', () => {
     const { findByTitle, findByText } = await renderWrapped(
       <DefaultApiExplorerPage />,
     );
-    expect(await findByText(/All \(1\)/)).toBeInTheDocument();
+    expect(await findByText(/All apis \(1\)/)).toBeInTheDocument();
     expect(await findByTitle(/View/)).toBeInTheDocument();
     expect(await findByTitle(/View/)).toBeInTheDocument();
     expect(await findByTitle(/Edit/)).toBeInTheDocument();
@@ -198,7 +198,7 @@ describe('DefaultApiExplorerPage', () => {
     const { findByTitle, findByText } = await renderWrapped(
       <DefaultApiExplorerPage actions={actions} />,
     );
-    expect(await findByText(/All \(1\)/)).toBeInTheDocument();
+    expect(await findByText(/All apis \(1\)/)).toBeInTheDocument();
     expect(await findByTitle(/Foo Action/)).toBeInTheDocument();
     expect(await findByTitle(/Bar Action/)).toBeInTheDocument();
     expect((await findByTitle(/Bar Action/)).firstChild).toBeDisabled();

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx

@@ -205,7 +205,9 @@ describe('DefaultCatalogPage', () => {
   it('should render the default actions of an item in the grid', async () => {
     await renderWrapped(<DefaultCatalogPage />);
     fireEvent.click(screen.getByTestId('user-picker-owned'));
-    await expect(screen.findByText(/Owned \(1\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/Owned components \(1\)/),
+    ).resolves.toBeInTheDocument();
     await expect(screen.findByTitle(/View/)).resolves.toBeInTheDocument();
     await expect(screen.findByTitle(/Edit/)).resolves.toBeInTheDocument();
     await expect(
@@ -235,7 +237,9 @@ describe('DefaultCatalogPage', () => {
 
     await renderWrapped(<DefaultCatalogPage actions={actions} />);
     fireEvent.click(screen.getByTestId('user-picker-owned'));
-    await expect(screen.findByText(/Owned \(1\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/Owned components \(1\)/),
+    ).resolves.toBeInTheDocument();
     await expect(screen.findByTitle(/Foo Action/)).resolves.toBeInTheDocument();
     await expect(screen.findByTitle(/Bar Action/)).resolves.toBeInTheDocument();
     await expect(
@@ -249,34 +253,46 @@ describe('DefaultCatalogPage', () => {
   it('should render', async () => {
     await renderWrapped(<DefaultCatalogPage />);
     fireEvent.click(screen.getByTestId('user-picker-owned'));
-    await expect(screen.findByText(/Owned \(1\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/Owned components \(1\)/),
+    ).resolves.toBeInTheDocument();
     fireEvent.click(screen.getByTestId('user-picker-all'));
-    await expect(screen.findByText(/All \(2\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/All components \(2\)/),
+    ).resolves.toBeInTheDocument();
   }, 20_000);
 
   it('should set initial filter correctly', async () => {
     await renderWrapped(<DefaultCatalogPage initiallySelectedFilter="all" />);
-    await expect(screen.findByText(/All \(2\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/All components \(2\)/),
+    ).resolves.toBeInTheDocument();
   }, 20_000);
 
   // this test is for fixing the bug after favoriting an entity, the matching
   // entities defaulting to "owned" filter and not based on the selected filter
   it('should render the correct entities filtered on the selected filter', async () => {
     await renderWrapped(<DefaultCatalogPage />);
     fireEvent.click(screen.getByTestId('user-picker-owned'));
-    await expect(screen.findByText(/Owned \(1\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/Owned components \(1\)/),
+    ).resolves.toBeInTheDocument();
     // The "Starred" menu option should initially be disabled, since there
     // aren't any starred entities.
     expect(screen.getByTestId('user-picker-starred')).toHaveAttribute(
       'aria-disabled',
       'true',
     );
     fireEvent.click(screen.getByTestId('user-picker-all'));
-    await expect(screen.findByText(/All \(2\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/All components \(2\)/),
+    ).resolves.toBeInTheDocument();
 
     const starredIcons = await screen.findAllByTitle('Add to favorites');
     fireEvent.click(starredIcons[0]);
-    await expect(screen.findByText(/All \(2\)/)).resolves.toBeInTheDocument();
+    await expect(
+      screen.findByText(/All components \(2\)/),
+    ).resolves.toBeInTheDocument();
 
     // Now that we've starred an entity, the "Starred" menu option should be
     // enabled.
@@ -286,7 +302,7 @@ describe('DefaultCatalogPage', () => {
     );
     fireEvent.click(screen.getByTestId('user-picker-starred'));
     await expect(
-      screen.findByText(/Starred \(1\)/),
+      screen.findByText(/Starred components \(1\)/),
     ).resolves.toBeInTheDocument();
   }, 20_000);
 

plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx

@@ -95,6 +95,11 @@ describe('CatalogTable component', () => {
                 () => false,
                 () => false,
               ),
+              kind: {
+                value: 'component',
+                getCatalogFilters: () => ({ kind: 'component' }),
+                toQueryValue: () => 'component',
+              },
             },
           }}
         >
@@ -107,7 +112,7 @@ describe('CatalogTable component', () => {
         },
       },
     );
-    expect(screen.getByText(/Owned \(3\)/)).toBeInTheDocument();
+    expect(screen.getByText(/Owned components \(3\)/)).toBeInTheDocument();
     expect(screen.getByText(/component1/)).toBeInTheDocument();
     expect(screen.getByText(/component2/)).toBeInTheDocument();
     expect(screen.getByText(/component3/)).toBeInTheDocument();

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -43,6 +43,7 @@ import { capitalize } from 'lodash';
 import React, { ReactNode, useMemo } from 'react';
 import { columnFactories } from './columns';
 import { CatalogTableRow } from './types';
+import pluralize from 'pluralize';
 
 /**
  * Props for {@link CatalogTable}.
@@ -226,6 +227,11 @@ export const CatalogTable = (props: CatalogTableProps) => {
     typeColumn.hidden = !showTypeColumn;
   }
   const showPagination = rows.length > 20;
+  const currentKind = filters.kind?.value || '';
+  const currentType = filters.type?.value || '';
+  const titleDisplay = [titlePreamble, currentType, pluralize(currentKind)]
+    .filter(s => s)
+    .join(' ');
 
   return (
     <Table<CatalogTableRow>
@@ -241,7 +247,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         pageSizeOptions: [20, 50, 100],
         ...tableOptions,
       }}
-      title={`${titlePreamble} (${entities.length})`}
+      title={`${titleDisplay} (${entities.length})`}
       data={rows}
       actions={actions || defaultActions}
       subtitle={subtitle}