Merge pull request #651 from devtron-labs/sync-rc-32-main

chore: sync rc with main

Author: RohitRaj011

package-lock.json

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

package.json

@@ -177,29 +177,54 @@ export const CodeEditorRenderer = ({
         updateDiffMinimapValues(diffMinimapRef.current, vu.transactions, 'b')
     })
 
-    // DIFF VIEW INITIALIZATION
     useEffect(() => {
+        // DIFF VIEW INITIALIZATION
         if (!loading && codeMirrorMergeParentRef.current) {
-            setCodeMirrorMergeInstance(
-                new MergeView({
+            codeMirrorMergeInstance?.destroy()
+
+            const codeMirrorMergeView = new MergeView({
+                a: {
+                    doc: lhsValue,
+                    extensions: [...originalViewExtensions, originalUpdateListener],
+                },
+                b: {
+                    doc: value,
+                    extensions: [...modifiedViewExtensions, modifiedUpdateListener],
+                },
+                ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
+                diffConfig: { scanLimit: 5000 },
+                parent: codeMirrorMergeParentRef.current,
+            })
+            setCodeMirrorMergeInstance(codeMirrorMergeView)
+
+            // MINIMAP INITIALIZATION
+            if (codeMirrorMergeView && diffMinimapParentRef.current) {
+                diffMinimapInstance?.destroy()
+                diffMinimapRef.current?.destroy()
+
+                const diffMinimapMergeView = new MergeView({
                     a: {
                         doc: lhsValue,
-                        extensions: [...originalViewExtensions, originalUpdateListener],
+                        extensions: diffMinimapExtensions,
                     },
                     b: {
                         doc: value,
-                        extensions: [...modifiedViewExtensions, modifiedUpdateListener],
+                        extensions: diffMinimapExtensions,
                     },
-                    ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
+                    gutter: false,
                     diffConfig: { scanLimit: 5000 },
-                    parent: codeMirrorMergeParentRef.current,
-                }),
-            )
+                    parent: diffMinimapParentRef.current,
+                })
+
+                diffMinimapRef.current = diffMinimapMergeView
+                setDiffMinimapInstance(diffMinimapMergeView)
+            }
         }
 
         return () => {
-            codeMirrorMergeInstance?.destroy()
             setCodeMirrorMergeInstance(null)
+            setDiffMinimapInstance(null)
+            diffMinimapRef.current = null
         }
     }, [loading, codemirrorMergeKey, diffMode])
 
@@ -216,39 +241,11 @@ export const CodeEditorRenderer = ({
             const modifiedDoc = codeMirrorMergeInstance.b.state.doc.toString()
             if (modifiedDoc !== value) {
                 codeMirrorMergeInstance.b.dispatch({
-                    changes: { from: 0, to: originalDoc.length, insert: value || '' },
+                    changes: { from: 0, to: modifiedDoc.length, insert: value || '' },
                 })
             }
         }
-    }, [lhsValue, value])
-
-    // MINIMAP INITIALIZATION
-    useEffect(() => {
-        if (codeMirrorMergeInstance && diffMinimapParentRef.current) {
-            const diffMinimapMergeView = new MergeView({
-                a: {
-                    doc: lhsValue,
-                    extensions: diffMinimapExtensions,
-                },
-                b: {
-                    doc: value,
-                    extensions: diffMinimapExtensions,
-                },
-                gutter: false,
-                diffConfig: { scanLimit: 5000 },
-                parent: diffMinimapParentRef.current,
-            })
-
-            diffMinimapRef.current = diffMinimapMergeView
-            setDiffMinimapInstance(diffMinimapMergeView)
-        }
-
-        return () => {
-            diffMinimapInstance?.destroy()
-            setDiffMinimapInstance(null)
-            diffMinimapRef.current = null
-        }
-    }, [codeMirrorMergeInstance])
+    }, [lhsValue, value, codeMirrorMergeInstance])
 
     // SCALING FACTOR UPDATER
     useEffect(() => {

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -40,7 +40,7 @@ export const DiffMinimap = ({ view, theme, diffMinimapParentRef, scalingFactor }
 
     useEffect(() => {
         updateOverlay()
-    }, [scalingFactor])
+    }, [view, scalingFactor])
 
     // Sync overlay scrolling with the diff view
     const handleDiffScroll = () => {
@@ -109,7 +109,7 @@ export const DiffMinimap = ({ view, theme, diffMinimapParentRef, scalingFactor }
             document.removeEventListener('mousemove', handleOverlayMouseMove)
             document.removeEventListener('mouseup', handleOverlayMouseUp)
         }
-    }, [isDragging])
+    }, [view, isDragging])
 
     // Clicking on the minimap scrolls the diff viewer
     const handleMinimapClick = (event: React.MouseEvent<HTMLDivElement>) => {

src/Common/CodeMirror/Extensions/DiffMinimap.tsx

@@ -125,7 +125,7 @@
     }
 
     .cm-panels {
-        background-color: var(--bg-code-editor-base);
+        background-color: transparent;
         z-index: 1;
     }
 

