chore(greenhouse): allow enabling hashed routing mainly for PR Preview

Author: taymoor89

apps/greenhouse/appProps.template.json

@@ -2,5 +2,6 @@
   "authIssuerUrl": "https://auth.backend.com/",
   "authClientId": "client-id",
   "currentHost": "https://assets.server.com/",
-  "apiEndpoint": "https://api.greenhouse.com/"
+  "apiEndpoint": "https://api.greenhouse.com/",
+  "enableHashedRouting": false
 }

apps/greenhouse/src/Shell.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { StrictMode } from "react"
-import { createRouter, RouterProvider } from "@tanstack/react-router"
+import { createBrowserHistory, createHashHistory, createRouter, RouterProvider } from "@tanstack/react-router"
 import { AppShellProvider } from "@cloudoperators/juno-ui-components"
 import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import { decodeV2, encodeV2 } from "@cloudoperators/juno-url-state-provider"
@@ -52,6 +52,7 @@ const StyledShell = (props: AppProps) => {
     routeTree,
     context: { appProps: props },
     stringifySearch: encodeV2,
+    history: props.enableHashedRouting ? createHashHistory() : createBrowserHistory(),
     parseSearch: (searchString) => {
       if (!props.enableHashedRouting) {
         return decodeV2(searchString)

apps/greenhouse/src/components/Extension.tsx

@@ -8,6 +8,7 @@ import * as supernova from "@cloudoperators/juno-app-supernova"
 import * as doop from "@cloudoperators/juno-app-doop"
 import * as heureka from "@cloudoperators/juno-app-heureka"
 import * as admin from "../components/core-apps/org-admin"
+import { AppProps } from "../Shell"
 
 const getApp = (appName: string) => {
   switch (appName) {
@@ -28,9 +29,10 @@ type ExtensionProps = {
   id: string
   config: any
   auth: any
+  appProps: AppProps
 }
 
-function Extension({ id, config, auth }: ExtensionProps) {
+function Extension({ id, config, auth, appProps }: ExtensionProps) {
   const appContainerRef = useRef<HTMLDivElement>(null)
   const app = getApp(config.name)
 
@@ -47,6 +49,7 @@ function Extension({ id, config, auth }: ExtensionProps) {
               embedded: true,
               token: auth?.JWT,
               basePath: `/${config.id}`,
+              enableHashedRouting: appProps?.enableHashedRouting || false,
             }
           : { auth: auth }),
       },

apps/greenhouse/src/routes/$extensionId.*.tsx

@@ -19,11 +19,12 @@ function RouteComponent() {
   // @ts-expect-error TS(2339): Property 'data' does not exist on type 'unknown'.
   const { data: auth } = useAuth()
   const { extensionId } = Route.useParams()
+  const { appProps } = Route.useRouteContext()
   const appConfig = config[extensionId]
 
   if (!appConfig) {
     return null
   }
 
-  return <Extension id={extensionId} config={appConfig} auth={auth} />
+  return <Extension id={extensionId} config={appConfig} auth={auth} appProps={appProps} />
 }