Merge pull request #226 from devtron-labs/feat/config-diff-phase-2

feat: Config Diff - Phase 2 - Comparison b/w environments

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.15",
+    "version": "0.1.15-beta-22",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -21,14 +21,12 @@ import ReactGA from 'react-ga4'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { configureMonacoYaml } from 'monaco-yaml'
 
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamation.svg'
 import { ReactComponent as WarningIcon } from '../../Assets/Icon/ic-warning.svg'
 import './codeEditor.scss'
 import 'monaco-editor'
 
-import YamlWorker from '../../yaml.worker.js?worker'
 import { YAMLStringify, cleanKubeManifest, useJsonYaml } from '../Helper'
 import { useWindowSize } from '../Hooks'
 import Select from '../Select/Select'
@@ -48,10 +46,18 @@ import { MODES } from '../Constants'
 
 self.MonacoEnvironment = {
     getWorker(_, label) {
+        const getWorkerModule = (moduleUrl: string) => {
+            return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl, label), {
+                name: label,
+                type: 'module',
+            })
+        }
+
         if (label === MODES.YAML) {
-            return new YamlWorker()
+            return getWorkerModule('../../yaml.worker.js?worker')
         }
-        return new editorWorker()
+
+        return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker')
     },
 }
 
@@ -73,7 +79,7 @@ function useCodeEditorContext() {
  * Thus as a hack we are using this objects reference to call the latest onChange reference
  */
 const _onChange = {
-    onChange: null
+    onChange: null,
 }
 
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(

src/Assets/Icon/ic-diff-file-updated.svg

@@ -25,7 +25,7 @@
         overflow: hidden;
     }
 
-    .radio-group input[type=checkbox]:checked+.radio__item-label {
+    .radio-group input[type='checkbox']:checked + .radio__item-label {
         background: var(--N700);
         border-radius: 0;
         color: var(--white);
@@ -165,3 +165,9 @@
 .monaco-editor-hover {
     margin-left: 40px;
 }
+
+.monaco-scrollable-element {
+    & > .visible {
+        z-index: 9;
+    }
+}

src/Assets/Icon/ic-expand.svg

@@ -16,7 +16,7 @@
 
 import { useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
-import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
+import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
 
@@ -130,7 +130,7 @@ const useUrlFilters = <T = string, K = unknown>({
 
     const updateSearchParams = (paramsToSerialize: Partial<K>) => {
         Object.keys(paramsToSerialize).forEach((key) => {
-            if (paramsToSerialize[key]) {
+            if (!EXCLUDED_FALSY_VALUES.includes(paramsToSerialize[key])) {
                 if (Array.isArray(paramsToSerialize[key])) {
                     searchParams.delete(key)
                     paramsToSerialize[key].forEach((val) => {
@@ -139,6 +139,8 @@ const useUrlFilters = <T = string, K = unknown>({
                 } else {
                     searchParams.set(key, paramsToSerialize[key])
                 }
+            } else {
+                searchParams.delete(key)
             }
         })
         // Not replacing the params as it is being done by _resetPageNumber

src/Common/CodeEditor/CodeEditor.tsx

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import { Fragment, useEffect, useRef, useState } from 'react'
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router'
 import Tippy from '@tippyjs/react'
+import { yamlComparatorBySortOrder } from '@Shared/Helpers'
 import { MODES, Toggle, YAMLStringify } from '../../../../Common'
 import { DeploymentHistoryParamsType } from './types'
 import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../types'
@@ -33,6 +34,7 @@ const DeploymentHistoryDiffView = ({
     isDeleteDraft,
     rootClassName,
     comparisonBodyClassName,
+    sortOrder = null,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
     const ref = useRef(null)
@@ -64,26 +66,38 @@ const DeploymentHistoryDiffView = ({
         Object.keys(baseTemplateConfiguration?.codeEditorValue?.variableSnapshot || {}).length !== 0 ||
         Object.keys(currentConfiguration?.codeEditorValue?.variableSnapshot || {}).length !== 0
 
-    const editorValuesRHS = convertVariables
-        ? baseTemplateConfiguration?.codeEditorValue?.resolvedValue
-        : baseTemplateConfiguration?.codeEditorValue?.value
+    const editorValuesRHS = useMemo(() => {
+        if (!baseTemplateConfiguration?.codeEditorValue?.value || isDeleteDraft) {
+            return ''
+        }
+
+        const editorValue = convertVariables
+            ? baseTemplateConfiguration?.codeEditorValue?.resolvedValue
+            : baseTemplateConfiguration?.codeEditorValue?.value
+
+        return YAMLStringify(JSON.parse(editorValue), {
+            sortMapEntries: (a, b) => yamlComparatorBySortOrder(a, b, sortOrder),
+        })
+    }, [convertVariables, baseTemplateConfiguration, sortOrder, isDeleteDraft])
+
+    const editorValuesLHS = useMemo(() => {
+        if (!currentConfiguration?.codeEditorValue?.value || isUnpublished) {
+            return ''
+        }
+
+        const editorValue = convertVariables
+            ? currentConfiguration?.codeEditorValue?.resolvedValue
+            : currentConfiguration?.codeEditorValue?.value
 
-    const editorValuesLHS = convertVariables
-        ? currentConfiguration?.codeEditorValue?.resolvedValue
-        : currentConfiguration?.codeEditorValue?.value
+        return YAMLStringify(JSON.parse(editorValue), {
+            sortMapEntries: (a, b) => yamlComparatorBySortOrder(a, b, sortOrder),
+        })
+    }, [convertVariables, currentConfiguration, sortOrder, isUnpublished])
 
     const renderDeploymentDiffViaCodeEditor = () => (
         <CodeEditor
-            value={
-                !baseTemplateConfiguration?.codeEditorValue?.value || isDeleteDraft
-                    ? ''
-                    : YAMLStringify(JSON.parse(editorValuesRHS))
-            }
-            defaultValue={
-                !currentConfiguration?.codeEditorValue?.value || isUnpublished
-                    ? ''
-                    : YAMLStringify(JSON.parse(editorValuesLHS))
-            }
+            value={editorValuesRHS}
+            defaultValue={editorValuesLHS}
             height={codeEditorHeight}
             diffView={previousConfigAvailable && true}
             readOnly

src/Common/CodeEditor/codeEditor.scss

@@ -25,6 +25,7 @@ import {
     DeploymentAppTypes,
     ResponseType,
     PaginationProps,
+    SortingOrder,
 } from '../../../Common'
 import { DeploymentStageType } from '../../constants'
 import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
@@ -436,6 +437,7 @@ export interface DeploymentTemplateHistoryType {
     isDeleteDraft?: boolean
     rootClassName?: string
     comparisonBodyClassName?: string
+    sortOrder?: SortingOrder
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState, useRef } from 'react'
+
+import { CollapseProps } from './types'
+
+export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
+    const ref = useRef<HTMLDivElement>(null)
+    const [contentHeight, setContentHeight] = useState(0)
+
+    useEffect(() => {
+        if (ref.current) {
+            setContentHeight(ref.current.clientHeight)
+        }
+    }, [children])
+
+    return (
+        <div
+            style={{
+                height: expand ? contentHeight : 0,
+                transition: 'height 200ms ease-out',
+                overflow: 'hidden',
+            }}
+            onTransitionEnd={onTransitionEnd}
+        >
+            <div ref={ref}>{children}</div>
+        </div>
+    )
+}