fix: CodeEditor - height adjustments, CodeMirror - styles updates

RohitRaj011 · RohitRaj011 · commit af73d9c0f43d · 2025-02-27T11:56:32.000+05:30
diff --git a/src/Common/CodeEditor/CodeEditor.tsx b/src/Common/CodeEditor/CodeEditor.tsx
@@ -355,7 +355,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                     <CodeEditorPlaceholder customLoader={customLoader} />
                 ) : (
                     <>
-                        {shebang && <div className="code-editor__shebang">{shebang}</div>}
+                        {shebang && <div className="code-editor-shebang">{shebang}</div>}
                         {state.diffMode ? (
                             <MonacoDiffEditor
                                 original={state.defaultCode}
@@ -391,10 +391,14 @@ const Header: React.FC<CodeEditorHeaderInterface> & CodeEditorHeaderComposition
     children,
     className,
     hideDefaultSplitHeader,
+    diffViewWidth,
 }) => {
     const { defaultValue } = useCodeEditorContext()
     return (
-        <div className={className || 'code-editor__header flex right'}>
+        <div
+            className={className || 'code-editor__header flex right'}
+            style={{ ...(diffViewWidth ? { width: 'calc(100% - 30px)' } : {}) }}
+        >
             {children}
             {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
         </div>
@@ -518,6 +522,24 @@ const CodeEditorPlaceholder = ({ className = '', style = {}, customLoader }): JS
     )
 }
 
+const Container = ({
+    children,
+    flexExpand,
+    overflowHidden,
+}: {
+    children: React.ReactNode
+    flexExpand?: boolean
+    overflowHidden?: boolean
+}) => (
+    <div
+        data-code-editor-container
+        className={`code-editor__container w-100 dc__border br-4
+        ${flexExpand ? 'flex-grow-1 flexbox-col' : ''} ${overflowHidden ? 'dc__overflow-hidden' : ''}`}
+    >
+        {children}
+    </div>
+)
+
 CodeEditor.LanguageChanger = LanguageChanger
 CodeEditor.ThemeChanger = ThemeChanger
 CodeEditor.ValidationError = ValidationError
@@ -526,5 +548,6 @@ CodeEditor.Header = Header
 CodeEditor.Warning = Warning
 CodeEditor.ErrorBar = ErrorBar
 CodeEditor.Information = Information
+CodeEditor.Container = Container
 
 export default CodeEditor
diff --git a/src/Common/CodeEditor/codeEditor.scss b/src/Common/CodeEditor/codeEditor.scss
@@ -131,7 +131,7 @@
   }
 }
 
