diff --git a/.changeset/tiny-shrimps-beam.md b/.changeset/tiny-shrimps-beam.md
new file mode 100644
index 0000000000..b538d465f9
--- /dev/null
+++ b/.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
diff --git a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx
index f89897524d..e3723dba5b 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx
@@ -168,7 +168,7 @@ describe('DefaultApiExplorerPage', () => {
const { findByTitle, findByText } = await renderWrapped(
,
);
- 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(
,
);
- 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();
diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx
index 3411656426..485cb490d8 100644
--- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx
+++ b/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();
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();
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();
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();
- 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();
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);
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
index c80b340349..c242372a97 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
+++ b/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();
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 3d0cc75f7c..67579d5273 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/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 (
@@ -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}