Merge pull request #220 from devtron-labs/feat/config-diff-phase-1

feat: Config Diff - Revamp UI of CM & Secret and Comparison of deployment configurations

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.4",
+    "version": "0.2.2-beta-19",
     "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'
@@ -46,15 +44,6 @@ import {
 import { CodeEditorReducer, initialState } from './CodeEditor.reducer'
 import { MODES } from '../Constants'
 
-self.MonacoEnvironment = {
-    getWorker(_, label) {
-        if (label === MODES.YAML) {
-            return new YamlWorker()
-        }
-        return new editorWorker()
-    },
-}
-
 const CodeEditorContext = React.createContext(null)
 
 function useCodeEditorContext() {
@@ -73,7 +62,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

@@ -105,6 +105,7 @@ export const ROUTES = {
     PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
     PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
     PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
+    CONFIG_DATA: 'config/data',
 }
 
 export enum KEY_VALUE {

src/Assets/Icon/ic-stamp.svg

@@ -135,7 +135,7 @@ export const CustomInput = ({
 
             {getInputError()}
             {helperText && (
-                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7">
+                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 mt-4">
                  <Info className="icon-dim-16" />
                  <div>{helperText}</div>
                 </div>

src/Common/CodeEditor/CodeEditor.tsx

@@ -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