From 0520487f637331a91d0a734614d5ff5e4f5667b1 Mon Sep 17 00:00:00 2001
From: Yaroslav Boiko <yaroslavboiko@ip-192-168-1-16.ec2.internal>
Date: Thu, 9 Jan 2025 14:35:23 +0100
Subject: [PATCH] [OPIK-737] redirect to project page after successful creation

---
 .../api/projects/useProjectCreateMutation.ts  |  6 ++-
 .../ProjectsPage/AddEditProjectDialog.tsx     | 41 ++++++++++++++++---
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/apps/opik-frontend/src/api/projects/useProjectCreateMutation.ts b/apps/opik-frontend/src/api/projects/useProjectCreateMutation.ts
index b44bf6982b..a0f3e7beea 100644
--- a/apps/opik-frontend/src/api/projects/useProjectCreateMutation.ts
+++ b/apps/opik-frontend/src/api/projects/useProjectCreateMutation.ts
@@ -4,6 +4,7 @@ import api, { PROJECTS_REST_ENDPOINT } from "@/api/api";
 import { Project } from "@/types/projects";
 import { AxiosError } from "axios";
 import { useToast } from "@/components/ui/use-toast";
+import { last } from "lodash";
 
 type UseProjectCreateMutationParams = {
   project: Partial<Project>;
@@ -15,10 +16,11 @@ const useProjectCreateMutation = () => {
 
   return useMutation({
     mutationFn: async ({ project }: UseProjectCreateMutationParams) => {
-      const { data } = await api.post(PROJECTS_REST_ENDPOINT, {
+      const res = await api.post(PROJECTS_REST_ENDPOINT, {
         ...project,
       });
-      return data;
+
+      return { ...res.data, id: last(res.headers?.location?.split("/")) };
     },
     onError: (error: AxiosError) => {
       const message = get(
diff --git a/apps/opik-frontend/src/components/pages/ProjectsPage/AddEditProjectDialog.tsx b/apps/opik-frontend/src/components/pages/ProjectsPage/AddEditProjectDialog.tsx
index bd62d26720..44da48d9fd 100644
--- a/apps/opik-frontend/src/components/pages/ProjectsPage/AddEditProjectDialog.tsx
+++ b/apps/opik-frontend/src/components/pages/ProjectsPage/AddEditProjectDialog.tsx
@@ -14,6 +14,8 @@ import useProjectCreateMutation from "@/api/projects/useProjectCreateMutation";
 import { Project } from "@/types/projects";
 import { Textarea } from "@/components/ui/textarea";
 import useProjectUpdateMutation from "@/api/projects/useProjectUpdateMutation";
+import { useNavigate } from "@tanstack/react-router";
+import useAppStore from "@/store/AppStore";
 
 type AddEditProjectDialogProps = {
   project?: Project;
@@ -26,6 +28,9 @@ const AddEditProjectDialog: React.FC<AddEditProjectDialogProps> = ({
   open,
   setOpen,
 }) => {
+  const navigate = useNavigate();
+  const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+
   const { mutate: createMutate } = useProjectCreateMutation();
   const { mutate: updateMutate } = useProjectUpdateMutation();
   const [name, setName] = useState(project ? project.name : "");
@@ -47,14 +52,38 @@ const AddEditProjectDialog: React.FC<AddEditProjectDialogProps> = ({
         },
       });
     } else {
-      createMutate({
-        project: {
-          name,
-          ...(description && { description }),
+      createMutate(
+        {
+          project: {
+            name,
+            ...(description && { description }),
+          },
         },
-      });
+        {
+          onSuccess(projectData) {
+            if (!projectData.id) return;
+
+            navigate({
+              to: "/$workspaceName/projects/$projectId/traces",
+              params: {
+                projectId: projectData.id,
+                workspaceName,
+              },
+            });
+          },
+        },
+      );
     }
-  }, [createMutate, description, isEdit, name, project, updateMutate]);
+  }, [
+    createMutate,
+    description,
+    isEdit,
+    name,
+    navigate,
+    project,
+    updateMutate,
+    workspaceName,
+  ]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>