Merge branch 'main' of https://github.com/devtron-labs/dashboard into feat/replace-toggle

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.14.2-pre-2",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.0",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/common/Banner/Banner.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
     AnimatePresence,
@@ -83,36 +83,21 @@ export const Banner = () => {
     const [showAnnouncementBanner, setShowAnnouncementBanner] = useState(
         ANNOUNCEMENT_CONFIG.message ? shouldShowAnnouncementBanner() : false,
     )
-    const hasShownOnlineBanner = useRef(false)
     const onlineTimer = useRef<ReturnType<typeof setTimeout>>(null)
 
-    const onOnline = useCallback(() => {
-        // Only show the online banner if we haven't shown it since the last offline state
-        if (!hasShownOnlineBanner.current) {
-            setShowOnlineBanner(true)
-            hasShownOnlineBanner.current = true
-
-            // Clear any existing timer before setting a new one
-            if (onlineTimer.current) {
-                clearTimeout(onlineTimer.current)
-            }
-
-            onlineTimer.current = setTimeout(() => setShowOnlineBanner(false), ONLINE_BANNER_TIMEOUT)
-        }
-    }, [])
-
-    const onOffline = () => {
-        hasShownOnlineBanner.current = false
+    const onOnline = () => {
+        clearTimeout(onlineTimer.current)
+        setShowOnlineBanner(true)
+        onlineTimer.current = setTimeout(() => setShowOnlineBanner(false), ONLINE_BANNER_TIMEOUT)
     }
 
-    const isOnline = useOnline({ onOnline, onOffline })
+    const isOnline = useOnline({ onOnline })
 
     useEffect(
         () => () => {
             if (onlineTimer.current) {
                 clearTimeout(onlineTimer.current)
             }
-            hasShownOnlineBanner.current = false
         },
         [],
     )

src/components/common/Description/GenericDescription.tsx

@@ -346,7 +346,7 @@ export default function GenericDescription({
             >
                 {isEditDescriptionView ? (
                     <div className="min-w-500 bg__primary br-4 dc__border-top dc__border-left dc__border-right w-100 dc__border-bottom">
-                        <div className="py-8 px-16 dc__top-radius-4 flex dc__gap-8 bg__secondary dc__border-bottom fs-13">
+                        <div className="py-8 px-16 dc__top-radius-4 flex dc__content-space dc__gap-8 bg__secondary dc__border-bottom fs-13">
                             <div className="fw-6 lh-20 cn-9">Readme</div>
                             {descriptionUpdatedBy && descriptionUpdatedOn && (
                                 <Tooltip content={`Last updated by ${descriptionUpdatedBy} on ${descriptionUpdatedOn}`}>

src/components/common/hooks/useOnline/useOnline.ts

@@ -1,55 +1,62 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+import { getIsRequestAborted, noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
 
 import { getInternetConnectivity } from '@Services/service'
 
 import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
 
-export const useOnline = ({ onOnline = noop, onOffline = noop }: { onOnline?: () => void; onOffline?: () => void }) => {
+export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     const [online, setOnline] = useState(structuredClone(navigator.onLine))
     const abortControllerRef = useRef<AbortController>(new AbortController())
     const timeoutRef = useRef<NodeJS.Timeout>(null)
     const { isAirgapped } = useMainContext()
 
+    const handleClearTimeout = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current)
+        }
+        abortControllerRef.current.abort()
+    }
+
     const checkConnectivity = async () => {
         if (isAirgapped) return
-        // Cancel any pending request
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort()
-        }
 
+        handleClearTimeout()
         const controller = new AbortController()
         abortControllerRef.current = controller
 
         try {
             await getInternetConnectivity(abortControllerRef.current)
-            setOnline(true)
-            if (online) {
-                onOnline()
-            }
-        } catch {
-            setOnline(false)
-        } finally {
+            setOnline((prev) => {
+                if (!prev) {
+                    onOnline()
+                }
+                return true
+            })
             timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+        } catch (error) {
+            setOnline(false)
+            if (!getIsRequestAborted(error)) {
+                timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+            }
         }
     }
     const handleOffline = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current)
-        }
-        abortControllerRef.current.abort()
+        handleClearTimeout()
         setOnline(false)
-        if (onOffline) {
-            onOffline()
-        }
     }
 
     const handleOnline = async () => {
         // Verify connectivity when browser reports online
         await checkConnectivity()
     }
 
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        handleOnline()
+    }, [])
+
     useEffect(() => {
         if (isAirgapped) return null
         window.addEventListener('online', handleOnline)

src/components/common/navigation/NavigationRoutes.tsx

@@ -154,7 +154,11 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
     const [licenseInfoDialogType, setLicenseInfoDialogType] = useState<LicenseInfoDialogType>(null)
     const [intelligenceConfig, setIntelligenceConfig] = useState<IntelligenceConfig>(null)
 
-    const [sidePanelConfig, setSidePanelConfig] = useState<SidePanelConfig>({ open: false, docLink: null, reinitialize: false })
+    const [sidePanelConfig, setSidePanelConfig] = useState<SidePanelConfig>({
+        open: false,
+        docLink: null,
+        reinitialize: false,
+    })
     const asideWidth = useMotionValue(0)
 
     const {
@@ -534,7 +538,7 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                 {serverMode && (
                     <>
                         <div
-                            className={`main flexbox-col bg__primary ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} mt-8 mb-8 ml-8 br-6 dc__overflow-hidden`}
+                            className={`main flexbox-col bg__primary ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} br-6 dc__overflow-hidden mt-8 mb-8 ml-8 ${!sidePanelConfig.open ? 'mr-8' : ''}`}
                             ref={navRouteRef}
                         >
                             <Banner />

src/services/service.ts

@@ -559,7 +559,15 @@ export const getTemplateOptions = (appId: number, envId: number): Promise<Respon
     get(getUrlWithSearchParams(Routes.DEPLOYMENT_OPTIONS, { appId, envId }))
 
 export const getInternetConnectivity = (controller: AbortController): Promise<any> => {
+    const timeoutId = setTimeout(() => {
+        controller.abort()
+    }, 10000)
+
     return fetch(`${window._env_?.CENTRAL_API_ENDPOINT ?? 'https://api.devtron.ai'}/${Routes.HEALTH}`, {
         signal: controller.signal,
-    }).then((res) => res.json())
+    })
+        .then((res) => res.json())
+        .finally(() => {
+            clearTimeout(timeoutId)
+        })
 }

yarn.lock

@@ -1124,10 +1124,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.14.2-pre-2":
-  version "1.14.2-pre-2"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.14.2-pre-2.tgz#2637f88dd08df753eff175aace6977529f0cb5a7"
-  integrity sha512-drUHHzbjfJJLL1J5Z92EKQ7B2yVN7JTbQirWTsZ3hwSRzCy+Vf7eZqlZEQjWtVtCP+KJY8OignSW6lOdkA7X/A==
+"@devtron-labs/devtron-fe-common-lib@1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.0.tgz#a0895775e32cf29414f0bcea77c3d4b2de00a362"
+  integrity sha512-HimvKRILKRKKpNyDwAre+T3a8YFTJXrppm8FZtCJ2JDpvpjcCYtG/Ny+WsUAm89P/6OVQKC9baUt0HEIcGeAMQ==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"