Merge pull request #277 from devtron-labs/feat/disable-editor-search

feat: disable search and use dynamic height in config diff

Author: Elessar1802

package-lock.json

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

package.json

@@ -62,6 +62,8 @@ const _onChange = {
     onChange: null,
 }
 
+const INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT = 100
+
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
     ({
         value,
@@ -88,6 +90,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         onBlur,
         onFocus,
         adjustEditorHeightToContent = false,
+        disableSearch = false,
     }) => {
         if (cleanData) {
             value = cleanKubeManifest(value)
@@ -101,7 +104,9 @@ 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)
+        const [contentHeight, setContentHeight] = useState(
+            adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height,
+        )
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
             base: 'vs-dark',
             inherit: true,
@@ -146,7 +151,19 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             },
         })
 
-        function editorDidMount(editor, monaco) {
+        useEffect(() => {
+            const rule = !disableSearch
+                ? null
+                : monaco.editor.addKeybindingRule({
+                      command: null,
+                      keybinding: monaco.KeyCode.KeyF | monaco.KeyMod.CtrlCmd,
+                  })
+            return () => {
+                rule?.dispose()
+            }
+        }, [disableSearch])
+
+        const editorDidMount = (editor, monaco) => {
             if (
                 mode === MODES.YAML &&
                 editor &&
@@ -166,11 +183,33 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                 }
             }
 
-            if (adjustEditorHeightToContent) {
-                setContentHeight(editor.getContentHeight())
-                editor.onDidContentSizeChange(() => {
+            if (adjustEditorHeightToContent && editor) {
+                if (!('getModifiedEditor' in editor)) {
+                    editor.onDidContentSizeChange(() => {
+                        setContentHeight(editor.getContentHeight())
+                    })
                     setContentHeight(editor.getContentHeight())
+                    return
+                }
+                const modifiedEditor = editor.getModifiedEditor()
+                const originalEditor = editor.getOriginalEditor()
+                originalEditor.onDidContentSizeChange(() => {
+                    setContentHeight(
+                        Math.max(
+                            typeof contentHeight === 'number' ? contentHeight : Number.MIN_SAFE_INTEGER,
+                            originalEditor.getContentHeight(),
+                        ),
+                    )
+                })
+                modifiedEditor.onDidContentSizeChange(() => {
+                    setContentHeight(
+                        Math.max(
+                            typeof contentHeight === 'number' ? contentHeight : Number.MIN_SAFE_INTEGER,
+                            modifiedEditor.getContentHeight(),
+                        ),
+                    )
                 })
+                setContentHeight(Math.max(modifiedEditor.getContentHeight(), modifiedEditor.getContentHeight()))
             }
 
             editorRef.current = editor
@@ -278,12 +317,24 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             lineDecorationsWidth,
             automaticLayout: true,
             scrollBeyondLastLine: false,
+            ...(adjustEditorHeightToContent
+                ? {
+                      overviewRulerLanes: adjustEditorHeightToContent ? 0 : 1,
+                  }
+                : {}),
             minimap: {
                 enabled: false,
             },
             scrollbar: {
                 alwaysConsumeMouseWheel: false,
                 vertical: inline ? 'hidden' : 'auto',
+                ...(adjustEditorHeightToContent
+                    ? {
+                          vertical: 'hidden',
+                          verticalScrollbarSize: 0,
+                          verticalSliderSize: 0,
+                      }
+                    : {}),
             },
             lineNumbers(lineNumber) {
                 return `<span style="padding-right:6px">${lineNumber}</span>`

src/Common/CodeEditor/CodeEditor.tsx

@@ -47,6 +47,11 @@ interface CodeEditorBaseInterface {
     isKubernetes?: boolean
     cleanData?: boolean
     chartVersion?: any
+    /**
+     * If true, disable the in-built search of monaco editor
+     * @default false
+     */
+    disableSearch?: boolean
 }
 
 export type CodeEditorInterface = CodeEditorBaseInterface &

src/Common/CodeEditor/types.ts

@@ -116,11 +116,13 @@ const DeploymentHistoryDetailedView = ({
                 {loader ? (
                     <Progressing pageLoader />
                 ) : (
-                    <DeploymentHistoryDiffView
-                        currentConfiguration={currentConfiguration}
-                        baseTemplateConfiguration={baseTemplateConfiguration}
-                        previousConfigAvailable={previousConfigAvailable}
-                    />
+                    <div className="dc__overflow-scroll">
+                        <DeploymentHistoryDiffView
+                            currentConfiguration={currentConfiguration}
+                            baseTemplateConfiguration={baseTemplateConfiguration}
+                            previousConfigAvailable={previousConfigAvailable}
+                        />
+                    </div>
                 )}
             </div>
         </>

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryDetailedView.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useParams } from 'react-router-dom'
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { yamlComparatorBySortOrder } from '@Shared/Helpers'
 import { MODES, Toggle, YAMLStringify } from '../../../../Common'
@@ -25,6 +25,7 @@ import CodeEditor from '../../../../Common/CodeEditor/CodeEditor'
 import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
 import { ReactComponent as Info } from '../../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ViewVariablesIcon } from '../../../../Assets/Icon/ic-view-variable-toggle.svg'
+import './styles.scss'
 
 const DeploymentHistoryDiffView = ({
     currentConfiguration,
@@ -37,20 +38,9 @@ const DeploymentHistoryDiffView = ({
     sortOrder = null,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
-    const ref = useRef(null)
-    const [codeEditorHeight, setCodeEditorHeight] = useState('')
-    const { innerHeight } = window
 
     const [convertVariables, setConvertVariables] = useState(false)
 
-    useEffect(() => {
-        if (ref.current) {
-            // eslint-disable-next-line no-unsafe-optional-chaining
-            const dynamicHeight = ref.current?.clientHeight + 255 + (!previousConfigAvailable ? 55 : 0)
-            setCodeEditorHeight(`${innerHeight - dynamicHeight < 400 ? 400 : innerHeight - dynamicHeight}px`)
-        }
-    }, [ref.current?.clientHeight])
-
     const getTheme = () => {
         if (isDeleteDraft) {
             return 'delete-draft'
@@ -98,7 +88,8 @@ const DeploymentHistoryDiffView = ({
         <CodeEditor
             value={editorValuesRHS}
             defaultValue={editorValuesLHS}
-            height={codeEditorHeight}
+            adjustEditorHeightToContent
+            disableSearch
             diffView={previousConfigAvailable && true}
             readOnly
             noParsing
@@ -127,7 +118,7 @@ const DeploymentHistoryDiffView = ({
     )
 
     return (
-        <div>
+        <div className="deployment-history-diff-view">
             {!previousConfigAvailable && (
                 <div className="bcb-1 eb-2 pt-8 pb-8 br-4 flexbox pl-4 cn-9 fs-13 mt-16 mb-16 mr-20 ml-20">
                     <Info className="mr-8 ml-14 icon-dim-20" />
@@ -145,7 +136,6 @@ const DeploymentHistoryDiffView = ({
                 className={`en-2 bw-1 br-4 bcn-0 mt-16 mb-16 mr-20 ml-20 pt-2 pb-2 ${
                     previousConfigAvailable ? 'deployment-diff__upper' : ''
                 } ${rootClassName ?? ''}`}
-                ref={ref}
                 data-testid={`configuration-link-${
                     previousConfigAvailable ? 'previous-deployment' : 'no-previous-deployment'
                 }`}

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryDiffView.tsx

@@ -0,0 +1,5 @@
+.deployment-history-diff-view {
+    & .react-monaco-editor-container {
+        min-height: 100px;
+    }
+}

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/styles.scss

@@ -1,27 +1,6 @@
-import { useEffect, useState, useRef } from 'react'
-
 import { CollapseProps } from './types'
 
-export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
-    const ref = useRef<HTMLDivElement>(null)
-    const [contentHeight, setContentHeight] = useState(0)
-
-    useEffect(() => {
-        if (ref.current) {
-            setContentHeight(ref.current.clientHeight)
-        }
-    }, [children])
-
-    return (
-        <div
-            style={{
-                height: expand ? contentHeight : 0,
-                transition: 'height 200ms ease-out',
-                overflow: 'hidden',
-            }}
-            onTransitionEnd={onTransitionEnd}
-        >
-            <div ref={ref}>{children}</div>
-        </div>
-    )
-}
+export const Collapse = ({ expand, children }: CollapseProps) => (
+    // TODO: removed animation because of miscalculations (broken with auto editor height)
+    <div>{expand ? children : null}</div>
+)

src/Shared/Components/Collapse/Collapse.tsx

@@ -25,4 +25,8 @@
             margin: 16px 0 0;
         }
     }
+
+    & .react-monaco-editor-container {
+        min-height: 100px;
+    }
 }

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

@@ -141,7 +141,8 @@ export const DeploymentConfigDiffMain = ({
                                 defaultValue={primaryList.codeEditorValue.value}
                                 value={secondaryList.codeEditorValue.value}
                                 mode={MODES.YAML}
-                                height="650px"
+                                disableSearch
+                                adjustEditorHeightToContent
                                 noParsing
                                 readOnly
                             />