fix: code editor yaml & json validation

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.5-beta-3",
+    "version": "1.2.5-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -15,17 +15,16 @@
  */
 
 import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import * as monaco from 'monaco-editor'
+import { configureMonacoYaml } from 'monaco-yaml'
 import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor'
 import YAML from 'yaml'
 import ReactGA from 'react-ga4'
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { configureMonacoYaml } from 'monaco-yaml'
 
 import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamation.svg'
 import './codeEditor.scss'
-import 'monaco-editor'
 
 import { YAMLStringify, cleanKubeManifest, useJsonYaml } from '../Helper'
 import { useWindowSize } from '../Hooks'
@@ -43,6 +42,7 @@ import {
 } from './types'
 import { CodeEditorReducer, initialState } from './CodeEditor.reducer'
 import { MODES } from '../Constants'
+import jsonSchema from './jsonSchema.json' assert { type: 'json' }
 
 const CodeEditorContext = React.createContext(null)
 
@@ -56,6 +56,66 @@ function useCodeEditorContext() {
 
 const INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT = 100
 
+const yamlConfig = configureMonacoYaml(monaco, { validate: true, isKubernetes: true, completion: false })
+
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    enableSchemaRequest: true,
+    schemas: [
+        {
+            uri: 'https://json-schema.org/draft-07/schema#',
+            fileMatch: ['*'],
+            schema: jsonSchema,
+        },
+    ],
+    validate: true,
+    trailingCommas: 'error',
+    schemaValidation: 'error',
+})
+
+monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+        // @ts-ignore
+        { background: '#0B0F22' },
+    ],
+    colors: {
+        'editor.background': '#0B0F22',
+    },
+})
+
+monaco.editor.defineTheme(CodeEditorThemesKeys.networkStatusInterface, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+        // @ts-ignore
+        { background: '#1A1A1A' },
+    ],
+    colors: {
+        'editor.background': '#1A1A1A',
+    },
+})
+
+monaco.editor.defineTheme(CodeEditorThemesKeys.deleteDraft, {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'diffEditor.insertedTextBackground': '#ffd4d1',
+        'diffEditor.removedTextBackground': '#ffffff33',
+    },
+})
+
+monaco.editor.defineTheme(CodeEditorThemesKeys.unpublished, {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'diffEditor.insertedTextBackground': '#eaf1dd',
+        'diffEditor.removedTextBackground': '#ffffff33',
+    },
+})
+
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
     ({
         value,
@@ -105,49 +165,6 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
          * */
         const onChangeRef = useRef(onChange)
         onChangeRef.current = onChange
-        monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [
-                // @ts-ignore
-                { background: '#0B0F22' },
-            ],
-            colors: {
-                'editor.background': '#0B0F22',
-            },
-        })
-
-        monaco.editor.defineTheme(CodeEditorThemesKeys.networkStatusInterface, {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [
-                // @ts-ignore
-                { background: '#1A1A1A' },
-            ],
-            colors: {
-                'editor.background': '#1A1A1A',
-            },
-        })
-
-        monaco.editor.defineTheme(CodeEditorThemesKeys.deleteDraft, {
-            base: 'vs',
-            inherit: true,
-            rules: [],
-            colors: {
-                'diffEditor.insertedTextBackground': '#ffd4d1',
-                'diffEditor.removedTextBackground': '#ffffff33',
-            },
-        })
-
-        monaco.editor.defineTheme(CodeEditorThemesKeys.unpublished, {
-            base: 'vs',
-            inherit: true,
-            rules: [],
-            colors: {
-                'diffEditor.insertedTextBackground': '#eaf1dd',
-                'diffEditor.removedTextBackground': '#ffffff33',
-            },
-        })
 
         useEffect(() => {
             const rule = !disableSearch
@@ -222,23 +239,21 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         }, [height, contentHeight, adjustEditorHeightToContent])
 
         useEffect(() => {
-            if (!validatorSchema) {
-                return
-            }
-            const config = configureMonacoYaml(monaco, {
+            yamlConfig.update({
                 enableSchemaRequest: true,
+                validate: true,
                 isKubernetes,
-                schemas: [
-                    {
-                        uri: `https://github.com/devtron-labs/devtron/tree/main/scripts/devtron-reference-helm-charts/reference-chart_${chartVersion}/schema.json`, // id of the first schema
-                        fileMatch: ['*'], // associate with our model
-                        schema: validatorSchema,
-                    },
-                ],
+                completion: false,
+                schemas: validatorSchema
+                    ? [
+                          {
+                              uri: `https://github.com/devtron-labs/devtron/tree/main/scripts/devtron-reference-helm-charts/reference-chart_${chartVersion}/schema.json`, // id of the first schema
+                              fileMatch: ['*'], // associate with our model
+                              schema: validatorSchema,
+                          },
+                      ]
+                    : [],
             })
-            return () => {
-                config.dispose()
-            }
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [validatorSchema, chartVersion])
         useEffect(() => {