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

Author: RohitRaj011

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.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/CodeEditor/CodeEditor.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>
     )

src/Shared/Components/CodeEditor/CodeEditorRenderer.tsx

@@ -46,6 +46,8 @@ export const CodeEditorRenderer = ({
     extensions,
     autoFocus,
     diffMinimapExtensions,
+    collapseUnchanged = false,
+    disableMinimap = false,
 }: CodeEditorRendererProps) => {
     // CONTEXTS
     const { value, lhsValue, diffMode } = useCodeEditorContext()
@@ -160,9 +162,11 @@ export const CodeEditorRenderer = ({
             handleLhsOnChange(val, vu)
         }
 
-        // Using `diffMinimapRef` instead of `diffMinimapInstance` since this extension captures the initial reference in a closure.
-        // Changes to `diffMinimapInstance` won't be reflected after initialization, so we rely on `diffMinimapRef.current` for updates.
-        updateDiffMinimapValues(diffMinimapRef.current, vu.transactions, 'a')
+        if (!disableMinimap) {
+            // Using `diffMinimapRef` instead of `diffMinimapInstance` since this extension captures the initial reference in a closure.
+            // Changes to `diffMinimapInstance` won't be reflected after initialization, so we rely on `diffMinimapRef.current` for updates.
+            updateDiffMinimapValues(diffMinimapRef.current, vu.transactions, 'a')
+        }
     })
 
     const modifiedUpdateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
