Merge pull request #248 from devtron-labs/feat/deployment-charts

feat: editable gui schema on deployment charts

Author: Elessar1802

package-lock.json

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

package.json

@@ -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'
@@ -66,12 +66,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
 }
@@ -101,6 +98,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         cleanData = false,
         onBlur,
         onFocus,
+        adjustEditorHeightToContent,
     }) => {
         if (cleanData) {
             value = cleanKubeManifest(value)
@@ -114,6 +112,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,
@@ -166,10 +165,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 +295,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 +315,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 +326,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                                 options={options}
                                 onChange={handleOnChange}
                                 editorDidMount={editorDidMount}
-                                height={height}
+                                height={editorHeight}
                                 width="100%"
                             />
                         )}

src/Common/CodeEditor/CodeEditor.tsx

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

src/Common/CodeEditor/types.ts

@@ -62,6 +62,7 @@ export const URLS = {
     GLOBAL_CONFIG_DOCKER: '/global-config/docker',
     DEPLOYMENT_HISTORY_CONFIGURATIONS: '/configuration',
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
+    GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
 }
 
 export const ROUTES = {
@@ -101,6 +102,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',
+    DEPLOYMENT_CHARTS_LIST: 'deployment/template/fetch',
 }
 
 export enum KEY_VALUE {

src/Common/Constants.ts

@@ -21,3 +21,9 @@ export const PLACEHOLDERS = {
 }
 
 export const DEFAULT_FIELD_TITLE = 'Key not available'
+
+export const HIDE_SUBMIT_BUTTON_UI_SCHEMA = {
+    'ui:submitButtonOptions': {
+        norender: true,
+    },
+}

src/Common/RJSF/constants.ts

@@ -17,3 +17,4 @@
 export { RJSFForm } from './Form'
 export * from './types'
 export { getInferredTypeFromValueType, getRedirectionProps } from './utils'
+export { HIDE_SUBMIT_BUTTON_UI_SCHEMA } from './constants'