Refactor customRoutes.tsx and ProjectConfigInterface.ts to include co…

…mponent props (#10359)

Co-authored-by: Hanzla Mateen <[email protected]>

packages/client/src/route/customRoutes.tsx

@@ -44,13 +44,13 @@ const CustomRoutes = ({ customRoutes }) => {
     <Suspense fallback={<LoadingCircle message={t('common:loader.loadingCustom')} />}>
       <Routes>
         {matchedRoutes.map((route, i) => {
-          const { route: r, component, props: p } = route
+          const { route: r, component, props: p, componentProps } = route
           const Element = component as any
           return (
             <Route
               key={`custom-route-${i}`}
               path={r.split('/')[1] === '' ? `${r}*` : `${r}/*`}
-              element={<Element />}
+              element={<Element {...componentProps} />}
               {...p}
             />
           )

packages/projects/ProjectConfigInterface.ts

@@ -51,6 +51,9 @@ export interface ProjectConfigInterface {
         [x: string]: any
         exact?: boolean
       }
+      componentProps?: {
+        [x: string]: any
+      }
     }
   }
 

packages/projects/loadRoute.ts

@@ -30,6 +30,7 @@ import { loadConfigForProject } from './loadConfigForProject'
 interface RouteData {
   component: ReturnType<typeof lazy>
   props: any
+  componentProps: any
 }
 
 export const loadRoute = async (project: string, route: string): Promise<RouteData | null> => {
@@ -38,7 +39,8 @@ export const loadRoute = async (project: string, route: string): Promise<RouteDa
     if (!projectConfig.routes || !projectConfig.routes[route]) return null
     return {
       component: lazy(projectConfig.routes[route].component),
-      props: projectConfig.routes![route].props
+      props: projectConfig.routes![route].props,
+      componentProps: projectConfig.routes![route].componentProps
     }
   } catch (e) {
     console.log(`Failed to import route ${route} for project ${project} with reason ${e}`)