Merge branch 'develop' into feat/build-time-breakdown

Author: AbhishekA1509

.eslintignore

@@ -20,11 +20,9 @@ src/Common/CustomTagSelector/ValidationRules.ts
 src/Common/DebouncedSearch/DebouncedSearch.tsx
 src/Common/DebouncedSearch/Utils.ts
 src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
-src/Common/DeleteComponentModal/DeleteComponent.tsx
 src/Common/DevtronProgressing/DevtronProgressing.tsx
 src/Common/Dialogs/ConfirmationDialog.tsx
 src/Common/Dialogs/DialogForm.tsx
-src/Common/Dialogs/ForceDeleteDialog.tsx
 src/Common/DraggableWrapper/DraggableButton.tsx
 src/Common/DraggableWrapper/DraggableWrapper.tsx
 src/Common/Drawer/Drawer.tsx

.github/CODEOWNERS

@@ -1 +1 @@
-* vivek@devtron.ai @vikramdevtron
+* @vivek-devtron @vikramdevtron

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.6.2-beta-1",
+    "version": "1.6.11",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -70,7 +70,7 @@
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
         "typescript": "5.5.4",
-        "vite": "5.4.11",
+        "vite": "5.4.14",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-image-optimizer": "^1.1.8",
         "vite-plugin-lib-inject-css": "2.1.1",
@@ -127,7 +127,7 @@
             "react-dom": "^17.0.2"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.11"
+            "vite": "5.4.14"
         },
         "react-virtualized-sticky-tree": {
             "react": "^17.0.2",

package.json

@@ -9,10 +9,10 @@ export const getCodeEditorTheme = (isDark: boolean) => {
             fontSize: '14px',
             fontFamily: 'Inconsolata, monospace',
             background: 'var(--bg-code-editor-base)',
-            foreground: isDark ? 'var(--white)' : 'var(--black)',
-            caret: isDark ? 'var(--white)' : 'var(--black)',
+            foreground: 'var(--N900)',
+            caret: 'var(--N900)',
             gutterBackground: 'var(--bg-code-editor-base-gutter)',
-            gutterForeground: isDark ? 'var(--white)' : 'var(--black)',
+            gutterForeground: 'var(--N900)',
             gutterBorder: 'transparent',
             lineHighlight: 'var(--active-line)',
         },

src/Common/CodeEditor/CodeEditor.theme.ts

@@ -175,7 +175,6 @@ const CodeEditor = <DiffView extends boolean = false>({
         defaultKeymap: false,
         searchKeymap: false,
         foldGutter: false,
-        // TODO: need to remove this after getting proper colors from design
         drawSelection: false,
         highlightActiveLineGutter: false,
         tabSize,

src/Common/CodeEditor/CodeEditor.tsx

@@ -31,10 +31,19 @@ export const CodeEditorRenderer = ({
 }: CodeEditorRendererProps) => {
     // STATES
     const [isFocused, setIsFocused] = useState(false)
+    const [gutterWidth, setGutterWidth] = useState(0)
 
     // REFS
     const codeMirrorRef = useRef<ReactCodeMirrorRef>()
 
+    // This handling will be removed once shebang is shown inside the codeEditor rather than extra div
+    const updateGutterWith = () => {
+        const gutters = document.querySelector('.cm-gutters')
+        if (gutters) {
+            setGutterWidth(gutters.getBoundingClientRect().width)
+        }
+    }
+
     useEffect(() => {
         // Added timeout to ensure the autofocus code is executed post the re-renders
         setTimeout(() => {
@@ -46,17 +55,23 @@ export const CodeEditorRenderer = ({
 
     // STOPPING OVERSCROLL BROWSER BACK/FORWARD BEHAVIOR WHEN CODE EDITOR IS FOCUSED
     useEffect(() => {
-        const html = document.querySelector('html')
-        if (html) {
+        const body = document.querySelector('body')
+        if (body) {
             const { scrollWidth, clientWidth } = codeMirrorRef.current?.view?.scrollDOM ?? {}
             if (isFocused && scrollWidth > clientWidth) {
-                html.classList.add('dc__overscroll-none')
+                body.classList.add('dc__overscroll-none')
             } else {
-                html.classList.remove('dc__overscroll-none')
+                body.classList.remove('dc__overscroll-none')
             }
         }
+
+        updateGutterWith()
     }, [state.lhsCode, state.code, isFocused])
 
+    const onCreateEditor = () => {
+        updateGutterWith()
+    }
+
     const handleOnFocus: FocusEventHandler<HTMLDivElement> = (e) => {
         setIsFocused(true)
         onFocus?.(e)
@@ -105,12 +120,15 @@ export const CodeEditorRenderer = ({
     ) : (
         <div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>
             {shebang && (
-                <div
-                    className={`flexbox text__white code-editor__shebang ${isDarkTheme ? 'code-editor__shebang__dark' : 'code-editor__shebang__light'}`}
+                <p
+                    className={`m-0 flexbox cn-9 code-editor__shebang ${isDarkTheme ? 'code-editor__shebang__dark' : 'code-editor__shebang__light'}`}
                 >
-                    <div className="code-editor__shebang__gutter dc__align-self-stretch" />
+                    <span
+                        className="code-editor__shebang__gutter dc__align-self-stretch"
+                        style={{ flex: `0 0 ${gutterWidth}px` }}
+                    />
                     {shebang}
-                </div>
+                </p>
             )}
             <CodeMirror
                 ref={codeMirrorRef}
@@ -122,6 +140,7 @@ export const CodeEditorRenderer = ({
                 readOnly={readOnly}
                 height={codeEditorHeight}
                 minHeight="250px"
+                onCreateEditor={onCreateEditor}
                 onFocus={handleOnFocus}
                 onBlur={handleOnBlur}
                 onChange={handleOnChange}

src/Common/CodeEditor/CodeEditorRenderer.tsx

@@ -432,7 +432,7 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
         findField?.select()
     }
 
-    const update = ({ transactions, changes }: ViewUpdate) => {
+    const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {
         transactions.forEach((tr) => {
             tr.effects.forEach((effect) => {
                 if (effect.is(setSearchQuery)) {
@@ -441,7 +441,7 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
             })
         })
 
-        if (changes) {
+        if (docChanged || state.readOnly !== startState.readOnly) {
             renderFindReplace()
         }
     }

src/Common/CodeEditor/Extensions/findAndReplace.tsx

@@ -24,6 +24,10 @@
     border-left: 1px solid var(--N200);
 }
 
+.cm-scroller {
+    min-height: inherit;
+}
+
 .cm-editor {
     &.cm-focused {
         outline: none;
@@ -271,7 +275,6 @@
         background-color: var(--bg-code-editor-base);
 
         &__gutter {
-            flex: 0 0 52px;
             background-color: var(--bg-code-editor-base-gutter);
         }
     }

src/Common/CodeEditor/codeEditor.scss

@@ -161,7 +161,7 @@ export const getValidationSchema = ({
     validatorSchema,
     schemaURI,
 }: Pick<CodeEditorProps, 'schemaURI' | 'validatorSchema' | 'mode'>): Extension[] => {
-    if (!Object.keys(validatorSchema).length) {
+    if (!Object.keys(validatorSchema ?? {}).length) {
         return []
     }