Merge pull request #682 from devtron-labs/fix/code-editor-large-diff

fix: CodeEditor - large file incorrect diff

Author: RohitRaj011

package-lock.json

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

package.json

@@ -23,7 +23,7 @@ import { Progressing } from '@Common/Progressing'
 
 import { useCodeEditorContext } from './CodeEditor.context'
 import { CodeEditorRendererProps } from './types'
-import { getCodeEditorHeight, getRevertControlButton, updateDiffMinimapValues } from './utils'
+import { getCodeEditorHeight, getRevertControlButton, getScanLimit, updateDiffMinimapValues } from './utils'
 import { DiffMinimap } from './Extensions'
 
 export const CodeEditorRenderer = ({
@@ -180,6 +180,8 @@ export const CodeEditorRenderer = ({
     useEffect(() => {
         // DIFF VIEW INITIALIZATION
         if (!loading && codeMirrorMergeParentRef.current) {
+            const scanLimit = getScanLimit(lhsValue, value)
+
             codeMirrorMergeInstance?.destroy()
 
             const codeMirrorMergeView = new MergeView({
@@ -192,7 +194,7 @@ export const CodeEditorRenderer = ({
                     extensions: [...modifiedViewExtensions, modifiedUpdateListener],
                 },
                 ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
-                diffConfig: { scanLimit: 5000 },
+                diffConfig: { scanLimit, timeout: 5000 },
                 parent: codeMirrorMergeParentRef.current,
             })
             setCodeMirrorMergeInstance(codeMirrorMergeView)
@@ -212,7 +214,7 @@ export const CodeEditorRenderer = ({
                         extensions: diffMinimapExtensions,
                     },
                     gutter: false,
-                    diffConfig: { scanLimit: 5000 },
+                    diffConfig: { scanLimit, timeout: 5000 },
                     parent: diffMinimapParentRef.current,
                 })
 
@@ -272,6 +274,11 @@ export const CodeEditorRenderer = ({
 
     return diffMode ? (
         <div className={`flexbox w-100 ${componentSpecificThemeClass} ${codeEditorParentClassName}`}>
+            {!codeMirrorMergeInstance && (
+                <div className="flex h-100 w-100">
+                    <p>Calculating diff for large file. Please wait...</p>
+                </div>
+            )}
             <div
                 ref={codeMirrorMergeParentRef}
                 className={`cm-merge-theme flex-grow-1 h-100 dc__overflow-hidden ${readOnly ? 'code-editor__read-only' : ''}`}

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -457,9 +457,11 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
     }
 
     const mount = () => {
-        const findField = document.querySelector('[data-code-editor-find]') as HTMLInputElement
-        findField?.focus()
-        findField?.select()
+        requestAnimationFrame(() => {
+            const findField = document.querySelector('[data-code-editor-find]') as HTMLInputElement
+            findField?.focus()
+            findField?.select()
+        })
     }
 
     const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {

src/Common/CodeMirror/Extensions/findAndReplace.tsx

@@ -267,13 +267,13 @@
         &.cm-merge-a .cm-changedText,
         .cm-deletedChunk .cm-deletedText,
         &.cm-merge-a .cm-changedLineGutter {
-            background: var(--R300);
+            background: var(--R500);
         }
 
         &.cm-merge-b .cm-changedLine,
         &.cm-merge-b .cm-changedText,
         &.cm-merge-b .cm-changedLineGutter {
-            background: var(--G300);
+            background: var(--G500);
         }
     }
 

src/Common/CodeMirror/codeEditor.scss

@@ -168,6 +168,28 @@ export const updateDiffMinimapValues = (view: MergeView, transactions: readonly
     })
 }
 
+export const getScanLimit = (lhsValue: string, value: string) => {
+    const numberOfLines = Math.max((lhsValue ?? '').split('\n').length, (value ?? '').split('\n').length)
+
+    if (numberOfLines <= 5000) {
+        return 5000
+    }
+
+    if (numberOfLines <= 10000) {
+        return 10000
+    }
+
+    if (numberOfLines <= 15000) {
+        return 15000
+    }
+
+    if (numberOfLines <= 20000) {
+        return 20000
+    }
+
+    return 500
+}
+
 // DOM HELPERS
 export const getFoldGutterElement = (open: boolean) => {
     const icon = document.createElement('span')