refactor: remove monaco-editor, codeMirror env flag, update codeEditor instances

Author: RohitRaj011

.env

@@ -61,6 +61,5 @@ FEATURE_CLUSTER_MAP_ENABLE=true
 FEATURE_DEFAULT_LANDING_RB_ENABLE=false
 FEATURE_ACTION_AUDIOS_ENABLE=true
 FEATURE_APPLICATION_TEMPLATES_ENABLE=true
-FEATURE_CODE_MIRROR_ENABLE=false
 FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.11.0-pre-8",
+        "@devtron-labs/devtron-fe-common-lib": "1.11.0-beta-9",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -23,8 +23,6 @@
         "flexsearch": "^0.6.32",
         "jsonpath-plus": "^10.3.0",
         "moment": "^2.29.4",
-        "monaco-editor": "0.44.0",
-        "monaco-yaml": "5.1.1",
         "query-string": "^7.1.1",
         "react": "^17.0.2",
         "react-csv": "^2.2.2",
@@ -33,7 +31,6 @@
         "react-ga4": "^1.4.1",
         "react-gtm-module": "^2.0.11",
         "react-mde": "^11.5.0",
-        "react-monaco-editor": "^0.55.0",
         "react-router-dom": "^5.3.4",
         "react-select": "5.8.0",
         "react-virtualized": "^9.22.5",
