feat: add support for null state in diff viewer

Author: eshankvaish

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

@@ -18,6 +18,8 @@ import { useParams } from 'react-router-dom'
 import { useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { yamlComparatorBySortOrder } from '@Shared/Helpers'
+import { DiffViewer } from '@Shared/Components/DiffViewer'
+import { renderDiffViewNoDifferenceState } from '@Shared/Components/DeploymentConfigDiff'
 import { MODES, Toggle, YAMLStringify } from '../../../../Common'
 import { DeploymentHistoryParamsType } from './types'
 import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../types'
@@ -36,6 +38,7 @@ const DeploymentHistoryDiffView = ({
     rootClassName,
     sortingConfig,
     codeEditorKey,
+    diffState,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
     const { sortBy, sortOrder } = sortingConfig ?? { sortBy: '', sortOrder: null }
@@ -85,20 +88,26 @@ const DeploymentHistoryDiffView = ({
         })
     }, [convertVariables, currentConfiguration, sortOrder, isUnpublished])
 
-    const renderDeploymentDiffViaCodeEditor = () => (
-        <CodeEditor
-            key={codeEditorKey}
-            value={editorValuesRHS}
-            defaultValue={editorValuesLHS}
-            adjustEditorHeightToContent
-            disableSearch
-            diffView={previousConfigAvailable && true}
-            readOnly
-            noParsing
-            mode={MODES.YAML}
-            theme={getTheme()}
-        />
-    )
+    const renderDeploymentDiffViaCodeEditor = () =>
+        previousConfigAvailable ? (
+            <DiffViewer
+                oldValue={editorValuesLHS}
+                newValue={editorValuesRHS}
+                codeFoldMessageRenderer={renderDiffViewNoDifferenceState(diffState)}
+            />
+        ) : (
+            <CodeEditor
+                key={codeEditorKey}
+                value={editorValuesRHS}
+                defaultValue={editorValuesLHS}
+                adjustEditorHeightToContent
+                disableSearch
+                readOnly
+                noParsing
+                mode={MODES.YAML}
+                theme={getTheme()}
+            />
+        )
 
     const handleShowVariablesClick = () => {
         setConvertVariables(!convertVariables)
@@ -176,7 +185,7 @@ const DeploymentHistoryDiffView = ({
             </div>
 
             {(currentConfiguration?.codeEditorValue?.value || baseTemplateConfiguration?.codeEditorValue?.value) && (
-                <div className="en-2 bw-1 br-4 mt-16">
+                <div className="en-2 bw-1 br-4 mt-16 dc__overflow-auto">
                     <div
                         className="code-editor-header-value px-12 py-8 fs-13 fw-6 cn-9 bcn-0 dc__top-radius-4 dc__border-bottom"
                         data-testid="configuration-link-comparison-body-heading"

src/Shared/Components/CICDHistory/types.tsx

@@ -32,6 +32,7 @@ import {
 import { DeploymentStageType } from '../../constants'
 import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
 import { TERMINAL_STATUS_MAP } from './constants'
+import { DeploymentConfigDiffState } from '../DeploymentConfigDiff'
 
 export enum HistoryComponentType {
     CI = 'CI',
@@ -493,6 +494,7 @@ export interface DeploymentTemplateHistoryType {
         sortBy: string
         sortOrder: SortingOrder
     }
+    diffState: DeploymentConfigDiffState
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

@@ -23,13 +23,6 @@
 
     &__main-content {
         flex-grow: 1;
-
-        &__heading {
-            display: grid;
-            // -15px to accommodate the right side bar of the code-editor
-            grid-template-columns: calc(50% - 15px) calc(50% - 15px);
-            grid-template-rows: auto;
-        }
     }
 
     & .react-monaco-editor-container {

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

@@ -12,6 +12,7 @@ import {
     AppEnvDeploymentConfigListParams,
     DiffHeadingDataType,
     prepareHistoryData,
+    GenericSectionErrorState,
 } from '@Shared/Components'
 import { deepEqual } from '@Common/Helper'
 
@@ -27,6 +28,7 @@ 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)
@@ -827,3 +829,17 @@ export const getDefaultVersionAndPreviousDeploymentOptions = (data: TemplateList
             previousDeployments: [],
         },
     )
+
+export const renderDiffViewNoDifferenceState = (
+    diffState: DeploymentConfigDiffState | null,
+): DiffViewerProps['codeFoldMessageRenderer'] =>
+    diffState !== DeploymentConfigDiffState.NO_DIFF
+        ? () => (
+              <GenericSectionErrorState
+                  useInfoIcon
+                  title="There seems no difference in the compared values"
+                  subTitle="Click here to view the values"
+                  description=""
+              />
+          )
+        : null

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -5,11 +5,11 @@ import { ReactComponent as ICSortArrowDown } from '@Icons/ic-sort-arrow-down.svg
 import { ReactComponent as ICSort } from '@Icons/ic-arrow-up-down.svg'
 import { ReactComponent as ICViewVariableToggle } from '@Icons/ic-view-variable-toggle.svg'
 import { Progressing } from '@Common/Progressing'
-import { CodeEditor } from '@Common/CodeEditor'
-import { MODES, SortingOrder } from '@Common/Constants'
+import { SortingOrder } from '@Common/Constants'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import Toggle from '@Common/Toggle/Toggle'
 import { ComponentSizeType } from '@Shared/constants'
+import { DiffViewer } from '@Shared/Components/DiffViewer'
 
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { SelectPicker } from '../SelectPicker'
@@ -21,6 +21,7 @@ import {
     DeploymentConfigDiffState,
     DeploymentConfigDiffAccordionProps,
 } from './DeploymentConfigDiff.types'
+import { renderDiffViewNoDifferenceState } from './DeploymentConfigDiff.utils'
 
 export const DeploymentConfigDiffMain = ({
     isLoading,
@@ -190,23 +191,13 @@ export const DeploymentConfigDiffMain = ({
                     hideDiffState={hideDiffState}
                 >
                     {singleView ? (
-                        <>
-                            <div className="bcn-1 deployment-config-diff__main-content__heading dc__border-top">
-                                <div className="px-12 py-6 dc__border-right">{primaryHeading}</div>
-                                <div className="px-12 py-6">{secondaryHeading}</div>
-                            </div>
-                            <CodeEditor
-                                key={`${sortingConfig?.sortBy}-${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
-                                diffView
-                                defaultValue={primaryList.codeEditorValue.value}
-                                value={secondaryList.codeEditorValue.value}
-                                mode={MODES.YAML}
-                                disableSearch
-                                adjustEditorHeightToContent
-                                noParsing
-                                readOnly
-                            />
-                        </>
+                        <DiffViewer
+                            oldValue={primaryList.codeEditorValue.value}
+                            newValue={secondaryList.codeEditorValue.value}
+                            leftTitle={primaryHeading}
+                            rightTitle={secondaryHeading}
+                            codeFoldMessageRenderer={renderDiffViewNoDifferenceState(diffState)}
+                        />
                     ) : (
                         <div className="p-16">
                             {primaryHeading && secondaryHeading && (
@@ -222,6 +213,7 @@ export const DeploymentConfigDiffMain = ({
                                 previousConfigAvailable
                                 rootClassName={`${primaryHeading && secondaryHeading ? 'dc__no-top-radius dc__no-top-border' : ''}`}
                                 sortingConfig={sortingConfig}
+                                diffState={diffState}
                             />
                         </div>
                     )}

src/Shared/Components/DiffViewer/DiffViewer.component.tsx

@@ -1,15 +1,18 @@
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
 import { diffViewerStyles } from './constants'
-import { DiffViewerProps } from './types'
+import { DiffViewerProps, DiffViewTitleWrapperProps } from './types'
 
-const DiffViewer = ({ oldValue, newValue, leftTitle, rightTitle }: DiffViewerProps) => (
+const DiffViewTitleWrapper = ({ title }: DiffViewTitleWrapperProps) => <div>{title}</div>
+
+const DiffViewer = ({ oldValue, newValue, leftTitle, rightTitle, ...props }: DiffViewerProps) => (
     <ReactDiffViewer
+        {...props}
         splitView
         oldValue={oldValue}
         newValue={newValue}
         useDarkTheme={false}
-        leftTitle={leftTitle}
-        rightTitle={rightTitle}
+        leftTitle={leftTitle ? <DiffViewTitleWrapper title={leftTitle} /> : null}
+        rightTitle={rightTitle ? <DiffViewTitleWrapper title={rightTitle} /> : null}
         compareMethod={DiffMethod.WORDS}
         styles={diffViewerStyles}
     />

src/Shared/Components/DiffViewer/constants.ts

@@ -37,8 +37,10 @@ export const diffViewerStyles: ReactDiffViewerProps['styles'] = {
         lineHeight: '20px',
 
         pre: {
+            fontSize: '13px',
             lineHeight: '20px',
             fontFamily: 'Inconsolata, monospace',
+            wordBreak: 'break-word',
         },
     },
     marker: {
@@ -49,6 +51,8 @@ export const diffViewerStyles: ReactDiffViewerProps['styles'] = {
     gutter: {
         padding: `0 6px`,
         minWidth: '36px',
+        // Cursor would be default for all cases in gutter till we don't support highlighting
+        cursor: 'default',
 
         pre: {
             opacity: 1,
@@ -59,9 +63,11 @@ export const diffViewerStyles: ReactDiffViewerProps['styles'] = {
     },
     wordAdded: {
         paddingInline: '2px',
+        lineHeight: '16px',
     },
     wordRemoved: {
         paddingInline: '2px',
+        lineHeight: '16px',
     },
     codeFold: {
         fontSize: '13px',
@@ -73,6 +79,11 @@ export const diffViewerStyles: ReactDiffViewerProps['styles'] = {
             textDecoration: 'none !important',
         },
     },
+    codeFoldGutter: {
+        '+ td': {
+            width: '12px',
+        },
+    },
     titleBlock: {
         padding: '8px 12px',
         fontSize: '12px',

src/Shared/Components/DiffViewer/types.ts

@@ -1,4 +1,12 @@
+import { ReactNode } from 'react'
 import { ReactDiffViewerProps } from 'react-diff-viewer-continued'
 
 export interface DiffViewerProps
-    extends Pick<ReactDiffViewerProps, 'oldValue' | 'newValue' | 'leftTitle' | 'rightTitle'> {}
+    extends Pick<ReactDiffViewerProps, 'oldValue' | 'newValue' | 'codeFoldMessageRenderer'> {
+    leftTitle?: ReactDiffViewerProps['leftTitle'] | ReactNode
+    rightTitle?: ReactDiffViewerProps['rightTitle'] | ReactNode
+}
+
+export interface DiffViewTitleWrapperProps {
+    title: DiffViewerProps['leftTitle']
+}