Merge branch 'main' into artie-fix-preview-landingpage

Author: ArtieReus

.changeset/improve-error-message-type-safety.md

@@ -0,0 +1,6 @@
+---
+"@cloudoperators/juno-app-greenhouse": patch
+"@cloudoperators/juno-app-heureka": patch
+---
+
+Improve ErrorMessage type safety.

.changeset/many-meteors-add.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-greenhouse": patch
+---
+
+Migrate YamlViewer from @uiw/react-codemirror to native CodeMirror packages

.changeset/stale-onions-know.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+feat(docs): add first version of sign-in ux docs page

apps/greenhouse/package.json

@@ -56,10 +56,13 @@
     "@cloudoperators/juno-ui-components": "workspace:*",
     "@cloudoperators/juno-url-state-provider": "workspace:*",
     "@cloudoperators/greenhouse-auth-provider": "workspace:*",
-    "@codemirror/lang-yaml": "6.1.2",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.39.15",
     "@tanstack/react-query": "5.90.21",
     "@tanstack/react-router": "1.161.3",
-    "@uiw/react-codemirror": "4.25.4",
     "js-yaml": "4.1.1",
     "lodash": "4.17.23"
   }

apps/greenhouse/src/Shell.tsx

@@ -15,6 +15,7 @@ import styles from "./styles.css?inline"
 import StoreProvider, { useGlobalsApiEndpoint } from "./components/StoreProvider"
 import { AuthProvider, useAuth } from "./components/AuthProvider"
 import { routeTree } from "./routeTree.gen"
+import { getRouterBasePath } from "./utils/organizationResolver"
 
 // Create a new query client instance
 const queryClient = new QueryClient()
