Merge pull request #4885 from geototti21/add-prop-for-selected-filter-catalog

catalog: make initially selected filter configurable

.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
+<Route
+  path="/catalog"
+  element={<CatalogIndexPage initiallySelectedFilter="all" />}
+/>
+```

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(
+      <CatalogPage initiallySelectedFilter="all" />,
+    );
+    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 () => {

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<CatalogFilterType>();
   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}
             />
             <ResultsFilter availableTags={availableTags} />
           </div>
@@ -214,8 +220,8 @@ const CatalogPageContents = () => {
   );
 };
 
-export const CatalogPage = () => (
+export const CatalogPage = (props: CatalogPageProps) => (
   <EntityFilterGroupsProvider>
-    <CatalogPageContents />
+    <CatalogPageContents {...props} />
   </EntityFilterGroupsProvider>
 );