Skip to content

Commit c8b013d

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #2676 from devtron-labs/refactor/remove-monaco
refactor: remove monaco-editor, codeMirror env flag, update codeEditor instances
2 parents 342d5cd + fcbb05e commit c8b013d

File tree

40 files changed

+179
-683
lines changed

40 files changed

+179
-683
lines changed

‎.env

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ FEATURE_CLUSTER_MAP_ENABLE=true
6161
FEATURE_DEFAULT_LANDING_RB_ENABLE=false
6262
FEATURE_ACTION_AUDIOS_ENABLE=true
6363
FEATURE_APPLICATION_TEMPLATES_ENABLE=true
64-
FEATURE_CODE_MIRROR_ENABLE=false
64+
FEATURE_CODE_MIRROR_ENABLE=true
6565
FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
6666
GATEKEEPER_URL=https://license.devtron.ai/dashboard
67-
FEATURE_AI_INTEGRATION_ENABLE=false
67+
FEATURE_AI_INTEGRATION_ENABLE=false

‎package.json

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.12.0-pre-5",
7+
"@devtron-labs/devtron-fe-common-lib": "1.12.0-pre-6",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",
@@ -23,8 +23,6 @@
2323
"flexsearch": "^0.6.32",
2424
"jsonpath-plus": "^10.3.0",
2525
"moment": "^2.29.4",
26-
"monaco-editor": "0.44.0",
27-
"monaco-yaml": "5.1.1",
2826
"query-string": "^7.1.1",
2927
"react": "^17.0.2",
3028
"react-csv": "^2.2.2",
@@ -33,7 +31,6 @@
3331
"react-ga4": "^1.4.1",
3432
"react-gtm-module": "^2.0.11",
3533
"react-mde": "^11.5.0",
36-
"react-monaco-editor": "^0.55.0",
3734
"react-router-dom": "^5.3.4",
3835
"react-select": "5.8.0",
3936
"react-virtualized": "^9.22.5",
@@ -147,11 +144,7 @@
147144
],
148145
"setupFilesAfterEnv": [
149146
"jest-extended"
150-
],
151-
"moduleNameMapper": {
152-
"monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
153-
"monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
154-
}
147+
]
155148
},
156149
"resolutions": {
157150
"nanoid": "^3.3.8",

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigDryRun.tsx

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -101,18 +101,10 @@ const ConfigDryRun = ({
101101
mode={MODES.YAML}
102102
noParsing
103103
loading={isLoading}
104-
codeEditorProps={{
105-
value: editorTemplate,
106-
height: '100%',
107-
...(editorSchema && { validatorSchema: editorSchema }),
108-
...(selectedChartVersion && { chartVersion: selectedChartVersion?.replace(/\./g, '-') }),
109-
}}
110-
codeMirrorProps={{
111-
value: editorTemplate,
112-
height: 'fitToParent',
113-
...(editorSchema && { validatorSchema: editorSchema }),
114-
...(selectedChartVersion && { chartVersion: selectedChartVersion?.replace(/\./g, '-') }),
115-
}}
104+
value={editorTemplate}
105+
height="fitToParent"
106+
{...(editorSchema ? { validatorSchema: editorSchema } : {})}
107+
{...(selectedChartVersion ? { chartVersion: selectedChartVersion?.replace(/\./g, '-') } : {})}
116108
/>
117109
)
118110
}
@@ -168,14 +160,8 @@ const ConfigDryRun = ({
168160
mode={MODES.YAML}
169161
readOnly
170162
noParsing
171-
codeEditorProps={{
172-
value: manifestResponse?.result?.data || '',
173-
height: '100%',
174-
}}
175-
codeMirrorProps={{
176-
value: manifestResponse?.result?.data || '',
177-
height: 'fitToParent',
178-
}}
163+
value={manifestResponse?.result?.data || ''}
164+
height="fitToParent"
179165
/>
180166
</APIResponseHandler>
181167
</div>

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplateForm.tsx

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -255,26 +255,11 @@ const DeploymentTemplateForm = ({
255255
mode={MODES.YAML}
256256
readOnly={readOnly}
257257
noParsing
258-
codeEditorProps={{
259-
value: editedDocument,
260-
schemaURI: getEditorSchemaURIFromChartNameAndVersion(
261-
selectedChart?.name,
262-
selectedChart?.version,
263-
),
264-
onChange: readOnly ? noop : editorOnChange,
265-
validatorSchema: schema,
266-
height: '100%',
267-
}}
268-
codeMirrorProps={{
269-
value: editedDocument,
270-
schemaURI: getEditorSchemaURIFromChartNameAndVersion(
271-
selectedChart?.name,
272-
selectedChart?.version,
273-
),
274-
onChange: readOnly ? noop : editorOnChange,
275-
validatorSchema: schema,
276-
height: '100%',
277-
}}
258+
value={editedDocument}
259+
schemaURI={getEditorSchemaURIFromChartNameAndVersion(selectedChart?.name, selectedChart?.version)}
260+
onChange={readOnly ? noop : editorOnChange}
261+
validatorSchema={schema}
262+
height="100%"
278263
>
279264
{renderEditorHeader()}
280265
</CodeEditor>

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

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ import {
4040
ErrorScreenManager,
4141
FeatureTitleWithInfo,
4242
InfoBlock,
43-
isCodeMirrorEnabled,
4443
MODES,
4544
noop,
4645
Progressing,
@@ -666,9 +665,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
666665
this.state.configMap === SwitchItemValues.Configuration ? ssoConfig : YAMLStringify(sample[this.state.sso])
667666

668667
let presetConfig = (
669-
<div
670-
className={`w-100 code-editor__text ${!isCodeMirrorEnabled() ? 'code-editor__text--monaco-editor' : ''}`}
671-
>
668+
<div className="w-100 code-editor__text">
672669
<p className="m-0">config:</p>
673670
<p className="m-0">&nbsp;&nbsp;&nbsp;&nbsp;type: {this.state.ssoConfig.config.type}</p>
674671
<p className="m-0">&nbsp;&nbsp;&nbsp;&nbsp;name: {this.state.ssoConfig.config.name}</p>
@@ -679,9 +676,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
679676

680677
if (this.state.configMap === SwitchItemValues.Configuration && this.state.sso === OIDCType) {
681678
presetConfig = (
682-
<div
683-
className={`w-100 code-editor__text ${!isCodeMirrorEnabled() ? 'code-editor__text--monaco-editor' : ''}`}
684-
>
679+
<div className="w-100 code-editor__text">
685680
<p className="m-0">config:</p>
686681
<p className="m-0">&nbsp;&nbsp;&nbsp;&nbsp;type: {this.state.ssoConfig.config.type}</p>
687682
</div>
@@ -690,33 +685,20 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
690685

691686
const shebangHtml = this.state.configMap === SwitchItemValues.Configuration ? presetConfig : null
692687

693-
const decorationWidth = this.state.sso !== OIDCType ? 50 : 25
694688
return (
695689
<CodeEditor.Container>
696690
<CodeEditor
697691
mode={MODES.YAML}
698692
noParsing={this.state.sso === OIDCType}
699693
readOnly={this.state.configMap !== SwitchItemValues.Configuration}
700-
codeEditorProps={{
701-
value: codeEditorBody,
702-
shebang: shebangHtml,
703-
lineDecorationsWidth:
704-
this.state.configMap === SwitchItemValues.Configuration ? decorationWidth : 0,
705-
onChange: this.handleConfigChange,
706-
onBlur: this.handleOnBlur,
707-
adjustEditorHeightToContent: true,
708-
}}
709-
codeMirrorProps={{
710-
value: codeEditorBody,
711-
shebang: shebangHtml,
712-
onChange: this.handleConfigChange,
713-
onBlur: this.handleOnBlur,
714-
height: 'auto',
715-
}}
694+
value={codeEditorBody}
695+
shebang={shebangHtml}
696+
onChange={this.handleConfigChange}
697+
onBlur={this.handleOnBlur}
698+
height="auto"
716699
>
717700
<CodeEditor.Header>
718701
<div className="flex dc__content-space dc__gap-6">
719-
<CodeEditor.ValidationError />
720702
<div className="dc__no-shrink ml-auto">
721703
<Switch
722704
value={this.state.configMap}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,5 @@
2323
color: var(--R500);
2424
font-size: 14px;
2525
font-family: Consolas, "Courier New", monospace;
26-
27-
&--monaco-editor {
28-
padding: 0 35px;
29-
}
3026
}
3127
}

‎src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import {
2727
configMapSecretMountDataMap,
2828
convertKeyValuePairToYAML,
2929
convertYAMLToKeyValuePair,
30-
isCodeMirrorEnabled,
3130
KeyValueTable,
3231
KeyValueTableData,
3332
MODES,
@@ -40,7 +39,6 @@ import {
4039
YAMLStringify,
4140
} from '@devtron-labs/devtron-fe-common-lib'
4241

43-
import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
4442
import { ReactComponent as ICPencil } from '@Icons/ic-pencil.svg'
4543
import { ReactComponent as HideIcon } from '@Icons/ic-visibility-off.svg'
4644
import { importComponentFromFELibrary } from '@Components/common'
@@ -330,30 +328,19 @@ export const ConfigMapSecretData = ({
330328
}}
331329
/>
332330
) : (
333-
<CodeEditor.Container overflowHidden>
331+
<CodeEditor.Container>
334332
<CodeEditor
335333
key={codeEditorRadio}
336334
mode={MODES.YAML}
337335
readOnly={
338336
readOnly || isHashiOrAWS || isLocked || codeEditorRadio === CODE_EDITOR_RADIO_STATE.SAMPLE
339337
}
340-
codeEditorProps={{
341-
value: getCodeEditorValue(),
342-
// Skip calling onChange if resolvedData exists
343-
onChange: !isLocked && !data.isResolvedData ? onChange : noop,
344-
onFocus,
345-
inline: true,
346-
adjustEditorHeightToContent: true,
347-
shebang: sheBangText,
348-
}}
349-
codeMirrorProps={{
350-
value: getCodeEditorValue(),
351-
// Skip calling onChange if resolvedData exists
352-
onChange: !isLocked && !data.isResolvedData ? onChange : noop,
353-
onFocus,
354-
height: '100%',
355-
shebang: sheBangText,
356-
}}
338+
value={getCodeEditorValue()}
339+
// Skip calling onChange if resolvedData exists}
340+
onChange={!isLocked && !data.isResolvedData ? onChange : noop}
341+
onFocus={onFocus}
342+
height="100%"
343+
shebang={sheBangText}
357344
>
358345
<CodeEditor.Header>
359346
<div className="flex dc__content-space">
@@ -379,14 +366,6 @@ export const ConfigMapSecretData = ({
379366
</div>
380367
</div>
381368
</CodeEditor.Header>
382-
{!isCodeMirrorEnabled() &&
383-
codeEditorRadio === CODE_EDITOR_RADIO_STATE.DATA &&
384-
errors[codeEditorFormKey] && (
385-
<div className="flex left px-16 py-8 dc__gap-8 bcr-1 cr-5 fs-12 lh-20">
386-
<ICErrorExclamation className="icon-dim-16 dc__no-shrink" />
387-
<p className="m-0">{errors[codeEditorFormKey]}</p>
388-
</div>
389-
)}
390369
</CodeEditor>
391370
{!data.external && data.yamlMode && renderYamlInfoText()}
392371
</CodeEditor.Container>

‎src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -250,18 +250,7 @@ export const ConfigMapSecretDryRun = ({
250250
reload: reloadConfigMapSecretManifest,
251251
}}
252252
>
253-
<CodeEditor
254-
mode={MODES.YAML}
255-
readOnly
256-
codeEditorProps={{
257-
value: configMapSecretManifest?.manifest,
258-
height: '100%',
259-
}}
260-
codeMirrorProps={{
261-
value: configMapSecretManifest?.manifest,
262-
height: 'fitToParent',
263-
}}
264-
/>
253+
<CodeEditor mode={MODES.YAML} readOnly value={configMapSecretManifest?.manifest} height="fitToParent" />
265254
</APIResponseHandler>
266255
</div>
267256
)

‎src/components/CIPipelineN/CustomScript.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,17 +50,9 @@ const CustomScript = ({ handleScriptChange }: CustomScriptType) => {
5050
<CodeEditor
5151
mode={MODES.SHELL}
5252
noParsing
53-
codeEditorProps={{
54-
value: editorValue,
55-
onChange: (value) => handleScriptChange({ target: { value } }),
56-
height: 300,
57-
inline: true,
58-
}}
59-
codeMirrorProps={{
60-
value: editorValue,
61-
onChange: (value) => handleScriptChange({ target: { value } }),
62-
height: 300,
63-
}}
53+
value={editorValue}
54+
onChange={(value) => handleScriptChange({ target: { value } })}
55+
height={300}
6456
/>
6557
</div>
6658
</div>

‎src/components/ClusterNodes/ClusterManifest.tsx

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,7 @@
1616

1717
import React, { useState, useEffect } from 'react'
1818
import YAML from 'yaml'
19-
import {
20-
VisibleModal2,
21-
YAMLStringify,
22-
CodeEditor,
23-
CodeEditorThemesKeys,
24-
AppThemeType,
25-
} from '@devtron-labs/devtron-fe-common-lib'
19+
import { VisibleModal2, YAMLStringify, CodeEditor, AppThemeType } from '@devtron-labs/devtron-fe-common-lib'
2620
import MessageUI, { MsgUIType } from '../v2/common/message.ui'
2721
import { getClusterManifest } from './clusterNodes.service'
2822
import { ManifestMessaging, MESSAGING_UI, MODES } from '../../config'
@@ -146,29 +140,20 @@ export default function ClusterManifest({
146140
noParsing
147141
readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
148142
diffView={manifestMode === EditModeType.REVIEW}
149-
codeEditorProps={{
150-
defaultValue: defaultManifest,
151-
theme: CodeEditorThemesKeys.vsDarkDT,
152-
height: '0',
153-
value: manifestValue,
154-
onChange: setManifest,
155-
}}
156-
codeMirrorProps={{
157-
theme: AppThemeType.dark,
158-
height: '100%',
159-
...(manifestMode === EditModeType.REVIEW
160-
? {
161-
diffView: true,
162-
originalValue: defaultManifest,
163-
modifiedValue: manifestValue,
164-
onModifiedValueChange: setManifest,
165-
}
166-
: {
167-
diffView: false,
168-
value: manifestValue,
169-
onChange: setManifest,
170-
}),
171-
}}
143+
theme={AppThemeType.dark}
144+
height={'100%'}
145+
{...(manifestMode === EditModeType.REVIEW
146+
? {
147+
diffView: true,
148+
originalValue: defaultManifest,
149+
modifiedValue: manifestValue,
150+
onModifiedValueChange: setManifest,
151+
}
152+
: {
153+
diffView: false,
154+
value: manifestValue,
155+
onChange: setManifest,
156+
})}
172157
>
173158
{manifestMode === EditModeType.REVIEW && (
174159
<CodeEditor.Header
@@ -191,7 +176,7 @@ export default function ClusterManifest({
191176
)
192177
}
193178

194-
return <div className="dc__overflow-hidden flex-grow-1 flexbox-col cluster-manifest">{renderManifest()}</div>
179+
return <div className="dc__overflow-hidden flex-grow-1 flexbox-col">{renderManifest()}</div>
195180
}
196181

197182
export const ManifestPopupMenu = ({ closePopup, podName, namespace, forceDeletePod }: ManifestPopuptype) => {

0 commit comments

Comments
 (0)