Update Import project flow to configure deployment

packages/backend/src/entity/Project.ts

@@ -67,7 +67,7 @@ export class Project {
   @Column('varchar')
     icon!: string;
 
-  @Column('varchar', { nullable: true })
+  @Column({ type: 'simple-array',  nullable: true })
     baseDomains!: string[] | null;
 
   @CreateDateColumn()

packages/backend/src/service.ts

@@ -299,6 +299,7 @@ export class Service {
         auctionId: Not(IsNull()),
       },
       relations: ['deployments'],
+      withDeleted: true,
     });
 
     // Should only check on the first deployment

packages/frontend/src/components/projects/create/Configure.tsx

@@ -26,7 +26,7 @@ const Configure = () => {
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
   const location = useLocation();
-  const { templateOwner, templateRepo, owner, name, isPrivate, orgSlug } = location.state || {};
+  const { templateOwner, templateRepo, owner, name, isPrivate, orgSlug, repository } = location.state || {};
 
   const navigate = useNavigate();
   const { toast, dismiss } = useToast();
@@ -47,14 +47,6 @@ const Configure = () => {
       setIsLoading(true);
 
       try {
-        const projectData: any = {
-          templateOwner,
-          templateRepo,
-          owner,
-          name,
-          isPrivate
-        };
-
         let lrn: string | undefined;
         let auctionData: AuctionData | undefined;
 
@@ -63,10 +55,20 @@ const Configure = () => {
         } else if (data.option === 'Auction') {
           auctionData = {
             numProviders: Number(data.numProviders!),
-            maxPrice: (data.maxPrice!).toString()
+            maxPrice: (data.maxPrice!).toString(),
           };
         }
 
+        if (templateId) {
+          // Template-based project creation
+          const projectData: any = {
+            templateOwner,
+            templateRepo,
+            owner,
+            name,
+            isPrivate,
+          };
+
           const { addProjectFromTemplate } = await client.addProjectFromTemplate(
             orgSlug,
             projectData,
@@ -77,12 +79,33 @@ const Configure = () => {
           data.option === 'Auction'
             ? navigate(
                 `/${orgSlug}/projects/create/success/${addProjectFromTemplate.id}`,
+                { state: { isAuction: true } }
+              )
+            : navigate(
+                `/${orgSlug}/projects/create/template/deploy?projectId=${addProjectFromTemplate.id}&templateId=${templateId}`
+              );
+        } else {
+          const { addProject } = await client.addProject(
+            orgSlug,
             {
-              state: {
-                isAuction: true
+              name: repository.fullName,
+              prodBranch: repository.defaultBranch,
+              repository: repository.fullName,
+              template: 'webapp',
+            },
+            lrn,
+            auctionData
+          );
+
+          data.option === 'Auction'
+            ? navigate(
+                `/${orgSlug}/projects/create/success/${addProject.id}`,
+                { state: { isAuction: true } }
+              )
+            : navigate(
+                `/${orgSlug}/projects/create/deploy?projectId=${addProject.id}`
+              );
         }
-            })
-          : navigate(`/${orgSlug}/projects/create/template/deploy?projectId=${addProjectFromTemplate.id}&templateId=${templateId}`);
       } catch (error) {
         console.error('Error creating project:', error);
         toast({
@@ -106,7 +129,9 @@ const Configure = () => {
             Configure deployment
           </Heading>
           <Heading as="h5" className="text-sm font-sans text-elements-low-em">
-            The app can be deployed by setting the deployer LRN for a single deployment or by creating a deployer auction for multiple deployments
+            The app can be deployed by setting the deployer LRN for a single
+            deployment or by creating a deployer auction for multiple
+            deployments
           </Heading>
         </div>
       </div>
@@ -119,11 +144,14 @@ const Configure = () => {
               control={control}
               render={({ field: { value, onChange } }) => (
                 <Select
-                  label='Configuration Options'
-                  value={{ value: value || 'LRN', label: value === 'Auction' ? 'Create Auction' : 'Deployer LRN' } as SelectOption}
-                  onChange={(value) =>
-                    onChange((value as SelectOption).value)
+                  label="Configuration Options"
+                  value={
+                    {
+                      value: value || 'LRN',
+                      label: value === 'Auction' ? 'Create Auction' : 'Deployer LRN',
+                    } as SelectOption
                   }
+                  onChange={(value) => onChange((value as SelectOption).value)}
                   options={[
                     { value: 'LRN', label: 'Deployer LRN' },
                     { value: 'Auction', label: 'Create Auction' },
@@ -138,7 +166,9 @@ const Configure = () => {
               <Heading as="h5" className="text-sm font-sans text-elements-low-em">
                 The app will be deployed by the configured deployer
               </Heading>
-              <span className="text-sm text-elements-high-em">Enter LRN for deployer</span>
+              <span className="text-sm text-elements-high-em">
+                Enter LRN for deployer
+              </span>
               <Controller
                 name="lrn"
                 control={control}
@@ -155,7 +185,9 @@ const Configure = () => {
                 <Heading as="h5" className="text-sm font-sans text-elements-low-em">
                   Set the number of deployers and maximum price for each deployment
                 </Heading>
-                <span className="text-sm text-elements-high-em">Number of Deployers</span>
+                <span className="text-sm text-elements-high-em">
+                  Number of Deployers
+                </span>
                 <Controller
                   name="numProviders"
                   control={control}
@@ -165,7 +197,9 @@ const Configure = () => {
                 />
               </div>
               <div className="flex flex-col justify-start gap-3">
-                <span className="text-sm text-elements-high-em">Maximum Price (alnt)</span>
+                <span className="text-sm text-elements-high-em">
+                  Maximum Price (alnt)
+                </span>
                 <Controller
                   name="maxPrice"
                   control={control}

packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx

@@ -38,36 +38,19 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
       });
     }
 
-    try {
-      setIsLoading(true);
-      const { addProject } = await client.addProject(orgSlug, {
-        name: `${repository.owner?.login}-${repository.name}`,
-        prodBranch: repository.default_branch as string,
-        repository: repository.full_name,
-        // TODO: Compute template from repo
-        template: 'webapp',
-      });
-      if (addProject) {
-        navigate(`import?projectId=${addProject.id}`);
-      } else {
-        toast({
-          id: 'failed-to-create-project',
-          title: 'Failed to create project',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-      }
-    } catch (error) {
-      console.error((error as Error).message);
-      toast({
-        id: 'failed-to-create-project',
-        title: 'Failed to create project',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
-    } finally {
-      setIsLoading(false);
+    navigate(`configure`,
+      {
+        state: {
+          repository: {
+            owner: repository.owner?.login,
+            name: repository.name,
+            defaultBranch: repository.default_branch,
+            fullName: repository.full_name,
+          },
+          orgSlug,
+        },
       }
+    );
   }, [client, repository, orgSlug, setIsLoading, navigate, toast]);
 
   return (

packages/frontend/src/pages/org-slug/projects/create/routes.tsx

@@ -2,7 +2,8 @@ import NewProject from './index';
 import CreateWithTemplate from './Template';
 import { templateRoutes } from './template/routes';
 import Id from './success/Id';
-import Import from './Import';
+import Configure from 'components/projects/create/Configure';
+import Deploy from 'components/projects/create/Deploy';
 
 export const createProjectRoutes = [
   {
@@ -19,7 +20,11 @@ export const createProjectRoutes = [
     element: <Id />,
   },
   {
-    path: 'import',
-    element: <Import />,
+    path: 'configure',
+    element: <Configure />,
+  },
+  {
+    path: 'deploy',
+    element: <Deploy />,
   },
 ];

packages/gql-client/dist/index.js

@@ -385,7 +385,7 @@ var addProjectFromTemplate = import_client2.gql`
   }
 `;
 var addProject = import_client2.gql`
-  mutation ($organizationSlug: String!, $data: AddProjectInput, $lrn: String, $auctionData: AuctionData) {
+  mutation ($organizationSlug: String!, $data: AddProjectInput!, $lrn: String, $auctionData: AuctionData) {
     addProject(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionData: $auctionData) {
       id
     }

packages/gql-client/dist/index.mjs

@@ -357,7 +357,7 @@ var addProjectFromTemplate = gql2`
   }
 `;
 var addProject = gql2`
-  mutation ($organizationSlug: String!, $data: AddProjectInput, $lrn: String, $auctionData: AuctionData) {
+  mutation ($organizationSlug: String!, $data: AddProjectInput!, $lrn: String, $auctionData: AuctionData) {
     addProject(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionData: $auctionData) {
       id
     }

packages/gql-client/src/mutations.ts

@@ -57,7 +57,7 @@ export const addProjectFromTemplate = gql`
 `;
 
 export const addProject = gql`
-  mutation ($organizationSlug: String!, $data: AddProjectInput, $lrn: String, $auctionData: AuctionData) {
+  mutation ($organizationSlug: String!, $data: AddProjectInput!, $lrn: String, $auctionData: AuctionData) {
     addProject(organizationSlug: $organizationSlug, data: $data, lrn: $lrn, auctionData: $auctionData) {
       id
     }