Merge branch 'develop' into feat/create-plugin

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.2-beta-9",
+    "version": "0.2.16",
     "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

@@ -15,4 +15,4 @@
  */
 
 export { default as AppStatus } from './AppStatus'
-export * from './utils'
+export * from './utils'

src/Assets/Icon/ic-aborted.svg

@@ -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-diff-file-updated.svg

@@ -42,12 +42,14 @@ export default function ClipboardButton({
     const [copied, setCopied] = useState<boolean>(false)
     const [enableTippy, setEnableTippy] = useState<boolean>(false)
 
-    const handleTextCopied = () => {setCopied(true)}
+    const handleTextCopied = () => {
+        setCopied(true)
+    }
     const handleEnableTippy = () => setEnableTippy(true)
     const handleDisableTippy = () => setEnableTippy(false)
     const handleCopyContent = useCallback(
         (e?) => {
-           if(e) stopPropagation(e)
+            if (e) stopPropagation(e)
             copyToClipboard(content, handleTextCopied)
         },
         [content],

src/Assets/Icon/ic-expand.svg

@@ -14,21 +14,19 @@
  * 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'
 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() {
@@ -66,14 +55,11 @@ 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
+    onChange: null,
 }
 
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
@@ -101,6 +87,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         cleanData = false,
         onBlur,
         onFocus,
+        adjustEditorHeightToContent = false,
     }) => {
         if (cleanData) {
             value = cleanKubeManifest(value)
@@ -114,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,
@@ -126,6 +114,18 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             },
         })
 
+        monaco.editor.defineTheme(CodeEditorThemesKeys.networkStatusInterface, {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [
+                // @ts-ignore
+                { background: '#1A1A1A' },
+            ],
+            colors: {
+                'editor.background': '#1A1A1A',
+            },
+        })
+
         monaco.editor.defineTheme(CodeEditorThemesKeys.deleteDraft, {
             base: 'vs',
             inherit: true,
@@ -166,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
@@ -282,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} />
@@ -300,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%"
                             />
                         ) : (
@@ -311,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

@@ -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;
+    }
+}