-
Notifications
You must be signed in to change notification settings - Fork 284
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[OPIK-527] [FR]: Add support for Project descriptions
- Loading branch information
1 parent
c9b5cdf
commit 3d05ce3
Showing
6 changed files
with
182 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
apps/opik-frontend/src/api/projects/useProjectUpdateMutation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { useMutation, useQueryClient } from "@tanstack/react-query"; | ||
| import { AxiosError } from "axios"; | ||
| import get from "lodash/get"; | ||
|
|
||
| import api, { PROJECTS_REST_ENDPOINT } from "@/api/api"; | ||
| import { Project } from "@/types/projects"; | ||
| import { useToast } from "@/components/ui/use-toast"; | ||
|
|
||
| type UseProjectUpdateMutationParams = { | ||
| project: Partial<Project>; | ||
| }; | ||
|
|
||
| const useProjectUpdateMutation = () => { | ||
| const queryClient = useQueryClient(); | ||
| const { toast } = useToast(); | ||
|
|
||
| return useMutation({ | ||
| mutationFn: async ({ project }: UseProjectUpdateMutationParams) => { | ||
| const { data } = await api.patch( | ||
| PROJECTS_REST_ENDPOINT + project.id, | ||
| project, | ||
| ); | ||
| return data; | ||
| }, | ||
| onError: (error: AxiosError) => { | ||
| const message = get( | ||
| error, | ||
| ["response", "data", "message"], | ||
| error.message, | ||
| ); | ||
|
|
||
| toast({ | ||
| title: "Error", | ||
| description: message, | ||
| variant: "destructive", | ||
| }); | ||
| }, | ||
| onSettled: () => { | ||
| return queryClient.invalidateQueries({ | ||
| queryKey: ["projects"], | ||
| }); | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| export default useProjectUpdateMutation; |
100 changes: 100 additions & 0 deletions
100
apps/opik-frontend/src/components/pages/ProjectsPage/AddEditProjectDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useCallback, useState } from "react"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { | ||
| Dialog, | ||
| DialogClose, | ||
| DialogContent, | ||
| DialogFooter, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from "@/components/ui/dialog"; | ||
| import { Input } from "@/components/ui/input"; | ||
| import { Label } from "@/components/ui/label"; | ||
| import useProjectCreateMutation from "@/api/projects/useProjectCreateMutation"; | ||
| import { Project } from "@/types/projects"; | ||
| import { Textarea } from "@/components/ui/textarea"; | ||
| import useProjectUpdateMutation from "@/api/projects/useProjectUpdateMutation"; | ||
|
|
||
| type AddEditProjectDialogProps = { | ||
| project?: Project; | ||
| open: boolean; | ||
| setOpen: (open: boolean) => void; | ||
| }; | ||
|
|
||
| const AddEditProjectDialog: React.FC<AddEditProjectDialogProps> = ({ | ||
| project, | ||
| open, | ||
| setOpen, | ||
| }) => { | ||
| const { mutate: createMutate } = useProjectCreateMutation(); | ||
| const { mutate: updateMutate } = useProjectUpdateMutation(); | ||
| const [name, setName] = useState(project ? project.name : ""); | ||
| const [description, setDescription] = useState( | ||
| project ? project.description : "", | ||
| ); | ||
|
|
||
| const isEdit = Boolean(project); | ||
| const isValid = Boolean(name.length); | ||
| const title = isEdit ? "Edit project" : "Create a new project"; | ||
| const buttonText = isEdit ? "Update project" : "Create project"; | ||
|
|
||
| const submitHandler = useCallback(() => { | ||
| if (isEdit) { | ||
| updateMutate({ | ||
| project: { | ||
| id: project!.id, | ||
| description, | ||
| }, | ||
| }); | ||
| } else { | ||
| createMutate({ | ||
| project: { | ||
| name, | ||
| ...(description && { description }), | ||
| }, | ||
| }); | ||
| } | ||
| }, [createMutate, description, isEdit, name, project, updateMutate]); | ||
|
|
||
| return ( | ||
| <Dialog open={open} onOpenChange={setOpen}> | ||
| <DialogContent className="max-w-lg sm:max-w-[560px]"> | ||
| <DialogHeader> | ||
| <DialogTitle>{title}</DialogTitle> | ||
| </DialogHeader> | ||
| <div className="flex flex-col gap-2 pb-4"> | ||
| <Label htmlFor="projectName">Name</Label> | ||
| <Input | ||
| id="projectName" | ||
| placeholder="Project name" | ||
| disabled={isEdit} | ||
| value={name} | ||
| onChange={(event) => setName(event.target.value)} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col gap-2 pb-4"> | ||
| <Label htmlFor="projectDescription">Description</Label> | ||
| <Textarea | ||
| id="projectDescription" | ||
| placeholder="Project description" | ||
| value={description} | ||
| onChange={(event) => setDescription(event.target.value)} | ||
| maxLength={255} | ||
| /> | ||
| </div> | ||
| <DialogFooter> | ||
| <DialogClose asChild> | ||
| <Button variant="outline">Cancel</Button> | ||
| </DialogClose> | ||
| <DialogClose asChild> | ||
| <Button type="submit" disabled={!isValid} onClick={submitHandler}> | ||
| {buttonText} | ||
| </Button> | ||
| </DialogClose> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddEditProjectDialog; |
71 changes: 0 additions & 71 deletions
71
apps/opik-frontend/src/components/pages/ProjectsPage/AddProjectDialog.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters