Merge branch 'develop' into feat/onboard-argo-apps

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.2-beta-3",
+    "version": "1.8.5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -103,6 +103,8 @@
         "@codemirror/legacy-modes": "6.4.2",
         "@codemirror/lint": "6.8.4",
         "@codemirror/search": "6.5.8",
+        "@lezer/highlight": "1.2.1",
+        "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
         "@uiw/codemirror-theme-github": "^4.23.7",
@@ -118,11 +120,11 @@
         "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
+        "react-draggable": "^4.4.5",
         "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
-        "tslib": "2.7.0",
-        "react-draggable": "^4.4.5"
+        "tslib": "2.7.0"
     },
     "overrides": {
         "cross-spawn": "^7.0.5",

package.json

@@ -355,7 +355,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                     <CodeEditorPlaceholder customLoader={customLoader} />
                 ) : (
                     <>
-                        {shebang && <div className="code-editor__shebang">{shebang}</div>}
+                        {shebang && <div className="code-editor-shebang">{shebang}</div>}
                         {state.diffMode ? (
                             <MonacoDiffEditor
                                 original={state.defaultCode}
@@ -392,11 +392,18 @@ const Header: React.FC<CodeEditorHeaderInterface> & CodeEditorHeaderComposition
     className,
     hideDefaultSplitHeader,
 }) => {
-    const { defaultValue } = useCodeEditorContext()
+    const { defaultValue, state } = useCodeEditorContext()
     return (
-        <div className={className || 'code-editor__header flex right'}>
-            {children}
-            {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
+        <div className="flexbox w-100 dc__border-bottom ">
+            <div
+                data-code-editor-header
+                className={`code-editor__header flex-grow-1 bg__secondary ${className || 'px-16 pt-6 pb-5'} ${state.diffMode ? 'dc__grid-half vertical-divider' : ''}`}
+
+            >
+                {children}
+                {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
+            </div>
+            {state.diffMode ? <div className="bg__secondary px-15 dc__align-self-stretch" /> : null}
         </div>
     )
 }
@@ -518,6 +525,24 @@ const CodeEditorPlaceholder = ({ className = '', style = {}, customLoader }): JS
     )
 }
 
+const Container = ({
+    children,
+    flexExpand,
+    overflowHidden,
+}: {
+    children: React.ReactNode
+    flexExpand?: boolean
+    overflowHidden?: boolean
+}) => (
+    <div
+        data-code-editor-container
+        className={`code-editor__container w-100 dc__border br-4
+        ${flexExpand ? 'flex-grow-1 flexbox-col' : ''} ${overflowHidden ? 'dc__overflow-hidden' : ''}`}
+    >
+        {children}
+    </div>
+)
+
 CodeEditor.LanguageChanger = LanguageChanger
 CodeEditor.ThemeChanger = ThemeChanger
 CodeEditor.ValidationError = ValidationError
@@ -526,5 +551,6 @@ CodeEditor.Header = Header
 CodeEditor.Warning = Warning
 CodeEditor.ErrorBar = ErrorBar
 CodeEditor.Information = Information
+CodeEditor.Container = Container
 
 export default CodeEditor