feat: add codemirror engine for code-editor behind feature-flag

Author: RohitRaj011

src/Common/CodeMirror/index.ts

@@ -15,4 +15,4 @@
  */
 
 export { default as CodeEditor } from './CodeEditor'
-export type { CodeEditorProps } from './types'
+export type { CodeEditorProps, CodeEditorHeaderProps, CodeEditorStatusBarProps } from './types'

src/Common/index.ts

@@ -51,7 +51,6 @@ export * from './ImageTags'
 export * from './ImageTags.Types'
 export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
 export { default as Grid } from './Grid/Grid'
-// export { default as CodeEditor } from './CodeEditor/CodeEditor'
 export { default as Select } from './Select/Select'
 export { ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
@@ -64,6 +63,6 @@ export * from './Pagination'
 export * from './Markdown'
 export * from './GenericDescription'
 export * from './SegmentedBarChart'
-export * from './CodeEditor'
+export * from './CodeEditor/types'
 export * from './Tooltip'
 export * from './SegmentedControl'

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

@@ -19,7 +19,8 @@ import { useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { DiffViewer } from '@Shared/Components/DiffViewer'
 import { renderDiffViewNoDifferenceState } from '@Shared/Components/DeploymentConfigDiff'
-import { CodeEditor, MODES, Toggle, YAMLStringify } from '../../../../Common'
+import { CodeEditor } from '@Shared/Components/CodeEditorWrapper'
+import { MODES, Toggle, YAMLStringify } from '../../../../Common'
 import { DeploymentHistoryParamsType } from './types'
 import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../types'
 import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
@@ -77,13 +78,19 @@ const DeploymentHistoryDiffView = ({
         ) : (
             <CodeEditor
                 key={codeEditorKey}
-                value={editorValuesRHS}
-                defaultValue={editorValuesLHS}
-                adjustEditorHeightToContent
                 disableSearch
                 readOnly
                 noParsing
                 mode={MODES.YAML}
+                codeEditorProps={{
+                    value: editorValuesRHS,
+                    defaultValue: editorValuesLHS,
+                    adjustEditorHeightToContent: true,
+                }}
+                codeMirrorProps={{
+                    value: editorValuesRHS,
+                    height: 'auto',
+                }}
             />
         )
 

src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx

@@ -16,12 +16,13 @@
 
 import { Progressing } from '@Common/Progressing'
 import { hasHashiOrAWS } from '@Pages/index'
-import { CodeEditor } from '@Common/CodeEditor'
 
 import { ClipboardButton } from '@Common/ClipboardButton'
+import { MODES } from '@Common/Constants'
 import { getConfigMapSecretReadOnlyValues } from './utils'
 import { ConfigMapSecretReadyOnlyProps } from './types'
 import { renderHashiOrAwsDeprecatedInfo } from './helpers'
+import { CodeEditor } from '../CodeEditorWrapper'
 
 const ConfigMapSecretReadyOnly = ({
     componentType,
@@ -73,7 +74,19 @@ const ConfigMapSecretReadyOnly = ({
                         <ClipboardButton content={displayValues.data} />
                     </div>
                     <div className="dc__overflow-hidden br-4">
-                        <CodeEditor value={displayValues.data} mode="yaml" inline height={350} readOnly />
+                        <CodeEditor
+                            mode={MODES.YAML}
+                            readOnly
+                            codeEditorProps={{
+                                value: displayValues.data,
+                                inline: true,
+                                height: 350,
+                            }}
+                            codeMirrorProps={{
+                                value: displayValues.data,
+                                height: 350,
+                            }}
+                        />
                     </div>
                 </div>
             )}

src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx

@@ -0,0 +1,61 @@
+import { CodeEditor } from '@Common/CodeEditor'
+import { CodeEditor as CodeMirror, CodeEditorHeaderProps, CodeEditorStatusBarProps } from '@Common/CodeMirror'
+
+import { CodeEditorWrapperProps } from './types'
+
+export const CodeEditorWrapper = <DiffView extends boolean>({
+    codeEditorProps,
+    codeMirrorProps,
+    children,
+    ...restProps
+}: CodeEditorWrapperProps<DiffView>) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
+        <CodeMirror<DiffView> {...(codeMirrorProps as any)} {...restProps}>
+            {children}
+        </CodeMirror>
+    ) : (
+        <CodeEditor {...(codeEditorProps as any)} {...restProps}>
+            {children}
+        </CodeEditor>
+    )
+
+const CodeEditorLanguageChangerWrapper = () =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? null : <CodeEditor.LanguageChanger />
+
+const CodeEditorThemeChangerWrapper = () =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? null : <CodeEditor.ThemeChanger />
+
+const CodeEditorValidationErrorWrapper = () =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? null : <CodeEditor.ValidationError />
+
+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 CodeEditorWarningWrapper = (props: CodeEditorStatusBarProps) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Warning {...props} /> : <CodeEditor.Warning {...props} />
+
+const CodeEditorErrorBarWrapper = (props: CodeEditorStatusBarProps) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.ErrorBar {...props} /> : <CodeEditor.ErrorBar {...props} />
+
+const CodeEditorInformationWrapper = (props: CodeEditorStatusBarProps) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
+        <CodeMirror.Information {...props} />
+    ) : (
+        <CodeEditor.Information {...props} />
+    )
+
+const CodeEditorContainerWrapper = (props: { children: React.ReactNode; flexExpand?: boolean }) =>
+    window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Container {...props} /> : null
+
+CodeEditorWrapper.LanguageChanger = CodeEditorLanguageChangerWrapper
+CodeEditorWrapper.ThemeChanger = CodeEditorThemeChangerWrapper
+CodeEditorWrapper.ValidationError = CodeEditorValidationErrorWrapper
+CodeEditorWrapper.Clipboard = CodeEditorClipboardWrapper
+CodeEditorWrapper.Header = CodeEditorHeaderWrapper
+CodeEditorWrapper.Warning = CodeEditorWarningWrapper
+CodeEditorWrapper.ErrorBar = CodeEditorErrorBarWrapper
+CodeEditorWrapper.Information = CodeEditorInformationWrapper
+CodeEditorWrapper.Container = CodeEditorContainerWrapper

src/Shared/Components/CodeEditorWrapper/index.ts

@@ -0,0 +1 @@
+export { CodeEditorWrapper as CodeEditor } from './CodeEditorWrapper'

src/Shared/Components/CodeEditorWrapper/types.ts

@@ -0,0 +1,44 @@
+import { CodeEditorInterface } from '@Common/CodeEditor'
+import { CodeEditorProps } from '@Common/CodeMirror'
+
+export type CodeEditorWrapperProps<DiffView extends boolean> = Pick<
+    CodeEditorProps<DiffView>,
+    | 'mode'
+    | 'tabSize'
+    | 'readOnly'
+    | 'placeholder'
+    | 'noParsing'
+    | 'loading'
+    | 'customLoader'
+    | 'cleanData'
+    | 'disableSearch'
+    | 'children'
+> & {
+    diffView?: DiffView
+    codeEditorProps: Omit<
+        CodeEditorInterface,
+        | 'mode'
+        | 'tabSize'
+        | 'readOnly'
+        | 'placeholder'
+        | 'noParsing'
+        | 'loading'
+        | 'customLoader'
+        | 'cleanData'
+        | 'disableSearch'
+        | 'children'
+    >
+    codeMirrorProps: Omit<
+        CodeEditorProps<DiffView>,
+        | 'mode'
+        | 'tabSize'
+        | 'readOnly'
+        | 'placeholder'
+        | 'noParsing'
+        | 'loading'
+        | 'customLoader'
+        | 'cleanData'
+        | 'disableSearch'
+        | 'children'
+    >
+}

src/Shared/Components/index.ts

@@ -82,3 +82,4 @@ export * from './RegistryIcon'
 export * from './GitProviderIcon'
 export * from './CustomInput'
 export * from './InfoBlock'
+export * from './CodeEditorWrapper'

src/index.ts

@@ -105,6 +105,11 @@ export interface customEnv {
      * @default false
      */
     FEATURE_EXPERIMENTAL_THEMING_ENABLE?: boolean
+    /**
+     * If true, the code-editor will use codemirror engine
+     * @default false
+     */
+    FEATURE_CODE_MIRROR_ENABLE?: boolean
 }
 declare global {
     interface Window {