Merge pull request #3027 from devtron-labs/refactor/app-details

refactor: app details

Author: arunjaindev

.eslintignore

@@ -122,7 +122,6 @@ src/components/app/list/__tests__/AppListView.test.tsx
 src/components/app/list/appList.modal.ts
 src/components/app/list/emptyView/Empty.tsx
 src/components/app/list/expandedRow/ExpandedRow.tsx
-src/components/app/service.ts
 src/components/bulkEdits/bulkedit.utils.tsx
 src/components/cdPipeline/BuildCD.tsx
 src/components/cdPipeline/CDPipeline.tsx

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.22.5",
+        "@devtron-labs/devtron-fe-common-lib": "1.22.6",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/Shared/CommandBar/CommandBarBackdrop.tsx

@@ -72,7 +72,11 @@ const CommandBarBackdrop = ({ handleClose, isLoadingResourceList, resourceList }
         [resourceList],
     )
 
-    const { data: recentActionsGroup, isLoading } = useQuery({
+    const {
+        data: recentActionsGroup,
+        isLoading,
+        refetch: refetchActionsGroup,
+    } = useQuery({
         queryFn: ({ signal }) =>
             getUserPreferences(signal).then((response) => {
                 const responseData: ResponseType<typeof response> = {
@@ -176,6 +180,8 @@ const CommandBarBackdrop = ({ handleClose, isLoadingResourceList, resourceList }
             return
         }
 
+        await refetchActionsGroup()
+
         const currentItemId = sanitizeItemId(item)
 
         // In this now we will put the id as first item in the list and keep first 5 items then

src/components/ApplicationGroup/AppGroup.types.ts

@@ -271,8 +271,6 @@ export interface GroupFilterType {
     appListOptions: OptionType[]
     selectedAppList: MultiValue<OptionType>
     setSelectedAppList: React.Dispatch<React.SetStateAction<MultiValue<OptionType>>>
-    selectedFilterTab: AppFilterTabs
-    setSelectedFilterTab: React.Dispatch<React.SetStateAction<AppFilterTabs>>
     groupFilterOptions: GroupOptionType[]
     selectedGroupFilter: MultiValue<GroupOptionType>
     setSelectedGroupFilter: React.Dispatch<React.SetStateAction<MultiValue<GroupOptionType>>>

src/components/ApplicationGroup/AppGroupDetailsRoute.tsx

@@ -111,7 +111,6 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
     const [appListOptions, setAppListOptions] = useState<OptionType[]>([])
     const [selectedAppList, setSelectedAppList] = useState<MultiValue<OptionType>>([])
     const [appGroupListData, setAppGroupListData] = useState<AppGroupListType>()
-    const [selectedFilterTab, setSelectedFilterTab] = useState<AppFilterTabs>(AppFilterTabs.GROUP_FILTER)
     const [groupFilterOptions, setGroupFilterOptions] = useState<GroupOptionType[]>([])
     const [selectedGroupFilter, setSelectedGroupFilter] = useState<MultiValue<GroupOptionType>>([])
     const [showCreateGroup, setShowCreateGroup] = useState<boolean>(false)
@@ -440,7 +439,12 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
                             />
                         </Route>
                         <Route path={`${path}${URLS.DETAILS}/:appId(\\d+)?`}>
-                            <AppDetail detailsType="app-group" filteredResourceIds={_filteredAppsIds} />
+                            <AppDetail
+                                detailsType="app-group"
+                                filteredResourceIds={_filteredAppsIds}
+                                resourceList={appListOptions}
+                                setSelectedResourceList={setSelectedAppList}
+                            />
                         </Route>
                         <Route path={`${path}/${URLS.APP_TRIGGER}`}>
                             <EnvTriggerView filteredAppIds={_filteredAppsIds} isVirtualEnv={isVirtualEnv} />
@@ -473,8 +477,6 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
                 appListOptions={appListOptions}
                 selectedAppList={selectedAppList}
                 setSelectedAppList={setSelectedAppList}
-                selectedFilterTab={selectedFilterTab}
-                setSelectedFilterTab={setSelectedFilterTab}
                 groupFilterOptions={groupFilterOptions}
                 selectedGroupFilter={selectedGroupFilter}
                 setSelectedGroupFilter={setSelectedGroupFilter}
@@ -504,16 +506,14 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
     )
 }
 
-export const EnvHeader = ({
+const EnvHeader = ({
     envName,
     setEnvName,
     setShowEmpty,
     showEmpty,
     appListOptions,
     selectedAppList,
     setSelectedAppList,
-    selectedFilterTab,
-    setSelectedFilterTab,
     groupFilterOptions,
     selectedGroupFilter,
     setSelectedGroupFilter,
@@ -529,6 +529,7 @@ export const EnvHeader = ({
     const { setCurrentEnvironmentName } = useAppContext()
 
     const [isMenuOpen, setMenuOpen] = useState(false)
+    const [selectedFilterTab, setSelectedFilterTab] = useState<AppFilterTabs>(AppFilterTabs.GROUP_FILTER)
 
     const contextValue = useMemo(
         () => ({

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

@@ -33,9 +33,6 @@ import {
     getTriggerHistory,
     useScrollable,
     TRIGGER_STATUS_PROGRESSING,
-    STAGE_TYPE,
-    DeploymentStageType,
-    DeploymentNodeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useRouteMatch, useParams, generatePath, Route } from 'react-router-dom'
 import { useAppContext } from '../../../common'

src/components/app/details/AppHeader.tsx

@@ -15,7 +15,6 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import ReactGA from 'react-ga4'
 import { generatePath, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import {
@@ -31,6 +30,8 @@ import {
     useBreadcrumb,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import { AppFilterTabs } from '@Components/ApplicationGroup/Constants'
+
 import { URLS } from '../../../config'
 import { FilterParentType } from '../../ApplicationGroup/AppGroup.types'
 import AppGroupAppFilter from '../../ApplicationGroup/AppGroupAppFilter'
@@ -52,8 +53,6 @@ export const AppHeader = ({
     appListOptions,
     selectedAppList,
     setSelectedAppList,
-    selectedFilterTab,
-    setSelectedFilterTab,
     groupFilterOptions,
     selectedGroupFilter,
     setSelectedGroupFilter,
@@ -69,6 +68,7 @@ export const AppHeader = ({
     const { setCurrentAppName } = useAppContext()
 
     const [isMenuOpen, setMenuOpen] = useState(false)
+    const [selectedFilterTab, setSelectedFilterTab] = useState<AppFilterTabs>(AppFilterTabs.GROUP_FILTER)
 
     const contextValue = useMemo(
         () => ({
@@ -125,10 +125,9 @@ export const AppHeader = ({
             const tab = currentPathname.current.replace(match.url, '').split('/')[1]
             const newUrl = generatePath(match.path, { appId: value })
             history.push(`${newUrl}/${tab}`)
-            ReactGA.event({
+            handleAnalyticsEvent({
                 category: 'App Selector',
                 action: 'DA_SWITCH_SEARCHED_APP_CLICKED',
-                label: tab,
             })
         },
         [location.pathname],