refactor(greenhouse): migrate YamlViewer from @uiw/react-codemirror to native CodeMirror packages

.changeset/many-meteors-add.md

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

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/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={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>
   )
 }