Skip to content

Commit 18825e6

Browse files
shivani170shivani170
committed
chore: context switcher moved to common & recent App & fet call from useUserPreference
1 parent 8c597aa commit 18825e6

File tree

15 files changed

+91
-192
lines changed

15 files changed

+91
-192
lines changed

‎src/components/AppSelector/AppSelector.tsx

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,55 +19,47 @@ import ReactGA from 'react-ga4'
1919
import { ActionMeta } from 'react-select'
2020

2121
import {
22-
BaseAppMetaData,
22+
ContextSwitcher,
23+
RecentlyVisitedOptions,
2324
ResourceKindType,
2425
SelectPickerOptionType,
2526
SelectPickerProps,
2627
useAsync,
27-
UserPreferenceResourceActions,
2828
useUserPreferences,
2929
} from '@devtron-labs/devtron-fe-common-lib'
3030

31-
import { ContextSwitcher } from '@Components/common/ContextSwitcher/ContextSwitcher'
32-
33-
import { AppSelectorType, RecentlyVisitedOptions } from './AppSelector.types'
31+
import { AppSelectorType } from './AppSelector.types'
3432
import { appListOptions } from './AppSelectorUtil'
3533
import { APP_DETAILS_GA_EVENTS } from './constants'
3634

3735
const AppSelector = ({ onChange, appId, appName, isJobView }: AppSelectorType) => {
3836
const abortControllerRef = useRef<AbortController>(new AbortController())
37+
const isAppDataAvailable = !!appId && !!appName
3938

40-
const { userPreferences, fetchRecentlyVisitedParsedApps } = useUserPreferences({})
41-
const [inputValue, setInputValue] = useState('')
39+
const { recentlyVisitedResources } = useUserPreferences({
40+
recentlyVisitedFetchConfig: {
41+
id: appId,
42+
name: appName,
43+
resourceKind: isJobView ? ResourceKindType.job : ResourceKindType.devtronApplication,
44+
isDataAvailable: isAppDataAvailable,
45+
},
46+
})
4247

43-
const resourceKind = isJobView ? ResourceKindType.job : ResourceKindType.devtronApplication
48+
const [inputValue, setInputValue] = useState('')
4449

45-
const recentlyVisitedDevtronApps =
46-
userPreferences?.resources?.[resourceKind]?.[UserPreferenceResourceActions.RECENTLY_VISITED] ||
47-
([] as BaseAppMetaData[])
48-
49-
const isAppDataAvailable = !!appId && !!appName
50-
const shouldFetchAppOptions = !!recentlyVisitedDevtronApps.length
50+
const shouldFetchAppOptions = !!recentlyVisitedResources.length
5151

5252
const [loading, selectOptions] = useAsync(
5353
() =>
5454
appListOptions({
5555
inputValue,
5656
isJobView,
5757
signal: abortControllerRef.current.signal,
58-
recentlyVisitedDevtronApps,
58+
recentlyVisitedResources,
5959
}),
60-
[inputValue, isJobView],
60+
[inputValue, appId, appName],
6161
isAppDataAvailable && shouldFetchAppOptions,
6262
)
63-
64-
// fetching recently visited apps only in case of devtron apps
65-
useAsync(
66-
() => fetchRecentlyVisitedParsedApps({ appId, appName, resourceKind }),
67-
[appId, appName],
68-
isAppDataAvailable,
69-
)
70-
7163
const onInputChange: SelectPickerProps['onInputChange'] = async (val) => {
7264
setInputValue(val)
7365
}

‎src/components/AppSelector/AppSelector.types.ts

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { GroupBase } from 'react-select'
2-
3-
import { BaseAppMetaData, SelectPickerOptionType, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
1+
import { BaseRecentlyVisitedEntitiesTypes, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
42

53
import { AppHeaderType } from '@Components/app/types'
64

@@ -9,21 +7,11 @@ export interface AppSelectorType extends Pick<SelectPickerProps, 'onChange'>, Pi
97
isJobView?: boolean
108
}
119

12-
export interface RecentlyVisitedOptions extends SelectPickerOptionType<number> {
13-
isDisabled?: boolean
14-
isRecentlyVisited?: boolean
15-
}
16-
17-
export interface RecentlyVisitedGroupedOptionsType extends GroupBase<SelectPickerOptionType<number>> {
18-
label: string
19-
options: RecentlyVisitedOptions[]
20-
}
21-
2210
export interface AppListOptionsTypes {
2311
inputValue: string
2412
isJobView?: boolean
2513
signal?: AbortSignal
26-
recentlyVisitedDevtronApps?: BaseAppMetaData[] | []
14+
recentlyVisitedResources?: BaseRecentlyVisitedEntitiesTypes[] | []
2715
}
2816

2917
export interface ChartSelectorType {

‎src/components/AppSelector/AppSelectorUtil.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,18 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { BaseAppMetaData, getIsRequestAborted, ServerErrors, showError } from '@devtron-labs/devtron-fe-common-lib'
17+
import {
18+
BaseAppMetaData,
19+
BaseRecentlyVisitedEntitiesTypes,
20+
getIsRequestAborted,
21+
RecentlyVisitedGroupedOptionsType,
22+
RecentlyVisitedOptions,
23+
ServerErrors,
24+
showError,
25+
} from '@devtron-labs/devtron-fe-common-lib'
1826

1927
import { getAppListMin } from '../../services/service'
20-
import { AppListOptionsTypes, RecentlyVisitedGroupedOptionsType, RecentlyVisitedOptions } from './AppSelector.types'
28+
import { AppListOptionsTypes } from './AppSelector.types'
2129
import { getMinCharSearchPlaceholderGroup } from './constants'
2230

2331
let timeoutId
@@ -26,7 +34,7 @@ export const appListOptions = ({
2634
inputValue,
2735
isJobView = false,
2836
signal,
29-
recentlyVisitedDevtronApps,
37+
recentlyVisitedResources,
3038
}: AppListOptionsTypes): Promise<RecentlyVisitedGroupedOptionsType[]> => {
3139
const options = signal ? { signal } : null
3240

@@ -37,13 +45,13 @@ export const appListOptions = ({
3745
timeoutId = setTimeout(() => {
3846
if (inputValue.length < 3) {
3947
resolve(
40-
recentlyVisitedDevtronApps?.length
48+
recentlyVisitedResources?.length
4149
? [
4250
{
4351
label: 'Recently Visited',
44-
options: recentlyVisitedDevtronApps.map((app: BaseAppMetaData) => ({
45-
label: app.appName,
46-
value: app.appId,
52+
options: recentlyVisitedResources.map((app: BaseRecentlyVisitedEntitiesTypes) => ({
53+
label: app.name,
54+
value: app.id,
4755
isRecentlyVisited: true,
4856
})) as RecentlyVisitedOptions[],
4957
},

‎src/components/AppSelector/ChartSelector.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,14 @@
1717
import { useState } from 'react'
1818
import { useParams, useHistory, generatePath, useRouteMatch } from 'react-router-dom'
1919
import { GroupBase } from 'react-select'
20-
import { useAsync, SelectPickerProps, SelectPicker, SelectPickerOptionType, ResourceKindType } from '@devtron-labs/devtron-fe-common-lib'
20+
import {
21+
useAsync,
22+
SelectPickerProps,
23+
SelectPickerOptionType,
24+
ContextSwitcher,
25+
} from '@devtron-labs/devtron-fe-common-lib'
2126
import { mapByKey } from '../common'
22-
import { ContextSwitcher } from '@Components/common/ContextSwitcher/ContextSwitcher'
2327
import { ChartSelectorType } from './AppSelector.types'
24-
import { getMinCharSearchPlaceholderGroup } from './constants'
2528

2629
export default function ChartSelector({
2730
primaryKey,
@@ -55,11 +58,7 @@ export default function ChartSelector({
5558
setInputValue(val)
5659
}
5760

58-
const getChartsOptions = (): GroupBase<SelectPickerOptionType<string | number>>[] => {
59-
if(inputValue.length < 3) {
60-
return [getMinCharSearchPlaceholderGroup('Charts')]
61-
}
62-
return [
61+
const getChartsOptions = (): GroupBase<SelectPickerOptionType<string | number>>[] => [
6362
{
6463
label: 'All Charts',
6564
options:
@@ -68,7 +67,7 @@ export default function ChartSelector({
6867
label: res[primaryValue],
6968
})) || [],
7069
},
71-
]}
70+
]
7271

7372
return (
7473
<ContextSwitcher

‎src/components/AppSelector/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { RecentlyVisitedGroupedOptionsType } from './AppSelector.types'
1+
import { RecentlyVisitedGroupedOptionsType } from '@devtron-labs/devtron-fe-common-lib/dist'
22

33
export const getMinCharSearchPlaceholderGroup = (resourceKind): RecentlyVisitedGroupedOptionsType => ({
44
label: `All ${resourceKind}`,

‎src/components/ApplicationGroup/AppGroup.utils.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ import {
2626
SourceTypeMap,
2727
DEPLOYMENT_STATUS,
2828
WorkflowStatusEnum,
29-
BaseAppMetaData,
29+
RecentlyVisitedGroupedOptionsType,
30+
RecentlyVisitedOptions,
31+
BaseRecentlyVisitedEntitiesTypes
3032
} from '@devtron-labs/devtron-fe-common-lib'
3133
import { getParsedBranchValuesForPlugin } from '@Components/common'
3234
import { DEFAULT_GIT_BRANCH_VALUE, DOCKER_FILE_ERROR_TITLE, SOURCE_NOT_CONFIGURED, URLS } from '../../config'
@@ -39,7 +41,6 @@ import {
3941
AppGroupListType,
4042
} from './AppGroup.types'
4143
import { getMinCharSearchPlaceholderGroup } from '@Components/AppSelector/constants'
42-
import { RecentlyVisitedGroupedOptionsType, RecentlyVisitedOptions } from '@Components/AppSelector/AppSelector.types'
4344

4445
let timeoutId
4546

@@ -163,8 +164,8 @@ export const handleSourceNotConfigured = (
163164
export const envListOptions = (
164165
inputValue: string,
165166
signal: AbortSignal,
166-
recentlyVisitedDevtronApps: BaseAppMetaData[],
167-
): Promise<any> =>
167+
recentlyVisitedDevtronApps: BaseRecentlyVisitedEntitiesTypes[],
168+
): Promise<RecentlyVisitedGroupedOptionsType[]> =>
168169
new Promise((resolve) => {
169170
if (timeoutId) {
170171
clearTimeout(timeoutId)
@@ -176,9 +177,9 @@ export const envListOptions = (
176177
? [
177178
{
178179
label: 'Recently Visited',
179-
options: recentlyVisitedDevtronApps.map((app: BaseAppMetaData) => ({
180-
label: app.appName,
181-
value: app.appId,
180+
options: recentlyVisitedDevtronApps.map((app: BaseRecentlyVisitedEntitiesTypes) => ({
181+
label: app.name,
182+
value: app.id,
182183
isRecentlyVisited: true,
183184
})) as RecentlyVisitedOptions[],
184185
},

‎src/components/ApplicationGroup/EnvSelector.tsx

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,44 +18,37 @@ import { useRef, useState } from 'react'
1818
import ReactGA from 'react-ga4'
1919

2020
import {
21-
BaseAppMetaData,
22-
ResourceKindType,
21+
ContextSwitcher,
22+
RecentlyVisitedOptions,
2323
SelectPickerProps,
2424
useAsync,
25-
UserPreferenceResourceActions,
2625
useUserPreferences,
2726
} from '@devtron-labs/devtron-fe-common-lib'
2827

29-
import { RecentlyVisitedOptions } from '@Components/AppSelector/AppSelector.types'
3028
import { APP_DETAILS_GA_EVENTS } from '@Components/AppSelector/constants'
31-
import { ContextSwitcher } from '@Components/common/ContextSwitcher/ContextSwitcher'
3229

3330
import { EnvSelectorType } from './AppGroup.types'
3431
import { envListOptions } from './AppGroup.utils'
3532

3633
export const EnvSelector = ({ onChange, envId, envName }: EnvSelectorType) => {
3734
const abortControllerRef = useRef<AbortController>(new AbortController())
3835
const defaultOptions = { value: envId, label: envName }
39-
40-
const [inputValue, setInputValue] = useState('')
41-
const { userPreferences, fetchRecentlyVisitedParsedApps } = useUserPreferences({})
4236
const isAppDataAvailable = !!envId && !!envName
4337

44-
useAsync(
45-
() =>
46-
fetchRecentlyVisitedParsedApps({ appId: envId, appName: envName, resourceKind: ResourceKindType.appGroup }),
47-
[envId, envName],
48-
isAppDataAvailable,
49-
)
50-
51-
const recentlyVisitedDevtronApps =
52-
userPreferences?.resources?.[ResourceKindType.appGroup]?.[UserPreferenceResourceActions.RECENTLY_VISITED] ||
53-
([] as BaseAppMetaData[])
38+
const [inputValue, setInputValue] = useState('')
39+
const { recentlyVisitedResources } = useUserPreferences({
40+
recentlyVisitedFetchConfig: {
41+
id: envId,
42+
name: envName,
43+
resourceKind: 'app-group',
44+
isDataAvailable: isAppDataAvailable,
45+
},
46+
})
5447

5548
const [loading, selectOptions] = useAsync(
56-
() => envListOptions(inputValue, abortControllerRef.current.signal, recentlyVisitedDevtronApps),
57-
[inputValue, recentlyVisitedDevtronApps],
58-
isAppDataAvailable && !!recentlyVisitedDevtronApps.length,
49+
() => envListOptions(inputValue, abortControllerRef.current.signal, recentlyVisitedResources),
50+
[inputValue, recentlyVisitedResources],
51+
isAppDataAvailable && !!recentlyVisitedResources.length,
5952
)
6053

6154
const onInputChange: SelectPickerProps['onInputChange'] = async (val) => {
@@ -80,7 +73,7 @@ export const EnvSelector = ({ onChange, envId, envName }: EnvSelectorType) => {
8073
onChange={handleChange}
8174
value={defaultOptions}
8275
options={selectOptions}
83-
inputId="app-group"
76+
inputId={`app-group-${envId}`}
8477
placeholder={envName}
8578
inputValue={inputValue}
8679
onInputChange={onInputChange}

‎src/components/ResourceBrowser/ResourceBrowser.service.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { RefObject } from 'react'
1919
import {
2020
APIOptions,
2121
ApiResourceType,
22-
BaseAppMetaData,
22+
BaseRecentlyVisitedEntitiesTypes,
2323
ClusterDetail,
2424
get,
2525
getIsRequestAborted,
@@ -28,12 +28,14 @@ import {
2828
getNamespaceListMin,
2929
getUrlWithSearchParams,
3030
Nodes,
31+
RecentlyVisitedGroupedOptionsType,
32+
RecentlyVisitedOptions,
3133
ResponseType,
3234
showError,
3335
stringComparatorBySortOrder,
3436
} from '@devtron-labs/devtron-fe-common-lib'
3537

36-
import { RecentlyVisitedGroupedOptionsType, RecentlyVisitedOptions } from '@Components/AppSelector/AppSelector.types'
38+
import {} from '@Components/AppSelector/AppSelector.types'
3739
import { getMinCharSearchPlaceholderGroup } from '@Components/AppSelector/constants'
3840
import {
3941
getClusterListMinWithInstalledClusters,
@@ -157,19 +159,19 @@ export const clusterListOptions = ({
157159
clusterList,
158160
isInstallationStatusView = false,
159161
inputValue,
160-
recentlyVisitedDevtronApps,
162+
recentlyVisitedResources,
161163
}: ClusterListOptionsTypes): Promise<RecentlyVisitedGroupedOptionsType[]> =>
162164
new Promise((resolve) => {
163165
setTimeout(() => {
164166
if (inputValue.length < 3) {
165167
resolve(
166-
recentlyVisitedDevtronApps?.length
168+
recentlyVisitedResources?.length
167169
? [
168170
{
169171
label: 'Recently Visited',
170-
options: recentlyVisitedDevtronApps.map((app: BaseAppMetaData) => ({
171-
label: app.appName,
172-
value: app.appId,
172+
options: recentlyVisitedResources.map((app: BaseRecentlyVisitedEntitiesTypes) => ({
173+
label: app.name,
174+
value: app.id,
173175
isRecentlyVisited: true,
174176
})) as RecentlyVisitedOptions[],
175177
},

0 commit comments

Comments
 (0)