@@ -147,11 +144,7 @@
         ],
         "setupFilesAfterEnv": [
             "jest-extended"
-        ],
-        "moduleNameMapper": {
-            "monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
-            "monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
-        }
+        ]
     },
     "resolutions": {
         "nanoid": "^3.3.8",

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

@@ -40,7 +40,6 @@ import {
     ErrorScreenManager,
     FeatureTitleWithInfo,
     InfoColourBar,
-    isCodeMirrorEnabled,
     MODES,
     noop,
     Progressing,
@@ -667,9 +666,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
             this.state.configMap === SwitchItemValues.Configuration ? ssoConfig : YAMLStringify(sample[this.state.sso])
 
         let presetConfig = (
-            <div
-                className={`w-100 code-editor__text ${!isCodeMirrorEnabled() ? 'code-editor__text--monaco-editor' : ''}`}
-            >
+            <div className="w-100 code-editor__text">
                 <p className="m-0">config:</p>
                 <p className="m-0">&nbsp;&nbsp;&nbsp;&nbsp;type: {this.state.ssoConfig.config.type}</p>
                 <p className="m-0">&nbsp;&nbsp;&nbsp;&nbsp;name: {this.state.ssoConfig.config.name}</p>
@@ -680,9 +677,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
 
         if (this.state.configMap === SwitchItemValues.Configuration && this.state.sso === OIDCType) {
             presetConfig = (
-                <div
-                    className={`w-100 code-editor__text ${!isCodeMirrorEnabled() ? 'code-editor__text--monaco-editor' : ''}`}
-                >
+                <div className="w-100 code-editor__text">
                     <p className="m-0">config:</p>
                     <p className="m-0">&nbsp;&nbsp;&nbsp;&nbsp;type: {this.state.ssoConfig.config.type}</p>
                 </div>
@@ -717,7 +712,6 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                 >
                     <CodeEditor.Header>
                         <div className="flex dc__content-space dc__gap-6">
-                            <CodeEditor.ValidationError />
                             <div className="dc__no-shrink ml-auto">
                                 <Switch
                                     value={this.state.configMap}

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoLogin.scss

@@ -23,9 +23,5 @@
         color: var(--R500);
         font-size: 14px;
         font-family: Consolas, "Courier New", monospace;
-
-        &--monaco-editor {
-            padding: 0 35px;
-        }
     }
 }

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx

@@ -27,7 +27,6 @@ import {
     configMapSecretMountDataMap,
     convertKeyValuePairToYAML,
     convertYAMLToKeyValuePair,
-    isCodeMirrorEnabled,
     KeyValueConfig,
     KeyValueTable,
     MODES,
@@ -41,7 +40,6 @@ import {
     YAMLStringify,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICPencil } from '@Icons/ic-pencil.svg'
 import { ReactComponent as HideIcon } from '@Icons/ic-visibility-off.svg'
 import { importComponentFromFELibrary } from '@Components/common'
@@ -443,14 +441,6 @@ export const ConfigMapSecretData = ({
                             </div>
                         </div>
                     </CodeEditor.Header>
-                    {!isCodeMirrorEnabled() &&
-                        codeEditorRadio === CODE_EDITOR_RADIO_STATE.DATA &&
-                        errors[codeEditorFormKey] && (
-                            <div className="flex left px-16 py-8 dc__gap-8 bcr-1 cr-5 fs-12 lh-20">
-                                <ICErrorExclamation className="icon-dim-16 dc__no-shrink" />
-                                <p className="m-0">{errors[codeEditorFormKey]}</p>
-                            </div>
-                        )}
                 </CodeEditor>
                 {!data.external && data.yamlMode && renderYamlInfoText()}
             </CodeEditor.Container>

src/components/ClusterNodes/ClusterManifest.tsx

@@ -16,13 +16,7 @@
 
 import React, { useState, useEffect } from 'react'
 import YAML from 'yaml'
-import {
-    VisibleModal2,
-    YAMLStringify,
-    CodeEditor,
-    CodeEditorThemesKeys,
-    AppThemeType,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { VisibleModal2, YAMLStringify, CodeEditor, AppThemeType } from '@devtron-labs/devtron-fe-common-lib'
 import MessageUI, { MsgUIType } from '../v2/common/message.ui'
 import { getClusterManifest } from './clusterNodes.service'
 import { ManifestMessaging, MESSAGING_UI, MODES } from '../../config'
@@ -148,7 +142,7 @@ export default function ClusterManifest({
                 diffView={manifestMode === EditModeType.REVIEW}
                 codeEditorProps={{
                     defaultValue: defaultManifest,
-                    theme: CodeEditorThemesKeys.vsDarkDT,
+                    theme: 'vs-dark--dt',
                     height: '0',
                     value: manifestValue,
                     onChange: setManifest,
@@ -158,16 +152,16 @@ export default function ClusterManifest({
                     height: '100%',
                     ...(manifestMode === EditModeType.REVIEW
                         ? {
-                                diffView: true,
-                                originalValue: defaultManifest,
-                                modifiedValue: manifestValue,
-                                onModifiedValueChange: setManifest,
-                            }
+                              diffView: true,
+                              originalValue: defaultManifest,
+                              modifiedValue: manifestValue,
+                              onModifiedValueChange: setManifest,
+                          }
                         : {
-                                diffView: false,
-                                value: manifestValue,
-                                onChange: setManifest,
-                            }),
+                              diffView: false,
+                              value: manifestValue,
+                              onChange: setManifest,
+                          }),
                 }}
             >
                 {manifestMode === EditModeType.REVIEW && (

src/components/ClusterNodes/NodeDetails.tsx

@@ -34,7 +34,6 @@ import {
     ToastManager,
     ToastVariantType,
     ResourceDetail,
-    CodeEditorThemesKeys,
     noop,
     AppThemeType,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -543,7 +542,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
         return (
             <div>
-                <div className='dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary'>
+                <div className="dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary">
                     <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border resource-row dc__border-bottom fw-6 fs-13 pt-8 pb-8 pr-20 pl-20 cn-7">
                         <div />
                         <div>Resource</div>
@@ -554,7 +553,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                         <div>Capacity</div>
                     </div>
                 </div>
-                <div className='en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20'>
+                <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
                     {cpuData && (
                         <div className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9">
                             <Cpu className="mt-2 mb-2 icon-dim-18" />
@@ -833,7 +832,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                         {renderProbableIssuesOverviewCard()}
                         {renderNodeOverviewCard()}
                     </div>
-                    <div className='dc__overflow-auto pr-20'>
+                    <div className="dc__overflow-auto pr-20">
                         {renderResourceList()}
                         {renderLabelAnnotationTaint()}
                         {renderPodList()}
@@ -926,7 +925,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                     mode={MODES.YAML}
                     noParsing
                     codeEditorProps={{
-                        theme: CodeEditorThemesKeys.vsDarkDT,
+                        theme: 'vs-dark--dt',
                         value: modifiedManifest,
                         defaultValue: (nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || '',
                         height: '0',
@@ -1055,9 +1054,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
         return (
             <ErrorScreenManager
                 code={errorResponseCode}
-                subtitle={
-                    errorResponseCode == 403 ? unauthorizedInfoText(SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()) : ''
-                }
+                subtitle={errorResponseCode == 403 ? unauthorizedInfoText(SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()) : ''}
             />
         )
     }

src/components/ResourceBrowser/ResourceList/CreateResource.tsx

@@ -18,7 +18,6 @@ import React, { useEffect, useState } from 'react'
 
 import {
     CodeEditor,
-    CodeEditorThemesKeys,
     createNewResource,
     CreateResourceDTO,
     Drawer,
@@ -155,7 +154,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                         noParsing
                         loading={loader}
                         codeEditorProps={{
-                            theme: CodeEditorThemesKeys.vsDarkDT,
+                            theme: 'vs-dark--dt',
                             value: resourceYAML,
                             height: '0',
                             onChange: handleEditorValueChange,

src/components/charts/AdvancedConfig.tsx

@@ -24,7 +24,6 @@ import {
     CodeEditor,
     MarkDown,
     MODES,
-    isCodeMirrorEnabled,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory } from 'react-router-dom'
 import { Select, mapByKey, useKeyDown, Info, Pencil } from '../common'
@@ -650,16 +649,7 @@ const ValuesDiffViewer = ({
                         <Pencil style={{ marginLeft: 'auto' }} />
                     </h5>
                 </div>
-                <div
-                    {...(isCodeMirrorEnabled()
-                        ? {
-                              className: 'mw-none mh-0',
-                          }
-                        : {
-                              className: 'readme-config--body',
-                              style: { gridTemplateColumns: '1fr' },
-                          })}
-                >
+                <div className="mw-none mh-0">
                     <CodeEditor
                         mode={MODES.YAML}
                         noParsing

src/components/common/navigation/NavigationRoutes.tsx

@@ -72,27 +72,13 @@ import { LOGIN_COUNT, MAX_LOGIN_COUNT } from '../../onboardingGuide/onboarding.u
 import { HelmAppListResponse } from '../../app/list-new/AppListType'
 import { ExternalFluxAppDetailsRoute } from '../../../Pages/App/Details/ExternalFlux'
 
-// Monaco Editor worker dependency
-import 'monaco-editor'
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import YamlWorker from '../../../yaml.worker.js?worker'
 import { TAB_DATA_LOCAL_STORAGE_KEY } from '../DynamicTabs/constants'
 import { ENVIRONMENT_DATA_FALLBACK, INITIAL_ENV_DATA_STATE } from './constants'
 import { ParsedTabsData } from '../DynamicTabs/types'
 import { SwitchThemeDialog } from '@Pages/Shared'
 import { SwitchThemeDialogProps } from '@Pages/Shared/SwitchThemeDialog/types'
 import { EnvironmentDataStateType } from './types'
 
-// Monaco Editor worker initialization
-self.MonacoEnvironment = {
-    getWorker(_, label) {
-        if (label === MODES.YAML) {
-            return new YamlWorker()
-        }
-        return new editorWorker()
-    },
-}
-
 const Charts = lazy(() => import('../../charts/Charts'))
 const ExternalApps = lazy(() => import('../../external-apps/ExternalApps'))
 const ExternalArgoApps = lazy(() => import('../../externalArgoApps/ExternalArgoApp'))