feat: Changed component to display YAML files to Monaco Editor (#308)

Author: lucasgoral

package-lock.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"
   }
 }

package.json

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

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

@@ -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/ControlPlaneListWorkspaceGridTile.tsx

@@ -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/ControlPlanes/List/WorkspacesList.module.css

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

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

@@ -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/SummarizeStep.tsx

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

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

@@ -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>
+  );
+};