Merge pull request #410 from devtron-labs/feat/react-diff-viewer

feat: add support for react diff viewer

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -97,6 +97,7 @@
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^10.0.0",
         "react-dates": "^21.8.0",
+        "react-diff-viewer-continued": "^3.4.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "2.7.0"

package.json

@@ -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'
@@ -85,20 +87,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(editorValuesLHS, editorValuesRHS)}
+            />
+        ) : (
+            <CodeEditor
+                key={codeEditorKey}
+                value={editorValuesRHS}
+                defaultValue={editorValuesLHS}
+                adjustEditorHeightToContent
+                disableSearch
+                readOnly
+                noParsing
+                mode={MODES.YAML}
+                theme={getTheme()}
+            />
+        )
 
     const handleShowVariablesClick = () => {
         setConvertVariables(!convertVariables)
@@ -176,7 +184,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/Assets/Icon/ic-info-outline.svg

@@ -171,14 +171,6 @@
     color: var(--N900) !important;
 }
 
-.code-editor-green-diff {
-    background: #eaf1dd;
-}
-
-.code-editor-red-diff {
-    background: #ffd4d1;
-}
-
 .left-50 {
     left: 50px;
 }

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

@@ -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/CICDHistory/cicdHistory.scss

@@ -12,8 +12,9 @@ import {
     AppEnvDeploymentConfigListParams,
     DiffHeadingDataType,
     prepareHistoryData,
+    GenericSectionErrorState,
 } from '@Shared/Components'
-import { deepEqual } from '@Common/Helper'
+import { deepEqual, noop } from '@Common/Helper'
 
 import { ManifestTemplateDTO } from '@Pages/Applications'
 import {
@@ -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,21 @@ 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