chore: code cleanup

Author: shivani170

src/components/AppSelector/ChartSelector.tsx

@@ -69,6 +69,8 @@ export default function ChartSelector({
         },
     ]
 
+    const selectedChartLabel = listMap.has(_primaryKey) ? (listMap.get(_primaryKey)[primaryValue] as string) : ''
+
     return (
         <ContextSwitcher
             inputId="chart-select"
@@ -79,9 +81,9 @@ export default function ChartSelector({
             onChange={selectApp}
             value={{
                 value: _primaryKey,
-                label: listMap.has(_primaryKey) ? (listMap.get(_primaryKey)[primaryValue] as string) : '',
+                label: selectedChartLabel,
             }}
-            placeholder={_primaryKey}
+            placeholder={selectedChartLabel}
             {...(formatOptionLabel ? { formatOptionLabel } : {})}
             {...(filterOption ? { filterOption } : {})}
         />

src/components/ApplicationGroup/AppGroup.utils.ts

@@ -177,9 +177,9 @@ export const envListOptions = (
                         ? [
                               {
                                   label: 'Recently Visited',
-                                  options: recentlyVisitedDevtronApps.map((app: BaseRecentlyVisitedEntitiesTypes) => ({
-                                      label: app.name,
-                                      value: app.id,
+                                  options: recentlyVisitedDevtronApps.map((env: BaseRecentlyVisitedEntitiesTypes) => ({
+                                      label: env.name,
+                                      value: env.id,
                                       isRecentlyVisited: true,
                                   })) as RecentlyVisitedOptions[],
                               },

src/components/ApplicationGroup/EnvSelector.tsx

@@ -33,22 +33,22 @@ import { envListOptions } from './AppGroup.utils'
 export const EnvSelector = ({ onChange, envId, envName }: EnvSelectorType) => {
     const abortControllerRef = useRef<AbortController>(new AbortController())
     const defaultOptions = { value: envId, label: envName }
-    const isAppDataAvailable = !!envId && !!envName
+    const isEnvDataAvailable = !!envId && !!envName
 
     const [inputValue, setInputValue] = useState('')
     const { recentlyVisitedResources } = useUserPreferences({
         recentlyVisitedFetchConfig: {
             id: envId,
             name: envName,
             resourceKind: 'app-group',
-            isDataAvailable: isAppDataAvailable,
+            isDataAvailable: isEnvDataAvailable,
         },
     })
 
     const [loading, selectOptions] = useAsync(
         () => envListOptions(inputValue, abortControllerRef.current.signal, recentlyVisitedResources),
         [inputValue, recentlyVisitedResources],
-        isAppDataAvailable && !!recentlyVisitedResources.length,
+        isEnvDataAvailable && !!recentlyVisitedResources.length,
     )
 
     const onInputChange: SelectPickerProps['onInputChange'] = async (val) => {

src/components/ResourceBrowser/ResourceBrowser.service.tsx

@@ -19,7 +19,6 @@ import { RefObject } from 'react'
 import {
     APIOptions,
     ApiResourceType,
-    BaseRecentlyVisitedEntitiesTypes,
     ClusterDetail,
     get,
     getIsRequestAborted,
@@ -28,23 +27,17 @@ import {
     getNamespaceListMin,
     getUrlWithSearchParams,
     Nodes,
-    RecentlyVisitedGroupedOptionsType,
-    RecentlyVisitedOptions,
     ResponseType,
     showError,
     stringComparatorBySortOrder,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import {} from '@Components/AppSelector/AppSelector.types'
-import { getMinCharSearchPlaceholderGroup } from '@Components/AppSelector/constants'
 import {
     getClusterListMinWithInstalledClusters,
     getClusterListWithInstalledClusters,
 } from '@Components/ClusterNodes/clusterNodes.service'
 
 import { Routes } from '../../config'
-import { ClusterListOptionsTypes } from './ResourceList/types'
-import { getOptionsValue } from './ResourceList/utils'
 import { SIDEBAR_KEYS } from './Constants'
 import { GetResourceDataType, NodeRowDetail, URLParams } from './Types'
 import { parseNodeList } from './Utils'
@@ -154,41 +147,3 @@ export const getClusterListing = async (
         throw err
     }
 }
-
-export const clusterListOptions = ({
-    clusterList,
-    isInstallationStatusView = false,
-    inputValue,
-    recentlyVisitedResources,
-}: ClusterListOptionsTypes): Promise<RecentlyVisitedGroupedOptionsType[]> =>
-    new Promise((resolve) => {
-        setTimeout(() => {
-            if (inputValue.length < 3) {
-                resolve(
-                    recentlyVisitedResources?.length
-                        ? [
-                              {
-                                  label: 'Recently Visited',
-                                  options: recentlyVisitedResources.map((app: BaseRecentlyVisitedEntitiesTypes) => ({
-                                      label: app.name,
-                                      value: app.id,
-                                      isRecentlyVisited: true,
-                                  })) as RecentlyVisitedOptions[],
-                              },
-                              getMinCharSearchPlaceholderGroup('Clusters'),
-                          ]
-                        : [],
-                )
-            } else {
-                resolve([
-                    {
-                        label: 'All Clusters',
-                        options: clusterList?.map((option) => ({
-                            ...option,
-                            value: +getOptionsValue(option, isInstallationStatusView),
-                        })) as RecentlyVisitedOptions[],
-                    },
-                ] as RecentlyVisitedGroupedOptionsType[])
-            }
-        }, 300)
-    })

src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx

@@ -23,19 +23,16 @@ import {
     ContextSwitcher,
     Icon,
     PopupMenu,
-    ResourceKindType,
     SelectPickerProps,
-    useAsync,
-    useUserPreferences,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as MenuDots } from '@Icons/ic-more-vertical.svg'
 import { DEFAULT_CLUSTER_ID } from '@Pages/GlobalConfigurations/ClustersAndEnvironments'
 import DeleteClusterConfirmationModal from '@Pages/GlobalConfigurations/ClustersAndEnvironments/DeleteClusterConfirmationModal'
 
 import { URLS } from '../../../config'
-import { clusterListOptions } from '../ResourceBrowser.service'
 import { ClusterSelectorType } from '../Types'
+import { getClusterSelectOptions } from './utils'
 
 const ClusterSelector: React.FC<ClusterSelectorType> = ({
     onChange,
@@ -54,19 +51,7 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
         isInstallationStatusView ? String(item.installationId) === clusterId : String(item.value) === clusterId,
     )
 
-    const clusterName = defaultOption?.label
-
     const [inputValue, setInputValue] = useState('')
-    const isAppDataAvailable = !!clusterId && !!clusterName
-
-    const { recentlyVisitedResources } = useUserPreferences({
-        recentlyVisitedFetchConfig: {
-            id: +clusterId,
-            name: clusterName,
-            resourceKind: ResourceKindType.cluster,
-            isDataAvailable: isAppDataAvailable,
-        },
-    })
 
     const [openDeleteClusterModal, setOpenDeleteClusterModal] = useState(false)
 
@@ -86,26 +71,14 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
         replace(URLS.RESOURCE_BROWSER)
     }
 
-    const [loading, selectOption] = useAsync(
-        () =>
-            clusterListOptions({
-                clusterList: filteredClusterList,
-                inputValue,
-                recentlyVisitedResources,
-                isInstallationStatusView,
-            }),
-        [filteredClusterList, inputValue, recentlyVisitedResources],
-        isAppDataAvailable && !!recentlyVisitedResources.length,
-    )
-
     return (
         <div className="flexbox dc__align-items-center dc__gap-12">
             <ContextSwitcher
                 inputId="cluster-select-header"
-                isLoading={loading || isClusterListLoading}
+                isLoading={isClusterListLoading}
                 onChange={onChange}
                 value={defaultOption}
-                options={selectOption}
+                options={getClusterSelectOptions(filteredClusterList, isInstallationStatusView)}
                 inputValue={inputValue}
                 onInputChange={onInputChange}
             />

src/components/ResourceBrowser/ResourceList/utils.tsx

@@ -14,7 +14,15 @@
  * limitations under the License.
  */
 
-import { ClusterDetail, DocLink, DocLinkProps, logExceptionToSentry, noop } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ClusterDetail,
+    DocLink,
+    DocLinkProps,
+    logExceptionToSentry,
+    noop,
+    RecentlyVisitedGroupedOptionsType,
+    RecentlyVisitedOptions,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { sortObjectArrayAlphabetically } from '@Components/common'
 
@@ -156,3 +164,13 @@ export const getOptionsValue = (option: ClusterOptionType, isInstallationStatusV
     // get its value as installationId. Prefixing it with installation- to avoid collision with normal clusters have same value of
     // clusterId as this installationId
     isInstallationStatusView ? `installation-${String(option.installationId)}` : option.value
+
+export const getClusterSelectOptions = (clusterList, isInstallationStatusView): RecentlyVisitedGroupedOptionsType[] => [
+    {
+        label: 'All Clusters',
+        options: clusterList?.map((option) => ({
+            ...option,
+            value: +getOptionsValue(option, isInstallationStatusView),
+        })) as RecentlyVisitedOptions[],
+    },
+]

src/components/app/details/main.tsx

@@ -73,7 +73,7 @@ const AIAgentContextSetterWrapper = ({ children, appName }: PropsWithChildren<{
             contextData['Workflow_id'] = contextData.buildId
             delete contextData.buildId
         }
-        setAIAgentContext({ path, context: { appName, ...contextData }})
+        setAIAgentContext({ path, context: { appName, ...contextData } })
     }, [path, url])
 
     return <>{children}</>
@@ -101,7 +101,10 @@ export default function AppDetailsPage() {
     const [apiError, setApiError] = useState(null)
     const [initLoading, setInitLoading] = useState<boolean>(false)
 
-    const { fetchRecentlyVisitedParsedEntities } = useUserPreferences({recentlyVisitedFetchConfig: { id: appId, name: '', resourceKind: ResourceKindType.devtronApplication }})
+    // Passing name value as empty string to check if app exists
+    const { fetchRecentlyVisitedParsedEntities } = useUserPreferences({
+        recentlyVisitedFetchConfig: { id: appId, name: '', resourceKind: ResourceKindType.devtronApplication },
+    })
 
     const getAppMetaInfoRes = async (shouldResetAppName: boolean = false): Promise<AppMetaInfo> => {
         try {