refactor: update API calls in ExternalFlux and ExternalArgo components to use structured parameters and enhance type safety

Author: AbhishekA1509

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

@@ -73,7 +73,7 @@ const ExternalFluxAppDetails = () => {
         new Promise<void>((resolve) => {
             setIsReloadResourceTreeInProgress(true)
 
-            getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization, abortControllerRef)
+            getExternalFluxCDAppDetails({ clusterId, namespace, appName, isKustomization, abortControllerRef })
                 .then(handleUpdateIndexStoreWithDetails)
                 .catch((error) => {
                     if (!getIsRequestAborted(error)) {

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

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

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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { APIOptions } from '@devtron-labs/devtron-fe-common-lib'
+
 export interface ExternalFluxAppDetailParams {
     clusterId: string
     appName: string
@@ -25,3 +27,9 @@ export enum EXTERNAL_FLUX_APP_STATUS {
     READY = 'Ready',
     NOT_READY = 'Not Ready',
 }
+
+export interface GetExternalFluxCDAppDetailsParamsType
+    extends Pick<ExternalFluxAppDetailParams, 'clusterId' | 'namespace' | 'appName'>,
+        Pick<APIOptions, 'abortControllerRef'> {
+    isKustomization: boolean
+}

src/components/external-apps/ExternalAppService.ts

@@ -28,6 +28,7 @@ import { Routes } from '../../config'
 import { HelmApp, AppEnvironmentDetail } from '../app/list-new/AppListType'
 import { ResourceTree } from '../v2/appDetails/appDetails.type'
 import { getK8sResourcePayloadAppType } from '@Components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util'
+import { GetArgoAppDetailParamsType } from './types'
 
 export interface ReleaseInfoResponse extends ResponseType {
     result?: ReleaseAndInstalledAppInfo
@@ -144,17 +145,14 @@ export const getReleaseInfo = (appId: string): Promise<ReleaseInfoResponse> => {
 export const getAppDetail = async (
     appId: string,
     abortControllerRef?: APIOptions['abortControllerRef'],
-): Promise<HelmAppDetailResponse> => {
-    const url = `${Routes.HELM_RELEASE_APP_DETAIL_API}?appId=${appId}`
-    return get(url, { abortControllerRef })
-}
-
-export const getArgoAppDetail = async (
-    appName: string,
-    clusterId: string,
-    namespace: string,
-    abortControllerRef?: APIOptions['abortControllerRef'],
-) =>
+): Promise<HelmAppDetailResponse> => get(`${Routes.HELM_RELEASE_APP_DETAIL_API}?appId=${appId}`, { abortControllerRef })
+
+export const getArgoAppDetail = async ({
+    appName,
+    clusterId,
+    namespace,
+    abortControllerRef,
+}: GetArgoAppDetailParamsType) =>
     get(`${Routes.ARGO_APPLICATION}?name=${appName}&clusterId=${clusterId}&namespace=${namespace}`, {
         abortControllerRef,
     })

src/components/external-apps/types.ts

@@ -0,0 +1,7 @@
+import { APIOptions } from '@devtron-labs/devtron-fe-common-lib'
+
+export interface GetArgoAppDetailParamsType extends Pick<APIOptions, 'abortControllerRef'> {
+    appName: string
+    clusterId: string
+    namespace: string
+}

src/components/externalArgoApps/ExternalArgoAppDetail.tsx

@@ -77,7 +77,7 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     const _getAndSetAppDetail = async () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
-        getArgoAppDetail(appName, clusterId, namespace, abortControllerRef)
+        getArgoAppDetail({ appName, clusterId, namespace, abortControllerRef })
             .then((appDetailResponse) => {
                 const genericAppDetail: AppDetails = {
                     ...appDetailResponse.result,

src/components/v2/index.tsx

@@ -15,18 +15,22 @@
  */
 
 import { Suspense, useEffect, useRef, useState } from 'react'
-import { useRouteMatch, useParams, Redirect, useLocation, useHistory, Switch, Route } from 'react-router-dom'
+import { Redirect, Route, Switch, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
+
 import {
-    ErrorScreenManager,
     DetailsProgressing,
-    showError,
+    ErrorScreenManager,
     getIsRequestAborted,
+    showError,
 } from '@devtron-labs/devtron-fe-common-lib'
+
 import { URLS } from '../../config'
 import { sortOptionsByValue } from '../common'
-import ValuesComponent from './values/ChartValues.component'
-import AppHeaderComponent from './headers/AppHeader.component'
-import ChartHeaderComponent from './headers/ChartHeader.component'
+import { AppDetailsEmptyState } from '../common/AppDetailsEmptyState'
+import { getExternalLinks } from '../externalLinks/ExternalLinks.service'
+import { ExternalLinkIdentifierType, ExternalLinksAndToolsType } from '../externalLinks/ExternalLinks.type'
+import { sortByUpdatedOn } from '../externalLinks/ExternalLinks.utils'
+import { checkIfToRefetchData, deleteRefetchDataFromUrl } from '../util/URLUtil'
 import {
     getInstalledAppDetail,
     getInstalledChartDetail,
@@ -35,13 +39,11 @@ import {
 import AppDetailsComponent from './appDetails/AppDetails.component'
 import { AppDetails, AppType, EnvType } from './appDetails/appDetails.type'
 import IndexStore from './appDetails/index.store'
-import { checkIfToRefetchData, deleteRefetchDataFromUrl } from '../util/URLUtil'
 import ChartDeploymentHistory from './chartDeploymentHistory/ChartDeploymentHistory.component'
-import { ExternalLinkIdentifierType, ExternalLinksAndToolsType } from '../externalLinks/ExternalLinks.type'
-import { getExternalLinks } from '../externalLinks/ExternalLinks.service'
-import { sortByUpdatedOn } from '../externalLinks/ExternalLinks.utils'
-import { AppDetailsEmptyState } from '../common/AppDetailsEmptyState'
+import AppHeaderComponent from './headers/AppHeader.component'
+import ChartHeaderComponent from './headers/ChartHeader.component'
 import { HelmAppOverview } from './HelmAppOverview/HelmAppOverview'
+import ValuesComponent from './values/ChartValues.component'
 
 let initTimer = null
 
@@ -85,21 +87,23 @@ const RouterComponent = ({ envType }) => {
         }
     }, [params.appId, params.envId])
 
-    useEffect(() => {
-        return () => {
+    useEffect(
+        () => () => {
             abortControllerRef.current.abort()
-        }
-    }, [])
+        },
+        [],
+    )
 
     // clearing the timer on component unmount
-    useEffect(() => {
-        return (): void => {
+    useEffect(
+        () => (): void => {
             if (initTimer) {
                 clearTimeout(initTimer)
             }
             IndexStore.clearAppDetails() // Cleared out the data on unmount
-        }
-    }, [])
+        },
+        [],
+    )
 
     useEffect(() => {
         if (checkIfToRefetchData(location)) {
@@ -119,7 +123,6 @@ const RouterComponent = ({ envType }) => {
 
     const handleAppDetailsCallError = (e: any) => {
         if (getIsRequestAborted(e)) {
-            // FIXME: initTimer
             return
         }