diff --git a/.changeset/polite-adults-sit.md b/.changeset/polite-adults-sit.md new file mode 100644 index 0000000000..3d14a130a5 --- /dev/null +++ b/.changeset/polite-adults-sit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Adjusted the description's empty state on the starred entities table, diff --git a/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx b/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx index 2b9fae8221..695406aab5 100644 --- a/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx +++ b/plugins/home/src/homePageComponents/StarredEntities/Content.test.tsx @@ -82,4 +82,62 @@ describe('StarredEntitiesContent', () => { '/catalog/default/component/mock-starred-entity-2', ); }); + + it('should display call to action message if no entities are starred', async () => { + const mockedApi = new MockStarredEntitiesApi(); + + const mockCatalogApi = { + getEntities: jest + .fn() + .mockImplementation(async () => ({ items: entities })), + }; + + const { getByText } = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect( + getByText('Click the star beside an entity name to add it to this list!'), + ).toBeInTheDocument(); + }); + + it('should display user provided message if no entities are starred', async () => { + const mockedApi = new MockStarredEntitiesApi(); + + const mockCatalogApi = { + getEntities: jest + .fn() + .mockImplementation(async () => ({ items: entities })), + }; + + const { getByText } = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect(getByText('foo')).toBeInTheDocument(); + }); }); diff --git a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx index 31fa00378e..4654a7f860 100644 --- a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx +++ b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx @@ -41,7 +41,10 @@ import useAsync from 'react-use/lib/useAsync'; * * @public */ -export const Content = () => { + +export const Content = (props: { + noStarredEntitiesMessage?: React.ReactNode | undefined; +}) => { const catalogApi = useApi(catalogApiRef); const catalogEntityRoute = useRouteRef(entityRouteRef); const { starredEntities, toggleStarredEntity } = useStarredEntities(); @@ -76,7 +79,8 @@ export const Content = () => { if (starredEntities.size === 0) return ( - You do not have any starred entities yet! + {props.noStarredEntitiesMessage || + 'Click the star beside an entity name to add it to this list!'} );