feat: add patch merge strategy in deployment template

package.json

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

src/Common/CodeEditor/CodeEditor.reducer.ts

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

@@ -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/Common/CodeEditor/types.ts

@@ -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/Common/Constants.ts

@@ -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`,
@@ -514,6 +515,7 @@ export const API_STATUS_CODES = {
     EXPECTATION_FAILED: 417,
     UNPROCESSABLE_ENTITY: 422,
     LOCKED: 423,
+    UNPROCESSABLE_CONTENT: 422,
 }
 
 export enum SERVER_MODE {

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -48,11 +48,11 @@ export const ResizableTagTextArea = ({
 
     const reInitHeight = () => {
         refVar.current.style.height = `${minHeight}px`
-        if (dependentRef) {
+        if (dependentRef?.current) {
             dependentRef.current.style.height = `${minHeight}px`
         }
         let nextHeight = refVar.current.scrollHeight
-        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
+        if (dependentRef?.current && nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight
         }
         if (minHeight && nextHeight < minHeight) {
@@ -62,7 +62,7 @@ export const ResizableTagTextArea = ({
             nextHeight = maxHeight
         }
         refVar.current.style.height = `${nextHeight}px`
-        if (dependentRef) {
+        if (dependentRef?.current) {
             dependentRef.current.style.height = `${nextHeight}px`
         }
     }

src/Common/Helper.tsx

@@ -17,7 +17,7 @@
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import DOMPurify from 'dompurify'
 import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
-import { compare as compareJSON, applyPatch, unescapePathComponent } from 'fast-json-patch'
+import { compare as compareJSON, applyPatch, unescapePathComponent,deepClone } from 'fast-json-patch'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -667,7 +667,7 @@ export const flatMapOfJSONPaths = (
 
 export const applyCompareDiffOnUneditedDocument = (uneditedDocument: object, editedDocument: object) => {
     const patch = compareJSON(uneditedDocument, editedDocument)
-    return applyPatch(uneditedDocument, patch).newDocument
+    return applyPatch(deepClone(uneditedDocument), patch).newDocument
 }
 
 /**

src/Common/Markdown/MarkDown.tsx

@@ -22,7 +22,15 @@ import './markdown.scss'
 
 const renderer = new marked.Renderer()
 
-const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscapedText, ...props }: MarkDownProps) => {
+const MarkDown = ({
+    setExpandableIcon,
+    markdown: markdownProp,
+    className,
+    breaks,
+    disableEscapedText,
+    ...props
+}: MarkDownProps) => {
+    const markdown = markdownProp || ''
     const mdeRef = useRef(null)
 
     const getHeight = () => {

src/Common/RJSF/index.ts

@@ -15,6 +15,6 @@
  */
 
 export { RJSFForm } from './Form'
-export * from './types'
+export type * from './types'
 export { getInferredTypeFromValueType, getRedirectionProps } from './utils'
 export { HIDE_SUBMIT_BUTTON_UI_SCHEMA } from './constants'

src/Pages/App/AppConfiguration/DeploymentTemplate/GUIView/index.ts

@@ -0,0 +1,2 @@
+export { ViewError as GUIViewError } from './utils'
+export type { ViewErrorType as GUIViewErrorType } from './types'

src/Pages/App/AppConfiguration/DeploymentTemplate/GUIView/types.ts

@@ -0,0 +1 @@
+export interface ViewErrorType extends Record<'title' | 'subTitle', string> {}

src/Pages/App/AppConfiguration/DeploymentTemplate/GUIView/utils.ts

@@ -0,0 +1,12 @@
+import { ViewErrorType } from './types'
+
+export class ViewError implements ViewErrorType {
+    title: string = ''
+
+    subTitle: string = ''
+
+    constructor(title: string, subTitle: string) {
+        this.title = title
+        this.subTitle = subTitle
+    }
+}

src/Pages/App/AppConfiguration/DeploymentTemplate/index.ts

@@ -0,0 +1 @@
+export * from './GUIView'

src/Pages/App/AppConfiguration/index.ts

@@ -0,0 +1 @@
+export * from './DeploymentTemplate'

src/Pages/App/index.ts

@@ -0,0 +1 @@
+export * from './AppConfiguration'

src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/service.ts

@@ -24,7 +24,11 @@ export const getDeploymentManifest = async (
             valuesAndManifestFlag: ValuesAndManifestFlagDTO.MANIFEST,
         }
 
-        return post<ResolvedDeploymentTemplateDTO>(ROUTES.APP_TEMPLATE_DATA, payload, { signal: abortSignal })
+        const response = await post<ResolvedDeploymentTemplateDTO>(ROUTES.APP_TEMPLATE_DATA, payload, {
+            signal: abortSignal,
+        })
+
+        return response
     } catch (error) {
         if (!getIsRequestAborted(error)) {
             showError(error)