[OPIK-737] redirect to project page after successful creation (#1012)

* [OPIK-737] redirect to project page after successful creation * [OPIK-737] abstract extracting entity id from headers * [OPIK-737] remove empty data from useProjectCreateMutation hook --------- Co-authored-by: Yaroslav Boiko <[email protected]>
comet-ml · Jan 9, 2025 · a9dfd69 · a9dfd69
1 parent 9ae31b9
commit a9dfd69
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 11 deletions.
diff --git a/apps/opik-frontend/src/api/datasets/useDatasetCreateMutation.ts b/apps/opik-frontend/src/api/datasets/useDatasetCreateMutation.ts
@@ -1,11 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import get from "lodash/get";
-import last from "lodash/last";
-
 import api, { DATASETS_REST_ENDPOINT } from "@/api/api";
 import { Dataset } from "@/types/datasets";
 import { useToast } from "@/components/ui/use-toast";
+import { extractIdFromLocation } from "@/lib/utils";
 
 type UseDatasetCreateMutationParams = {
   dataset: Partial<Dataset>;
@@ -31,7 +30,7 @@ const useDatasetCreateMutation = () => {
         ? data
         : {
             ...dataset,
-            id: last(headers?.location?.split("/")),
+            id: extractIdFromLocation(headers?.location),
           };
     },
     onMutate: async (params: UseDatasetCreateMutationParams) => {

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 { extractIdFromLocation } from "@/lib/utils";
 
 type UseProjectCreateMutationParams = {
   project: Partial<Project>;
@@ -15,10 +16,14 @@ const useProjectCreateMutation = () => {
 
   return useMutation({
     mutationFn: async ({ project }: UseProjectCreateMutationParams) => {
-      const { data } = await api.post(PROJECTS_REST_ENDPOINT, {
+      const { headers } = await api.post(PROJECTS_REST_ENDPOINT, {
         ...project,
       });
-      return data;
+
+      // TODO workaround to return just created resource while implementation on BE is not done
+      const id = extractIdFromLocation(headers?.location);
+
+      return { id };
     },
     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}>

diff --git a/apps/opik-frontend/src/lib/utils.ts b/apps/opik-frontend/src/lib/utils.ts
@@ -7,6 +7,7 @@ import sample from "lodash/sample";
 import mapKeys from "lodash/mapKeys";
 import snakeCase from "lodash/snakeCase";
 import { DEFAULT_WORKSPACE_NAME } from "@/constants/user";
+import { last } from "lodash";
 
 const BASE_DOCUMENTATION_URL = "https://www.comet.com/docs/opik";
 
@@ -81,3 +82,6 @@ export const calculateWorkspaceName = (
   workspaceName: string,
   defaultName = "Personal",
 ) => (workspaceName === DEFAULT_WORKSPACE_NAME ? defaultName : workspaceName);
+
+export const extractIdFromLocation = (location: string) =>
+  last(location?.split("/"));