chore: renaming of component

Author: shivani170

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

@@ -2,6 +2,8 @@ import { useState } from 'react'
 
 import {
     Button,
+    ButtonStyleType,
+    ButtonVariantType,
     ComponentSizeType,
     DetectBottom,
     GenericInfoCardBorderVariant,
@@ -11,10 +13,11 @@ import {
     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 }: AppCloneListProps) => {
+export const AppCloneList = ({ handleCloneAppClick, isJobView, handleCreationMethodChange }: AppCloneListProps) => {
     const { searchKey, handleSearch, clearFilters } = useStateFilters()
     const [isLoadingMoreJobList, setIsLoadingMoreJobList] = useState<boolean>(false)
     const [hasError, setHasError] = useState<boolean>(false)
@@ -38,14 +41,17 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView }: AppCloneListPro
     }
 
     const handleCreateFromScratch = () => {
-        // TODO: Implement create from scratch functionality
+        handleCreationMethodChange(CreationMethodType.blank)
     }
 
     const renderCreateFromScratchButton = () => (
         <Button
             dataTestId="create-app-modal-create-from-scratch-btn"
             text="Create from scratch"
             onClick={handleCreateFromScratch}
+            size={ComponentSizeType.medium}
+            variant={ButtonVariantType.primary}
+            style={ButtonStyleType.default}
         />
     )
 

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

@@ -3,9 +3,13 @@ import { BaseAppMetaData } from '@devtron-labs/devtron-fe-common-lib'
 import { JobList } from '@Components/Jobs/Types'
 import { AppListMin } from '@Services/service.types'
 
-export interface AppCloneListProps {
+import { SidebarProps } from '../types'
+
+export interface AppCloneListProps extends Pick<SidebarProps, 'handleCreationMethodChange'> {
     handleCloneAppClick: ({ appId, appName }: BaseAppMetaData) => void
     isJobView?: boolean
 }
 
 export type DevtronListResponse = { type: 'job'; data: JobList } | { type: 'app'; data: AppListMin }
+
+export interface DevtronAppCloneListProps extends Pick<AppCloneListProps, 'handleCloneAppClick' | 'isJobView'> {}

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

@@ -15,9 +15,9 @@ import { APP_TYPE } from '@Config/constants'
 import { getAppIconWithBackground } from '@Config/utils'
 import { getAppListMin } from '@Services/service'
 
-import { AppCloneListProps, DevtronListResponse } from './types'
+import { DevtronAppCloneListProps, DevtronListResponse } from './types'
 
-export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: AppCloneListProps) => {
+export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronAppCloneListProps) => {
     const cloneListAbortControllerRef = useRef(new AbortController())
     const [isLoadingMore, setIsLoadingMore] = useState(false)
 

src/Pages/App/CreateAppModal/ApplicationSelectionList.tsx renamed to src/Pages/App/CreateAppModal/CloneApplicationSelectionList.tsx

@@ -24,7 +24,7 @@ import UpdateTemplateConfig from './UpdateTemplateConfig'
 
 const TemplateList = importComponentFromFELibrary('TemplateList', null, 'function')
 
-export const ApplicationSelectionList = ({
+export const CloneApplicationSelectionList = ({
     formState,
     selectedCreationMethod,
     isJobView,
@@ -33,6 +33,7 @@ export const ApplicationSelectionList = ({
     handleTagErrorChange,
     isTagsAccordionExpanded,
     toggleIsTagsAccordionExpanded,
+    handleCreationMethodChange,
 }: ApplicationSelectionListProps) => {
     const isCreationMethodTemplate = selectedCreationMethod === CreationMethodType.template
 
@@ -73,7 +74,13 @@ export const ApplicationSelectionList = ({
                     />
                 )
             case CreationMethodType.clone:
-                return <AppCloneList handleCloneAppClick={handleCloneAppClick} isJobView={isJobView} />
+                return (
+                    <AppCloneList
+                        handleCloneAppClick={handleCloneAppClick}
+                        isJobView={isJobView}
+                        handleCreationMethodChange={handleCreationMethodChange}
+                    />
+                )
             default:
                 return null
         }

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

@@ -35,7 +35,7 @@ import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '@Config/routes'
 import { getHostURLConfiguration } from '@Services/service'
 
 import ApplicationInfoForm from './ApplicationInfoForm'
-import { ApplicationSelectionList } from './ApplicationSelectionList'
+import { CloneApplicationSelectionList } from './CloneApplicationSelectionList'
 import { createAppInitialFormErrorState, createAppInitialFormState } from './constants'
 import HeaderSection from './HeaderSection'
 import { createApp } from './service'
@@ -327,6 +327,16 @@ const CreateAppModal = ({ isJobView, handleClose }: CreateAppModalProps) => {
         }
     }
 
+    const handleCreationMethodChange = (method: CreationMethodType) => {
+        setFormState((prev) => ({
+            ...prev,
+            templateConfig: null,
+            cloneAppConfig: null,
+        }))
+
+        setSelectedCreationMethod(method)
+    }
+
     const getSelectedMethodContent = () => {
         switch (selectedCreationMethod) {
             case CreationMethodType.blank:
@@ -345,7 +355,7 @@ const CreateAppModal = ({ isJobView, handleClose }: CreateAppModalProps) => {
             case CreationMethodType.clone:
             case CreationMethodType.template:
                 return (
-                    <ApplicationSelectionList
+                    <CloneApplicationSelectionList
                         formState={formState}
                         formErrorState={formErrorState}
                         selectedCreationMethod={selectedCreationMethod}
@@ -354,23 +364,14 @@ const CreateAppModal = ({ isJobView, handleClose }: CreateAppModalProps) => {
                         isJobView={isJobView}
                         isTagsAccordionExpanded={isTagsAccordionExpanded}
                         toggleIsTagsAccordionExpanded={toggleIsTagsAccordionExpanded}
+                        handleCreationMethodChange={handleCreationMethodChange}
                     />
                 )
             default:
                 return null
         }
     }
 
-    const handleCreationMethodChange = (method: CreationMethodType) => {
-        setFormState((prev) => ({
-            ...prev,
-            templateConfig: null,
-            cloneAppConfig: null,
-        }))
-
-        setSelectedCreationMethod(method)
-    }
-
     return (
         <Drawer position="right" width="1024px" onEscape={handleClose}>
             <div className="h-100 bg__modal--primary flexbox-col dc__overflow-hidden">

src/Pages/App/CreateAppModal/types.ts

@@ -184,4 +184,5 @@ export interface ApplicationSelectionListProps
             | 'handleFormStateChange'
             | 'formErrorState'
             | 'handleTagErrorChange'
-        > {}
+        >,
+        Pick<SidebarProps, 'handleCreationMethodChange'> {}