feat: clear app detail group filters if param has envId

src/components/ApplicationGroup/AppGroup.service.ts

@@ -68,7 +68,7 @@ export function getCIConfig(envID: string, appIds: string): Promise<ResponseType
 }
 
 export function getCIConfigMin(envID: string, appIds: string): Promise<ResponseType> {
-    return get(`${Routes.ENV_WORKFLOW}/${envID}/${URLS.APP_CI_CONFIG}/min${getFilteredAppQueryString(appIds)}`)
+    return get(`${Routes.ENV_WORKFLOW}/${envID}/${Routes.APP_CI_PIPELINE}${getFilteredAppQueryString(appIds)}`)
 }
 
 export function getCDConfig(envID: string, appIds: string): Promise<ResponseType> {

src/components/ApplicationGroup/AppGroup.types.ts

@@ -321,6 +321,7 @@ export interface AppGroupDetailDefaultType {
     description?: string
     getAppListData?: () => Promise<OptionType[]>
     handleSaveDescription?: (description: string) => Promise<void>
+    clearAppListSelection?: () => void
 }
 
 interface CIPipeline {

src/components/ApplicationGroup/AppGroupAppFilter.tsx

@@ -16,6 +16,7 @@
 
 import { useEffect, useRef, useState } from 'react'
 import ReactSelect, { SelectInstance } from 'react-select'
+import ReactGA from 'react-ga4'
 import { useAppGroupAppFilterContext } from './AppGroupDetailsRoute'
 import { appGroupAppSelectorStyle } from './AppGroup.utils'
 import { AppGroupAppFilterContextType, FilterParentType } from './AppGroup.types'
@@ -52,7 +53,15 @@ export default function AppGroupAppFilter() {
         setSelectedFilterTab(_filterTab)
     }
 
+    const handleFilterGAEvent = (isItemClick?: boolean) => {
+        ReactGA.event({
+            category: 'Group filter',
+            action: `${filterParentType} filter ${isItemClick ? 'item' : ''} clicked`,
+        })
+    }
+
     const handleOpenFilter = (): void => {
+        handleFilterGAEvent()
         selectDefaultFilterTab()
         setMenuOpen(true)
     }
@@ -86,6 +95,7 @@ export default function AppGroupAppFilter() {
     }
 
     const onChangeFilter = (selectedValue): void => {
+        handleFilterGAEvent(true)
         if (selectedFilterTab === AppFilterTabs.APP_FILTER) {
             setSelectedAppList(selectedValue)
             setSelectedGroupFilter([])
@@ -119,6 +129,7 @@ export default function AppGroupAppFilter() {
     }
 
     const handleFilterFocus = () => {
+        handleFilterGAEvent()
         appGroupFilterRef.current.focus()
         appGroupFilterRef.current.onMenuOpen()
     }

src/components/ApplicationGroup/AppGroupDetailsRoute.tsx

@@ -425,6 +425,17 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
         return _appListData
     }, [selectedAppList, appGroupListData?.apps, appGroupListData?.description])
 
+    const clearAppListSelection = () => {
+        setSelectedAppList([])
+        setSelectedGroupFilter([])
+        setAppGroupFilterInLocalStorage({
+            filterParentType: FilterParentType.env,
+            resourceId: envId,
+            resourceList: [],
+            groupList: [],
+        })
+    }
+
     const renderRoute = () => {
         if (initLoading || loading || appListLoading) {
             return <Progressing pageLoader />
@@ -454,15 +465,25 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
                             <EnvTriggerView filteredAppIds={_filteredAppsIds} isVirtualEnv={isVirtualEnv} />
                         </Route>
                         <Route path={`${path}/${URLS.APP_CI_DETAILS}/:pipelineId(\\d+)?/:buildId(\\d+)?`}>
-                            <EnvCIDetails filteredAppIds={_filteredAppsIds} />
+                            <EnvCIDetails
+                                filteredAppIds={_filteredAppsIds}
+                                clearAppListSelection={clearAppListSelection}
+                            />
                         </Route>
                         <Route
                             path={`${path}/${URLS.APP_CD_DETAILS}/:appId(\\d+)?/:pipelineId(\\d+)?/:triggerId(\\d+)?`}
                         >
-                            <EnvCDDetails filteredAppIds={_filteredAppsIds} />
+                            <EnvCDDetails
+                                filteredAppIds={_filteredAppsIds}
+                                clearAppListSelection={clearAppListSelection}
+                            />
                         </Route>
                         <Route path={`${path}/${URLS.APP_CONFIG}/:appId(\\d+)?`}>
-                            <EnvConfig filteredAppIds={_filteredAppsIds} envName={envName} />
+                            <EnvConfig
+                                filteredAppIds={_filteredAppsIds}
+                                envName={envName}
+                                clearAppListSelection={clearAppListSelection}
+                            />
                         </Route>
                         <Redirect to={`${path}/${URLS.APP_OVERVIEW}`} />
                     </Switch>

src/components/ApplicationGroup/Details/EnvCDDetails/EnvCDDetails.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import {
     Progressing,
     showError,
@@ -56,13 +56,14 @@ import {
     renderVirtualHistoryArtifacts,
 } from '../../../app/details/cdDetails/utils'
 
-export default function EnvCDDetails({ filteredAppIds }: AppGroupDetailDefaultType) {
+export default function EnvCDDetails({ filteredAppIds, clearAppListSelection }: AppGroupDetailDefaultType) {
     const { appId, envId, triggerId, pipelineId } = useParams<{
         appId: string
         envId: string
         triggerId: string
         pipelineId: string
     }>()
+    const isMounted = useRef<boolean>(false)
     const [pagination, setPagination] = useState<{ offset: number; size: number }>({ offset: 0, size: 20 })
     const [hasMore, setHasMore] = useState<boolean>(false)
     const [hasMoreLoading, setHasMoreLoading] = useState<boolean>(false)
@@ -79,13 +80,21 @@ export default function EnvCDDetails({ filteredAppIds }: AppGroupDetailDefaultTy
         autoBottomScroll: triggerDetails && TRIGGER_STATUS_PROGRESSING.includes(triggerDetails.status.toLowerCase()),
     })
 
+    useEffect(() => {
+        if (appId && !isMounted.current) {
+            clearAppListSelection()
+        }
+        isMounted.current = true
+    }, [])
+
     const [loading, result] = useAsync(
         () =>
             Promise.allSettled([
                 getAppsCDConfigMin(envId, filteredAppIds),
                 getModuleConfigured(ModuleNameMap.BLOB_STORAGE),
             ]),
         [filteredAppIds],
+        isMounted.current,
     )
     const [loadingDeploymentHistory, deploymentHistoryResult, , , , dependencyState] = useAsync(
         () => getTriggerHistory({ appId: Number(appId), envId: Number(envId), pagination }),
@@ -97,7 +106,6 @@ export default function EnvCDDetails({ filteredAppIds }: AppGroupDetailDefaultTy
     const { currentEnvironmentName } = useAppContext()
     useInterval(pollHistory, 30000)
 
-
     useEffect(() => {
         if (result?.[0]?.['value']?.result?.length) {
             const selectedPipelineExist = result[0]['value'].result.some((pipeline) => pipeline.id === +pipelineId)

src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { generatePath, Route, useHistory, useParams, useRouteMatch } from 'react-router-dom'
 import {
     Progressing,
@@ -44,12 +44,15 @@ import { getCIConfigList } from '../../AppGroup.service'
 import { AppGroupDetailDefaultType } from '../../AppGroup.types'
 import { CIPipelineBuildType } from '../../../ciPipeline/types'
 
-export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultType) {
+export default function EnvCIDetails({ filteredAppIds, clearAppListSelection }: AppGroupDetailDefaultType) {
     const { envId, pipelineId, buildId } = useParams<{
         pipelineId: string
         buildId: string
         envId: string
     }>()
+    const { path } = useRouteMatch()
+    const { replace } = useHistory()
+    const isMounted = useRef<boolean>(false)
     const [pagination, setPagination] = useState<{ offset: number; size: number }>({ offset: 0, size: 20 })
     const [hasMore, setHasMore] = useState<boolean>(false)
     const [triggerHistory, setTriggerHistory] = useState<Map<number, History>>(new Map())
@@ -71,8 +74,11 @@ export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultTy
         autoBottomScroll: triggerDetails && TRIGGER_STATUS_PROGRESSING.includes(triggerDetails.status.toLowerCase()),
     })
 
-
     useEffect(() => {
+        if (pipelineId && !isMounted.current) {
+            clearAppListSelection()
+        }
+        isMounted.current = true
         try {
             setCiGroupLoading(true)
             getCIConfigList(envId, filteredAppIds).then((result) => {
@@ -120,8 +126,6 @@ export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultTy
         [pipelineId, pagination],
         !!pipelineId,
     )
-    const { path } = useRouteMatch()
-    const { replace } = useHistory()
     useInterval(pollHistory, 30000)
 
     useEffect(() => {

src/components/ApplicationGroup/Details/EnvironmentConfig/EnvConfig.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { generatePath, Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 
 import {
@@ -41,12 +41,20 @@ import ApplicationRoute from './ApplicationRoutes'
 const getApprovalPolicyConfigForEnv: (envId: number) => Promise<ResourceIdToResourceApprovalPolicyConfigMapType> =
     importComponentFromFELibrary('getApprovalPolicyConfigForEnv', null, 'function')
 
-const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
+const EnvConfig = ({ filteredAppIds, envName, clearAppListSelection }: AppGroupDetailDefaultType) => {
     // HOOKS
     const { path, params } = useRouteMatch<{ envId: string; appId: string }>()
     const { appId, envId } = params
     const { pathname } = useLocation()
     const { replace } = useHistory()
+    const isMounted = useRef<boolean>(false)
+
+    useEffect(() => {
+        if (appId && !isMounted.current) {
+            clearAppListSelection()
+        }
+        isMounted.current = true
+    }, [])
 
     // ASYNC CALLS
     const [loading, initDataResults] = useAsync(
@@ -58,6 +66,7 @@ const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
                     : null,
             ]),
         [filteredAppIds],
+        isMounted.current,
     )
     const [envConfigLoading, envConfigRes, , refetch] = useAsync(
         () => (appId ? getEnvConfig(+appId, +envId) : null),