Merge pull request #2737 from devtron-labs/fix/clear-app-refetch-timer

fix: clear timeout for app details in case refetchData query is present

Author: AbhishekA1509

src/components/externalArgoApps/ExternalArgoAppDetail.tsx

@@ -59,12 +59,20 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     }, [])
 
     useEffect(() => {
+        let timer: ReturnType<typeof setTimeout>
+
         if (checkIfToRefetchData(location)) {
-            setTimeout(() => {
+            timer = setTimeout(() => {
                 _getAndSetAppDetail()
                 deleteRefetchDataFromUrl(history, location)
             }, 2000)
         }
+
+        return () => {
+            if (timer) {
+                clearTimeout(timer)
+            }
+        }
     }, [location.search])
 
     const _init = () => {

src/components/v2/appDetails/ea/EAAppDetail.component.tsx

@@ -71,12 +71,20 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
     }, [])
 
     useEffect(() => {
+        let timer: ReturnType<typeof setTimeout>
+
         if (checkIfToRefetchData(location)) {
-            setTimeout(() => {
+            timer = setTimeout(() => {
                 _getAndSetAppDetail()
                 deleteRefetchDataFromUrl(history, location)
             }, 2000)
         }
+
+        return () => {
+            if (timer) {
+                clearTimeout(timer)
+            }
+        }
     }, [location.search])
 
     const _init = () => {

src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx

@@ -337,12 +337,14 @@ const ChartDeploymentHistory = ({
                                         gridColumnGap: '12px',
                                     }}
                                 >
-                                    <AppStatus
-                                        status={getDeploymentStatus(deployment)}
-                                        hideMessage
-                                        iconSize={24}
-                                        hideIconTooltip
-                                    />
+                                    <div className="flex icon-dim-24 dc__no-shrink">
+                                        <AppStatus
+                                            status={getDeploymentStatus(deployment)}
+                                            hideMessage
+                                            iconSize={24}
+                                            hideIconTooltip
+                                        />
+                                    </div>
                                     <div className="flex column left dc__ellipsis-right">
                                         <div className="cn-9 fs-14" data-testid="chart-deployment-time">
                                             {moment(new Date(deployment.deployedAt.seconds * 1000)).format(

src/components/v2/index.tsx

@@ -101,12 +101,20 @@ const RouterComponent = () => {
     )
 
     useEffect(() => {
+        let timer: ReturnType<typeof setTimeout>
+
         if (checkIfToRefetchData(location)) {
-            setTimeout(() => {
+            timer = setTimeout(() => {
                 abortPreviousRequests(() => _getAndSetAppDetail(true), abortControllerRef)
                 deleteRefetchDataFromUrl(history, location)
             }, 5000)
         }
+
+        return () => {
+            if (timer) {
+                clearTimeout(timer)
+            }
+        }
     }, [location.search])
 
     const _init = (fetchExternalLinks?: boolean) => {