Merge pull request #2478 from devtron-labs/chore/main-to-dev-sync

chore: sync develop with main

Author: eshankvaish

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.1",
         "@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 &&