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}