Merge pull request #756 from devtron-labs/feat/replace-diff-viewer

feat: Remove DiffViewer component, use CodeEditor to render collapse unchanged readOnly diffView

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.14.1-pre-3",
+    "version": "1.14.1-pre-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -122,7 +122,6 @@
         "qrcode.react": "^4.2.0",
         "react-canvas-confetti": "^2.0.7",
         "react-dates": "^21.8.0",
-        "react-diff-viewer-continued": "^3.4.0",
         "react-draggable": "^4.4.5",
         "react-international-phone": "^4.5.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",

package.json

@@ -89,7 +89,9 @@ export const ResizableTagTextArea = ({
     }
 
     useEffect(() => {
-        reInitHeight()
+        setTimeout(() => {
+            reInitHeight()
+        }, 100)
     }, [])
 
     useThrottledEffect(reInitHeight, 500, [value])

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -19,8 +19,6 @@ import { useParams } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 
 import { CodeEditor } from '@Shared/Components/CodeEditor'
-import { renderDiffViewNoDifferenceState } from '@Shared/Components/DeploymentConfigDiff'
-import { DiffViewer } from '@Shared/Components/DiffViewer'
 
 import { ReactComponent as Info } from '../../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ViewVariablesIcon } from '../../../../Assets/Icon/ic-view-variable-toggle.svg'
@@ -71,10 +69,14 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () =>
         previousConfigAvailable ? (
-            <DiffViewer
-                oldValue={editorValuesLHS}
-                newValue={editorValuesRHS}
-                codeFoldMessageRenderer={renderDiffViewNoDifferenceState(editorValuesLHS, editorValuesRHS)}
+            <CodeEditor
+                height="100%"
+                originalValue={editorValuesLHS}
+                modifiedValue={editorValuesRHS}
+                mode={MODES.YAML}
+                noParsing
+                diffView
+                collapseUnchangedDiffView
             />
         ) : (
             <CodeEditor

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

@@ -77,7 +77,6 @@ const CodeEditor = <DiffView extends boolean = false>({
     onChange,
     onOriginalValueChange,
     onModifiedValueChange,
-    readOnly,
     placeholder,
     diffView,
     loading,
@@ -88,8 +87,13 @@ const CodeEditor = <DiffView extends boolean = false>({
     onBlur,
     onFocus,
     autoFocus,
-    disableSearch = false,
+    collapseUnchangedDiffView = false,
+    ...resProps
 }: CodeEditorProps<DiffView>) => {
+    // DERIVED PROPS
+    const disableSearch = (collapseUnchangedDiffView || resProps.disableSearch) ?? false
+    const readOnly = (collapseUnchangedDiffView || resProps.readOnly) ?? false
+
     // HOOKS
     const { appTheme } = useTheme()
 
@@ -209,7 +213,7 @@ const CodeEditor = <DiffView extends boolean = false>({
             { key: 'Escape', run: blurOnEscape, stopPropagation: true },
         ]),
         indentationMarkers(),
-        getLanguageExtension(mode),
+        getLanguageExtension(mode, collapseUnchangedDiffView),
         foldingCompartment.of(foldConfig),
         lintGutter(),
         search({
@@ -277,6 +281,8 @@ const CodeEditor = <DiffView extends boolean = false>({
                 modifiedViewExtensions={modifiedViewExtensions}
                 extensions={extensions}
                 diffMinimapExtensions={diffMinimapExtensions}
+                collapseUnchanged={collapseUnchangedDiffView}
+                disableMinimap={collapseUnchangedDiffView}
             />
         </CodeEditorContext.Provider>
     )