@@ -47,18 +48,7 @@ export type AppProps = {
   demoUserToken?: string
   currentHost?: string
   enableHashedRouting?: boolean
-}
-
-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
+  basePath?: string
 }
 
 const getUser = (auth: unknown) => ({
@@ -85,7 +75,8 @@ function App(props: AppProps) {
    * want the app to use browser history.
    */
   router.update({
-    basepath: getBasePath(auth),
+    // @ts-expect-error - auth?.data type needs to be properly defined
+    basepath: getRouterBasePath(auth?.data?.raw?.groups, props.basePath),
     context: { appProps: props, apiClient, user },
     stringifySearch: encodeV2,
     parseSearch: decodeV2,

apps/greenhouse/src/components/AuthProvider.tsx

@@ -6,6 +6,7 @@
 import React, { createContext, useContext, useState, useMemo, useRef, useEffect } from "react"
 import { oidcSession, mockedSession, tokenSession } from "@cloudoperators/juno-oauth"
 import { createAuthStore, AuthStore } from "@cloudoperators/greenhouse-auth-provider"
+import { extractOrganizationName } from "../utils/organizationResolver"
 
 const setOrganizationToUrl = (groups: any, enableHashedRouting: boolean) => {
   const orgName = groups?.find((g: any) => g.startsWith("organization:"))?.split(":")[1]
@@ -72,18 +73,6 @@ function resolveMockAuth(value: any) {
   return result
 }
 
-const extractOrganizationName = (enableHashedRouting: boolean) => {
-  const currentUrl = new URL(window.location.href)
-
-  // Try to extract from subdomain
-  let match = currentUrl.host.match(/^(.+)\.dashboard\..+/)
-  if (match) return match[1]
-  // If enableHashedRouting is true, take path from the hashed part of the URL otherwise take it from the pathname
-  const path = enableHashedRouting ? currentUrl.hash.replace("#/", "") : currentUrl.pathname
-  const pathParts = path.split("/").filter(Boolean)
-  return pathParts.length > 0 ? pathParts[0] : undefined
-}
-
 const initializeDemoAuth = (
   orgName: any,
   demoUserToken: any,
@@ -200,9 +189,10 @@ export const AuthProvider = ({ options, children }: any) => {
       demoOrg = "demo",
       demoUserToken,
       enableHashedRouting,
+      basePath,
     } = options || {}
 
-    const orgName = extractOrganizationName(enableHashedRouting)
+    const orgName = extractOrganizationName(enableHashedRouting, basePath)
 
     // extract mock params
     const { isMock, parsedAuth } = resolveMockAuth(mockAuth)

apps/greenhouse/src/components/admin/common/ErrorBoundary/ErrorMessage.test.tsx

@@ -31,4 +31,18 @@ describe("ErrorMessage", () => {
     const errorText = screen.getByText("TestError: Something went wrong")
     expect(errorText).toBeInTheDocument()
   })
+
+  it("renders error from string", () => {
+    const error = "Failed to load data"
+    render(<ErrorMessage error={error} />)
+    const errorText = screen.getByText("Error: Failed to load data")
+    expect(errorText).toBeInTheDocument()
+  })
+
+  it("renders default message for unknown error types", () => {
+    const error = { someOtherProperty: "value" }
+    render(<ErrorMessage error={error} />)
+    const errorText = screen.getByText("Error: Something went wrong")
+    expect(errorText).toBeInTheDocument()
+  })
 })

apps/greenhouse/src/components/admin/common/ErrorBoundary/ErrorMessage.tsx

@@ -4,27 +4,37 @@
  */
 
 import React from "react"
-import { FallbackProps } from "react-error-boundary"
 import { Icon, Stack } from "@cloudoperators/juno-ui-components"
 
-type ErrorMessageProps =
-  | {
-      error: Error
+function getErrorInfo(error: unknown): { name: string; message: string } {
+  const defaultError = { name: "Error", message: "Something went wrong" }
+
+  if (error instanceof Error) {
+    return {
+      name: error.name || defaultError.name,
+      message: error.message || defaultError.message,
     }
-  | FallbackProps
+  }
+
+  if (typeof error === "string") {
+    return { name: defaultError.name, message: error }
+  }
+
+  return defaultError
+}
+
+export interface ErrorMessageProps {
+  error: unknown
+}
 
 export const ErrorMessage = ({ error }: ErrorMessageProps) => {
-  // Handle both direct Error prop and FallbackProps from react-error-boundary
-  const errorObj = error as Error
-  const errorName = errorObj.name ? `${errorObj.name}: ` : "Error: "
-  const errorMessage = errorObj.message || "Something went wrong"
+  const { name, message } = getErrorInfo(error)
 
   return (
     <Stack gap="2" alignment="center">
       <Icon icon="danger" className="text-theme-danger" />
       <span>
-        {errorName}
-        {errorMessage}
+        {name}: {message}
       </span>
     </Stack>
   )

apps/greenhouse/src/components/admin/common/YamlViewer.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import { describe, it, expect } from "vitest"
 import YamlViewer from "./YamlViewer"
 
@@ -21,13 +21,13 @@ describe("YamlViewer", () => {
         },
       }
 
-      render(<YamlViewer value={mockData} data-testid="codemirror" />)
+      render(<YamlViewer value={mockData} data-testid="yaml-viewer" />)
 
       await waitFor(() => {
-        const editor = screen.getByTestId("codemirror")
-        expect(editor).toBeInTheDocument()
-        expect(editor).toHaveAttribute("aria-label", "YAML data viewer (read-only)")
-        expect(editor).toHaveAttribute("aria-readonly", "true")
+        const editorWrapper = screen.getByTestId("yaml-viewer")
+        expect(editorWrapper).toBeInTheDocument()
+        const editorContent = within(editorWrapper).getByLabelText("YAML data viewer (read-only)")
+        expect(editorContent).toHaveAttribute("aria-readonly", "true")
       })
     })
 
@@ -40,11 +40,11 @@ describe("YamlViewer", () => {
         },
       }
 
-      render(<YamlViewer value={mockData} data-testid="codemirror" />)
+      render(<YamlViewer value={mockData} data-testid="yaml-viewer" />)
 
       await waitFor(() => {
-        const editor = screen.getByTestId("codemirror")
-        const editorText = editor.textContent || ""
+        const editorWrapper = screen.getByTestId("yaml-viewer")
+        const editorText = editorWrapper.textContent || ""
 
         expect(editorText).toContain("apiVersion")
         expect(editorText).toContain("v1")
@@ -65,12 +65,14 @@ describe("YamlViewer", () => {
         invalidFunction: () => {},
       }
 
-      render(<YamlViewer value={invalidData} data-testid="codemirror" />)
+      render(<YamlViewer value={invalidData} data-testid="yaml-viewer" />)
 
       await waitFor(() => {
         // Check if ErrorMessage is rendered (outside editor)
         expect(screen.getByText(/Failed to serialize object to YAML/i)).toBeInTheDocument()
-        expect(screen.queryByTestId("codemirror")).not.toBeInTheDocument()
+        // expect(screen.queryByTestId("yaml-viewer")).not.toBeInTheDocument()
+        const editorWrapper = screen.getByTestId("yaml-viewer")
+        expect(within(editorWrapper).queryByLabelText("YAML data viewer (read-only)")).not.toBeInTheDocument()
       })
     })
   })

apps/greenhouse/src/components/admin/common/YamlViewer.tsx

@@ -3,18 +3,50 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useRef } from "react"
-import CodeMirror, { EditorView, highlightWhitespace } from "@uiw/react-codemirror"
+import React, { useMemo, useRef, useEffect } from "react"
+import { EditorView, highlightWhitespace, lineNumbers } from "@codemirror/view"
+import { EditorState } from "@codemirror/state"
 import { yaml } from "@codemirror/lang-yaml"
+import { oneDark } from "@codemirror/theme-one-dark"
 import yamlParser from "js-yaml"
 import { ErrorMessage } from "../common/ErrorBoundary/ErrorMessage"
 
-interface YamlViewerProps extends Omit<React.ComponentProps<typeof CodeMirror>, "value"> {
+interface YamlViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value"> {
   value: object
+  className?: string
 }
 
-export default function YamlViewer({ value, ...props }: YamlViewerProps) {
+function createEditorExtensions() {
+  return [
+    yaml(),
+    oneDark,
+    highlightWhitespace(),
+    lineNumbers(),
+    EditorView.editable.of(false),
+    EditorView.lineWrapping,
+    EditorView.theme({
+      ".cm-highlightSpace": {
+        backgroundImage:
+          "url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='3' cy='3' r='1' fill='%23cccccc' /></svg>\")",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: "contain",
+        opacity: 0.1,
+      },
+      ".cm-scroller": {
+        fontFamily: "monospace",
+      },
+    }),
+    EditorView.contentAttributes.of({
+      "aria-label": "YAML data viewer (read-only)",
+      "aria-readonly": "true",
+    }),
+  ]
+}
+
+export default function YamlViewer({ value, className = "", ...props }: YamlViewerProps) {
   const containerRef = useRef<HTMLDivElement>(null)
+  const editorViewRef = useRef<EditorView | null>(null)
 
   const { yamlContent, error } = useMemo(() => {
     try {
@@ -33,34 +65,54 @@ export default function YamlViewer({ value, ...props }: YamlViewerProps) {
     }
   }, [value])
 
+  // Store initial content in a ref to avoid triggering effect re-runs
+  const initialContentRef = useRef(yamlContent)
+
+  // Create the CodeMirror editor instance once
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const state = EditorState.create({
+      doc: initialContentRef.current,
+      extensions: createEditorExtensions(),
+    })
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    })
+
+    editorViewRef.current = view
+
+    return () => {
+      view.destroy()
+      editorViewRef.current = null
+    }
+  }, [])
+
+  // Update editor content when yamlContent changes
+  useEffect(() => {
+    if (!editorViewRef.current) return
+
+    const currentDoc = editorViewRef.current.state.doc.toString()
+    if (currentDoc !== yamlContent) {
+      const scrollPos = editorViewRef.current.scrollDOM.scrollTop
+
+      editorViewRef.current.dispatch({
+        changes: {
+          from: 0,
+          to: editorViewRef.current.state.doc.length,
+          insert: yamlContent,
+        },
+      })
+
+      editorViewRef.current.scrollDOM.scrollTop = scrollPos
+    }
+  }, [yamlContent])
+
   return (
-    <div ref={containerRef} className="overflow-x-auto max-w-full">
-      {error ? (
-        <ErrorMessage error={new Error(error)} />
-      ) : (
-        <CodeMirror
-          value={yamlContent}
-          theme="dark"
-          extensions={[
-            yaml(),
-            highlightWhitespace(),
-            EditorView.theme({
-              ".cm-highlightSpace": {
-                backgroundImage:
-                  "url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='3' cy='3' r='1' fill='%23cccccc' /></svg>\")",
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "center",
-                backgroundSize: "contain",
-                opacity: 0.1,
-              },
-            }),
-          ]}
-          editable={false}
-          aria-label="YAML data viewer (read-only)"
-          aria-readonly="true"
-          {...props}
-        />
-      )}
+    <div className={`overflow-x-auto max-w-full ${className}`} {...props}>
+      {error ? <ErrorMessage error={error} /> : <div ref={containerRef} />}
     </div>
   )
 }