Merge pull request #2705 from devtron-labs/feat/app-clone-flow

feat: app clone flow

Author: shivani170

package.json

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

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

@@ -0,0 +1,81 @@
+import {
+    Button,
+    ComponentSizeType,
+    DetectBottom,
+    GenericInfoCardBorderVariant,
+    GenericInfoCardListing,
+    GenericInfoListSkeleton,
+    Icon,
+    SearchBar,
+    useStateFilters,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { CreationMethodType } from '../types'
+import { AppCloneListProps } from './types'
+import { useDevtronCloneList } from './useDevtronCloneList'
+
+export const AppCloneList = ({ handleCloneAppClick, isJobView, handleCreationMethodChange }: AppCloneListProps) => {
+    const { searchKey, handleSearch, clearFilters } = useStateFilters()
+
+    const { isListLoading, list, listError, reloadList, loadMoreData, hasMoreData, isLoadingMore, hasError } =
+        useDevtronCloneList({
+            handleCloneAppClick,
+            isJobView,
+            searchKey,
+        })
+
+    const handleLoadMore = async () => {
+        if (isLoadingMore || !hasMoreData) return
+        await loadMoreData()
+    }
+
+    const handleCreateFromScratch = () => {
+        handleCreationMethodChange(CreationMethodType.blank)
+    }
+
+    const renderCreateFromScratchButton = () => (
+        <Button
+            dataTestId="create-app-modal-create-from-scratch-btn"
+            text="Create from scratch"
+            onClick={handleCreateFromScratch}
+            startIcon={<Icon name="ic-new" color={null} />}
+        />
+    )
+
+    return (
+        <div className="flex-grow-1 flexbox-col dc__overflow-auto">
+            <div className="flexbox-col dc__gap-12 pt-20 px-20">
+                <h2 className="m-0 fs-15 lh-1-5 fw-6 cn-9">Choose {isJobView ? 'a job' : 'an application'} to clone</h2>
+
+                <SearchBar
+                    dataTestId="template-list-search"
+                    initialSearchText={searchKey}
+                    size={ComponentSizeType.medium}
+                    handleEnter={handleSearch}
+                    inputProps={{
+                        placeholder: `Search ${isJobView ? 'job' : 'application'}`,
+                    }}
+                />
+            </div>
+            <div className="flex-grow-1 flexbox-col dc__gap-12 p-20 dc__overflow-auto">
+                <GenericInfoCardListing
+                    borderVariant={GenericInfoCardBorderVariant.ROUNDED}
+                    list={list}
+                    searchKey={searchKey}
+                    isLoading={isListLoading}
+                    error={listError}
+                    reloadList={reloadList}
+                    handleClearFilters={clearFilters}
+                    emptyStateConfig={{
+                        title: 'Nothing to Clone… Yet!',
+                        subTitle: `You haven’t created any ${isJobView ? 'job' : 'application'} to clone. Kick things off by crafting one from scratch—it’s quick and easy!`,
+                        renderButton: renderCreateFromScratchButton,
+                    }}
+                />
+                {hasMoreData && isLoadingMore && <GenericInfoListSkeleton />}
+
+                {hasMoreData && !isLoadingMore && <DetectBottom callback={handleLoadMore} hasError={hasError} />}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,2 @@
+export * from './AppCloneList'
+export { useDevtronCloneList } from './useDevtronCloneList'

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

@@ -0,0 +1,28 @@
+import { BaseAppMetaData, GenericInfoCardListingProps } from '@devtron-labs/devtron-fe-common-lib'
+
+import { APP_TYPE } from '@Config/constants'
+
+import { SidebarProps } from '../types'
+
+export interface AppCloneListProps extends Pick<SidebarProps, 'handleCreationMethodChange'> {
+    handleCloneAppClick: ({ appId, appName }: BaseAppMetaData) => void
+    isJobView?: boolean
+}
+
+export type CloneListResponse = {
+    type: APP_TYPE.DEVTRON_APPS | APP_TYPE.JOB
+    list: GenericInfoCardListingProps['list']
+    totalCount: number
+}
+
+export interface CloneListTypes {
+    offset?: number
+    isJobView?: boolean
+    searchKey?: string
+    cloneListAbortControllerRef: React.MutableRefObject<AbortController>
+    handleCloneAppClick: (app: BaseAppMetaData) => void
+}
+
+export interface DevtronAppCloneListProps extends Pick<AppCloneListProps, 'handleCloneAppClick' | 'isJobView'> {
+    searchKey: string
+}

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

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+import { useEffect, useRef, useState } from 'react'
+
+import { getIsRequestAborted, showError, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+
+import { APP_TYPE } from '@Config/constants'
+
+import { fetchDevtronCloneList } from '../service'
+import { DevtronAppCloneListProps } from './types'
+
+export const useDevtronCloneList = ({ handleCloneAppClick, isJobView, searchKey }: DevtronAppCloneListProps) => {
+    const cloneListAbortControllerRef = useRef(new AbortController())
+    const [isLoadingMore, setIsLoadingMore] = useState(false)
+    const [hasError, setHasError] = useState(false)
+
+    useEffect(
+        () => () => {
+            cloneListAbortControllerRef.current.abort()
+        },
+        [],
+    )
+
+    const [isListLoading, listResponse, listError, reloadList, setListResponse] = useAsync(() =>
+        fetchDevtronCloneList({
+            isJobView,
+            searchKey,
+            cloneListAbortControllerRef,
+            handleCloneAppClick,
+        }),
+    )
+
+    const loadMoreData = async () => {
+        if (isLoadingMore || !listResponse) return
+
+        setIsLoadingMore(true)
+        try {
+            if (listResponse.type === APP_TYPE.JOB) {
+                const currentList = listResponse.list
+
+                const response = await fetchDevtronCloneList({
+                    isJobView,
+                    searchKey,
+                    offset: currentList.length,
+                    cloneListAbortControllerRef,
+                    handleCloneAppClick,
+                })
+
+                setListResponse({
+                    ...response,
+                    list: [...currentList, ...response.list],
+                })
+            }
+        } catch (error) {
+            setHasError(true)
+            showError(error)
+        } finally {
+            setIsLoadingMore(false)
+        }
+    }
+
+    return {
+        isListLoading: isListLoading || getIsRequestAborted(listError),
+        list: listResponse?.list ?? [],
+        listError,
+        reloadList,
+        totalCount: listResponse?.totalCount ?? 0,
+        loadMoreData,
+        hasMoreData: listResponse?.type === APP_TYPE.JOB && (listResponse.list?.length ?? 0) < listResponse.totalCount,
+        hasError,
+        isLoadingMore,
+    }
+}

src/Pages/App/CreateAppModal/AppToCloneSelector.tsx

@@ -19,17 +19,15 @@ import { ChangeEvent } from 'react'
 import { CustomInput, TagsContainer, Textarea } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICCaretLeftSmall } from '@Icons/ic-caret-left-small.svg'
-import { ReactComponent as ICDevtronApp } from '@Icons/ic-devtron-app.svg'
 import { importComponentFromFELibrary } from '@Components/common'
 import { APP_TYPE } from '@Config/constants'
+import { getAppIconWithBackground } from '@Config/utils'
 
-import AppToCloneSelector from './AppToCloneSelector'
 import ProjectSelector from './ProjectSelector'
 import {
     ApplicationInfoFormProps,
     CreateAppFormStateActionType,
     CreateAppFormStateType,
-    CreationMethodType,
     HandleFormStateChangeParamsType,
     ProjectSelectorProps,
 } from './types'
@@ -71,17 +69,12 @@ const ApplicationInfoForm = ({
         })
     }
 
-    const handleCloneIdChange = (cloneId) => {
-        handleFormStateChange({
-            action: CreateAppFormStateActionType.updateCloneAppId,
-            value: cloneId,
-        })
-    }
+    const isMandatoryTag = formState.tags.some((tag) => tag.data.tagKey.required)
 
     return (
         // key is required for ensuring autoFocus on name on creation method change
         <div className="flexbox-col dc__gap-16 p-20 br-8 border__secondary bg__primary" key={selectedCreationMethod}>
-            <ICDevtronApp className="icon-dim-48 dc__no-shrink" />
+            {getAppIconWithBackground(isJobView ? APP_TYPE.JOB : APP_TYPE.DEVTRON_APPS, 48)}
             <div className="flexbox dc__gap-8">
                 <ProjectSelector
                     selectedProjectId={formState.projectId}
@@ -122,7 +115,9 @@ const ApplicationInfoForm = ({
                     <ICCaretLeftSmall
                         className={`scn-7 dc__no-shrink dc__transition--transform ${isTagsAccordionExpanded ? 'dc__flip-270' : 'dc__flip-180'}`}
                     />
-                    <span className="fs-13 fw-6 lh-20 cn-9">Add tags to {isJobView ? 'job' : 'application'}</span>
+                    <span className={`fs-13 fw-6 lh-20 cn-9 ${isMandatoryTag ? 'dc__required-field' : ''}`}>
+                        Add tags to {isJobView ? 'job' : 'application'}
+                    </span>
                 </button>
                 <div className={!isTagsAccordionExpanded ? 'dc__hide-section' : ''}>
                     {MandatoryTagsContainer ? (
@@ -147,13 +142,6 @@ const ApplicationInfoForm = ({
                     )}
                 </div>
             </div>
-            {selectedCreationMethod === CreationMethodType.clone && (
-                <AppToCloneSelector
-                    error={formErrorState.cloneAppId}
-                    isJobView={isJobView}
-                    handleCloneIdChange={handleCloneIdChange}
-                />
-            )}
         </div>
     )
 }