refactor: ConfigMapSecret and EnvironmentOverride components - streamline state management and improve data fetching with useQuery

Author: RohitRaj011

src/Pages/Shared/ConfigMapSecret/ConfigMapSecret.wrapper.tsx

@@ -14,20 +14,10 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 
-import {
-    abortPreviousRequests,
-    CMSecretComponentType,
-    ErrorScreenManager,
-    getIsRequestAborted,
-    Progressing,
-    showError,
-    useAsync,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { CMSecretComponentType, ErrorScreenManager, Progressing, useQuery } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ComponentStates } from '@Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types'
 import { getAppChartRefForAppAndEnv } from '@Services/service'
 
 import { ConfigMapSecretContainer } from './ConfigMapSecretContainer'
@@ -36,53 +26,37 @@ import { CMSecretWrapperProps } from './types'
 
 export const ConfigMapSecretWrapper = (props: CMSecretWrapperProps) => {
     // PROPS
-    const {
-        componentType = CMSecretComponentType.ConfigMap,
-        parentState,
-        setParentState,
-        onErrorRedirectURL,
-        isTemplateView,
-    } = props
+    const { componentType = CMSecretComponentType.ConfigMap, onErrorRedirectURL, isTemplateView } = props
 
     // HOOKS
     const { appId, envId, name } = useParams<{ appId: string; envId: string; name: string }>()
 
-    // REFS
-    const abortControllerRef = useRef<AbortController>(new AbortController())
-
-    // ASYNC CALLS
-    const [appChartRefLoading, appChartRefRes, appChartRefErr, reload] = useAsync(
-        () =>
-            abortPreviousRequests(() => getAppChartRefForAppAndEnv(+appId, +envId, isTemplateView), abortControllerRef),
-        [componentType],
-    )
-
-    useEffect(() => {
-        if (appChartRefRes) {
-            setParentState?.(ComponentStates.loaded)
-        }
-        if (appChartRefErr && !getIsRequestAborted(appChartRefErr)) {
-            setParentState?.(ComponentStates.failed)
-            showError(appChartRefErr)
-        }
-
-        return () => {
-            setParentState?.(ComponentStates.loading)
-        }
-    }, [appChartRefRes, appChartRefErr])
-
-    if (parentState === ComponentStates.loading || appChartRefLoading || getIsRequestAborted(appChartRefErr)) {
+    const {
+        data: appChartRef,
+        isLoading,
+        isFetching,
+        error: appChartRefErr,
+        refetch,
+    } = useQuery({
+        queryFn: ({ signal }) => getAppChartRefForAppAndEnv(+appId, +envId, isTemplateView, signal),
+        queryKey: [componentType, appId, envId, isTemplateView],
+        select: ({ result }) => result,
+    })
+
+    const appChartRefLoading = isLoading || isFetching
+
+    if (appChartRefLoading) {
         return <Progressing fullHeight pageLoader />
     }
 
     if (appChartRefErr) {
-        return <ErrorScreenManager code={appChartRefErr.code} redirectURL={onErrorRedirectURL} reload={reload} />
+        return <ErrorScreenManager code={appChartRefErr.code} redirectURL={onErrorRedirectURL} reload={refetch} />
     }
 
     return (
         <ConfigMapSecretContainer
             key={`${CM_SECRET_COMPONENT_NAME[componentType]}-${name}`}
-            appChartRef={appChartRefRes?.result}
+            appChartRef={appChartRef}
             {...props}
         />
     )

src/Pages/Shared/ConfigMapSecret/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, MutableRefObject, SetStateAction } from 'react'
+import { MutableRefObject } from 'react'
 
 import {
     AppConfigProps,
@@ -36,7 +36,7 @@ import {
 
 import { ConfigToolbarProps } from '@Pages/Applications'
 
-import { ComponentStates, EnvironmentOverrideComponentProps } from '../EnvironmentOverride/EnvironmentOverrides.types'
+import { EnvironmentOverrideComponentProps } from '../EnvironmentOverride/EnvironmentOverrides.types'
 
 // PAYLOAD PROPS
 export interface CMSecretDraftPayloadType {
@@ -74,8 +74,6 @@ export interface CMSecretWrapperProps
     > {
     componentType?: CMSecretComponentType
     parentName?: string
-    parentState?: ComponentStates
-    setParentState?: Dispatch<SetStateAction<ComponentStates>>
     clusterId?: string
     isApprovalPolicyConfigured?: boolean
     envName: string

src/Pages/Shared/EnvironmentOverride/EnvironmentOverride.tsx

@@ -14,22 +14,21 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { generatePath, Route, Switch, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import {
     ApprovalConfigDataKindType,
     CMSecretComponentType,
     getIsApprovalPolicyConfigured,
-    Reload,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ErrorBoundary, mapByKey, useAppContext } from '@Components/common'
 import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '@Config/index'
 import { DeploymentTemplate } from '@Pages/Applications'
 import { ConfigMapSecretWrapper } from '@Pages/Shared/ConfigMapSecret/ConfigMapSecret.wrapper'
 
-import { ComponentStates, EnvironmentOverrideComponentProps } from './EnvironmentOverrides.types'
+import { EnvironmentOverrideComponentProps } from './EnvironmentOverrides.types'
 
 import './environmentOverride.scss'
 
@@ -48,7 +47,6 @@ const EnvironmentOverride = ({
 }: EnvironmentOverrideComponentProps) => {
     const isAppGroupView = !!envName
     const params = useParams<{ appId: string; envId: string }>()
-    const [viewState, setViewState] = useState<ComponentStates>(null)
     const { path, url } = useRouteMatch()
     const { push } = useHistory()
     const location = useLocation()
@@ -79,24 +77,9 @@ const EnvironmentOverride = ({
         }
     }, [])
 
-    useEffect(() => {
-        if (viewState === ComponentStates.reloading) {
-            reloadEnvironments()
-        }
-    }, [viewState])
-
     if (!params.envId) {
         return null
     }
-    if (viewState === ComponentStates.failed) {
-        return (
-            <Reload
-                reload={() => {
-                    setViewState(ComponentStates.reloading)
-                }}
-            />
-        )
-    }
 
     if (params.envId && !environmentsMap.has(+params.envId) && environments.length) {
         const newUrl = url.replace(
@@ -164,9 +147,7 @@ const EnvironmentOverride = ({
                             isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
                                 approvalConfigMap?.[ApprovalConfigDataKindType.configMap],
                             )}
-                            parentState={viewState}
                             parentName={getParentName()}
-                            setParentState={setViewState}
                             clusterId={clusterId}
                             envConfig={envConfig}
                             fetchEnvConfig={fetchEnvConfig}
@@ -185,9 +166,7 @@ const EnvironmentOverride = ({
                             isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
                                 approvalConfigMap?.[ApprovalConfigDataKindType.configSecret],
                             )}
-                            parentState={viewState}
                             parentName={getParentName()}
-                            setParentState={setViewState}
                             clusterId={environmentsMap.get(+params.envId)?.clusterId?.toString()}
                             componentType={CMSecretComponentType.Secret}
                             envConfig={envConfig}

src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
-
 import { AppConfigProps } from '@devtron-labs/devtron-fe-common-lib'
 
 import {
@@ -25,14 +23,6 @@ import {
 
 import { ConfigAppList } from '../../../components/ApplicationGroup/AppGroup.types'
 
-export enum ComponentStates {
-    loading = 'loading',
-    loaded = 'loaded',
-    success = 'success',
-    failed = 'failed',
-    reloading = 'reloading',
-}
-
 export interface EnvironmentOverrideComponentProps extends Required<Pick<AppConfigProps, 'isTemplateView'>> {
     appList?: ConfigAppList[]
     environments: AppConfigState['environmentList']
@@ -46,12 +36,6 @@ export interface EnvironmentOverrideComponentProps extends Required<Pick<AppConf
     appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
 }
 
-export interface CommonEnvironmentOverridesProps {
-    parentState: ComponentStates
-    setParentState: React.Dispatch<React.SetStateAction<ComponentStates>>
-    isJobView?: boolean
-}
-
 export interface ListComponentType {
     name: string
     type: string

src/components/CIPipelineN/AdvancedConfigOptions.tsx

@@ -20,12 +20,12 @@ import CIConfig from '../ciConfig/CIConfig'
 import DockerArgs from './DockerArgs'
 import CustomImageTags from './CustomImageTags'
 import TargetPlatformSelector from '../ciConfig/TargetPlatformSelector'
-import { ComponentStates } from '../../Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types'
 import { AdvancedConfigOptionsProps, CIConfigParentState } from '../ciConfig/types'
 import { DockerConfigOverrideKeys } from '../ciPipeline/types'
 import { getTargetPlatformMap } from '../ciConfig/CIConfig.utils'
 import { pipelineContext } from '../workflowEditor/workflowEditor'
 import '../ciConfig/CIConfig.scss'
+import { ComponentStates } from './types'
 
 export default function AdvancedConfigOptions({ ciPipeline, appId, isTemplateView }: AdvancedConfigOptionsProps) {
     const { formData, setFormData, loadingState, setLoadingState, formDataErrorObj, setFormDataErrorObj } =

src/components/CIPipelineN/types.ts

@@ -73,3 +73,11 @@ export interface EnvironmentListType {
     setSelectedEnv?: React.Dispatch<React.SetStateAction<EnvironmentWithSelectPickerType>>
     isBorderLess?: boolean
 }
+
+export enum ComponentStates {
+    loading = 'loading',
+    loaded = 'loaded',
+    success = 'success',
+    failed = 'failed',
+    reloading = 'reloading',
+}

src/components/ciConfig/CIConfig.tsx

@@ -19,7 +19,7 @@ import { showError, Progressing } from '@devtron-labs/devtron-fe-common-lib'
 import { getGitProviderIcon, sortObjectArrayAlphabetically } from '../common'
 import { getDockerRegistryMinAuth } from './service'
 import { getSourceConfig, getCIConfig } from '../../services/service'
-import { ComponentStates } from '../../Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types'
+import { ComponentStates } from '@Components/CIPipelineN/types'
 import { CIConfigProps, MaterialOptionType } from './types'
 import './CIConfig.scss'
 import CIConfigForm from './CIConfigForm'

src/components/ciConfig/types.tsx

@@ -32,10 +32,9 @@ import {
     WorkflowType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
+import { ComponentStates, EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
 import { OptionTypeWithIcon } from '@Components/externalLinks/ExternalLinks.type'
 
-import { ComponentStates } from '../../Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types'
 import { ConfigOverrideWorkflowDetails } from '../../services/service.types'
 import { CiPipelineResult } from '../app/details/triggerView/types'
 import { CIPipelineDataType } from '../ciPipeline/types'

src/services/service.ts

@@ -430,6 +430,7 @@ export function getChartReferencesForAppAndEnv(
     appId: number,
     envId: number | null,
     isTemplateView: AppConfigProps['isTemplateView'],
+    signal?: AbortSignal,
 ): Promise<ResponseType<MinChartRefDTO>> {
     const url = isTemplateView
         ? getTemplateAPIRoute({
@@ -440,15 +441,16 @@ export function getChartReferencesForAppAndEnv(
               },
           })
         : `${Routes.CHART_REFERENCES_MIN}/${appId}${envId ? `/${envId}` : ''}`
-    return get(url)
+    return get(url, { signal })
 }
 
 export function getAppChartRefForAppAndEnv(
     appId: number,
     envId: number | null,
     isTemplateView: AppConfigProps['isTemplateView'],
+    signal?: AbortSignal
 ): Promise<ResponseType> {
-    return getChartReferencesForAppAndEnv(appId, envId, isTemplateView).then((response) => {
+    return getChartReferencesForAppAndEnv(appId, envId, isTemplateView, signal).then((response) => {
         const {
             result: { chartRefs, latestEnvChartRef, latestAppChartRef },
         } = response
@@ -555,4 +557,3 @@ export const validateContainerConfiguration = (request: any): Promise<any> => {
 
 export const getTemplateOptions = (appId: number, envId: number): Promise<ResponseType<TemplateListDTO[]>> =>
     get(getUrlWithSearchParams(Routes.DEPLOYMENT_OPTIONS, { appId, envId }))
-