Streamlining title and fixing external component tests

Signed-off-by: Jordan Snow <jordans@spotify.com>

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,14 +253,20 @@ 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
@@ -264,7 +274,9 @@ describe('DefaultCatalogPage', () => {
   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(
@@ -272,11 +284,15 @@ describe('DefaultCatalogPage', () => {
       '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.tsx

@@ -228,6 +228,10 @@ export const CatalogTable = (props: CatalogTableProps) => {
   const showPagination = rows.length > 20;
   const currentKind = filters.kind?.value || '';
   const currentType = filters.type?.value || '';
+  const titleDisplay = [titlePreamble, currentType, currentKind]
+    .filter(s => s)
+    .join(' ');
+
   return (
     <Table<CatalogTableRow>
       isLoading={loading}
@@ -242,9 +246,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         pageSizeOptions: [20, 50, 100],
         ...tableOptions,
       }}
-      title={`${titlePreamble} ${currentType} ${currentKind}${
-        currentKind ? 's' : ''
-      } (${entities.length})`}
+      title={`${titleDisplay}${currentKind ? 's' : ''} (${entities.length})`}
       data={rows}
       actions={actions || defaultActions}
       subtitle={subtitle}