refactor: add abort controller support to getAppDetail and improve error handling in EAAppDetail component

Author: AbhishekA1509

src/components/external-apps/ExternalAppService.ts

@@ -14,7 +14,16 @@
  * limitations under the License.
  */
 
-import { get, put, trash, ResponseType, AppType, getUrlWithSearchParams, getAPIOptionsWithTriggerTimeout } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    get,
+    put,
+    trash,
+    ResponseType,
+    AppType,
+    getUrlWithSearchParams,
+    getAPIOptionsWithTriggerTimeout,
+    APIOptions,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../config'
 import { HelmApp, AppEnvironmentDetail } from '../app/list-new/AppListType'
 import { ResourceTree } from '../v2/appDetails/appDetails.type'
@@ -132,9 +141,12 @@ export const getReleaseInfo = (appId: string): Promise<ReleaseInfoResponse> => {
     return get(url)
 }
 
-export const getAppDetail = (appId: string): Promise<HelmAppDetailResponse> => {
+export const getAppDetail = async (
+    appId: string,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+): Promise<HelmAppDetailResponse> => {
     const url = `${Routes.HELM_RELEASE_APP_DETAIL_API}?appId=${appId}`
-    return get(url)
+    return get(url, { abortControllerRef })
 }
 
 export const getArgoAppDetail = (appName: string, clusterId: string, namespace: string) => {

src/components/v2/appDetails/ea/EAAppDetail.component.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 moment from 'moment'
 import { sortOptionsByValue } from '../../../common'
@@ -49,13 +50,17 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
     })
     const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(false)
 
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+
     let initTimer = null
     let isAPICallInProgress = false
 
     // component load
     useEffect(() => {
         _init()
         return (): void => {
+            abortControllerRef.current.abort()
+
             if (initTimer) {
                 clearTimeout(initTimer)
             }
@@ -120,7 +125,7 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
     const _getAndSetAppDetail = () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
-        getAppDetail(appId)
+        getAppDetail(appId, abortControllerRef)
             .then((appDetailResponse: HelmAppDetailResponse) => {
                 IndexStore.publishAppDetails(
                     _convertToGenericAppDetailModel(appDetailResponse.result),
@@ -159,8 +164,11 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
                 setErrorResponseCode(undefined)
             })
             .catch((errors: ServerErrors) => {
-                showError(errors)
-                setErrorResponseCode(errors.code)
+                if (!getIsRequestAborted(errors)) {
+                    showError(errors)
+                    setErrorResponseCode(errors.code)
+                }
+
                 setIsLoading(false)
                 isAPICallInProgress = false
             })