= ({ originalYaml, modifiedYaml }) => {
- const { isDarkTheme } = useTheme();
-
- const hunks = useMemo(() => diffLines(originalYaml ?? '', modifiedYaml ?? ''), [originalYaml, modifiedYaml]);
-
- const { content, lineKinds } = useMemo(() => {
- const lines: string[] = [];
- const kinds: ('added' | 'removed' | 'context')[] = [];
- hunks.forEach((part) => {
- const prefix = part.added ? '+' : part.removed ? '-' : ' ';
- const kind: 'added' | 'removed' | 'context' = part.added ? 'added' : part.removed ? 'removed' : 'context';
- const partLines = part.value.replace(/\n$/, '').split('\n');
- partLines.forEach((line) => {
- lines.push(`${prefix}${line}`);
- kinds.push(kind);
- });
- });
- return { content: lines.join('\n'), lineKinds: kinds };
- }, [hunks]);
-
- const lineNumberStyle = useMemo(() => ({ paddingRight: '20px', minWidth: '40px', textAlign: 'right' as const }), []);
-
- return (
-
- {
- const kind = lineKinds[lineNumber - 1];
- if (kind === 'added') return { className: styles.added };
- if (kind === 'removed') return { className: styles.removed };
- return {};
- }}
- customStyle={{ margin: 0, padding: '20px', borderRadius: '4px', fontSize: '1rem', background: 'transparent' }}
- codeTagProps={{ style: { whiteSpace: 'pre-wrap' } }}
- >
- {content}
-
-
- );
-};
diff --git a/src/components/Yaml/YamlLoader.tsx b/src/components/Yaml/YamlLoader.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Yaml/YamlPanel.tsx b/src/components/Yaml/YamlPanel.tsx
index 1587c3d0..92b04a1b 100644
--- a/src/components/Yaml/YamlPanel.tsx
+++ b/src/components/Yaml/YamlPanel.tsx
@@ -37,7 +37,7 @@ const YamlPanel: FC = ({ yamlString, filename }) => {
)}
-
+
);
};
diff --git a/src/components/Yaml/YamlViewButton.tsx b/src/components/Yaml/YamlViewButton.tsx
index 735fd340..87636dc0 100644
--- a/src/components/Yaml/YamlViewButton.tsx
+++ b/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';
diff --git a/src/components/Yaml/YamlViewer.module.css b/src/components/Yaml/YamlViewer.module.css
index 4867abeb..9d4550c9 100644
--- a/src/components/Yaml/YamlViewer.module.css
+++ b/src/components/Yaml/YamlViewer.module.css
@@ -1,3 +1,5 @@
.container {
- position: relative;
+ width: 100%;
+ height: calc(100vh - 8rem);
+ max-width: 100%;
}
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index 575c7c03..55619f58 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/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 = ({ yamlString }) => {
- const { isDarkTheme } = useTheme();
-
+export const YamlViewer: FC = ({ yamlString, filename }) => {
return (
-
- {yamlString}
-
+
);
};
diff --git a/src/components/YamlEditor/YamlDiffEditor.tsx b/src/components/YamlEditor/YamlDiffEditor.tsx
new file mode 100644
index 00000000..3bd4b43d
--- /dev/null
+++ b/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,
+ '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 ;
+};
diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
new file mode 100644
index 00000000..be56a6f4
--- /dev/null
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -0,0 +1,30 @@
+import { Editor } 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 Editor component, except language (we force YAML)
+export type YamlEditorProps = Omit, 'language'>;
+
+// Simple wrapper that forwards all props to Monaco Editor
+export const YamlEditor = (props: YamlEditorProps) => {
+ const { isDarkTheme } = useTheme();
+ const { theme, options, ...rest } = props;
+ const computedTheme = theme ?? (isDarkTheme ? GITHUB_DARK_DEFAULT : GITHUB_LIGHT_DEFAULT);
+
+ const enforcedOptions = {
+ ...options,
+ minimap: { enabled: false },
+ };
+
+ return (
+
+ );
+};
diff --git a/src/lib/monaco.ts b/src/lib/monaco.ts
new file mode 100644
index 00000000..e17d5939
--- /dev/null
+++ b/src/lib/monaco.ts
@@ -0,0 +1,91 @@
+/* eslint-disable import/default */
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
+
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+
+import YamlWorker from 'monaco-yaml/yaml.worker?worker';
+
+// Use ESM monaco to avoid loading AMD loader from CDN
+loader.config({ monaco });
+
+export const GITHUB_LIGHT_DEFAULT = 'github-light-default';
+export const GITHUB_DARK_DEFAULT = 'github-dark-default';
+
+const GITHUB_LIGHT_EDITOR_COLORS: monaco.editor.IColors = {
+ 'editor.foreground': '#1f2328',
+ 'editor.background': '#ffffff',
+ 'editorWidget.background': '#f6f8fa',
+ 'editor.lineHighlightBackground': '#eaeef2',
+ 'editorCursor.foreground': '#0969da',
+ 'editor.selectionBackground': '#0969da33',
+ 'editor.inactiveSelectionBackground': '#0969da12',
+ 'editor.selectionHighlightBackground': '#1a7f3740',
+ 'editorLineNumber.foreground': '#8c959f',
+ 'editorLineNumber.activeForeground': '#1f2328',
+ 'editorIndentGuide.background': '#1f23281f',
+ 'editorIndentGuide.activeBackground': '#1f23283d',
+ 'editorGutter.background': '#ffffff',
+ 'editorHoverWidget.background': '#f6f8fa',
+ 'editorHoverWidget.border': '#d0d7de',
+ 'editorSuggestWidget.background': '#f6f8fa',
+ 'editorSuggestWidget.border': '#d0d7de',
+ 'editorWidget.border': '#d0d7de',
+ 'editorWhitespace.foreground': '#d0d7de',
+ 'editor.wordHighlightBackground': '#afb8c180',
+ 'editor.wordHighlightStrongBackground': '#afb8c14d',
+};
+
+const GITHUB_DARK_EDITOR_COLORS: monaco.editor.IColors = {
+ 'editor.foreground': '#e6edf3',
+ 'editor.background': '#0d1117',
+ 'editorWidget.background': '#161b22',
+ 'editor.lineHighlightBackground': '#161b22',
+ 'editorCursor.foreground': '#2f81f7',
+ 'editor.selectionBackground': '#2f81f733',
+ 'editor.inactiveSelectionBackground': '#2f81f712',
+ 'editor.selectionHighlightBackground': '#2ea04340',
+ 'editorLineNumber.foreground': '#6e7681',
+ 'editorLineNumber.activeForeground': '#e6edf3',
+ 'editorIndentGuide.background': '#e6edf31f',
+ 'editorIndentGuide.activeBackground': '#e6edf33d',
+ 'editorGutter.background': '#0d1117',
+ 'editorHoverWidget.background': '#161b22',
+ 'editorHoverWidget.border': '#30363d',
+ 'editorSuggestWidget.background': '#161b22',
+ 'editorSuggestWidget.border': '#30363d',
+ 'editorWidget.border': '#30363d',
+ 'editorWhitespace.foreground': '#484f58',
+ 'editor.wordHighlightBackground': '#6e768180',
+ 'editor.wordHighlightStrongBackground': '#6e76814d',
+};
+
+export const configureMonaco = () => {
+ // Route YAML language to monaco-yaml worker, everything else to the default editor worker
+ if (typeof window !== 'undefined') {
+ window.MonacoEnvironment = {
+ getWorker: (_moduleId: string, label: string): Worker => {
+ if (label === 'yaml') {
+ return new YamlWorker();
+ }
+ return new EditorWorker();
+ },
+ };
+ }
+
+ monaco.editor.defineTheme(GITHUB_LIGHT_DEFAULT, {
+ base: 'vs',
+ inherit: true,
+ rules: [],
+ colors: GITHUB_LIGHT_EDITOR_COLORS,
+ });
+
+ monaco.editor.defineTheme(GITHUB_DARK_DEFAULT, {
+ base: 'vs-dark',
+ inherit: true,
+ rules: [],
+ colors: GITHUB_DARK_EDITOR_COLORS,
+ });
+};
diff --git a/src/main.tsx b/src/main.tsx
index bd5a26d9..8518befd 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,3 +1,4 @@
+import { configureMonaco } from './lib/monaco.ts';
import React, { Suspense } from 'react';
import './index.css';
import App from './App';
@@ -18,6 +19,8 @@ import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/Illustr
import { AuthProviderOnboarding } from './spaces/onboarding/auth/AuthContextOnboarding.tsx';
import { AuthCallbackHandler } from './common/auth/AuthCallbackHandler.tsx';
+configureMonaco();
+
const ErrorFallback = ({ error }: FallbackProps) => {
const { t } = useTranslation();
diff --git a/src/utils/removeManagedFieldsAndFilterData.ts b/src/utils/removeManagedFieldsAndFilterData.ts
index dc01ee20..13984db0 100644
--- a/src/utils/removeManagedFieldsAndFilterData.ts
+++ b/src/utils/removeManagedFieldsAndFilterData.ts
@@ -40,6 +40,7 @@ const cleanUpResource = (
}
delete newResource.metadata.generation;
delete newResource.metadata.uid;
+ delete newResource.metadata.resourceVersion;
}
}
diff --git a/vite.config.js b/vite.config.js
index 34b19992..382cb0aa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import { viteFastify } from '@fastify/vite/plugin';
import react from '@vitejs/plugin-react';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
// https://vitejs.dev/config/
export default defineConfig({
@@ -11,6 +12,14 @@ export default defineConfig({
plugins: [
viteFastify({ spa: true }),
react(),
+ viteStaticCopy({
+ targets: [
+ {
+ src: 'node_modules/monaco-editor/min/vs',
+ dest: 'assets',
+ },
+ ],
+ }),
sentryVitePlugin({
org: process.env.SENTRY_ORG,
project: process.env.SENTRY_PROJECT,