Merge branch 'develop' of github.com:devtron-labs/dashboard into fix/use-tabs

Author: Elessar1802

package.json

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

src/assets/img/img-page-blocked.webp

@@ -15,84 +15,54 @@
  */
 
 import { useRef, useState } from 'react'
-import ReactGA from 'react-ga4'
 import { ActionMeta } from 'react-select'
 
 import {
-    AppSelectorNoOptionsMessage as appSelectorNoOptionsMessage,
-    BaseAppMetaData,
-    ComponentSizeType,
-    getNoMatchingResultText,
+    ContextSwitcher,
+    handleAnalyticsEvent,
+    RecentlyVisitedOptions,
     ResourceKindType,
-    SelectPicker,
     SelectPickerOptionType,
     SelectPickerProps,
-    SelectPickerVariantType,
     useAsync,
-    UserPreferenceResourceActions,
     useUserPreferences,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { AppSelectorType, RecentlyVisitedOptions } from './AppSelector.types'
-import { appListOptions } from './AppSelectorUtil'
-import { APP_DETAILS_GA_EVENTS } from './constants'
+import { AppSelectorType } from './AppSelector.types'
+import { appListOptions, getAppSelectGAEvent } from './AppSelectorUtil'
 
 const AppSelector = ({ onChange, appId, appName, isJobView }: AppSelectorType) => {
     const abortControllerRef = useRef<AbortController>(new AbortController())
+    const isAppDataAvailable = !!appId && !!appName
 
-    const { userPreferences, fetchRecentlyVisitedParsedApps } = useUserPreferences({})
-    const [inputValue, setInputValue] = useState('')
+    const { recentlyVisitedResources } = useUserPreferences({
+        recentlyVisitedFetchConfig: {
+            id: appId,
+            name: appName,
+            resourceKind: isJobView ? ResourceKindType.job : ResourceKindType.devtronApplication,
+            isDataAvailable: isAppDataAvailable,
+        },
+    })
 
-    const recentlyVisitedDevtronApps =
-        userPreferences?.resources?.[ResourceKindType.devtronApplication]?.[
-            UserPreferenceResourceActions.RECENTLY_VISITED
-        ] || ([] as BaseAppMetaData[])
+    const [inputValue, setInputValue] = useState('')
 
-    const isAppDataAvailable = !!appId && !!appName
-    const shouldFetchAppOptions = isJobView ? true : !!recentlyVisitedDevtronApps.length
+    const shouldFetchAppOptions = !!recentlyVisitedResources.length
 
-    const [loading, selectOptions] = useAsync(
+    const [loading, selectOptions, error, reload] = useAsync(
         () =>
             appListOptions({
                 inputValue,
                 isJobView,
                 signal: abortControllerRef.current.signal,
-                recentlyVisitedDevtronApps,
+                recentlyVisitedResources,
             }),
-        [inputValue, isJobView],
+        [inputValue, appId, appName],
         isAppDataAvailable && shouldFetchAppOptions,
     )
-
-    // fetching recently visited apps only in case of devtron apps
-    useAsync(
-        () => fetchRecentlyVisitedParsedApps({ appId, appName }),
-        [appId, appName],
-        isAppDataAvailable && !isJobView,
-    )
-
     const onInputChange: SelectPickerProps['onInputChange'] = async (val) => {
         setInputValue(val)
     }
 
-    const customSelect: SelectPickerProps['filterOption'] = (option, searchText: string) => {
-        const label = option.data.label as string
-        return option.data.value === 0 || label.toLowerCase().includes(searchText.toLowerCase())
-    }
-
-    const getDisabledOptions = (option: RecentlyVisitedOptions): SelectPickerProps['isDisabled'] => option.isDisabled
-
-    const noOptionsMessage = () =>
-        isJobView
-            ? appSelectorNoOptionsMessage({
-                  inputValue,
-              })
-            : getNoMatchingResultText()
-
-    const _selectOption = selectOptions?.map((section) => ({
-        ...section,
-        options: section.label === 'Recently Visited' ? section.options.slice(1) : section.options,
-    }))
-
     const handleChange = (
         selectedOption: RecentlyVisitedOptions,
         actionMeta: ActionMeta<SelectPickerOptionType<string | number>>,
@@ -101,30 +71,24 @@ const AppSelector = ({ onChange, appId, appName, isJobView }: AppSelectorType) =
 
         onChange(selectedOption, actionMeta)
 
-        if (!isJobView) {
-            ReactGA.event(
-                selectedOption.isRecentlyVisited
-                    ? APP_DETAILS_GA_EVENTS.RecentlyVisitedApps
-                    : APP_DETAILS_GA_EVENTS.SearchesAppClicked,
-            )
-        }
+        handleAnalyticsEvent({
+            category: isJobView ? 'Job Selector' : 'App Selector',
+            action: getAppSelectGAEvent(selectedOption, isJobView),
+        })
     }
 
     return (
-        <SelectPicker
-            inputId={`${isJobView ? 'job' : 'app'}-name`}
-            options={_selectOption || []}
+        <ContextSwitcher
+            inputId={`${isJobView ? `job-switcher-${appId}` : `app-switcher-${appId}`}`}
+            options={selectOptions}
             inputValue={inputValue}
             onInputChange={onInputChange}
             isLoading={loading}
-            noOptionsMessage={noOptionsMessage}
             onChange={handleChange}
             value={{ value: appId, label: appName }}
-            variant={SelectPickerVariantType.BORDER_LESS}
             placeholder={appName}
-            isOptionDisabled={getDisabledOptions}
-            size={ComponentSizeType.xl}
-            filterOption={customSelect}
+            optionListError={error}
+            reloadOptionList={reload}
         />
     )
 }

src/components/AppSelector/AppSelector.tsx

@@ -1,6 +1,4 @@
-import { GroupBase } from 'react-select'
-
-import { BaseAppMetaData, SelectPickerOptionType, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
+import { BaseRecentlyVisitedEntitiesTypes, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
 
 import { AppHeaderType } from '@Components/app/types'
 
@@ -9,19 +7,20 @@ export interface AppSelectorType extends Pick<SelectPickerProps, 'onChange'>, Pi
     isJobView?: boolean
 }
 
-export interface RecentlyVisitedOptions extends SelectPickerOptionType<number> {
-    isDisabled?: boolean
-    isRecentlyVisited?: boolean
-}
-
-export interface RecentlyVisitedGroupedOptionsType extends GroupBase<SelectPickerOptionType<number>> {
-    label: string
-    options: RecentlyVisitedOptions[]
-}
-
 export interface AppListOptionsTypes {
     inputValue: string
     isJobView?: boolean
     signal?: AbortSignal
-    recentlyVisitedDevtronApps?: BaseAppMetaData[] | []
+    recentlyVisitedResources?: BaseRecentlyVisitedEntitiesTypes[] | []
+}
+
+export interface ChartSelectorType {
+    primaryKey: string // url match
+    primaryValue: string
+    matchedKeys: string[]
+    api: (queryString?: string) => Promise<any>
+    apiPrimaryKey?: string // primary key to generate map
+    onChange?: ({ label, value }) => void
+    formatOptionLabel?: ({ label, value, ...rest }) => React.ReactNode
+    filterOption?: (option: any, searchString: string) => boolean
 }

src/components/AppSelector/AppSelector.types.ts

@@ -14,19 +14,26 @@
  * limitations under the License.
  */
 
-import { BaseAppMetaData, getIsRequestAborted, ServerErrors, showError } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    BaseRecentlyVisitedEntitiesTypes,
+    getIsRequestAborted,
+    RecentlyVisitedGroupedOptionsType,
+    RecentlyVisitedOptions,
+    ServerErrors,
+    showError,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { getAppListMin } from '../../services/service'
-import { AppListOptionsTypes, RecentlyVisitedGroupedOptionsType, RecentlyVisitedOptions } from './AppSelector.types'
-import { AllApplicationsMetaData } from './constants'
+import { AppListOptionsTypes } from './AppSelector.types'
+import { appSelectorGAEvents, getMinCharSearchPlaceholderGroup } from './constants'
 
 let timeoutId
 
 export const appListOptions = ({
     inputValue,
     isJobView = false,
     signal,
-    recentlyVisitedDevtronApps,
+    recentlyVisitedResources,
 }: AppListOptionsTypes): Promise<RecentlyVisitedGroupedOptionsType[]> => {
     const options = signal ? { signal } : null
 
@@ -37,22 +44,22 @@ export const appListOptions = ({
         timeoutId = setTimeout(() => {
             if (inputValue.length < 3) {
                 resolve(
-                    recentlyVisitedDevtronApps?.length && !isJobView
+                    recentlyVisitedResources?.length
                         ? [
                               {
                                   label: 'Recently Visited',
-                                  options: recentlyVisitedDevtronApps.map((app: BaseAppMetaData) => ({
-                                      label: app.appName,
-                                      value: app.appId,
+                                  options: recentlyVisitedResources.map((app: BaseRecentlyVisitedEntitiesTypes) => ({
+                                      label: app.name,
+                                      value: app.id,
                                       isRecentlyVisited: true,
                                   })) as RecentlyVisitedOptions[],
                               },
-                              AllApplicationsMetaData,
+                              getMinCharSearchPlaceholderGroup(isJobView ? 'Jobs' : 'Apps'),
                           ]
                         : [],
                 )
             } else {
-                getAppListMin(null, options, inputValue, isJobView ?? false)
+                getAppListMin(null, options, inputValue, isJobView)
                     .then((response) => {
                         const appList = response.result
                             ? ([
@@ -80,3 +87,16 @@ export const appListOptions = ({
         }, 300)
     })
 }
+
+export const getAppSelectGAEvent = (selectedOption: RecentlyVisitedOptions, isJobView) => {
+    if (isJobView) {
+        if (selectedOption.isRecentlyVisited) {
+            return appSelectorGAEvents.JOB_SWITCH_RECENTLY_VISITED_CLICKED
+        }
+        return appSelectorGAEvents.JOB_SWITCH_SEARCHED_ITEM_CLICKED
+    }
+    if (selectedOption.isRecentlyVisited) {
+        return appSelectorGAEvents.DA_SWITCH_RECENTLY_VISITED_CLICKED
+    }
+    return appSelectorGAEvents.DA_SWITCH_SEARCHED_APP_CLICKED
+}

src/components/AppSelector/AppSelectorUtil.tsx

@@ -14,22 +14,19 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { useParams, useHistory, generatePath, useRouteMatch } from 'react-router-dom'
-import Select from 'react-select'
-import { useAsync, APP_SELECTOR_STYLES, AppSelectorDropdownIndicator } from '@devtron-labs/devtron-fe-common-lib'
+import { GroupBase } from 'react-select'
+import {
+    useAsync,
+    SelectPickerOptionType,
+    ContextSwitcher,
+    Icon,
+    handleAnalyticsEvent,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { mapByKey } from '../common'
+import { ChartSelectorType } from './AppSelector.types'
+import { appSelectorGAEvents } from './constants'
 
-interface ChartSelectorType {
-    primaryKey: string // url match
-    primaryValue: string
-    matchedKeys: string[]
-    api: () => Promise<any>
-    apiPrimaryKey?: string // primary key to generate map
-    onChange?: ({ label, value }) => void
-    formatOptionLabel?: ({ label, value, ...rest }) => React.ReactNode
-    filterOption?: (option: any, searchString: string) => boolean
-}
 export default function ChartSelector({
     primaryKey,
     primaryValue,
@@ -46,35 +43,51 @@ export default function ChartSelector({
     const params = useParams()
     const { push } = useHistory()
     const _primaryKey = Number(params[primaryKey])
-    function selectApp(selected) {
+    const selectApp = (selected) => {
         if (onChange) {
             onChange(selected)
             return
         }
+        handleAnalyticsEvent({
+            category: 'Chart Store',
+            action: appSelectorGAEvents.CS_CHART_DETAIL_SWITCH_ITEM_CLICKED,
+        })
         const keys = listMap.get(selected.value)
         const replacements = [...matchedKeys].reduce((agg, curr) => ({ ...agg, [curr]: keys[curr] }), {})
         const newUrl = generatePath(path, { ...replacements, [primaryKey]: selected.value })
         push(newUrl)
     }
+
+    const getChartsOptions = (): GroupBase<SelectPickerOptionType<string | number>>[] => [
+        {
+            label: 'All Charts',
+            options:
+                result?.result?.map((res) => ({
+                    value: res[apiPrimaryKey || primaryKey],
+                    label: res[primaryValue],
+                    description: res.chart_name || res.docker_artifact_store_id,
+                    endIcon: res.deprecated && <Icon name="ic-warning" color={null} size={16} />,
+                })) || [],
+        },
+    ]
+
+    const selectedChartLabel = listMap.has(_primaryKey) ? (listMap.get(_primaryKey)[primaryValue] as string) : ''
+
     return (
-        <Select
-            options={result?.result?.map((res) => ({
-                value: res[apiPrimaryKey || primaryKey],
-                label: res[primaryValue],
-                ...res,
-            }))}
+        <ContextSwitcher
+            inputId={`chart-switcher-${_primaryKey}`}
+            options={getChartsOptions()}
+            isLoading={loading}
+            onChange={selectApp}
             value={{
                 value: _primaryKey,
-                label: listMap.has(_primaryKey) ? (listMap.get(_primaryKey)[primaryValue] as string) : '',
+                label: selectedChartLabel,
             }}
+            placeholder={selectedChartLabel}
             {...(formatOptionLabel ? { formatOptionLabel } : {})}
             {...(filterOption ? { filterOption } : {})}
-            onChange={selectApp}
-            components={{
-                IndicatorSeparator: null,
-                DropdownIndicator: AppSelectorDropdownIndicator,
-            }}
-            styles={APP_SELECTOR_STYLES}
+            optionListError={error}
+            reloadOptionList={reload}
         />
     )
 }

src/components/AppSelector/ChartSelector.tsx

@@ -1,17 +1,14 @@
-import { RecentlyVisitedGroupedOptionsType } from './AppSelector.types'
+import { RecentlyVisitedGroupedOptionsType } from '@devtron-labs/devtron-fe-common-lib'
 
-export const AllApplicationsMetaData: RecentlyVisitedGroupedOptionsType = {
-    label: 'All Applications',
+export const getMinCharSearchPlaceholderGroup = (resourceKind): RecentlyVisitedGroupedOptionsType => ({
+    label: `All ${resourceKind}`,
     options: [{ value: 0, label: 'Type 3 characters to search', isDisabled: true }],
-}
+})
 
-export const APP_DETAILS_GA_EVENTS = {
-    RecentlyVisitedApps: {
-        category: 'App Selector',
-        action: 'DA_SWITCH_RECENTLY_VISITED_CLICKED',
-    },
-    SearchesAppClicked: {
-        category: 'App Selector',
-        action: 'DA_SWITCH_SEARCHED_APP_CLICKED',
-    },
+export const appSelectorGAEvents = {
+    DA_SWITCH_RECENTLY_VISITED_CLICKED: 'DA_SWITCH_RECENTLY_VISITED_CLICKED',
+    DA_SWITCH_SEARCHED_APP_CLICKED: 'DA_SWITCH_SEARCHED_APP_CLICKED',
+    JOB_SWITCH_RECENTLY_VISITED_CLICKED: 'JOB_SWITCH_RECENTLY_VISITED_CLICKED',
+    JOB_SWITCH_SEARCHED_ITEM_CLICKED: 'JOB_SWITCH_SEARCHED_ITEM_CLICKED',
+    CS_CHART_DETAIL_SWITCH_ITEM_CLICKED: 'CS_CHART_DETAIL_SWITCH_ITEM_CLICKED',
 }