[OPIK-737] redirect to project page after successful creation

comet-ml · Jan 9, 2025 · 0520487 · 0520487
1 parent 009b356
commit 0520487
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git 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
@@ -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}>