Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-…

…common-lib into feat/confirmation-modal
devtron-labs · Nov 25, 2024 · 847b8ff · 847b8ff
2 parents 7c74924 + 5f3046d
commit 847b8ff
Show file tree

Hide file tree

Showing 16 changed files with 327 additions and 94 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.0.8-beta-1",
+    "version": "1.1.3-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -98,6 +98,7 @@
         "framer-motion": "^6.5.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"

diff --git a/src/Assets/Icon/ic-info-outline.svg b/src/Assets/Icon/ic-info-outline.svg
diff --git a/src/Common/CustomInput/CustomInput.tsx b/src/Common/CustomInput/CustomInput.tsx
@@ -69,9 +69,13 @@ export const CustomInput = ({
     const handleOnBlur = (event) => {
         // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
         if (!noTrim) {
-            event.stopPropagation()
-            event.target.value = event.target.value?.trim()
-            onChange(event)
+            const trimmedValue = event.target.value?.trim()
+
+            if (event.target.value !== trimmedValue) {
+                event.stopPropagation()
+                event.target.value = trimmedValue
+                onChange(event)
+            }
         }
         if (typeof onBlur === 'function') {
             onBlur(event)

diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts
@@ -161,6 +161,9 @@ const useUrlFilters = <T = string, K = unknown>({
     }
 
     useEffect(() => {
+        if (!localStorageKey) {
+            return
+        }
         // if we have search string, set secondary params in local storage accordingly
         if (location.search) {
             setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(parsedParams))

diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/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'
@@ -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"

diff --git a/src/Shared/Components/CICDHistory/cicdHistory.scss b/src/Shared/Components/CICDHistory/cicdHistory.scss
@@ -171,14 +171,6 @@
     color: var(--N900) !important;
 }
 
-.code-editor-green-diff {
-    background: #eaf1dd;
-}
-
-.code-editor-red-diff {
-    background: #ffd4d1;
-}
-
 .left-50 {
     left: 50px;
 }

diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss b/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 {