Changed component to display YAML files to Monaco Editor

package.json

@@ -34,6 +34,7 @@
     "@fastify/static": "8.2.0",
     "@fastify/vite": "8.2.0",
     "@hookform/resolvers": "5.2.2",
+    "@monaco-editor/react": "^4.7.0",
     "@sentry/node": "10.15.0",
     "@sentry/react": "10.15.0",
     "@sentry/vite-plugin": "4.3.0",
@@ -54,13 +55,14 @@
     "i18next": "25.5.2",
     "javascript-time-ago": "2.5.12",
     "js-yaml": "4.1.0",
+    "monaco-editor": "^0.45.0",
+    "monaco-yaml": "^5.4.0",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.63.0",
     "react-i18next": "16.0.0",
     "react-router-dom": "7.9.3",
-    "react-syntax-highlighter": "15.6.6",
     "react-time-ago": "7.3.5",
     "swr": "2.3.6",
     "yaml": "2.8.1",
@@ -76,7 +78,6 @@
     "@types/node": "22.18.6",
     "@types/react": "19.1.15",
     "@types/react-dom": "19.1.9",
-    "@types/react-syntax-highlighter": "15.5.13",
     "@ui5/webcomponents-cypress-commands": "2.14.1",
     "@vitejs/plugin-react": "5.0.4",
     "@vitest/eslint-plugin": "1.3.13",
@@ -97,6 +98,7 @@
     "typescript": "5.9.2",
     "typescript-eslint": "8.44.1",
     "vite": "7.1.7",
+    "vite-plugin-static-copy": "^3.1.2",
     "vitest": "3.2.4"
   }
 }

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css

@@ -1,5 +1,5 @@
 .card {
-  margin: 0.75rem 0.75rem 0.75rem 0;
+  margin: 0;
 }
 
 .container {

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -1,4 +1,4 @@
-import { Button, FlexBox, Grid, ObjectPageSection, Panel, Title } from '@ui5/webcomponents-react';
+import { Button, FlexBox, ObjectPageSection, Panel, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
@@ -161,16 +161,18 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
               }
             />
           ) : (
-            <Grid defaultSpan="XL4 L4 M7 S12">
-              {controlplanes?.map((cp) => (
-                <ControlPlaneCard
-                  key={`${cp.metadata.name}--${cp.metadata.namespace}`}
-                  controlPlane={cp}
-                  projectName={projectName}
-                  workspace={workspace}
-                />
-              ))}
-            </Grid>
+            <div className={styles.wrapper}>
+              <div className={styles.grid}>
+                {controlplanes?.map((cp) => (
+                  <ControlPlaneCard
+                    key={`${cp.metadata.name}--${cp.metadata.namespace}`}
+                    controlPlane={cp}
+                    projectName={projectName}
+                    workspace={workspace}
+                  />
+                ))}
+              </div>
+            </div>
           )}
         </Panel>
       </ObjectPageSection>

src/components/ControlPlanes/List/WorkspacesList.module.css

@@ -1,3 +1,20 @@
 .createButton {
   margin-bottom: 2rem;
 }
+
+.wrapper {
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  @container (width > 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+  @container (width > 1024px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}

src/components/Wizards/CreateManagedControlPlane/SummarizeStep.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  position: relative;
+  height: 100%;
+}

src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx

@@ -6,12 +6,14 @@ import {
   ComponentsListItem,
   CreateManagedControlPlane,
 } from '../../../lib/api/types/crate/createManagedControlPlane.ts';
+
 import YamlPanel from '../../Yaml/YamlPanel.tsx';
 import { idpPrefix } from '../../../utils/idpPrefix.ts';
 import { UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
-import { YamlDiff } from '../../Yaml/YamlDiff.tsx';
 
+import styles from './SummarizeStep.module.css';
+import { YamlDiff } from './YamlDiff.tsx';
 interface SummarizeStepProps {
   watch: UseFormWatch<CreateDialogProps>;
   projectName: string;
@@ -30,9 +32,22 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
   isEditMode = false,
 }) => {
   const { t } = useTranslation();
-
+  const yamlString = stringify(
+    CreateManagedControlPlane(
+      watch('name'),
+      `${projectName}--ws-${workspaceName}`,
+      {
+        displayName: watch('displayName'),
+        chargingTarget: watch('chargingTarget'),
+        members: watch('members'),
+        componentsList: componentsList ?? [],
+        chargingTargetType: watch('chargingTargetType'),
+      },
+      idpPrefix,
+    ),
+  );
   return (
-    <>
+    <div className={styles.wrapper}>
       <Title>{t('common.summarize')}</Title>
       <Grid defaultSpan="XL6 L6 M6 S6">
         <div>
@@ -78,26 +93,10 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
               )}
             />
           ) : (
-            <YamlPanel
-              yamlString={stringify(
-                CreateManagedControlPlane(
-                  watch('name'),
-                  `${projectName}--ws-${workspaceName}`,
-                  {
-                    displayName: watch('displayName'),
-                    chargingTarget: watch('chargingTarget'),
-                    members: watch('members'),
-                    componentsList: componentsList ?? [],
-                    chargingTargetType: watch('chargingTargetType'),
-                  },
-                  idpPrefix,
-                ),
-              )}
-              filename={`mcp_${projectName}--ws-${workspaceName}`}
-            />
+            <YamlPanel yamlString={yamlString} filename={`mcp_${projectName}--ws-${workspaceName}`} />
           )}
         </div>
       </Grid>
