Merge pull request #393 from devtron-labs/feat/rjsf-field-selector

fix: use useEffectAfterMount to setCode instead of useEffect

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.0.3-beta-7",
+    "version": "1.0.3-beta-8",
     "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/Common/CodeEditor/CodeEditor.reducer.ts

@@ -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,7 +40,7 @@ import {
     CodeEditorThemesKeys,
     InformationBarProps,
 } from './types'
-import { CodeEditorReducer, initialState } from './CodeEditor.reducer'
+import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer'
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '../Constants'
 
 const CodeEditorContext = React.createContext(null)
@@ -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, {
@@ -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/CodeEditor.tsx

@@ -109,6 +109,7 @@ export interface CodeEditorInitialValueType {
     theme?: string
     value: string
     noParsing?: boolean
+    tabSize: number
 }
 
 export interface CodeEditorState {

src/Common/CodeEditor/types.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/Common/RJSF/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/index.ts

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

src/Pages/App/AppConfiguration/DeploymentTemplate/GUIView/types.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/GUIView/utils.ts

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