chore(greenhouse): reroute old admin area to new one

Author: taymoor89

.changeset/polite-jars-train.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-greenhouse": minor
+---
+
+Replace old admin area with the new one.

apps/greenhouse/src/components/Extension.tsx

@@ -20,8 +20,6 @@ const getApp = (appName: string) => {
       return doop
     case "heureka":
       return heureka
-    case "org-admin":
-      return admin
     default:
       return null
   }

apps/greenhouse/src/components/core-apps/org-admin/components/clusters/App.tsx

@@ -46,3 +46,4 @@ const StyledApp = (props: any) => {
 }
 
 export default StyledApp
+export { App as ClustersAppWithoutShadowDOM }

apps/greenhouse/src/components/core-apps/org-admin/components/clusters/AppContent.tsx

@@ -40,7 +40,7 @@ const AppContent = ({ expires }: any) => {
   }
 
   return (
-    <Container>
+    <Container px={false}>
       <>
         <DataGridToolbar>
           <ButtonRow>

apps/greenhouse/src/components/nav/PluginNav.tsx

@@ -24,6 +24,7 @@ const AppIcon = ({ name }: any) => {
       return <DoopIcon />
     case "heureka":
       return <HeurekaIcon />
+    case "admin":
     default:
       return <Icon icon="autoAwesomeMosaic" />
   }
@@ -65,7 +66,10 @@ const PluginNav = () => {
   const mngConfig = usePlugin().mngConfig()
   const navigate = useNavigate({ from: "/" })
   const matches = useMatches()
-  const activeApp = matches.find((match) => match.routeId === "/$extensionId/$")?.params.extensionId
+  const extensionIdMatch = matches.find((match) => match.routeId === "/$extensionId/$")?.params.extensionId
+  const isAdminRoute = matches.some((match) => match.routeId.startsWith("/admin"))
+  // If we're on /admin route, set activeApp to "admin", otherwise use extension ID
+  const activeApp = isAdminRoute ? "admin" : extensionIdMatch
   // @ts-expect-error TS(2339): Property 'data' does not exist on type 'unknown'.
   const { data: authData, loggedIn, login, logout } = useAuth()
 
@@ -106,6 +110,19 @@ const PluginNav = () => {
         alignment="center"
         className="mt-4 py-4 border-theme-background-lvl-1 border-y-2"
       >
+        {/* Static Organization/Admin navigation item */}
+        <Stack
+          direction="vertical"
+          gap="3"
+          alignment="center"
+          className={`greenhouse-nav-item ${navItem(activeApp === "admin")}`}
+          role="button"
+          onClick={() => navigateToApp("admin")}
+        >
+          <AppIcon name="admin" />
+          <span className={appNameStyles}>Organization</span>
+        </Stack>
+
         {mngConfig.map((appConf: any, i: any) => (
           <Stack
             direction="vertical"

apps/greenhouse/src/lib/plugin.ts

@@ -91,20 +91,7 @@ const Plugin = ({ environment, apiEndpoint, currentHost }: any) => {
   const store = createStore<PluginState>()(
     devtools(() => ({
       active: [],
-      config: {
-        [`org-admin`]: createPluginConfig({
-          id: "org-admin",
-          core: true,
-          name: "org-admin",
-          displayName: "Organization",
-          navType: NAV_TYPES.MNG,
-          props: {
-            assetsUrl: currentHost,
-            apiEndpoint: apiEndpoint,
-            environment: environment,
-          },
-        }),
-      },
+      config: {},
       appConfig: [], // kube app configs
       mngConfig: [], // management app configs
       isFetching: false,

apps/greenhouse/src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as OrgAdminRouteImport } from './routes/org-admin'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AdminIndexRouteImport } from './routes/admin/index'
@@ -21,6 +22,11 @@ import { Route as AdminPluginPresetsPluginPresetNameIndexRouteImport } from './r
 import { Route as AdminPluginPresetsPluginPresetNamePluginInstancesRouteRouteImport } from './routes/admin/plugin-presets/$pluginPresetName/plugin-instances/route'
 import { Route as AdminPluginPresetsPluginPresetNamePluginInstancesPluginInstanceRouteImport } from './routes/admin/plugin-presets/$pluginPresetName/plugin-instances/$pluginInstance'
 
+const OrgAdminRoute = OrgAdminRouteImport.update({
+  id: '/org-admin',
+  path: '/org-admin',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminRouteRoute = AdminRouteRouteImport.update({
   id: '/admin',
   path: '/admin',
@@ -87,6 +93,7 @@ const AdminPluginPresetsPluginPresetNamePluginInstancesPluginInstanceRoute =
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/admin': typeof AdminRouteRouteWithChildren
+  '/org-admin': typeof OrgAdminRoute
   '/admin/plugin-presets': typeof AdminPluginPresetsRouteRouteWithChildren
   '/$extensionId/$': typeof ExtensionIdSplatRoute
   '/admin/clusters': typeof AdminClustersRoute
@@ -99,6 +106,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/org-admin': typeof OrgAdminRoute
   '/$extensionId/$': typeof ExtensionIdSplatRoute
   '/admin/clusters': typeof AdminClustersRoute
   '/admin': typeof AdminIndexRoute
@@ -111,6 +119,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/admin': typeof AdminRouteRouteWithChildren
+  '/org-admin': typeof OrgAdminRoute
   '/admin/plugin-presets': typeof AdminPluginPresetsRouteRouteWithChildren
   '/$extensionId/$': typeof ExtensionIdSplatRoute
   '/admin/clusters': typeof AdminClustersRoute
@@ -126,6 +135,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/admin'
+    | '/org-admin'
     | '/admin/plugin-presets'
     | '/$extensionId/$'
     | '/admin/clusters'
@@ -138,6 +148,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/org-admin'
     | '/$extensionId/$'
     | '/admin/clusters'
     | '/admin'
@@ -149,6 +160,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/admin'
+    | '/org-admin'
     | '/admin/plugin-presets'
     | '/$extensionId/$'
     | '/admin/clusters'
@@ -163,11 +175,19 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AdminRouteRoute: typeof AdminRouteRouteWithChildren
+  OrgAdminRoute: typeof OrgAdminRoute
   ExtensionIdSplatRoute: typeof ExtensionIdSplatRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/org-admin': {
+      id: '/org-admin'
+      path: '/org-admin'
+      fullPath: '/org-admin'
+      preLoaderRoute: typeof OrgAdminRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/admin': {
       id: '/admin'
       path: '/admin'
@@ -317,6 +337,7 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AdminRouteRoute: AdminRouteRouteWithChildren,
+  OrgAdminRoute: OrgAdminRoute,
   ExtensionIdSplatRoute: ExtensionIdSplatRoute,
 }
 export const routeTree = rootRouteImport

apps/greenhouse/src/routes/admin/clusters.tsx

@@ -3,22 +3,54 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from "react"
-import { createFileRoute } from "@tanstack/react-router"
-import { Crumb } from "../-types"
+import React, { useEffect } from "react"
+import { createFileRoute, useRouteContext } from "@tanstack/react-router"
+import { Container, ContentHeading, Stack } from "@cloudoperators/juno-ui-components"
+import { useAuth } from "../../components/AuthProvider"
+import { useGlobalsApiEndpoint } from "../../components/StoreProvider"
+import { ClustersAppWithoutShadowDOM } from "../../components/core-apps/org-admin/components/clusters/App"
+import { useActions } from "@cloudoperators/juno-messages-provider"
 
 export const Route = createFileRoute("/admin/clusters")({
   component: RouteComponent,
-  loader: () => {
-    const crumb: Crumb = {
+  loader: () => ({
+    crumb: {
       label: "Clusters",
-    }
-    return {
-      crumb,
-    }
-  },
+      icon: "home",
+    },
+  }),
 })
 
 function RouteComponent() {
-  return <div>Hello "/admin/clusters"!</div>
+  // @ts-expect-error TS(2339): Property 'data' does not exist on type 'unknown'.
+  const { data: authData } = useAuth()
+  const { addMessage, removeMessage } = useActions()
+  const apiEndpoint = useGlobalsApiEndpoint()
+  const { user } = useRouteContext({ from: "/admin/clusters" })
+  const token = authData?.JWT
+  const namespace = user.organization
+
+  useEffect(() => {
+    const messageId = addMessage({
+      variant: "warning",
+      text: "This view is from the legacy interface and will be updated with a modern design and improved functionality.",
+      dismissible: false,
+    })
+    return () => {
+      if (messageId) {
+        removeMessage(messageId)
+      }
+    }
+  }, [addMessage, removeMessage])
+
+  return (
+    <Stack direction="vertical" gap="4">
+      <Container px={false} py={false}>
+        <ContentHeading>Clusters Overview</ContentHeading>
+        <p>Manage and monitor clusters</p>
+      </Container>
+      {/* @ts-expect-error TS(2339): Property 'data' does not exist on type 'unknown'. */}
+      <ClustersAppWithoutShadowDOM apiEndpoint={apiEndpoint} token={token} namespace={namespace} />
+    </Stack>
+  )
 }

apps/greenhouse/src/routes/org-admin.tsx

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createFileRoute, redirect } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/org-admin")({
+  beforeLoad: () => {
+    // eslint-disable-next-line @typescript-eslint/only-throw-error
+    throw redirect({
+      to: "/admin",
+    })
+  },
+})