catalog: make initially selected filter configurable

Signed-off-by: Ioannis Georgoulas <ioannis@paddle.com>

.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.tsx

@@ -59,7 +59,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const CatalogPageContents = () => {
+export type CatalogPageOpts = {
+  initiallySelectedFilter?: string;
+};
+
+const CatalogPageContents = (opt: CatalogPageOpts) => {
   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 ?? opt.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>
@@ -213,8 +219,8 @@ const CatalogPageContents = () => {
   );
 };
 
-export const CatalogPage = () => (
+export const CatalogPage = (opt: CatalogPageOpts) => (
   <EntityFilterGroupsProvider>
-    <CatalogPageContents />
+    <CatalogPageContents {...opt} />
   </EntityFilterGroupsProvider>
 );