Merge pull request #486 from devtron-labs/fix/rb-compare-sync

feat: add VirtualizedList component

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.4.3",
+    "version": "1.4.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -106,6 +106,7 @@
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
         "react-monaco-editor": "^0.54.0",
+        "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
         "tslib": "2.7.0"
     },
@@ -120,6 +121,10 @@
         },
         "vite-plugin-svgr": {
             "vite": "5.4.11"
+        },
+        "react-virtualized-sticky-tree": {
+            "react": "^17.0.2",
+            "react-dom": "^17.0.2"
         }
     }
 }

package.json

@@ -29,6 +29,8 @@ export const CodeEditorReducer = (state: CodeEditorState, action: Action) => {
             return { ...state, theme: action.value }
         case 'setCode':
             return { ...state, code: action.value }
+        case 'setDefaultCode':
+            return { ...state, defaultCode: action.value }
         case 'setHeight':
             return { ...state, height: action.value.toString() }
         default:
@@ -71,13 +73,15 @@ export const initialState = ({
     mode,
     theme,
     value,
+    defaultValue,
     diffView,
     noParsing,
     tabSize,
 }: CodeEditorInitialValueType): CodeEditorState => ({
     mode: mode as MODES,
     theme: (theme || CodeEditorThemesKeys.vs) as CodeEditorThemesKeys,
     code: noParsing ? value : parseValueToCode(value, mode, tabSize),
+    defaultCode: noParsing ? defaultValue : parseValueToCode(defaultValue, mode, tabSize),
     diffMode: diffView,
     noParsing: [MODES.JSON, MODES.YAML].includes(mode as MODES) ? noParsing : true,
 })

src/Common/CodeEditor/CodeEditor.reducer.ts

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'
-import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor'
+import MonacoEditor, { ChangeHandler, DiffEditorDidMount, EditorDidMount, MonacoDiffEditor } from 'react-monaco-editor'
 import ReactGA from 'react-ga4'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { configureMonacoYaml } from 'monaco-yaml'
@@ -94,10 +94,10 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const memoisedReducer = React.useCallback(CodeEditorReducer, [])
         const [state, dispatch] = useReducer(
             memoisedReducer,
-            initialState({ mode, theme, value, diffView, noParsing, tabSize }),
+            initialState({ mode, theme, value, defaultValue, diffView, noParsing, tabSize }),
         )
         const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
-        const [, originalJson, originlaYaml] = useJsonYaml(defaultValue, tabSize, state.mode, !state.noParsing)
+        const [, originalJson, originalYaml] = useJsonYaml(state.defaultCode, tabSize, state.mode, !state.noParsing)
         const [contentHeight, setContentHeight] = useState(
             adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height,
         )
@@ -160,7 +160,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             }
         }, [disableSearch])
 
-        const editorDidMount = (editor, monaco) => {
+        const editorDidMount: EditorDidMount = (editor) => {
             if (
                 mode === MODES.YAML &&
                 editor &&
@@ -181,15 +181,21 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             }
 
             if (adjustEditorHeightToContent && editor) {
-                if (!('getModifiedEditor' in editor)) {
-                    editor.onDidContentSizeChange(() => {
-                        setContentHeight(editor.getContentHeight())
-                    })
+                editor.onDidContentSizeChange(() => {
                     setContentHeight(editor.getContentHeight())
-                    return
-                }
-                const modifiedEditor = editor.getModifiedEditor()
-                const originalEditor = editor.getOriginalEditor()
+                })
+                setContentHeight(editor.getContentHeight())
+            }
+
+            editorRef.current = editor
+            monacoRef.current = monaco
+        }
+
+        const diffEditorDidMount: DiffEditorDidMount = (editor, monaco) => {
+            const originalEditor = editor.getOriginalEditor()
+            const modifiedEditor = editor.getModifiedEditor()
+
+            if (adjustEditorHeightToContent) {
                 originalEditor.onDidContentSizeChange(() => {
                     setContentHeight(
                         Math.max(
@@ -198,6 +204,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                         ),
                     )
                 })
+
                 modifiedEditor.onDidContentSizeChange(() => {
                     setContentHeight(
                         Math.max(
@@ -206,9 +213,14 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                         ),
                     )
                 })
-                setContentHeight(Math.max(modifiedEditor.getContentHeight(), modifiedEditor.getContentHeight()))
+
+                setContentHeight(Math.max(originalEditor.getContentHeight(), modifiedEditor.getContentHeight()))
             }
 
+            originalEditor.onDidChangeModelContent(() => {
+                codeEditorOnChange(modifiedEditor.getValue(), originalEditor.getValue())
+            })
+
             editorRef.current = editor
             monacoRef.current = monaco
         }
@@ -254,14 +266,15 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             editorRef.current.layout()
         }, [width, windowHeight])
 