-.code-editor__shebang {
+.code-editor-shebang {
   padding: 0 52px;
   color: var(--N900);
   opacity: 0.6;
diff --git a/src/Common/CodeEditor/types.ts b/src/Common/CodeEditor/types.ts
@@ -82,6 +82,7 @@ export interface CodeEditorHeaderInterface {
     children?: any
     className?: string
     hideDefaultSplitHeader?: boolean
+    diffViewWidth?: boolean
 }
 export interface CodeEditorComposition {
     Header?: React.FC<any>
@@ -92,6 +93,7 @@ export interface CodeEditorComposition {
     Warning?: React.FC<InformationBarProps>
     ErrorBar?: React.FC<InformationBarProps>
     Information?: React.FC<InformationBarProps>
+    Container?: React.FC<{ children: React.ReactNode; flexExpand?: boolean; overflowHidden?: boolean }>
 }
 export interface CodeEditorHeaderComposition {
     LanguageChanger?: React.FC<any>
diff --git a/src/Common/CodeMirror/CodeEditor.theme.ts b/src/Common/CodeMirror/CodeEditor.theme.ts
@@ -45,7 +45,7 @@ export const getCodeEditorTheme = (isDark: boolean) => {
         }),
         codeEditorTheme: themeInit({
             settings: {
-                fontSize: '16px',
+                fontSize: '15px',
                 fontFamily: 'Inconsolata, monospace',
                 background: 'var(--bg-code-editor-base)',
                 foreground: 'var(--fg-code-editor)',
diff --git a/src/Common/CodeMirror/CodeEditorRenderer.tsx b/src/Common/CodeMirror/CodeEditorRenderer.tsx
@@ -114,11 +114,10 @@ export const CodeEditorRenderer = ({
         <CodeMirrorMerge
             theme={codeEditorTheme}
             key={codemirrorMergeKey}
-            className={`w-100 ${isDarkTheme ? 'cm-merge-theme__dark' : 'cm-merge-theme__light'} ${codeEditorParentClassName}`}
+            className={`w-100 ${isDarkTheme ? 'cm-merge-theme__dark' : 'cm-merge-theme__light'} ${codeEditorParentClassName} ${readOnly ? 'code-editor__read-only' : ''}`}
             gutter
             destroyRerender={false}
-            revertControls="a-to-b"
-            renderRevertControl={getRevertControlButton}
+            {...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {})}
         >
             <CodeMirrorMerge.Original
                 basicSetup={false}
diff --git a/src/Common/CodeMirror/codeEditor.scss b/src/Common/CodeMirror/codeEditor.scss
@@ -24,8 +24,10 @@
     border-right: 1px solid var(--N200);
 }
 
-.cm-mergeViewEditor:last-child {
-    border-left: 1px solid var(--N200);
+.cm-merge-theme:not(.code-editor__read-only) {
+    .cm-mergeViewEditor:last-child {
+        border-left: 1px solid var(--N200);
+    }
 }
 
 .cm-scroller {
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
@@ -26,7 +26,6 @@ import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../
 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,
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/styles.scss b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/styles.scss
diff --git a/src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx b/src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx
@@ -17,7 +17,6 @@
 import { Progressing } from '@Common/Progressing'
 import { hasHashiOrAWS } from '@Pages/index'
 
-import { ClipboardButton } from '@Common/ClipboardButton'
 import { MODES } from '@Common/Constants'
 import { getConfigMapSecretReadOnlyValues } from './utils'
 import { ConfigMapSecretReadyOnlyProps } from './types'
@@ -51,7 +50,7 @@ const ConfigMapSecretReadyOnly = ({
         <div
             className={
                 containerClassName ||
-                `bg__primary h-100 flexbox-col dc__gap-12 dc__overflow-auto ${!hideCodeEditor ? 'p-16' : ''}`
+                `bg__primary flexbox-col dc__gap-12 dc__overflow-auto ${!hideCodeEditor ? 'p-16' : ''}`
             }
         >
             {hasHashiOrAWS(configMapSecretData?.externalType) && renderHashiOrAwsDeprecatedInfo()}
@@ -68,27 +67,26 @@ const ConfigMapSecretReadyOnly = ({
                 )}
             </div>
             {!hideCodeEditor && displayValues.data && (
-                <div className="dc__border br-4">
-                    <div className="px-16 py-6 dc__border-bottom flex dc__content-space">
-                        <p className="m-0 fs-13 lh-20 fw-6 cn-9">Data</p>
-                        <ClipboardButton content={displayValues.data} />
-                    </div>
-                    <div className="dc__overflow-hidden br-4">
-                        <CodeEditor
-                            mode={MODES.YAML}
-                            readOnly
-                            codeEditorProps={{
-                                value: displayValues.data,
-                                inline: true,
-                                height: 350,
-                            }}
-                            codeMirrorProps={{
-                                value: displayValues.data,
-                                height: 350,
-                            }}
-                        />
-                    </div>
-                </div>
+                <CodeEditor.Container>
+                    <CodeEditor
+                        mode={MODES.YAML}
+                        readOnly
+                        codeEditorProps={{
+                            value: displayValues.data,
+                            inline: true,
+                            adjustEditorHeightToContent: true,
+                        }}
+                        codeMirrorProps={{
+                            value: displayValues.data,
+                            height: 'auto',
+                        }}
+                    >
+                        <CodeEditor.Header className="flex dc__content-space px-16 py-6 dc__border-bottom">
+                            <p className="m-0 fs-13 lh-20 fw-6 cn-9">Data</p>
+                            <CodeEditor.Clipboard />
+                        </CodeEditor.Header>
+                    </CodeEditor>
+                </CodeEditor.Container>
             )}
         </div>
     )
diff --git a/src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx b/src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx
@@ -3,6 +3,8 @@ import { CodeEditor as CodeMirror, CodeEditorHeaderProps, CodeEditorStatusBarPro
 
 import { CodeEditorWrapperProps } from './types'
 
+export const isCodeMirrorEnabled = () => window._env_.FEATURE_CODE_MIRROR_ENABLE
+
 export const CodeEditorWrapper = <DiffView extends boolean>({
     codeEditorProps,
     codeMirrorProps,
@@ -31,8 +33,12 @@ const CodeEditorValidationErrorWrapper = () =>
 const CodeEditorClipboardWrapper = () =>
     window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Clipboard /> : <CodeEditor.Clipboard />
 
-const CodeEditorHeaderWrapper = (props: CodeEditorHeaderProps) =>
-    window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Header {...props} /> : <CodeEditor.Header {...props} />
+const CodeEditorHeaderWrapper = ({ diffViewWidth, ...props }: CodeEditorHeaderProps & { diffViewWidth?: boolean }) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
+        <CodeMirror.Header {...props} />
+    ) : (
+        <CodeEditor.Header diffViewWidth={diffViewWidth} {...props} />
+    )
 
 const CodeEditorWarningWrapper = (props: CodeEditorStatusBarProps) =>
     window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Warning {...props} /> : <CodeEditor.Warning {...props} />
@@ -47,8 +53,19 @@ const CodeEditorInformationWrapper = (props: CodeEditorStatusBarProps) =>
         <CodeEditor.Information {...props} />
     )
 
-const CodeEditorContainerWrapper = (props: { children: React.ReactNode; flexExpand?: boolean }) =>
-    window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Container {...props} /> : null
+const CodeEditorContainerWrapper = ({
+    overflowHidden,
+    ...props
+}: {
+    children: React.ReactNode
+    flexExpand?: boolean
+    overflowHidden?: boolean
+}) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
+        <CodeMirror.Container {...props} />
+    ) : (
+        <CodeEditor.Container overflowHidden={overflowHidden} {...props} />
+    )
 
 CodeEditorWrapper.LanguageChanger = CodeEditorLanguageChangerWrapper
 CodeEditorWrapper.ThemeChanger = CodeEditorThemeChangerWrapper
diff --git a/src/Shared/Components/CodeEditorWrapper/index.ts b/src/Shared/Components/CodeEditorWrapper/index.ts
@@ -1 +1 @@
-export { CodeEditorWrapper as CodeEditor } from './CodeEditorWrapper'
+export { CodeEditorWrapper as CodeEditor, isCodeMirrorEnabled } from './CodeEditorWrapper'
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
@@ -41,10 +41,6 @@
     flex-grow: 1;
   }
 
-  & .react-monaco-editor-container {
-    min-height: 100px;
-  }
-
   &__tab-list {
     label {
       flex-grow: 1;
@@ -54,4 +50,4 @@
       justify-content: center;
     }
   }
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@`
`131`	`131`	`}`
`132`	`132`	`}`
`133`	`133`
`134`		`-.code-editor__shebang {`
	`134`	`+.code-editor-shebang {`
`135`	`135`	`padding: 0 52px;`
`136`	`136`	`color: var(--N900);`
`137`	`137`	`opacity: 0.6;`
Original file line number	Diff line number	Diff line change
`@@ -24,8 +24,10 @@`
`24`	`24`	`border-right: 1px solid var(--N200);`
`25`	`25`	`}`
`26`	`26`
`27`		`-.cm-mergeViewEditor:last-child {`
`28`		`- border-left: 1px solid var(--N200);`
	`27`	`+.cm-merge-theme:not(.code-editor__read-only) {`
	`28`	`+ .cm-mergeViewEditor:last-child {`
	`29`	`+ border-left: 1px solid var(--N200);`
	`30`	`+ }`
`29`	`31`	`}`
`30`	`32`
`31`	`33`	`.cm-scroller {`