Merge pull request #561 from devtron-labs/fix/codemirror-1

fix: CodeEditor - scss + yamlLint fixes

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.6.11",
+    "version": "1.6.12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -43,7 +43,7 @@ export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEdit
 
 export const Warning = ({ className, text, children }: CodeEditorStatusBarProps) => (
     <div
-        className={`code-editor__warning fs-12 fw-4 lh-16 cn-9 py-8 px-16 bcy-1 bw-1 ey-2 dc__height-auto ${className || ''}`}
+        className={`code-editor__warning fs-12 fw-4 lh-16 cn-9 py-8 px-16 bcy-1 dc__border-bottom-y2 dc__height-auto ${className || ''}`}
     >
         <ICWarningY5 className="code-editor__status-info-icon" />
         {text}
@@ -52,7 +52,7 @@ export const Warning = ({ className, text, children }: CodeEditorStatusBarProps)
 )
 
 export const ErrorBar = ({ className, text, children }: CodeEditorStatusBarProps) => (
-    <div className={`code-editor__error fs-12 fw-4 lh-16 py-8 px-16 dc__border-bottom bco-1 co-5 ${className || ''}`}>
+    <div className={`code-editor__error fs-12 fw-4 lh-16 py-8 px-16 bco-1 co-5 dc__border-bottom ${className || ''}`}>
         <ErrorIcon className="code-editor__status-info-icon" />
         {text}
         {children}
@@ -61,7 +61,7 @@ export const ErrorBar = ({ className, text, children }: CodeEditorStatusBarProps
 
 export const Information = ({ className, children, text }: CodeEditorStatusBarProps) => (
     <div
-        className={`code-editor__information fs-12 fw-4 lh-16 cn-9 dc__height-auto py-8 px-16 dc__border-bottom bcb-1 ${className || ''}`}
+        className={`code-editor__information fs-12 fw-4 lh-16 cn-9 py-8 px-16 bcb-1 dc__border-bottom dc__height-auto ${className || ''}`}
     >
         <Info className="code-editor__status-info-icon" />
         {text}

src/Common/CodeEditor/CodeEditor.components.tsx

@@ -8,34 +8,44 @@ export const yamlParseLinter =
         const diagnostics: Diagnostic[] = []
         const text = view.state.doc.toString()
 
-        // Parse YAML
-        const documents = YAML.parseAllDocuments(text)
+        try {
+            // Parse YAML
+            const documents = YAML.parseAllDocuments(text)
 
-        // Handle YAML parse errors
-        documents.forEach(({ errors }) => {
-            errors.forEach((err) => {
-                if (err instanceof YAMLParseError) {
-                    const { linePos = [], message } = err
-                    const { from } = view.state.doc.line(linePos[0]?.line || 0)
+            // Handle YAML parse errors
+            documents.forEach(({ errors }) => {
+                errors.forEach((err) => {
+                    if (err instanceof YAMLParseError) {
+                        const { linePos = [], message } = err
+                        const { from } = view.state.doc.line(linePos[0]?.line || 0)
 
-                    diagnostics.push({
-                        from,
-                        to: from + (linePos[0]?.col || 0),
-                        message: message.replace(/\n+/g, '\n'),
-                        severity: 'error',
-                        source: err.name,
-                    })
-                } else {
-                    diagnostics.push({
-                        from: 0,
-                        to: text.length,
-                        message: err instanceof Error ? err.message : 'Unknown error',
-                        severity: 'error',
-                        source: err.name,
-                    })
-                }
+                        diagnostics.push({
+                            from,
+                            to: Math.min(from + (linePos[0]?.col || 0), text.length),
+                            message: message.replace(/\n+/g, '\n'),
+                            severity: 'error',
+                            source: err.name,
+                        })
+                    } else {
+                        diagnostics.push({
+                            from: 0,
+                            to: text.length,
+                            message: err instanceof Error ? err.message : 'Unknown error',
+                            severity: 'error',
+                            source: err.name,
+                        })
+                    }
+                })
             })
-        })
+        } catch (err) {
+            diagnostics.push({
+                from: 0,
+                to: text.length,
+                message: err instanceof Error ? err.message : 'Yaml lint failed',
+                severity: 'error',
+                source: err.name,
+            })
+        }
 
         return diagnostics
     }

src/Common/CodeEditor/Extensions/yamlParseLinter.ts

@@ -50,7 +50,7 @@ const ConfigMapSecretReadyOnly = ({
         <div
             className={
                 containerClassName ||
-                `bg__primary flex-grow-1 flexbox-col dc__gap-12 dc__overflow-auto ${!hideCodeEditor ? 'p-16' : ''}`
+                `bg__primary flexbox-col dc__gap-12 dc__overflow-auto ${!hideCodeEditor ? 'p-16' : ''}`
             }
         >
             {hasHashiOrAWS(configMapSecretData?.externalType) && renderHashiOrAwsDeprecatedInfo()}