@@ -172,9 +176,11 @@ export const CodeEditorRenderer = ({
             handleOnChange(val, vu)
         }
 
-        // Using `diffMinimapRef` instead of `diffMinimapInstance` since this extension captures the initial reference in a closure.
-        // Changes to `diffMinimapInstance` won't be reflected after initialization, so we rely on `diffMinimapRef.current` for updates.
-        updateDiffMinimapValues(diffMinimapRef.current, vu.transactions, 'b')
+        if (!disableMinimap) {
+            // Using `diffMinimapRef` instead of `diffMinimapInstance` since this extension captures the initial reference in a closure.
+            // Changes to `diffMinimapInstance` won't be reflected after initialization, so we rely on `diffMinimapRef.current` for updates.
+            updateDiffMinimapValues(diffMinimapRef.current, vu.transactions, 'b')
+        }
     })
 
     useEffect(() => {
@@ -196,11 +202,12 @@ export const CodeEditorRenderer = ({
                 ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
                 diffConfig: { scanLimit, timeout: 5000 },
                 parent: codeMirrorMergeParentRef.current,
+                collapseUnchanged: collapseUnchanged ? {} : undefined,
             })
             setCodeMirrorMergeInstance(codeMirrorMergeView)
 
             // MINIMAP INITIALIZATION
-            if (codeMirrorMergeView && diffMinimapParentRef.current) {
+            if (!disableMinimap && codeMirrorMergeView && diffMinimapParentRef.current) {
                 diffMinimapInstance?.destroy()
                 diffMinimapRef.current?.destroy()
 
@@ -228,7 +235,7 @@ export const CodeEditorRenderer = ({
             setDiffMinimapInstance(null)
             diffMinimapRef.current = null
         }
-    }, [loading, codemirrorMergeKey, diffMode])
+    }, [loading, codemirrorMergeKey, diffMode, collapseUnchanged, disableMinimap])
 
     // Sync external changes of `lhsValue` and `value` state to the diff-editor state.
     useEffect(() => {
@@ -251,14 +258,19 @@ export const CodeEditorRenderer = ({
 
     // SCALING FACTOR UPDATER
     useEffect(() => {
-        setTimeout(() => {
-            setScalingFactor(
-                codeMirrorMergeInstance
-                    ? Math.min(codeMirrorMergeInstance.dom.clientHeight / codeMirrorMergeInstance.dom.scrollHeight, 1)
-                    : 1,
-            )
-        }, 100)
-    }, [lhsValue, value, codeMirrorMergeInstance])
+        if (!disableMinimap) {
+            setTimeout(() => {
+                setScalingFactor(
+                    codeMirrorMergeInstance
+                        ? Math.min(
+                              codeMirrorMergeInstance.dom.clientHeight / codeMirrorMergeInstance.dom.scrollHeight,
+                              1,
+                          )
+                        : 1,
+                )
+            }, 100)
+        }
+    }, [lhsValue, value, codeMirrorMergeInstance, disableMinimap])
 
     const { codeEditorClassName, codeEditorHeight, codeEditorParentClassName } = getCodeEditorHeight(height)
 
@@ -286,12 +298,14 @@ export const CodeEditorRenderer = ({
                 ref={codeMirrorMergeParentRef}
                 className={`cm-merge-theme flex-grow-1 h-100 dc__overflow-hidden ${readOnly ? 'code-editor__read-only' : ''}`}
             />
-            <DiffMinimap
-                theme={theme}
-                view={codeMirrorMergeInstance}
-                diffMinimapParentRef={diffMinimapParentRef}
-                scalingFactor={scalingFactor}
-            />
+            {!disableMinimap && (
+                <DiffMinimap
+                    theme={theme}
+                    view={codeMirrorMergeInstance}
+                    diffMinimapParentRef={diffMinimapParentRef}
+                    scalingFactor={scalingFactor}
+                />
+            )}
         </div>
     ) : (
         <div

src/Shared/Components/CodeEditor/codeEditor.scss

@@ -244,6 +244,20 @@
         content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.24239 2.18666L1.43119 10.4987C1.3542 10.6317 1.3136 10.7827 1.31348 10.9364C1.31335 11.09 1.3537 11.241 1.43046 11.3742C1.50723 11.5073 1.6177 11.6179 1.75077 11.6947C1.88384 11.7716 2.0348 11.8121 2.18848 11.8121H11.8109C11.9646 11.8121 12.1155 11.7716 12.2486 11.6947C12.3817 11.6179 12.4921 11.5073 12.5689 11.3742C12.6457 11.241 12.686 11.09 12.6859 10.9364C12.6858 10.7827 12.6452 10.6317 12.5682 10.4987L7.75697 2.18666C7.68011 2.05387 7.56968 1.94363 7.43676 1.86699C7.30384 1.79034 7.15311 1.75 6.99968 1.75C6.84625 1.75 6.69551 1.79034 6.5626 1.86699C6.42968 1.94363 6.31925 2.05387 6.24239 2.18666Z' fill='%23F4BA63'/%3E%3Cpath d='M7.58333 5.68758C7.58333 5.36542 7.32217 5.10425 7 5.10425C6.67783 5.10425 6.41667 5.36542 6.41667 5.68758V7.87508C6.41667 8.19725 6.67783 8.45841 7 8.45841C7.32217 8.45841 7.58333 8.19725 7.58333 7.87508V5.68758Z' fill='%23000A14'/%3E%3Cpath d='M7.65625 9.84383C7.65625 10.2063 7.36244 10.5001 7 10.5001C6.63756 10.5001 6.34375 10.2063 6.34375 9.84383C6.34375 9.48139 6.63756 9.18758 7 9.18758C7.36244 9.18758 7.65625 9.48139 7.65625 9.84383Z' fill='%23000A14'/%3E%3C/svg%3E%0A");
     }
 
+    // COLLAPSED
+    .cm-collapsedLines {
+        padding: 6px 12px;
+        background: var(--B50);
+        font-size: 13px;
+        line-height: 20px;
+        color: var(--B500);
+
+        &::before,
+        &::after {
+            content: none;
+        }
+    }
+
     // SEARCH
     .cm-searchMatch {
         background-color: var(--bg-matching-keyword);

src/Shared/Components/CodeEditor/types.ts

@@ -51,6 +51,12 @@ type CodeEditorDiffBaseProps = {
     originalValue?: ReactCodeMirrorProps['value']
     modifiedValue?: ReactCodeMirrorProps['value']
     isOriginalModifiable?: boolean
+    /**
+     * When true, renders a diff view in readOnly mode with collapsed unchanged diffs.
+     * This disables the minimap, code-editor search functionality, and language linting.
+     * @default false
+     */
+    collapseUnchangedDiffView?: boolean
 }
 
 type CodeEditorPropsBasedOnDiffView<DiffView extends boolean> = DiffView extends true
@@ -146,6 +152,8 @@ export type CodeEditorRendererProps = Required<
     modifiedViewExtensions: ReactCodeMirrorProps['extensions']
     extensions: ReactCodeMirrorProps['extensions']
     diffMinimapExtensions: ReactCodeMirrorProps['extensions']
+    collapseUnchanged?: boolean
+    disableMinimap?: boolean
 }
 
 export interface DiffMinimapProps extends Pick<CodeEditorRendererProps, 'theme'> {

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx

@@ -20,15 +20,14 @@ import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
 import { ReactComponent as ICCheckCircleDots } from '@Icons/ic-check-circle-dots.svg'
 import { ReactComponent as ICEditFile } from '@Icons/ic-edit-file.svg'
 import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
-import { deepEqual, noop, YAMLStringify } from '@Common/Helper'
+import { deepEqual, YAMLStringify } from '@Common/Helper'
 import {
     AppEnvDeploymentConfigListParams,
     DeploymentConfigDiffProps,
     DeploymentConfigDiffState,
     DeploymentHistoryDetail,
     DeploymentHistorySingleValue,
     DiffHeadingDataType,
-    GenericSectionErrorState,
     prepareHistoryData,
 } from '@Shared/Components'
 import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '@Shared/constants'
@@ -47,7 +46,6 @@ import {
     TemplateListDTO,
     TemplateListType,
 } from '../../Services/app.types'
-import { DiffViewerProps } from '../DiffViewer/types'
 
 export const getDeploymentTemplateData = (data: DeploymentTemplateDTO) => {
     const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
@@ -911,21 +909,3 @@ export const getDefaultVersionAndPreviousDeploymentOptions = (data: TemplateList
             previousDeployments: [],
         },
     )
-
-export const renderDiffViewNoDifferenceState = (
-    lhsValue: string,
-    rhsValue: string,
-): DiffViewerProps['codeFoldMessageRenderer'] =>
-    lhsValue === rhsValue
-        ? () => (
-              <GenericSectionErrorState
-                  useInfoIcon
-                  title="No diff in configurations"
-                  subTitle=""
-                  description=""
-                  buttonText="View values"
-                  // Click event is handled at the parent level
-                  reload={noop}
-              />
-          )
-        : null

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -18,14 +18,14 @@ import { Fragment, useEffect, useState } from 'react'
 
 import { ReactComponent as ICSort } from '@Icons/ic-arrow-up-down.svg'
 import { ReactComponent as ICSortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
-import { SortingOrder } from '@Common/Constants'
+import { MODES, SortingOrder } from '@Common/Constants'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { Progressing } from '@Common/Progressing'
-import { DiffViewer } from '@Shared/Components/DiffViewer'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { DeploymentHistoryDiffView } from '../CICDHistory'
+import { CodeEditor } from '../CodeEditor'
 import { SelectPicker } from '../SelectPicker'
 import { ToggleResolveScopedVariables } from '../ToggleResolveScopedVariables'
 import {
@@ -34,7 +34,6 @@ import {
     DeploymentConfigDiffSelectPickerProps,
     DeploymentConfigDiffState,
 } from './DeploymentConfigDiff.types'
-import { renderDiffViewNoDifferenceState } from './DeploymentConfigDiff.utils'
 import { DeploymentConfigDiffAccordion } from './DeploymentConfigDiffAccordion'
 
 export const DeploymentConfigDiffMain = ({
@@ -191,19 +190,25 @@ export const DeploymentConfigDiffMain = ({
                     hideDiffState={hideDiffState}
                 >
                     {singleView ? (
-                        <DiffViewer
-                            oldValue={primaryList.codeEditorValue.value}
-                            newValue={secondaryList.codeEditorValue.value}
-                            // Need to hide the title since the null state is controlled explicitly
-                            {...(primaryList.codeEditorValue.value !== secondaryList.codeEditorValue.value && {
-                                leftTitle: primaryHeading,
-                                rightTitle: secondaryHeading,
-                            })}
-                            codeFoldMessageRenderer={renderDiffViewNoDifferenceState(
-                                primaryList.codeEditorValue.value,
-                                secondaryList.codeEditorValue.value,
-                            )}
-                        />
+                        <>
+                            <div className="dc__grid-half vertical-divider">
+                                <div className="bcn-1 py-8 px-12">
+                                    <p className="m-0 fs-12 lh-20 fw-6">{primaryHeading}</p>
+                                </div>
+                                <div className="bcn-1 py-8 px-12">
+                                    <p className="m-0 fs-12 lh-20 fw-6">{secondaryHeading}</p>
+                                </div>
+                            </div>
+                            <CodeEditor
+                                originalValue={primaryList.codeEditorValue.value}
+                                modifiedValue={secondaryList.codeEditorValue.value}
+                                height="100%"
+                                mode={MODES.YAML}
+                                noParsing
+                                diffView
+                                collapseUnchangedDiffView
+                            />
+                        </>
                     ) : (
                         <div className="p-16">
                             {primaryHeading && secondaryHeading && (
@@ -245,7 +250,7 @@ export const DeploymentConfigDiffMain = ({
     }
 
     return (
-        <div className="bg__primary deployment-config-diff__main-top flexbox-col min-h-100">
+        <div className="bg__primary deployment-config-diff__main-top flexbox-col min-h-100 mw-none">
             <div className="dc__border-bottom-n1 flexbox dc__align-items-center dc__position-sticky dc__top-0 bg__primary w-100 dc__zi-11">
                 <div className="flexbox dc__align-items-center p-12 dc__gap-8 deployment-config-diff__main-top__header">
                     {!!headerText && <p className="m-0 cn-9 fs-13 lh-20">{headerText}</p>}