Merge branch 'develop' into feat/runtime-param

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.5-beta-2",
+    "version": "0.2.13-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -23,12 +23,12 @@
     ],
     "scripts": {
         "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
-        "lint": "tsc --noEmit && NODE_OPTIONS=--max_old_space_size=8192 eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
+        "lint": "tsc --noEmit && NODE_OPTIONS=--max_old_space_size=3072 eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
         "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
-        "dev": "NODE_OPTIONS=--max_old_space_size=8192 vite",
-        "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build --sourcemap",
-        "build-watch": "NODE_OPTIONS=--max_old_space_size=8192 vite build --sourcemap --watch",
+        "dev": "NODE_OPTIONS=--max_old_space_size=3072 vite",
+        "build": "NODE_OPTIONS=--max_old_space_size=3072 vite build --sourcemap",
+        "build-watch": "NODE_OPTIONS=--max_old_space_size=3072 vite build --sourcemap --watch",
         "build-lib": "vite build",
         "preview": "vite preview",
         "lint-staged": "lint-staged"

package.json

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TIMELINE_STATUS } from "../../Shared/constants"
+import { TIMELINE_STATUS } from '../../Shared/constants'
 
 export const triggerStatus = (triggerDetailStatus: string): string => {
     const triggerStatus = triggerDetailStatus?.toUpperCase()

src/Assets/Icon/ic-aborted.svg

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useReducer, useRef } from 'react'
+import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor'
 import YAML from 'yaml'
 import ReactGA from 'react-ga4'
@@ -55,12 +55,9 @@ function useCodeEditorContext() {
 }
 
 /**
- * NOTE: once monaco editor mounts it doesn't update it's internal onChange state.
- * Since most of the time onChange methods are declared inside the render body of a component
- * we should use the latest references of onChange.
- * Please see: https://github.com/react-monaco-editor/react-monaco-editor/issues/704
- * Thus as a hack we are using this objects reference to call the latest onChange reference
- */
+ * TODO: can be removed with this new merge into react-monaco-editor :)
+ * see: https://github.com/react-monaco-editor/react-monaco-editor/pull/955
+ * */
 const _onChange = {
     onChange: null,
 }
@@ -90,6 +87,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         cleanData = false,
         onBlur,
         onFocus,
+        adjustEditorHeightToContent,
     }) => {
         if (cleanData) {
             value = cleanKubeManifest(value)
@@ -103,6 +101,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const [state, dispatch] = useReducer(memoisedReducer, initialState({ mode, theme, value, diffView, noParsing }))
         const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
         const [, originalJson, originlaYaml] = useJsonYaml(defaultValue, tabSize, state.mode, !state.noParsing)
+        const [contentHeight, setContentHeight] = useState(height)
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
             base: 'vs-dark',
             inherit: true,
@@ -167,10 +166,24 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                 }
             }
 
+            if (adjustEditorHeightToContent) {
+                setContentHeight(editor.getContentHeight())
+                editor.onDidContentSizeChange(() => {
+                    setContentHeight(editor.getContentHeight())
+                })
+            }
+
             editorRef.current = editor
             monacoRef.current = monaco
         }
 
+        const editorHeight = useMemo(() => {
+            if (!adjustEditorHeightToContent) {
+                return height
+            }
+            return contentHeight
+        }, [height, contentHeight, adjustEditorHeightToContent])
+
         useEffect(() => {
             if (!validatorSchema) {
                 return
@@ -283,7 +296,9 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         }
 
         return (
-            <CodeEditorContext.Provider value={{ dispatch, state, handleLanguageChange, error, defaultValue, height }}>
+            <CodeEditorContext.Provider
+                value={{ dispatch, state, handleLanguageChange, error, defaultValue, height: editorHeight }}
+            >
                 {children}
                 {loading ? (
                     <CodeEditorPlaceholder customLoader={customLoader} />
@@ -301,7 +316,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                                 options={diffViewOptions}
                                 theme={state.theme.toLowerCase().split(' ').join('-')}
                                 editorDidMount={editorDidMount}
-                                height={height}
+                                height={editorHeight}
                                 width="100%"
                             />
                         ) : (
@@ -312,7 +327,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                                 options={options}
                                 onChange={handleOnChange}
                                 editorDidMount={editorDidMount}
-                                height={height}
+                                height={editorHeight}
                                 width="100%"
                             />
                         )}

src/Assets/Icon/ic-filter-applied.svg

@@ -48,6 +48,7 @@ export interface CodeEditorInterface {
     isKubernetes?: boolean
     cleanData?: boolean
     chartVersion?: any
+    adjustEditorHeightToContent?: boolean
 }
 
 export interface CodeEditorHeaderInterface {