diff --git a/.changeset/catalog-chocolate-cake.md b/.changeset/catalog-chocolate-cake.md new file mode 100644 index 0000000000..3e400bf5bb --- /dev/null +++ b/.changeset/catalog-chocolate-cake.md @@ -0,0 +1,12 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Add the ability to change the initially selected filter, if not set it still defaults to `owned`. + +```js +} +/> +``` diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index accfe6eda4..03f211a7bb 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -134,6 +134,12 @@ describe('CatalogPage', () => { fireEvent.click(getByText(/All/)); expect(await findByText(/All \(2\)/)).toBeInTheDocument(); }); + it('should set initial filter correctly', async () => { + const { findByText } = renderWrapped( + , + ); + expect(await findByText(/All \(2\)/)).toBeInTheDocument(); + }); // 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 selectedfilter', async () => { diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 4679c10096..fd3d63edd7 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -59,7 +59,11 @@ const useStyles = makeStyles(theme => ({ }, })); -const CatalogPageContents = () => { +export type CatalogPageProps = { + initiallySelectedFilter?: string; +}; + +const CatalogPageContents = (props: CatalogPageProps) => { const styles = useStyles(); const { loading, @@ -79,6 +83,8 @@ const CatalogPageContents = () => { setSelectedSidebarItem, ] = useState(); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; + const initiallySelectedFilter = + selectedSidebarItem?.id ?? props.initiallySelectedFilter ?? 'owned'; const createComponentLink = useRouteRef(createComponentRouteRef); const addMockData = useCallback(async () => { try { @@ -197,7 +203,7 @@ const CatalogPageContents = () => { onChange={({ label, id }) => setSelectedSidebarItem({ label, id }) } - initiallySelected={selectedSidebarItem?.id ?? 'owned'} + initiallySelected={initiallySelectedFilter} /> @@ -214,8 +220,8 @@ const CatalogPageContents = () => { ); }; -export const CatalogPage = () => ( +export const CatalogPage = (props: CatalogPageProps) => ( - + );