fix: abortController in external app

Author: AbhishekA1509

src/components/external-apps/ExternalAppService.ts

@@ -149,9 +149,15 @@ export const getAppDetail = async (
     return get(url, { abortControllerRef })
 }
 
-export const getArgoAppDetail = (appName: string, clusterId: string, namespace: string) => {
-    return get(`${Routes.ARGO_APPLICATION}?name=${appName}&clusterId=${clusterId}&namespace=${namespace}`)
-}
+export const getArgoAppDetail = async (
+    appName: string,
+    clusterId: string,
+    namespace: string,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+) =>
+    get(`${Routes.ARGO_APPLICATION}?name=${appName}&clusterId=${clusterId}&namespace=${namespace}`, {
+        abortControllerRef,
+    })
 
 export const deleteApplicationRelease = (appId: string): Promise<UninstallReleaseResponse> => {
     const url = `${Routes.HELM_RELEASE_APP_DELETE_API}?appId=${appId}`

src/components/externalArgoApps/ExternalArgoAppDetail.tsx

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
 import {
     showError,
     Progressing,
     ErrorScreenManager,
     ServerErrors,
     DeploymentAppTypes,
+    getIsRequestAborted,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { getArgoAppDetail } from '../external-apps/ExternalAppService'
 import { checkIfToRefetchData, deleteRefetchDataFromUrl } from '../util/URLUtil'
@@ -40,10 +41,14 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     let initTimer = null
     let isAPICallInProgress = false
 
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+
     // component load
     useEffect(() => {
         _init()
         return (): void => {
+            abortControllerRef.current.abort()
+
             if (initTimer) {
                 clearTimeout(initTimer)
             }
@@ -72,7 +77,7 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     const _getAndSetAppDetail = async () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
-        getArgoAppDetail(appName, clusterId, namespace)
+        getArgoAppDetail(appName, clusterId, namespace, abortControllerRef)
             .then((appDetailResponse) => {
                 const genericAppDetail: AppDetails = {
                     ...appDetailResponse.result,
@@ -82,8 +87,10 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
                 setErrorResponseCode(undefined)
             })
             .catch((errors: ServerErrors) => {
-                showError(errors)
-                setErrorResponseCode(errors.code)
+                if (!getIsRequestAborted(errors)) {
+                    showError(errors)
+                    setErrorResponseCode(errors.code)
+                }
             })
             .finally(() => {
                 setIsLoading(false)