refactor: integrate abort controller into external flux app details and enhance error handling

Author: AbhishekA1509

src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import {
     AppType,
     DeploymentAppTypes,
     ERROR_STATUS_CODE,
     ErrorScreenManager,
+    getIsRequestAborted,
     IndexStore,
     noop,
     ResponseType,
@@ -46,6 +47,15 @@ const ExternalFluxAppDetails = () => {
     const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(true)
     const [appDetailsError, setAppDetailsError] = useState(null)
 
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+
+    useEffect(
+        () => () => {
+            abortControllerRef.current.abort()
+        },
+        [],
+    )
+
     const handleUpdateIndexStoreWithDetails = (response: ResponseType<any>) => {
         const genericAppDetail: AppDetails = {
             ...response.result,
@@ -63,13 +73,15 @@ const ExternalFluxAppDetails = () => {
         new Promise<void>((resolve) => {
             setIsReloadResourceTreeInProgress(true)
 
-            getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization)
+            getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization, abortControllerRef)
                 .then(handleUpdateIndexStoreWithDetails)
                 .catch((error) => {
-                    if (!initialLoading) {
-                        showError(error)
-                    } else {
-                        setAppDetailsError(error)
+                    if (!getIsRequestAborted(error)) {
+                        if (!initialLoading) {
+                            showError(error)
+                        } else {
+                            setAppDetailsError(error)
+                        }
                     }
                 })
                 .finally(() => {

src/Pages/App/Details/ExternalFlux/service.tsx

@@ -14,16 +14,23 @@
  * limitations under the License.
  */
 
-import { get, getUrlWithSearchParams } from '@devtron-labs/devtron-fe-common-lib'
+import { APIOptions, get, getUrlWithSearchParams } from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '../../../../config'
 
-export const getExternalFluxCDAppDetails = (clusterId, namespace, appName, isKustomization) => {
+export const getExternalFluxCDAppDetails = async (
+    clusterId,
+    namespace,
+    appName,
+    isKustomization,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+) => {
     const appId = `${clusterId}|${namespace}|${appName}|${isKustomization}`
     const baseurl = `${Routes.FLUX_APPS}/${Routes.APP}`
     const params = {
         appId,
     }
+
     const url = getUrlWithSearchParams(baseurl, params)
-    return get(url)
+    return get(url, { abortControllerRef })
 }