refactor: implement abortPreviousRequests in multiple components to enhance API call management and error handling

Author: AbhishekA1509

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

@@ -18,6 +18,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import {
+    abortPreviousRequests,
     AppType,
     DeploymentAppTypes,
     ERROR_STATUS_CODE,
@@ -73,7 +74,11 @@ const ExternalFluxAppDetails = () => {
         new Promise<void>((resolve) => {
             setIsReloadResourceTreeInProgress(true)
 
-            getExternalFluxCDAppDetails({ clusterId, namespace, appName, isKustomization, abortControllerRef })
+            abortPreviousRequests(
+                () =>
+                    getExternalFluxCDAppDetails({ clusterId, namespace, appName, isKustomization, abortControllerRef }),
+                abortControllerRef,
+            )
                 .then(handleUpdateIndexStoreWithDetails)
                 .catch((error) => {
                     if (!getIsRequestAborted(error)) {

src/components/externalArgoApps/ExternalArgoAppDetail.tsx

@@ -23,6 +23,7 @@ import {
     ServerErrors,
     DeploymentAppTypes,
     getIsRequestAborted,
+    abortPreviousRequests,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { getArgoAppDetail } from '../external-apps/ExternalAppService'
 import { checkIfToRefetchData, deleteRefetchDataFromUrl } from '../util/URLUtil'
@@ -77,7 +78,11 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     const _getAndSetAppDetail = async () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
-        getArgoAppDetail({ appName, clusterId, namespace, abortControllerRef })
+
+        abortPreviousRequests(
+            () => getArgoAppDetail({ appName, clusterId, namespace, abortControllerRef }),
+            abortControllerRef,
+        )
             .then((appDetailResponse) => {
                 const genericAppDetail: AppDetails = {
                     ...appDetailResponse.result,

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

@@ -23,6 +23,7 @@ import {
     ServerErrors,
     DeploymentAppTypes,
     getIsRequestAborted,
+    abortPreviousRequests,
 } from '@devtron-labs/devtron-fe-common-lib'
 import moment from 'moment'
 import { sortOptionsByValue } from '../../../common'
@@ -125,7 +126,8 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
     const _getAndSetAppDetail = () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
-        getAppDetail(appId, abortControllerRef)
+
+        abortPreviousRequests(() => getAppDetail(appId, abortControllerRef), abortControllerRef)
             .then((appDetailResponse: HelmAppDetailResponse) => {
                 IndexStore.publishAppDetails(
                     _convertToGenericAppDetailModel(appDetailResponse.result),

src/components/v2/appDetails/sourceInfo/scaleWorkloads/ScaleWorkloadsModal.component.tsx

@@ -24,6 +24,7 @@ import {
     DeploymentAppTypes,
     TabGroup,
     getIsRequestAborted,
+    abortPreviousRequests,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Info } from '../../../../../assets/icons/ic-info-filled.svg'
 import { ReactComponent as Close } from '../../../../../assets/icons/ic-close.svg'
@@ -126,11 +127,16 @@ export default function ScaleWorkloadsModal({ appId, onClose, history }: ScaleWo
     const _getAndSetAppDetail = async () => {
         try {
             if (appDetails?.deploymentAppType === DeploymentAppTypes.GITOPS && isHelmApp) {
-                const response = await getInstalledChartDetailWithResourceTree(
-                    +appDetails.installedAppId,
-                    +appDetails.environmentId,
+                const response = await abortPreviousRequests(
+                    () =>
+                        getInstalledChartDetailWithResourceTree(
+                            +appDetails.installedAppId,
+                            +appDetails.environmentId,
+                            abortControllerRef,
+                        ),
                     abortControllerRef,
                 )
+
                 IndexStore.publishAppDetails(response.result, AppType.DEVTRON_HELM_CHART)
             }
         } catch (e) {
@@ -398,7 +404,7 @@ export default function ScaleWorkloadsModal({ appId, onClose, history }: ScaleWo
                                         </div>
                                     </Checkbox>
                                 </div>
-                                <div  className="h-192 dc__overflow-auto">
+                                <div className="h-192 dc__overflow-auto">
                                     {Array.from(_workloadsList.values()).map((item) => (
                                         <div key={`${item.kind}/${item.name}`} className="check-single-workload">
                                             <Checkbox

src/components/v2/index.tsx

@@ -18,6 +18,7 @@ import { Suspense, useEffect, useRef, useState } from 'react'
 import { Redirect, Route, Switch, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import {
+    abortPreviousRequests,
     DetailsProgressing,
     ErrorScreenManager,
     getIsRequestAborted,
@@ -108,14 +109,14 @@ const RouterComponent = ({ envType }) => {
     useEffect(() => {
         if (checkIfToRefetchData(location)) {
             setTimeout(() => {
-                _getAndSetAppDetail(true)
+                abortPreviousRequests(() => _getAndSetAppDetail(true), abortControllerRef)
                 deleteRefetchDataFromUrl(history, location)
             }, 5000)
         }
     }, [location.search])
 
     const _init = (fetchExternalLinks?: boolean) => {
-        _getAndSetAppDetail(fetchExternalLinks)
+        abortPreviousRequests(() => _getAndSetAppDetail(fetchExternalLinks), abortControllerRef)
         initTimer = setTimeout(() => {
             _init()
         }, window._env_.HELM_APP_DETAILS_POLLING_INTERVAL || 30000)
@@ -183,7 +184,10 @@ const RouterComponent = ({ envType }) => {
     const handleReloadResourceTree = () => {
         if (envType === EnvType.CHART) {
             setIsReloadResourceTreeInProgress(true)
-            getInstalledChartResourceTree(+params.appId, +params.envId, abortControllerRef)
+            abortPreviousRequests(
+                () => getInstalledChartResourceTree(+params.appId, +params.envId, abortControllerRef),
+                abortControllerRef,
+            )
                 .then(handlePublishAppDetails)
                 .catch((err) => {
                     if (!getIsRequestAborted(err)) {