Merge pull request #456 from devtron-labs/feat/patch-dt-cm-cs

feat: Merge Strategy Patch - DT/CM/CS

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import YAML from 'yaml'
+import { noop, YAMLStringify } from '@Common/Helper'
 import { MODES } from '../Constants'
 import { Action, CodeEditorInitialValueType, CodeEditorState, CodeEditorThemesKeys } from './types'
 
@@ -34,16 +36,39 @@ export const CodeEditorReducer = (state: CodeEditorState, action: Action) => {
     }
 }
 
+export const parseValueToCode = (value: string, mode: string, tabSize: number) => {
+    let obj = null
+
+    try {
+        obj = JSON.parse(value)
+    } catch {
+        try {
+            obj = YAML.parse(value)
+        } catch {
+            noop()
+        }
+    }
+
+    let final = value
+
+    if (obj) {
+        final = mode === MODES.JSON ? JSON.stringify(obj, null, tabSize) : YAMLStringify(obj)
+    }
+
+    return final
+}
+
 export const initialState = ({
     mode,
     theme,
     value,
     diffView,
     noParsing,
+    tabSize,
 }: CodeEditorInitialValueType): CodeEditorState => ({
     mode: mode as MODES,
     theme: (theme || CodeEditorThemesKeys.vs) as CodeEditorThemesKeys,
-    code: value,
+    code: parseValueToCode(value, mode, tabSize),
     diffMode: diffView,
     noParsing: [MODES.JSON, MODES.YAML].includes(mode as MODES) ? noParsing : true,
 })

src/Assets/Icon/ic-file-code.svg

@@ -16,7 +16,6 @@
 
 import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'
 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'
@@ -27,7 +26,7 @@ import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamat
 import './codeEditor.scss'
 import 'monaco-editor'
 
-import { YAMLStringify, cleanKubeManifest, useJsonYaml } from '../Helper'
+import { cleanKubeManifest, useEffectAfterMount, useJsonYaml } from '../Helper'
 import { useWindowSize } from '../Hooks'
 import Select from '../Select/Select'
 import RadioGroup from '../RadioGroup/RadioGroup'
@@ -41,8 +40,8 @@ import {
     CodeEditorThemesKeys,
     InformationBarProps,
 } from './types'
-import { CodeEditorReducer, initialState } from './CodeEditor.reducer'
-import { MODES } from '../Constants'
+import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer'
+import { DEFAULT_JSON_SCHEMA_URI, MODES } from '../Constants'
 
 const CodeEditorContext = React.createContext(null)
 
@@ -76,7 +75,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         customLoader,
         focus,
         validatorSchema,
-        chartVersion,
+        schemaURI = DEFAULT_JSON_SCHEMA_URI,
         isKubernetes = true,
         cleanData = false,
         onBlur,
@@ -93,16 +92,13 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const monacoRef = useRef(null)
         const { width, height: windowHeight } = useWindowSize()
         const memoisedReducer = React.useCallback(CodeEditorReducer, [])
-        const [state, dispatch] = useReducer(memoisedReducer, initialState({ mode, theme, value, diffView, noParsing }))
+        const [state, dispatch] = useReducer(memoisedReducer, initialState({ mode, theme, value, diffView, noParsing, tabSize }))
         const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
         const [, originalJson, originlaYaml] = useJsonYaml(defaultValue, tabSize, state.mode, !state.noParsing)
         const [contentHeight, setContentHeight] = useState(
             adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height,
         )
-        /**
-         * TODO: can be removed with this new merge into react-monaco-editor :)
-         * see: https://github.com/react-monaco-editor/react-monaco-editor/pull/955
-         * */
+        // TODO: upgrade to 0.56.2 to remove this
         const onChangeRef = useRef(onChange)
         onChangeRef.current = onChange
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
@@ -230,7 +226,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                 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
+                        uri: schemaURI,
                         fileMatch: ['*'], // associate with our model
                         schema: validatorSchema,
                     },
@@ -240,7 +236,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                 config.dispose()
             }
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [validatorSchema, chartVersion])
+        }, [validatorSchema, schemaURI])
         useEffect(() => {
             if (!editorRef.current) {
                 return
@@ -260,28 +256,18 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             onChangeRef.current?.(value)
         }
 
-        useEffect(() => {
+        useEffectAfterMount(() => {
             if (noParsing) {
                 setCode(value)
 
                 return
             }
-            let obj
+
             if (value === state.code) {
                 return
             }
-            try {
-                obj = JSON.parse(value)
-            } catch (err) {
-                try {
-                    obj = YAML.parse(value)
-                } catch (err) {}
-            }
-            let final = value
-            if (obj) {
-                final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAMLStringify(obj)
-            }
-            setCode(final)
+
+            setCode(parseValueToCode(value, state.mode, tabSize))
         }, [value, noParsing])
 
         useEffect(() => {

src/Assets/Icon/ic-medal.svg

@@ -46,7 +46,7 @@ interface CodeEditorBaseInterface {
     validatorSchema?: any
     isKubernetes?: boolean
     cleanData?: boolean
-    chartVersion?: any
+    schemaURI?: string
     /**
      * If true, disable the in-built search of monaco editor
      * @default false
@@ -109,6 +109,7 @@ export interface CodeEditorInitialValueType {
     theme?: string
     value: string
     noParsing?: boolean
+    tabSize: number
 }
 
 export interface CodeEditorState {

src/Assets/Icon/ic-stamp.svg

@@ -23,6 +23,7 @@ export const Host = window?.__ORCHESTRATOR_ROOT__ ?? '/orchestrator'
 export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
 export const DOCUMENTATION_VERSION = '/v/v0.7'
 export const DISCORD_LINK = 'https://discord.devtron.ai/'
+export const DEFAULT_JSON_SCHEMA_URI = 'https://json-schema.org/draft/2020-12/schema'
 export const DOCUMENTATION = {
     APP_METRICS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/app-details/app-metrics`,
     APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
@@ -516,6 +517,7 @@ export const API_STATUS_CODES = {
     EXPECTATION_FAILED: 417,
     UNPROCESSABLE_ENTITY: 422,
     LOCKED: 423,
+    UNPROCESSABLE_CONTENT: 422,
 }
 
 export enum SERVER_MODE {
@@ -577,3 +579,8 @@ export enum GitProviderType {
  * Formats the schema removing any irregularity in the existing schema
  */
 export const getFormattedSchema = (schema?: string) => JSON.stringify(JSON.parse(schema ?? '{}'), null, 2)
+
+export const UNCHANGED_ARRAY_ELEMENT_SYMBOL = Symbol(
+    `The element at this index remains unchanged from the original object.
+     This symbol is used by @buildObjectFromPath & later consumed by @recursivelyRemoveSymbolFromArraysInObject`,
+)