-    </>
+    </div>
   );
 };

src/components/Wizards/CreateManagedControlPlane/YamlDiff.module.css

@@ -0,0 +1,8 @@
+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: calc(50% - 2rem);
+  right: 0;
+  overflow: hidden;
+}

src/components/Wizards/CreateManagedControlPlane/YamlDiff.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+import styles from './YamlDiff.module.css';
+import { YamlDiffEditor } from '../../YamlEditor/YamlDiffEditor.tsx';
+type YamlDiffProps = {
+  originalYaml: string;
+  modifiedYaml: string;
+};
+
+export const YamlDiff: FC<YamlDiffProps> = ({ originalYaml, modifiedYaml }) => {
+  return (
+    <div className={styles.container}>
+      <YamlDiffEditor original={originalYaml} modified={modifiedYaml} />
+    </div>
+  );
+};

src/components/Yaml/YamlPanel.tsx

@@ -37,7 +37,7 @@ const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
           </Button>
         )}
       </FlexBox>
-      <YamlViewer yamlString={yamlString} />
+      <YamlViewer yamlString={yamlString} filename={filename} />
     </div>
   );
 };

src/components/Yaml/YamlViewButton.tsx

@@ -2,6 +2,7 @@ import { Button } from '@ui5/webcomponents-react';
 import styles from './YamlViewButton.module.css';
 import { useTranslation } from 'react-i18next';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
+
 import { YamlIcon } from './YamlIcon.tsx';
 import { useSplitter } from '../Splitter/SplitterContext.tsx';
 import { YamlSidePanel } from './YamlSidePanel.tsx';

src/components/Yaml/YamlViewer.module.css

@@ -1,3 +1,5 @@
 .container {
-  position: relative;
+  width: 100%;
+  height: calc(100vh - 8rem);
+  max-width: 100%;
 }

src/components/Yaml/YamlViewer.tsx

@@ -1,42 +1,18 @@
 import { FC } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { materialLight, materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import { YamlEditor } from '../YamlEditor/YamlEditor';
 
 import styles from './YamlViewer.module.css';
-import { useTheme } from '../../hooks/useTheme.ts';
+
 type YamlViewerProps = {
   yamlString: string;
+  filename: string;
 };
 
-export const YamlViewer: FC<YamlViewerProps> = ({ yamlString }) => {
-  const { isDarkTheme } = useTheme();
-
+export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   return (
     <div className={styles.container}>
-      <SyntaxHighlighter
-        language="yaml"
-        style={isDarkTheme ? materialDark : materialLight}
-        showLineNumbers
-        lineNumberStyle={{
-          paddingRight: '20px',
-          minWidth: '40px',
-          textAlign: 'right',
-        }}
-        customStyle={{
-          margin: 0,
-          padding: '20px',
-          borderRadius: '4px',
-          fontSize: '1rem',
-          background: 'transparent',
-        }}
-        codeTagProps={{
-          style: {
-            whiteSpace: 'pre-wrap',
-          },
-        }}
-      >
-        {yamlString}
-      </SyntaxHighlighter>
+      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );
 };

src/components/YamlEditor/YamlDiffEditor.tsx

@@ -0,0 +1,41 @@
+import { DiffEditor } from '@monaco-editor/react';
+import type { ComponentProps } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { GITHUB_DARK_DEFAULT, GITHUB_LIGHT_DEFAULT } from '../../lib/monaco.ts';
+
+// Reuse all props from the underlying Monaco DiffEditor component, except language (we force YAML)
+export type YamlDiffEditorProps = Omit<
+  ComponentProps<typeof DiffEditor>,
+  'language' | 'defaultLanguage' | 'originalLanguage' | 'modifiedLanguage'
+>;
+
+// Simple wrapper that forwards all props to Monaco DiffEditor
+export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
+  const { isDarkTheme } = useTheme();
+  const { theme, options, ...rest } = props;
+  const computedTheme = theme ?? (isDarkTheme ? GITHUB_DARK_DEFAULT : GITHUB_LIGHT_DEFAULT);
+
+  const simplifiedOptions = {
+    // Start from consumer-provided options, then enforce our simplified look
+    ...options,
+    scrollbar: {
+      ...(options?.scrollbar ?? {}),
+      useShadows: false,
+      vertical: 'auto' as const,
+      horizontal: 'auto' as const,
+      alwaysConsumeMouseWheel: false,
+    },
+    lineNumbers: 'off' as const,
+    minimap: { enabled: false },
+    glyphMargin: false,
+    renderLineHighlight: 'none' as const,
+    folding: false,
+    renderOverviewRuler: false,
+    scrollBeyondLastLine: false,
+    renderMarginRevertIcon: false,
+    automaticLayout: true,
+    readOnly: true,
+  };
+
+  return <DiffEditor {...rest} theme={computedTheme} options={simplifiedOptions} height="100%" language="yaml" />;
+};