chore: code refactoring

Author: shivani170

src/Pages/App/CreateAppModal/AppClone/AppCloneList.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react'
-
 import {
     Button,
     ComponentSizeType,
@@ -18,25 +16,16 @@ import { useDevtronCloneList } from './useDevtronCloneList'
 
 export const AppCloneList = ({ handleCloneAppClick, isJobView, handleCreationMethodChange }: AppCloneListProps) => {
     const { searchKey, handleSearch, clearFilters } = useStateFilters()
-    const [isLoadingMoreJobList, setIsLoadingMoreJobList] = useState<boolean>(false)
-    const [hasError, setHasError] = useState<boolean>(false)
 
-    const { isListLoading, list, listError, reloadList, loadMoreData, hasMoreData } = useDevtronCloneList({
-        handleCloneAppClick,
-        isJobView,
-    })
+    const { isListLoading, list, listError, reloadList, loadMoreData, hasMoreData, isLoadingMore, hasError } =
+        useDevtronCloneList({
+            handleCloneAppClick,
+            isJobView,
+        })
 
     const handleLoadMore = async () => {
-        if (isLoadingMoreJobList || !hasMoreData) return
-        setIsLoadingMoreJobList(true)
-        setHasError(false)
-        try {
-            await loadMoreData()
-        } catch {
-            setHasError(true)
-        } finally {
-            setIsLoadingMoreJobList(false)
-        }
+        if (isLoadingMore || !hasMoreData) return
+        await loadMoreData()
     }
 
     const handleCreateFromScratch = () => {
@@ -82,9 +71,9 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView, handleCreationMet
                         renderButton: renderCreateFromScratchButton,
                     }}
                 />
-                {hasMoreData && isLoadingMoreJobList && <GenericInfoListSkeleton />}
+                {hasMoreData && isLoadingMore && <GenericInfoListSkeleton />}
 
-                {hasMoreData && !isLoadingMoreJobList && <DetectBottom callback={handleLoadMore} hasError={hasError} />}
+                {hasMoreData && !isLoadingMore && <DetectBottom callback={handleLoadMore} hasError={hasError} />}
             </div>
         </div>
     )

src/Pages/App/CreateAppModal/AppClone/types.ts

@@ -1,6 +1,7 @@
 import { BaseAppMetaData } from '@devtron-labs/devtron-fe-common-lib'
 
 import { JobList } from '@Components/Jobs/Types'
+import { APP_TYPE } from '@Config/constants'
 import { AppListMin } from '@Services/service.types'
 
 import { SidebarProps } from '../types'
@@ -10,6 +11,8 @@ export interface AppCloneListProps extends Pick<SidebarProps, 'handleCreationMet
     isJobView?: boolean
 }
 
-export type DevtronListResponse = { type: 'job'; data: JobList } | { type: 'app'; data: AppListMin }
+export type DevtronListResponse =
+    | { type: APP_TYPE.JOB; data: JobList }
+    | { type: APP_TYPE.DEVTRON_APPS; data: AppListMin }
 
 export interface DevtronAppCloneListProps extends Pick<AppCloneListProps, 'handleCloneAppClick' | 'isJobView'> {}

src/Pages/App/CreateAppModal/AppClone/useDevtronCloneList.tsx

@@ -3,7 +3,13 @@
  */
 import { useEffect, useMemo, useRef, useState } from 'react'
 
-import { abortPreviousRequests, getIsRequestAborted, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    abortPreviousRequests,
+    getIsRequestAborted,
+    showError,
+    useAsync,
+    useStateFilters,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { getJobs } from '@Components/Jobs/Service'
 import { APP_TYPE } from '@Config/constants'
@@ -15,8 +21,10 @@ import { DevtronAppCloneListProps, DevtronListResponse } from './types'
 export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronAppCloneListProps) => {
     const cloneListAbortControllerRef = useRef(new AbortController())
     const [isLoadingMore, setIsLoadingMore] = useState(false)
+    const [hasError, setHasError] = useState(false)
+    const { searchKey } = useStateFilters()
 
-    const [isListLoading, listResponse, listError, reloadList, setListResponse] = useAsync<DevtronListResponse>(() =>
+    const fetchDevtronCloneList = (offset = 0): Promise<DevtronListResponse> =>
         abortPreviousRequests(
             () =>
                 isJobView
@@ -25,10 +33,11 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronA
                               teams: [],
                               appStatuses: [],
                               appNameSearch: '',
-                              offset: 0,
+                              offset,
                               size: 20,
                               sortBy: 'appNameSort',
                               sortOrder: 'ASC',
+                              searchKey,
                           },
                           {
                               signal: cloneListAbortControllerRef.current.signal,
@@ -39,7 +48,10 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronA
                           data: res,
                       })),
             cloneListAbortControllerRef,
-        ),
+        )
+
+    const [isListLoading, listResponse, listError, reloadList, setListResponse] = useAsync<DevtronListResponse>(() =>
+        fetchDevtronCloneList(0),
     )
 
     useEffect(
@@ -62,35 +74,28 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronA
             if (listResponse.type === APP_TYPE.JOB) {
                 const currentJobContainers = listResponse.data.result?.jobContainers ?? []
 
-                const response = await getJobs(
-                    {
-                        teams: [],
-                        appStatuses: [],
-                        appNameSearch: '',
-                        offset: currentJobContainers.length,
-                        size: 20,
-                        sortBy: 'appNameSort',
-                        sortOrder: 'ASC',
-                    },
-                    {
-                        signal: cloneListAbortControllerRef.current.signal,
-                    },
-                )
-
-                const newJobContainers = response.result?.jobContainers ?? []
+                const response: DevtronListResponse = await fetchDevtronCloneList(currentJobContainers.length)
 
                 // Update the list response with the new data
                 setListResponse({
                     type: APP_TYPE.JOB,
                     data: {
                         ...response,
                         result: {
-                            ...response.result,
-                            jobContainers: [...currentJobContainers, ...newJobContainers],
+                            ...response.data,
+                            jobContainers: [
+                                ...currentJobContainers,
+                                ...('jobContainers' in response.data.result
+                                    ? response.data.result.jobContainers || []
+                                    : []),
+                            ],
                         },
                     },
                 })
             }
+        } catch (error) {
+            setHasError(true)
+            showError(error)
         } finally {
             setIsLoadingMore(false)
         }
