Feat(canvas): Add workspace uri to project creation

broadinstitute · Aug 26, 2024 · e27ea99 · e27ea99
1 parent c2289f1
commit e27ea99
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 28 deletions.
diff --git a/canvas/app/dashboard/project/all/create-project-form.tsx b/canvas/app/dashboard/project/all/create-project-form.tsx
@@ -120,6 +120,29 @@ export function CreateProjectForm(props: TCreateProjectFormProps) {
           )}
         />
 
+        {/* Workspace URI */}
+        <FormField
+          control={createProjectForm.control}
+          name="workspaceURI"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Workspace</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder="Workspace"
+                  disabled={isSubmitting}
+                />
+              </FormControl>
+              <FormDescription>
+                S3 Bucket URI for the workspace where you want to create this
+                project.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         {/* Parser */}
         <FormField
           control={createProjectForm.control}

diff --git a/canvas/app/dashboard/project/id/[id]/runs.tsx b/canvas/app/dashboard/project/id/[id]/runs.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  executeJob,
   TProjectStepJob,
   TProjectStepJobInput,
   updateJob,
@@ -14,9 +13,9 @@ import { ViewInputModal } from "./view-input-modal";
 import { Label } from "@radix-ui/react-label";
 import { Input } from "@/components/ui/input";
 import { useProjectStore } from "@/stores/project";
-import { useMutation } from "@tanstack/react-query";
 import { mutate } from "swr";
 import { FileViewer } from "@/components/custom/file-viewer";
+import { toast } from "@/components/ui/use-toast";
 
 export type TProjectStepJobRunProps = {
   runs: TProjectStepJobRun[];
@@ -30,26 +29,11 @@ export function ProjectStepJobRuns(props: TProjectStepJobRunProps) {
     project: state.project,
   }));
 
-  const {
-    mutate: executeJobMutation,
-    isError,
-    isSuccess,
-  } = useMutation({
-    mutationFn: executeJob,
-  });
-
   function mutateFetchJob() {
     mutate(mutateKey, true);
     mutate(`/job/?step_id=${job.step_id}`, true);
   }
 
-  function submitJob() {
-    executeJobMutation({
-      jobId: job.id,
-      canThrowOnError: true,
-    });
-  }
-
   async function updateAndSubmitJob(
     inputs: Record<string, TProjectStepJobInput>
   ) {
@@ -61,7 +45,11 @@ export function ProjectStepJobRuns(props: TProjectStepJobRunProps) {
     });
 
     if (response.ok) {
-      submitJob();
+      mutateFetchJob();
+    } else {
+      toast({
+        title: "Failed to save inputs.",
+      });
     }
   }
 
@@ -77,12 +65,6 @@ export function ProjectStepJobRuns(props: TProjectStepJobRunProps) {
     }));
   }, [job.inputs, project.dataset_uri]);
 
-  React.useEffect(() => {
-    if (isError || isSuccess) {
-      mutateFetchJob();
-    }
-  }, [isError, isSuccess]);
-
   return (
     <div>
       <div className="border border-gray-200 rounded-md">
@@ -94,7 +76,7 @@ export function ProjectStepJobRuns(props: TProjectStepJobRunProps) {
             isEditable={true}
             buttonTitle="Edit job inputs"
             primaryAction={{
-              label: "Run job",
+              label: "Save",
               onClick: updateAndSubmitJob,
             }}
             emptyInputPlaceholder="Add input"

diff --git a/canvas/app/dashboard/project/id/[id]/view-input-modal.tsx b/canvas/app/dashboard/project/id/[id]/view-input-modal.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { toast } from "@/components/ui/use-toast";
 import { TProjectStepJobInput } from "@/services/job";
 import { uploadToS3 } from "@/services/s3";
 import { useProjectStore } from "@/stores/project";
@@ -46,14 +47,28 @@ export function ViewInputModal(props: TViewInputModalProps) {
     if (!fileInput) return;
 
     const file = fileInput.files?.[0];
-    if (!file) return;
+    if (!file) {
+      return;
+    }
 
     setIsUploading(true);
-    await uploadToS3(url, {
+    const res = await uploadToS3(url, {
       ContentType: file.type,
       Body: file,
       projectId: project.id,
     });
+
+    if (!res) {
+      toast({
+        title: "Failed to upload file.",
+        variant: "destructive",
+      });
+    } else {
+      toast({
+        title: "File uploaded successfully.",
+      });
+    }
+
     setIsUploading(false);
   }
 

diff --git a/canvas/schema/create-project.ts b/canvas/schema/create-project.ts
@@ -6,6 +6,7 @@ export const createProjectSchema = z.object({
   type: z.string(),
   description: z.string().min(10).max(60),
   name: z.string().min(3).max(30),
+  workspaceURI: z.string(),
 });
 
 export type TCreateProjectFormData = z.infer<typeof createProjectSchema>;
diff --git a/canvas/services/projects.ts b/canvas/services/projects.ts
@@ -8,6 +8,7 @@ export type TProject = {
   description: string;
   type: string;
   parser: string;
+  workspace_uri: string;
 };
 
 export async function getProjects(): Promise<TResponse<TProject>> {
@@ -55,12 +56,13 @@ export type TCreateProjectOptions = {
   type: string;
   name: string;
   description: string;
+  workspaceURI: string;
 };
 
 export async function createProject(
   options: TCreateProjectOptions
 ): Promise<TProject> {
-  const { dataset, parser, type, name, description } = options;
+  const { dataset, parser, type, name, description, workspaceURI } = options;
   const response = (await api
     .post(
       {
@@ -69,6 +71,7 @@ export async function createProject(
         type,
         parser_type: parser,
         dataset_uri: dataset,
+        workspace_uri: workspaceURI,
       },
       "/project"
     )