feat: CodeMirror - add revert controls in diff view

Author: RohitRaj011

src/Assets/IconV2/ic-arrow-right.svg

@@ -21,7 +21,7 @@ import { Progressing } from '@Common/Progressing'
 
 import { FocusEventHandler, useEffect, useRef, useState } from 'react'
 import { CodeEditorRendererProps } from './types'
-import { getCodeEditorHeight } from './utils'
+import { getCodeEditorHeight, getRevertControlButton } from './utils'
 
 export const CodeEditorRenderer = ({
     loading,
@@ -114,9 +114,11 @@ export const CodeEditorRenderer = ({
         <CodeMirrorMerge
             theme={codeEditorTheme}
             key={codemirrorMergeKey}
-            className={`w-100 vertical-divider ${isDarkTheme ? 'cm-merge-theme__dark' : 'cm-merge-theme__light'} ${codeEditorParentClassName}`}
+            className={`w-100 ${isDarkTheme ? 'cm-merge-theme__dark' : 'cm-merge-theme__light'} ${codeEditorParentClassName}`}
             gutter
             destroyRerender={false}
+            revertControls="a-to-b"
+            renderRevertControl={getRevertControlButton}
         >
             <CodeMirrorMerge.Original
                 basicSetup={false}

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -20,6 +20,10 @@
     background-color: var(--bg-code-editor-base);
 }
 
+.cm-mergeViewEditor:first-child {
+    border-right: 1px solid var(--N200);
+}
+
 .cm-mergeViewEditor:last-child {
     border-left: 1px solid var(--N200);
 }
@@ -28,6 +32,15 @@
     min-height: inherit;
 }
 
+.cm-merge-revert {
+    background-color: var(--bg-primary);
+
+    button {
+        margin-top: 4px;
+        padding: 0;
+    }
+}
+
 .cm-editor {
     &.cm-focused {
         outline: none;
@@ -45,10 +58,6 @@
     }
 
     &.cm-merge-a .cm-changedLineGutter {
-        position: absolute;
-        width: 100%;
-        left: 0;
-        z-index: -1;
         background: var(--bg-code-editor-red-gutter);
     }
 
@@ -62,10 +71,6 @@
     }
 
     &.cm-merge-b .cm-changedLineGutter {
-        position: absolute;
-        width: 100%;
-        left: 0;
-        z-index: -1;
         background: var(--bg-code-editor-green-gutter);
     }
 
@@ -147,6 +152,12 @@
         }
     }
 
+    .cm-changeGutter {
+        position: absolute;
+        width: 100%;
+        z-index: -1;
+    }
+
     .cm-foldGutter .cm-gutterElement:not(:first-child) span:not(.is-closed) {
         visibility: hidden;
     }

src/Common/CodeMirror/codeEditor.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { render } from 'react-dom'
 import { renderToString } from 'react-dom/server'
 import DOMPurify from 'dompurify'
 import { linter } from '@codemirror/lint'
@@ -36,6 +37,10 @@ import {
     stateExtensions,
 } from 'codemirror-json-schema'
 import { yamlCompletion, yamlSchemaHover, yamlSchemaLinter } from 'codemirror-json-schema/yaml'
+
+import { Icon } from '@Shared/Components'
+import { Tooltip } from '@Common/Tooltip'
+
 import { yamlParseLinter } from './Extensions'
 import { CodeEditorProps, FindReplaceToggleButtonProps, GetCodeEditorHeightReturnType, HoverTexts } from './types'
 
@@ -156,6 +161,21 @@ export const getReadOnlyElement = () => {
     return dom
 }
 
+export const getRevertControlButton = () => {
+    const dom = document.createElement('button')
+
+    render(
+        <Tooltip content="Revert this chunk" alwaysShowTippyOnHover>
+            <div className="flex">
+                <Icon name="ic-arrow-right" color="N600" size={20} />
+            </div>
+        </Tooltip>,
+        dom,
+    )
+
+    return dom
+}
+
 // EXTENSION UTILS
 export const getLanguageExtension = (mode: CodeEditorProps['mode']): Extension => {
     switch (mode) {

src/Common/CodeMirror/utils.tsx

@@ -1,6 +1,7 @@
 // NOTE: This file is auto-generated. Do not edit directly. Run the script `npm run generate-icon` to update.
 
 import { ReactComponent as ICAborted } from '@IconsV2/ic-aborted.svg'
+import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
 import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
 import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
 import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg'
@@ -49,6 +50,7 @@ import { IconBaseProps } from './types'
 
 export const iconMap = {
     'ic-aborted': ICAborted,
+    'ic-arrow-right': ICArrowRight,
     'ic-azure': ICAzure,
     'ic-bitbucket': ICBitbucket,
     'ic-build-color': ICBuildColor,