Skip to content

Commit 946bea0

Browse files
RohitRaj011RohitRaj011
committed
refactor: Update codeEditor instances, remove monaco scss
1 parent 7d77271 commit 946bea0

File tree

31 files changed

+172
-463
lines changed

31 files changed

+172
-463
lines changed

‎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: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -685,29 +685,17 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
685685

686686
const shebangHtml = this.state.configMap === SwitchItemValues.Configuration ? presetConfig : null
687687

688-
const decorationWidth = this.state.sso !== OIDCType ? 50 : 25
689688
return (
690689
<CodeEditor.Container>
691690
<CodeEditor
692691
mode={MODES.YAML}
693692
noParsing={this.state.sso === OIDCType}
694693
readOnly={this.state.configMap !== SwitchItemValues.Configuration}
695-
codeEditorProps={{
696-
value: codeEditorBody,
697-
shebang: shebangHtml,
698-
lineDecorationsWidth:
699-
this.state.configMap === SwitchItemValues.Configuration ? decorationWidth : 0,
700-
onChange: this.handleConfigChange,
701-
onBlur: this.handleOnBlur,
702-
adjustEditorHeightToContent: true,
703-
}}
704-
codeMirrorProps={{
705-
value: codeEditorBody,
706-
shebang: shebangHtml,
707-
onChange: this.handleConfigChange,
708-
onBlur: this.handleOnBlur,
709-
height: 'auto',
710-
}}
694+
value={codeEditorBody}
695+
shebang={shebangHtml}
696+
onChange={this.handleConfigChange}
697+
onBlur={this.handleOnBlur}
698+
height="auto"
711699
>
712700
<CodeEditor.Header>
713701
<div className="flex dc__content-space dc__gap-6">

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

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -328,30 +328,19 @@ export const ConfigMapSecretData = ({
328328
}}
329329
/>
330330
) : (
331-
<CodeEditor.Container overflowHidden>
331+
<CodeEditor.Container>
332332
<CodeEditor
333333
key={codeEditorRadio}
334334
mode={MODES.YAML}
335335
readOnly={
336336
readOnly || isHashiOrAWS || isLocked || codeEditorRadio === CODE_EDITOR_RADIO_STATE.SAMPLE
337337
}
338-
codeEditorProps={{
339-
value: getCodeEditorValue(),
340-
// Skip calling onChange if resolvedData exists
341-
onChange: !isLocked && !data.isResolvedData ? onChange : noop,
342-
onFocus,
343-
inline: true,
344-
adjustEditorHeightToContent: true,
345-
shebang: sheBangText,
346-
}}
347-
codeMirrorProps={{
348-
value: getCodeEditorValue(),
349-
// Skip calling onChange if resolvedData exists
350-
onChange: !isLocked && !data.isResolvedData ? onChange : noop,
351-
onFocus,
352-
height: '100%',
353-
shebang: sheBangText,
354-
}}
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}
355344
>
356345
<CodeEditor.Header>
357346
<div className="flex dc__content-space">

‎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: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -140,29 +140,20 @@ export default function ClusterManifest({
140140
noParsing
141141
readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
142142
diffView={manifestMode === EditModeType.REVIEW}
143-
codeEditorProps={{
144-
defaultValue: defaultManifest,
145-
theme: 'vs-dark--dt',
146-
height: '0',
147-
value: manifestValue,
148-
onChange: setManifest,
149-
}}
150-
codeMirrorProps={{
151-
theme: AppThemeType.dark,
152-
height: '100%',
153-
...(manifestMode === EditModeType.REVIEW
154-
? {
155-
diffView: true,
156-
originalValue: defaultManifest,
157-
modifiedValue: manifestValue,
158-
onModifiedValueChange: setManifest,
159-
}
160-
: {
161-
diffView: false,
162-
value: manifestValue,
163-
onChange: setManifest,
164-
}),
165-
}}
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+
})}
166157
>
167158
{manifestMode === EditModeType.REVIEW && (
168159
<CodeEditor.Header
@@ -185,7 +176,7 @@ export default function ClusterManifest({
185176
)
186177
}
187178

188-
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>
189180
}
190181

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

‎src/components/ClusterNodes/NodeDetails.tsx

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -566,7 +566,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
566566
)}
567567
{memoryData && (
568568
<div className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9">
569-
<Icon name="ic-memory" color={null} size={20} />
569+
<Icon name="ic-memory" color={null} size={20} />
570570
<div>{memoryData.name || '-'}</div>
571571
<div>{memoryData.requestPercentage || '-'}</div>
572572
<div>{memoryData.limitPercentage || '-'}</div>
@@ -917,35 +917,26 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
917917

918918
const renderYAMLEditor = (): JSX.Element => {
919919
return (
920-
<div className="node-details-container__editor flex-grow-1 flexbox-col">
920+
<div className="flex-grow-1 flexbox-col">
921921
<CodeEditor
922922
readOnly={!isEdit}
923923
diffView={isReviewState}
924924
mode={MODES.YAML}
925925
noParsing
926-
codeEditorProps={{
927-
theme: 'vs-dark--dt',
928-
value: modifiedManifest,
929-
defaultValue: (nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || '',
930-
height: '0',
931-
onChange: handleEditorValueChange,
932-
}}
933-
codeMirrorProps={{
934-
theme: AppThemeType.dark,
935-
...(isReviewState
936-
? {
937-
diffView: true,
938-
originalValue: (nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || '',
939-
modifiedValue: modifiedManifest,
940-
onModifiedValueChange: handleEditorValueChange,
941-
}
942-
: {
943-
diffView: false,
944-
value: modifiedManifest,
945-
onChange: handleEditorValueChange,
946-
}),
947-
height: 'fitToParent',
948-
}}
926+
theme={AppThemeType.dark}
927+
height="fitToParent"
928+
{...(isReviewState
929+
? {
930+
diffView: true,
931+
originalValue: (nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || '',
932+
modifiedValue: modifiedManifest,
933+
onModifiedValueChange: handleEditorValueChange,
934+
}
935+
: {
936+
diffView: false,
937+
value: modifiedManifest,
938+
onChange: handleEditorValueChange,
939+
})}
949940
>
950941
{isReviewState && isShowWarning && (
951942
<CodeEditor.Warning

‎src/components/ClusterNodes/clusterNodes.scss

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,6 @@
3636
width: 51%;
3737
}
3838

39-
.react-monaco-editor-container {
40-
flex-grow: 1;
41-
}
42-
4339
.code-editor__header {
4440
height: 32px;
4541
}
@@ -176,12 +172,6 @@
176172
grid-template-columns: 200px 280px auto;
177173
column-gap: 16px;
178174
}
179-
180-
&__editor {
181-
& .react-monaco-editor-container {
182-
flex-grow: 1;
183-
}
184-
}
185175
}
186176

187177
.cluster-list-main-container,
@@ -204,12 +194,6 @@
204194
}
205195
}
206196

207-
.cluster-manifest {
208-
& .react-monaco-editor-container {
209-
flex-grow: 1;
210-
}
211-
}
212-
213197
.tab-list {
214198
.tab-list__tab {
215199
.tab-hover {

‎src/components/ResourceBrowser/ResourceBrowser.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,4 @@
206206
}
207207
}
208208
}
209-
210-
& .react-monaco-editor-container {
211-
flex-grow: 1;
212-
}
213209
}

0 commit comments

Comments
 (0)