src/Common/CodeMirror/codeEditor.scss

@@ -20,6 +20,7 @@ import { getBranchIcon, getWebhookEventsForEventId, SourceTypeMap, Tooltip } fro
 import { GIT_BRANCH_NOT_CONFIGURED, DEFAULT_GIT_BRANCH_VALUE } from './constants'
 import { buildHoverHtmlForWebhook } from './utils'
 import { CIPipelineSourceConfigInterface } from './types'
+import { Icon } from '../Icon'
 
 export const CiPipelineSourceConfig = ({
     sourceType,
@@ -38,9 +39,12 @@ export const CiPipelineSourceConfig = ({
     const [sourceValueBase, setSourceValueBase] = useState('')
     const [sourceValueAdv, setSourceValueAdv] = useState<ReactNode>('')
     const [loading, setLoading] = useState(!!_isWebhook)
+    const [hasError, setHasError] = useState(false)
 
     const updateSourceValue = () => {
         if (_isWebhook) {
+            setLoading(true)
+            setHasError(false)
             const _sourceValueObj = JSON.parse(sourceValue)
             getWebhookEventsForEventId(_sourceValueObj.eventId)
                 .then((_res) => {
@@ -55,8 +59,9 @@ export const CiPipelineSourceConfig = ({
                     )
                     setLoading(false)
                 })
-                .catch((error) => {
-                    throw error
+                .catch(() => {
+                    setLoading(false)
+                    setHasError(true)
                 })
         } else {
             setSourceValueBase(sourceValue)
@@ -89,6 +94,9 @@ export const CiPipelineSourceConfig = ({
         if (!_isWebhook) {
             return
         }
+
+        setLoading(true)
+        setHasError(false)
         const _sourceValueObj = JSON.parse(sourceValue)
         const _eventId = _sourceValueObj.eventId
         const _condition = _sourceValueObj.condition
@@ -100,8 +108,9 @@ export const CiPipelineSourceConfig = ({
                 setSourceValueAdv(buildHoverHtmlForWebhook(_webhookEvent.name, _condition, _webhookEvent.selectors))
                 setLoading(false)
             })
-            .catch((error) => {
-                throw error
+            .catch(() => {
+                setLoading(false)
+                setHasError(true)
             })
     }
 
@@ -117,6 +126,15 @@ export const CiPipelineSourceConfig = ({
         regexTippyContent()
     }, [])
 
+    if (!loading && hasError) {
+        return (
+            <div className="flex left dc__gap-4">
+                <Icon name="ic-error" size={16} color={null} />
+                <span className="dc__truncate fw-5 cr-5">Failed to fetch</span>
+            </div>
+        )
+    }
+
     return (
         <div className={`flex left ${showTooltip ? 'fw-5' : ''}  ${rootClassName}`}>
             {loading && showIcons && <span className="dc__loading-dots">loading</span>}