@@ -104,5 +109,7 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronA
         totalCount,
         loadMoreData,
         hasMoreData: listResponse?.type === APP_TYPE.JOB && list.length < totalCount,
+        hasError,
+        isLoadingMore,
     }
 }

src/Pages/App/CreateAppModal/CloneApplicationSelectionList.tsx

@@ -37,18 +37,14 @@ export const CloneApplicationSelectionList = ({
 }: ApplicationSelectionListProps) => {
     const isCreationMethodTemplate = selectedCreationMethod === CreationMethodType.template
 
-    const goBackToTemplatesList = () =>
+    const handleGoBack = () => {
         handleFormStateChange({
-            action: CreateAppFormStateActionType.updateTemplateConfig,
-            value: null,
-        })
-
-    const goBackToAppCloneList = () =>
-        handleFormStateChange({
-            action: CreateAppFormStateActionType.updateCloneAppConfig,
+            action: isCreationMethodTemplate
+                ? CreateAppFormStateActionType.updateTemplateConfig
+                : CreateAppFormStateActionType.updateCloneAppConfig,
             value: null,
         })
-
+    }
     const handleTemplateClick = ({ id, templateId, name }: CreateAppFormStateType['templateConfig']) => {
         handleFormStateChange({
             action: CreateAppFormStateActionType.updateTemplateConfig,
@@ -99,7 +95,6 @@ export const CloneApplicationSelectionList = ({
     }
 
     const renderAppInfoForm = () => {
-        const goBack = isCreationMethodTemplate ? goBackToTemplatesList : goBackToAppCloneList
         const breadcrumbText = getBreadcrumbText()
         const breadcrumbDataTestId = isCreationMethodTemplate ? 'template-list-breadcrumb' : 'clone-list-breadcrumb'
         const icon = isCreationMethodTemplate ? (
@@ -124,14 +119,14 @@ export const CloneApplicationSelectionList = ({
                         style={ButtonStyleType.neutral}
                         size={ComponentSizeType.xs}
                         showAriaLabelInTippy={false}
-                        onClick={goBack}
+                        onClick={handleGoBack}
                     />
                     <div className="flex left dc__gap-6">
                         <Button
                             dataTestId={breadcrumbDataTestId}
                             variant={ButtonVariantType.text}
                             text={breadcrumbText}
-                            onClick={goBack}
+                            onClick={handleGoBack}
                         />
                         <span className="fs-13">/</span>
                         <p className="m-0 flex left dc__gap-6">

src/Pages/App/CreateAppModal/CreateAppModal.component.tsx

@@ -251,7 +251,7 @@ const CreateAppModal = ({ isJobView, handleClose }: CreateAppModalProps) => {
         const { isFormValid, invalidLabels, labelTags, invalidWorkFlow } = validateForm()
 
         if (isCreationMethodTemplate) {
-            if (!formState.templateConfig?.templateId || !formState.cloneAppConfig?.appId) {
+            if (!formState.templateConfig?.templateId) {
                 ToastManager.showToast({
                     variant: ToastVariantType.error,
                     description: getNoItemSelectToastText(CreationMethodType.template),
@@ -328,11 +328,12 @@ const CreateAppModal = ({ isJobView, handleClose }: CreateAppModalProps) => {
     }
 
     const handleCreationMethodChange = (method: CreationMethodType) => {
-        setFormState((prev) => ({
-            ...prev,
-            templateConfig: null,
-            cloneAppConfig: null,
-        }))
+        handleFormStateChange({
+            action: isCreationMethodTemplate
+                ? CreateAppFormStateActionType.updateTemplateConfig
+                : CreateAppFormStateActionType.updateCloneAppConfig,
+            value: null,
+        })
 
         setSelectedCreationMethod(method)
     }

src/Pages/App/CreateAppModal/UpdateTemplateConfig.tsx

@@ -41,7 +41,7 @@ const UpdateTemplateConfig = ({
     handleFormStateChange,
     formErrorState,
 }: UpdateTemplateConfigProps) => {
-    const stringTemplateDbId = formState.templateConfig?.id.toString()
+    const stringTemplateDbId = formState.templateConfig.id.toString()
 
     const handleBuildConfigurationChange: CIConfigProps['updateDockerConfigOverride'] = (key, value) => {
         switch (key) {

src/components/app/Overview/utils.tsx

@@ -36,19 +36,20 @@ export const getResourceKindFromAppType = (appType: AppOverviewProps['appType'])
 }
 
 export const getAppConfig = (appType: AppOverviewProps['appType'], iconSize: IconBaseSizeType = 48) => {
+    const icon = getAppIconWithBackground(appType, iconSize)
     switch (appType) {
         case 'app':
             return {
                 resourceName: 'application',
                 defaultNote: DefaultAppNote,
-                icon: getAppIconWithBackground(appType, iconSize),
+                icon: icon,
                 defaultDescription: APP_DESCRIPTION,
             }
         case 'job':
             return {
                 resourceName: 'job',
                 defaultNote: DefaultJobNote,
-                icon: getAppIconWithBackground(appType, iconSize),
+                icon: icon,
                 defaultDescription: JOB_DESCRIPTION,
             }
         case 'helm-chart':