chore: codemirror-revert

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.7.0",
+        "@devtron-labs/devtron-fe-common-lib": "1.7.0-beta-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -23,6 +23,8 @@
         "flexsearch": "^0.6.32",
         "jsonpath-plus": "^10.0.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",
@@ -31,6 +33,7 @@
         "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",
@@ -142,7 +145,11 @@
         ],
         "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/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx

@@ -34,6 +34,7 @@ const CompareConfigView = ({
     selectedChartVersion,
     draftChartVersion,
     isDeleteOverrideView,
+    editorKey = `${compareFromSelectedOptionValue || 'compare'}-draft-editor-key`,
     className = '',
     errorInfo,
     handleErrorReload,
@@ -71,6 +72,7 @@ const CompareConfigView = ({
         ) : (
             <div className="p-16">
                 <DeploymentHistoryDiffView
+                    key={editorKey}
                     currentConfiguration={getCompareViewHistoryDiffConfigProps(
                         publishedEditorTemplate,
                         publishedEditorConfig,

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

@@ -95,7 +95,7 @@ const ConfigDryRun = ({
         return (
             <CodeEditor
                 value={editorTemplate}
-                height="fitToParent"
+                height="100%"
                 readOnly
                 mode={MODES.YAML}
                 noParsing
@@ -155,7 +155,7 @@ const ConfigDryRun = ({
                     >
                         <CodeEditor
                             value={manifestResponse?.result?.data || ''}
-                            height="fitToParent"
+                            height="100%"
                             mode={MODES.YAML}
                             readOnly
                             noParsing

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

@@ -1556,6 +1556,7 @@ const DeploymentTemplate = ({
                     }
                     draftChartVersion={draftTemplateData?.selectedChart?.version}
                     isDeleteOverrideView={isDeleteOverrideDraft}
+                    editorKey={`${compareFromSelectedOptionValue || 'compare'}-draft-editor-key-${Number(!!hideLockedKeys)}-${shouldMergeTemplateWithPatches ? 'with-merged-values' : 'without-merged-values'}-${resolveScopedVariables ? 'in-resolved-view' : 'in-unresolved-view'}`}
                     {...getCompareFromEditorConfig({
                         envId,
                         isDeleteOverrideDraft,

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts

@@ -304,6 +304,10 @@ export type CompareConfigViewProps = {
     publishedEditorConfig: CompareConfigViewEditorConfigType
     draftChartVersion?: string
     selectedChartVersion?: string
+    /**
+     * @default ${compareFromSelectedOptionValue}-"draft-editor-key"
+     */
+    editorKey?: string
     className?: string
     /**
      * @default 'Data'

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

@@ -41,7 +41,6 @@ import {
     Button,
     ButtonVariantType,
     ComponentSizeType,
-    MODES,
     ConfirmationModal,
     ConfirmationModalVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -681,20 +680,23 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
 
         const shebangHtml = this.state.configMap === SwitchItemValues.Configuration ? presetConfig : null
 
+        const decorationWidth = this.state.sso !== OIDCType ? 50 : 25
         return (
-            <CodeEditor.Container>
+            <div className="br-4 dc__border w-100 dc__overflow-hidden">
                 <CodeEditor
                     value={codeEditorBody}
-                    mode={MODES.YAML}
+                    mode="yaml"
                     noParsing={this.state.sso === OIDCType}
+                    lineDecorationsWidth={this.state.configMap === SwitchItemValues.Configuration ? decorationWidth : 0}
                     shebang={shebangHtml}
                     readOnly={this.state.configMap !== SwitchItemValues.Configuration}
                     onChange={this.handleConfigChange}
                     onBlur={this.handleOnBlur}
-                    height="auto"
+                    adjustEditorHeightToContent
                 >
                     <CodeEditor.Header>
                         <div className="flex dc__content-space dc__gap-6">
+                            <CodeEditor.ValidationError />
                             <div className="dc__no-shrink">
                                 <Switch
                                     value={this.state.configMap}
@@ -710,7 +712,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                         </div>
                     </CodeEditor.Header>
                 </CodeEditor>
-            </CodeEditor.Container>
+            </div>
         )
     }
 

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

@@ -13,12 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
  .sso-login__wrapper {
     .code-editor__text {
         resize: none;
         line-height: 1.4;
         border: none;
+        padding: 0 35px;
         overflow: hidden;
         color: var(--R500);
         font-size: 14px;

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx

@@ -25,7 +25,6 @@ import {
     ComponentSizeType,
     KeyValueConfig,
     KeyValueTable,
-    MODES,
     noop,
     StyledRadioGroup,
     ToastManager,
@@ -294,15 +293,16 @@ export const ConfigMapSecretData = ({
         })
 
         return (
-            <CodeEditor.Container>
+            <div className="dc__border br-4 dc__overflow-hidden">
                 <CodeEditor
                     key={codeEditorRadio}
                     value={getCodeEditorValue()}
                     // Skip calling onChange if resolvedData exists
                     onChange={!isLocked && !data.isResolvedData ? onChange : noop}
                     onFocus={onFocus}
-                    mode={MODES.YAML}
-                    height="100%"
+                    mode="yaml"
+                    inline
+                    height={350}
                     shebang={sheBangText}
                     readOnly={
                         readOnly || isHashiOrAWS || isLocked || codeEditorRadio === CODE_EDITOR_RADIO_STATE.SAMPLE
@@ -338,7 +338,7 @@ export const ConfigMapSecretData = ({
                     )}
                 </CodeEditor>
                 {!data.external && data.yamlMode && renderYamlInfoText()}
-            </CodeEditor.Container>
+            </div>
         )
     }
 

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx

@@ -195,12 +195,13 @@ export const ConfigMapSecretDryRun = ({
                     areScopeVariablesResolving={areScopeVariablesResolving}
                     fallbackMergeStrategy={DEFAULT_MERGE_STRATEGY}
                 />
-                {renderExternalInfo(
-                    dryRunConfigMapSecretData.externalType,
-                    dryRunConfigMapSecretData.external,
-                    componentType,
-                    'mr-16 ml-16',
-                )}
+                <div className="px-16 pb-16">
+                    {renderExternalInfo(
+                        dryRunConfigMapSecretData.externalType,
+                        dryRunConfigMapSecretData.external,
+                        componentType,
+                    )}
+                </div>
             </>
         )
     }
@@ -231,7 +232,7 @@ export const ConfigMapSecretDryRun = ({
                     />
                 </div>
             </div>
-            {renderLHSContent()}
+            <div className="flex-grow-1 dc__overflow-auto">{renderLHSContent()}</div>
         </div>
     )
 
@@ -251,7 +252,9 @@ export const ConfigMapSecretDryRun = ({
                     reload: reloadConfigMapSecretManifest,
                 }}
             >
-                <CodeEditor value={configMapSecretManifest?.manifest} height="fitToParent" mode={MODES.YAML} readOnly />
+                <div className="flex-grow-1 dc__overflow-auto">
+                    <CodeEditor value={configMapSecretManifest?.manifest} height="100%" mode={MODES.YAML} readOnly />
+                </div>
             </APIResponseHandler>
         </div>
     )

src/components/CIPipelineN/CustomScript.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useContext, useEffect, useState } from 'react'
-import { ScriptType, CodeEditor, MODES } from '@devtron-labs/devtron-fe-common-lib'
+import { ScriptType, CodeEditor } from '@devtron-labs/devtron-fe-common-lib'
 import { TaskFieldDescription, TaskFieldLabel } from '../ciPipeline/types'
 import TaskFieldTippyDescription from './TaskFieldTippyDescription'
 import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
@@ -44,15 +44,16 @@ const CustomScript = ({ handleScriptChange }: CustomScriptType) => {
                         contentDescription={TaskFieldDescription.SCRIPT}
                     />
                 )}
-                <CodeEditor.Container>
+                <div className="script-container no-padding-script-container">
                     <CodeEditor
-                        mode={MODES.SHELL}
+                        mode="shell"
                         noParsing
                         onChange={(value) => handleScriptChange({ target: { value } })}
+                        inline
                         height={300}
                         value={editorValue}
                     />
-                </CodeEditor.Container>
+                </div>
             </div>
 
             {formDataErrorObj[activeStageName].steps[selectedTaskIndex].inlineStepDetail?.script &&

src/components/ClusterNodes/ClusterManifest.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import YAML from 'yaml'
-import { VisibleModal2, YAMLStringify, CodeEditor, AppThemeType } from '@devtron-labs/devtron-fe-common-lib'
+import { VisibleModal2, YAMLStringify, CodeEditor, CodeEditorThemesKeys } 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'
@@ -138,44 +138,32 @@ export default function ClusterManifest({
         }
         return (
             <div className="h-100 flexbox-col">
-                <CodeEditor
-                    theme={AppThemeType.dark}
-                    height="100%"
-                    mode={MODES.YAML}
-                    noParsing
-                    readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
-                    diffView={manifestMode === EditModeType.REVIEW}
-                    {...(manifestMode === EditModeType.REVIEW
-                        ? {
-                              diffView: true,
-                              originalValue: defaultManifest,
-                              modifiedValue: manifestValue,
-                              onModifiedValueChange: setManifest,
-                          }
-                        : {
-                              diffView: false,
-                              value: manifestValue,
-                              onChange: setManifest,
-                          })}
-                >
-                    {manifestMode === EditModeType.REVIEW && (
-                        <CodeEditor.Header
-                            hideDefaultSplitHeader
-                            className="dc__grid-half py-4 text__white vertical-divider"
-                        >
-                            <div className="flex dc__content-space px-12">
-                                <span>Pod manifest</span>
-                                <span className="flex" data-testid="close-to-edit-manifest" onClick={switchToEditMode}>
-                                    <Close className="icon-dim-16 cursor icon-fill__white" />
-                                </span>
-                            </div>
-                            <div className="flex left px-12">
-                                <Pencil className="icon-dim-16 mr-10 icon-stroke__white" />
-                                <span>Manifest (Editing)</span>
-                            </div>
-                        </CodeEditor.Header>
-                    )}
-                </CodeEditor>
+                {manifestMode === EditModeType.REVIEW && (
+                    <div className="cluster-manifest-header pt-4 pb-4 text__white flex">
+                        <div className="pl-12 flex dc__content-space">
+                            Pod manifest
+                            <span className="flex" data-testid="close-to-edit-manifest" onClick={switchToEditMode}>
+                                <Close className="icon-dim-16 cursor icon-fill__white" />
+                            </span>
+                        </div>
+                        <div className="pl-12 flex left">
+                            <Pencil className="icon-dim-16 mr-10 icon-stroke__white" /> Manifest (Editing)
+                        </div>
+                    </div>
+                )}
+                <div className="pt-8 pb-8 flex-1 dc__overflow-hidden">
+                    <CodeEditor
+                        defaultValue={defaultManifest}
+                        theme={CodeEditorThemesKeys.vsDarkDT}
+                        height="100%"
+                        value={manifestValue}
+                        mode={MODES.YAML}
+                        noParsing
+                        onChange={setManifest}
+                        readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
+                        diffView={manifestMode === EditModeType.REVIEW}
+                    />
+                </div>
             </div>
         )
     }