-        const setCode = (value: string) => {
+        const setCode = (value: string, originalValue: string) => {
             dispatch({ type: 'setCode', value })
-            onChangeRef.current?.(value)
+            dispatch({ type: 'setDefaultCode', value: originalValue })
+            onChangeRef.current?.(value, originalValue)
         }
 
         useEffectAfterMount(() => {
             if (noParsing) {
-                setCode(value)
+                setCode(value, defaultValue)
 
                 return
             }
@@ -270,8 +283,8 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                 return
             }
 
-            setCode(parseValueToCode(value, state.mode, tabSize))
-        }, [value, noParsing])
+            setCode(parseValueToCode(value, state.mode, tabSize), parseValueToCode(defaultValue, state.mode, tabSize))
+        }, [value, defaultValue, noParsing])
 
         useEffect(() => {
             dispatch({ type: 'setDiff', value: diffView })
@@ -283,13 +296,17 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             }
         }, [focus])
 
-        function handleOnChange(newValue, e) {
-            setCode(newValue)
+        const codeEditorOnChange = (newValue: string, newOriginalValue: string) => {
+            setCode(newValue, newOriginalValue)
+        }
+
+        const handleOnChange: ChangeHandler = (newValue) => {
+            codeEditorOnChange(newValue, editorRef.current?.getOriginalEditor?.().getValue?.() ?? '')
         }
 
         function handleLanguageChange(mode: 'json' | 'yaml') {
             dispatch({ type: 'changeLanguage', value: mode })
-            setCode(mode === 'json' ? json : yamlCode)
+            setCode(mode === 'json' ? json : yamlCode, mode === 'json' ? originalJson : originalYaml)
         }
 
         const options: monaco.editor.IEditorConstructionOptions = {
@@ -325,6 +342,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
 
         const diffViewOptions: monaco.editor.IDiffEditorConstructionOptions = {
             ...options,
+            originalEditable: !readOnly,
             useInlineViewWhenSpaceIsLimited: false,
         }
 
@@ -340,15 +358,13 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                         {shebang && <div className="code-editor__shebang">{shebang}</div>}
                         {state.diffMode ? (
                             <MonacoDiffEditor
-                                original={
-                                    noParsing ? defaultValue : state.mode === 'json' ? originalJson : originlaYaml
-                                }
+                                original={state.defaultCode}
                                 value={state.code}
                                 language={state.mode}
                                 onChange={handleOnChange}
                                 options={diffViewOptions}
                                 theme={state.theme.toLowerCase().split(' ').join('-')}
-                                editorDidMount={editorDidMount}
+                                editorDidMount={diffEditorDidMount}
                                 height={editorHeight}
                                 width="100%"
                             />

src/Common/CodeEditor/CodeEditor.tsx

@@ -26,7 +26,7 @@ interface CodeEditorBaseInterface {
     value?: string
     lineDecorationsWidth?: number
     responseType?: string
-    onChange?: (string) => void
+    onChange?: (value: string, defaultValue: string) => void
     onBlur?: () => void
     onFocus?: () => void
     children?: any
@@ -88,7 +88,7 @@ export interface CodeEditorHeaderComposition {
     Clipboard?: React.FC<any>
 }
 
-export type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setHeight'
+export type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setDefaultCode' | 'setHeight'
 
 export interface Action {
     type: ActionTypes
@@ -108,6 +108,7 @@ export interface CodeEditorInitialValueType {
     diffView: boolean
     theme?: string
     value: string
+    defaultValue: string
     noParsing?: boolean
     tabSize: number
 }
@@ -117,6 +118,7 @@ export interface CodeEditorState {
     diffMode: boolean
     theme: CodeEditorThemesKeys
     code: string
+    defaultCode: string
     noParsing: boolean
 }
 

src/Common/CodeEditor/types.ts

@@ -117,6 +117,7 @@ export const ROUTES = {
     ATTRIBUTES_UPDATE: 'attributes/update',
     APP_LIST_MIN: 'app/min',
     CLUSTER_LIST_MIN: 'cluster/autocomplete',
+    CLUSTER_LIST_RAW: 'k8s/capacity/cluster/list/raw',
     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',

src/Common/Constants.ts

@@ -1,4 +1,4 @@
-import { post } from '@Common/Api'
+import { get, post } from '@Common/Api'
 import { ROUTES } from '@Common/Constants'
 import { ResponseType } from '@Common/Types'
 import {
@@ -7,6 +7,7 @@ import {
     K8sResourceDetailType,
     K8sResourceListPayloadType,
 } from './ResourceBrowser.Types'
+import { ClusterDetail } from './types'
 
 export const getK8sResourceList = (
     resourceListPayload: K8sResourceListPayloadType,
@@ -19,3 +20,5 @@ export const getK8sResourceList = (
 export const createNewResource = (
     resourceListPayload: CreateResourcePayload,
 ): Promise<ResponseType<CreateResourceDTO[]>> => post(ROUTES.K8S_RESOURCE_CREATE, resourceListPayload)
+
+export const getClusterListRaw = () => get<ClusterDetail[]>(ROUTES.CLUSTER_LIST_RAW)