Merge pull request #762 from devtron-labs/fix/diff-viewer

fix: CodeEditor - reinitialize diff view on external value change to ensure consistent state

Author: RohitRaj011

package-lock.json

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

package.json

@@ -32,7 +32,6 @@ const DeploymentHistoryDiffView = ({
     baseTemplateConfiguration,
     previousConfigAvailable,
     rootClassName,
-    codeEditorKey,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
 
@@ -79,15 +78,7 @@ const DeploymentHistoryDiffView = ({
                 collapseUnchangedDiffView
             />
         ) : (
-            <CodeEditor
-                key={codeEditorKey}
-                value={editorValuesRHS}
-                height="auto"
-                disableSearch
-                readOnly
-                noParsing
-                mode={MODES.YAML}
-            />
+            <CodeEditor value={editorValuesRHS} height="auto" disableSearch readOnly noParsing mode={MODES.YAML} />
         )
 
     const handleShowVariablesClick = () => {

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx

@@ -550,8 +550,8 @@ export interface DeploymentTemplateHistoryType {
     baseTemplateConfiguration: DeploymentHistoryDetail
     previousConfigAvailable: boolean
     rootClassName?: string
-    codeEditorKey?: string
 }
+
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail
 }

src/Shared/Components/CICDHistory/types.tsx

@@ -61,6 +61,7 @@ export const CodeEditorRenderer = ({
     // REFS
     const codeMirrorRef = useRef<ReactCodeMirrorRef>()
     const codeMirrorMergeParentRef = useRef<HTMLDivElement>()
+    const codeMirrorMergeRef = useRef<MergeView>()
     const diffMinimapRef = useRef<MergeView>()
     const diffMinimapParentRef = useRef<HTMLDivElement>()
 
@@ -183,78 +184,102 @@ export const CodeEditorRenderer = ({
         }
     })
 
-    useEffect(() => {
-        // DIFF VIEW INITIALIZATION
-        if (!loading && codeMirrorMergeParentRef.current) {
-            const scanLimit = getScanLimit(lhsValue, value)
+    /**
+     * Initializes or reinitializes the CodeMirror merge view for diff comparison.
+     *
+     * This function:
+     * 1. Destroys any existing merge view instances to prevent memory leaks
+     * 2. Creates a new MergeView instance with the current values and configurations
+     * 3. Initializes the diff minimap if enabled
+     * 4. Updates the component state with the new instances
+     *
+     */
+    const initializeCodeMirrorMergeView = () => {
+        // Destroy existing merge view instance if it exists
+        codeMirrorMergeInstance?.destroy()
+        codeMirrorMergeRef.current?.destroy()
+
+        const codeMirrorMergeView = new MergeView({
+            a: {
+                doc: lhsValue,
+                extensions: [...originalViewExtensions, originalUpdateListener],
+            },
+            b: {
+                doc: value,
+                extensions: [...modifiedViewExtensions, modifiedUpdateListener],
+            },
+            ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
+            diffConfig: { scanLimit: getScanLimit(lhsValue, value), timeout: 5000 },
+            parent: codeMirrorMergeParentRef.current,
+            collapseUnchanged: collapseUnchanged ? {} : undefined,
+        })
 
-            codeMirrorMergeInstance?.destroy()
+        codeMirrorMergeRef.current = codeMirrorMergeView
+        setCodeMirrorMergeInstance(codeMirrorMergeView)
 
-            const codeMirrorMergeView = new MergeView({
+        // MINIMAP INITIALIZATION
+        if (!disableMinimap && codeMirrorMergeView && diffMinimapParentRef.current) {
+            diffMinimapInstance?.destroy()
+            diffMinimapRef.current?.destroy()
+
+            const diffMinimapMergeView = new MergeView({
                 a: {
                     doc: lhsValue,
-                    extensions: [...originalViewExtensions, originalUpdateListener],
+                    extensions: diffMinimapExtensions,
                 },
                 b: {
                     doc: value,
-                    extensions: [...modifiedViewExtensions, modifiedUpdateListener],
+                    extensions: diffMinimapExtensions,
                 },
-                ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
-                diffConfig: { scanLimit, timeout: 5000 },
-                parent: codeMirrorMergeParentRef.current,
-                collapseUnchanged: collapseUnchanged ? {} : undefined,
+                gutter: false,
+                diffConfig: { scanLimit: getScanLimit(lhsValue, value), timeout: 5000 },
+                parent: diffMinimapParentRef.current,
             })
-            setCodeMirrorMergeInstance(codeMirrorMergeView)
-
-            // MINIMAP INITIALIZATION
-            if (!disableMinimap && codeMirrorMergeView && diffMinimapParentRef.current) {
-                diffMinimapInstance?.destroy()
-                diffMinimapRef.current?.destroy()
-
-                const diffMinimapMergeView = new MergeView({
-                    a: {
-                        doc: lhsValue,
-                        extensions: diffMinimapExtensions,
-                    },
-                    b: {
-                        doc: value,
-                        extensions: diffMinimapExtensions,
-                    },
-                    gutter: false,
-                    diffConfig: { scanLimit, timeout: 5000 },
-                    parent: diffMinimapParentRef.current,
-                })
-
-                diffMinimapRef.current = diffMinimapMergeView
-                setDiffMinimapInstance(diffMinimapMergeView)
-            }
+
+            diffMinimapRef.current = diffMinimapMergeView
+            setDiffMinimapInstance(diffMinimapMergeView)
+        }
+    }
+
+    useEffect(() => {
+        // DIFF VIEW INITIALIZATION
+        if (!loading && codeMirrorMergeParentRef.current) {
+            initializeCodeMirrorMergeView()
         }
 
         return () => {
             setCodeMirrorMergeInstance(null)
             setDiffMinimapInstance(null)
+            codeMirrorMergeRef.current = null
             diffMinimapRef.current = null
         }
     }, [loading, codemirrorMergeKey, diffMode, collapseUnchanged, disableMinimap])
 
-    // Sync external changes of `lhsValue` and `value` state to the diff-editor state.
+    /**
+     * Synchronizes external changes of `lhsValue` and `value` with the diff-editor state.
+     *
+     * When the external state (lhsValue for left-hand side or value for right-hand side) changes,
+     * we need to update the CodeMirror merge view to reflect these changes. This effect detects
+     * discrepancies between the current editor content and the external state.
+     *
+     * Instead of trying to update the existing editors directly (which can be complex and error-prone),
+     * we reinitialize the entire merge view when the external state differs from the editor content.
+     * This ensures a clean, consistent state that properly reflects the external data.
+     *
+     */
     useEffect(() => {
-        if (codeMirrorMergeInstance) {
-            const originalDoc = codeMirrorMergeInstance.a.state.doc.toString()
-            if (originalDoc !== lhsValue) {
-                codeMirrorMergeInstance.a.dispatch({
-                    changes: { from: 0, to: originalDoc.length, insert: lhsValue || '' },
-                })
-            }
-
-            const modifiedDoc = codeMirrorMergeInstance.b.state.doc.toString()
-            if (modifiedDoc !== value) {
-                codeMirrorMergeInstance.b.dispatch({
-                    changes: { from: 0, to: modifiedDoc.length, insert: value || '' },
-                })
+        if (codeMirrorMergeRef.current) {
+            // Get the current content from both editors
+            const originalDoc = codeMirrorMergeRef.current.a.state.doc.toString()
+            const modifiedDoc = codeMirrorMergeRef.current.b.state.doc.toString()
+
+            // If either editor's content doesn't match the external state,
+            // reinitialize the entire merge view with the current values
+            if (originalDoc !== lhsValue || modifiedDoc !== value) {
+                initializeCodeMirrorMergeView()
             }
         }
-    }, [lhsValue, value, codeMirrorMergeInstance])
+    }, [lhsValue, value])
 
     // SCALING FACTOR UPDATER
     useEffect(() => {

src/Shared/Components/CodeEditor/CodeEditorRenderer.tsx

@@ -218,7 +218,6 @@ export const DeploymentConfigDiffMain = ({
                                 </div>
                             )}
                             <DeploymentHistoryDiffView
-                                codeEditorKey={`${sortingConfig?.sortBy}-${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
                                 baseTemplateConfiguration={secondaryList}
                                 currentConfiguration={primaryList}
                                 previousConfigAvailable