fix(greenhouse): add and read organization from pathname

Author: taymoor89

apps/greenhouse/src/Shell.tsx

@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { StrictMode } from "react"
+import React, { StrictMode, useEffect, useLayoutEffect } from "react"
 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"
 import Auth from "./components/Auth"
 import styles from "./styles.css?inline"
 import StoreProvider from "./components/StoreProvider"
-import { AuthProvider } from "./components/AuthProvider"
+import { AuthProvider, useAuth } from "./components/AuthProvider"
 import { routeTree } from "./routeTree.gen"
 
 // Create a new router instance
@@ -39,25 +39,35 @@ export type AppProps = {
   enableHashedRouting?: boolean
 }
 
-const StyledShell = (props: AppProps) => {
-  props = { ...props, currentHost: props.currentHost === "origin" ? window.location.origin : props.currentHost }
+const getBasePath = (auth: any) => {
+  // Determine if org is part of the domain
+  const currentUrl = new URL(window.location.href)
+  const organizationIsPartOfDomain = currentUrl.host.match(/^(.+)\.dashboard\..+/)
+  if (organizationIsPartOfDomain) {
+    return "/"
+  }
+  // If the organization is not part of the domain, extract it from the auth token
+  const orgString = auth?.data?.raw.groups?.find((g: any) => g.indexOf("organization:") === 0)
+  return orgString ? orgString.split(":")[1] : undefined
+}
 
+function App(props: AppProps) {
+  const auth = useAuth()
   /*
    * Dynamically change the type of history on the router
    * based on the enableHashedRouting prop. This ensures that
    * the correct history type is used when A Shell app does not
    * want the app to use browser history.
    */
   router.update({
-    routeTree,
+    basepath: getBasePath(auth),
     context: { appProps: props },
     stringifySearch: encodeV2,
     history: props.enableHashedRouting ? createHashHistory() : createBrowserHistory(),
     parseSearch: (searchString) => {
       if (!props.enableHashedRouting) {
         return decodeV2(searchString)
       }
-
       /*
        * In case of hashed routing Tanstack router returns URL search params of the entire URL rather than just from the hashed part.
        * We'll have to extract the query part from the hash because otherwise in embedded mode the app will be taking search params from the shell app as well.
@@ -75,6 +85,11 @@ const StyledShell = (props: AppProps) => {
       return decodeV2(searchStringFromHash)
     },
   })
+  return <RouterProvider router={router} />
+}
+
+const StyledShell = (props: AppProps) => {
+  props = { ...props, currentHost: props.currentHost === "origin" ? window.location.origin : props.currentHost }
 
   return (
     <AppShellProvider>
@@ -91,7 +106,7 @@ const StyledShell = (props: AppProps) => {
           <StoreProvider options={props}>
             <MessagesProvider>
               <StrictMode>
-                <RouterProvider basepath="/" router={router} />
+                <App {...props} />
               </StrictMode>
             </MessagesProvider>
           </StoreProvider>

apps/greenhouse/src/components/AuthProvider.tsx

@@ -11,7 +11,8 @@ const setOrganizationToUrl = (groups: any) => {
   if (orgString) {
     const name = orgString.split(":")[1]
     let url = new URL(window.location.href)
-    url.searchParams.set("org", name)
+    // set the org as the first path segment
+    url.pathname = `/${name}`
     // @ts-expect-error TS(2345): Argument of type 'null' is not assignable to param... Remove this comment to see the full error message
     window.history.replaceState(null, null, url.href)
   }
@@ -54,8 +55,17 @@ function resolveMockAuth(value: any) {
 
 const extractOrganizationName = () => {
   const currentUrl = new URL(window.location.href)
+
+  // Try to extract from subdomain
   let match = currentUrl.host.match(/^(.+)\.dashboard\..+/)
-  return match ? match[1] : currentUrl.searchParams.get("org")
+  if (match) return match[1]
+
+  // Try to extract from the first path segment
+  const pathParts = currentUrl.pathname.split("/").filter(Boolean)
+  if (pathParts.length > 0) return pathParts[0]
+
+  // Return null if no organization found
+  return undefined
 }
 
 const initializeDemoAuth = (

apps/greenhouse/src/components/Extension.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { Suspense, useEffect, useRef } from "react"
+import { useRouter } from "@tanstack/react-router"
 import * as supernova from "@cloudoperators/juno-app-supernova"
 import * as doop from "@cloudoperators/juno-app-doop"
 import * as heureka from "@cloudoperators/juno-app-heureka"
@@ -33,6 +34,7 @@ type ExtensionProps = {
 }
 
 function Extension({ id, config, auth, appProps }: ExtensionProps) {
+  const router = useRouter()
   const appContainerRef = useRef<HTMLDivElement>(null)
   const app = getApp(config.name)
 
@@ -48,7 +50,7 @@ function Extension({ id, config, auth, appProps }: ExtensionProps) {
           ? {
               embedded: true,
               token: auth?.JWT,
-              basePath: `/${config.id}`,
+              basePath: `${router.basepath}/${config.id}`,
               enableHashedRouting: appProps?.enableHashedRouting || false,
             }
           : { auth: auth }),