diff --git a/frontend/src/components/Environments/ReuseEnvironment.tsx b/frontend/src/components/Environments/ReuseEnvironment.tsx new file mode 100644 index 00000000..b158d05f --- /dev/null +++ b/frontend/src/components/Environments/ReuseEnvironment.tsx @@ -0,0 +1,156 @@ +import { + Button, + FormControl, + FormErrorMessage, + FormLabel, + Input, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Textarea, +} from "@chakra-ui/react" +import { useMutation, useQueryClient } from "@tanstack/react-query" +import { type SubmitHandler, useForm } from "react-hook-form" +import { getRouteApi } from "@tanstack/react-router" + +import { ProjectsService, type Environment } from "../../client" +import type { ApiError } from "../../client/core/ApiError" +import useCustomToast from "../../hooks/useCustomToast" +import { handleError } from "../../utils" + +interface ReuseEnvProps { + isOpen: boolean + onClose: () => void + environment: Environment +} + +interface EnvPost { + path: string + title: string + description: string + targetProjectOwner: string + targetProjectName: string +} + +const ReuseEnvironment = ({ isOpen, onClose }: ReuseEnvProps) => { + const queryClient = useQueryClient() + const showToast = useCustomToast() + const routeApi = getRouteApi("/_layout/$userName/$projectName") + const { userName, projectName } = routeApi.useParams() + const { + register, + handleSubmit, + reset, + formState: { errors, isSubmitting }, + } = useForm({ + mode: "onBlur", + criteriaMode: "all", + defaultValues: { + path: "", + title: "", + description: "", + }, + }) + const mutation = useMutation({ + mutationFn: (data: Environment) => + ProjectsService.postProjectEnvironment({ + requestBody: data, + ownerName: userName, + projectName: projectName, + }), + onSuccess: () => { + showToast("Success!", "Environment added successfully.", "success") + reset() + onClose() + }, + onError: (err: ApiError) => { + handleError(err, showToast) + }, + onSettled: () => { + queryClient.invalidateQueries({ + queryKey: ["projects", userName, projectName, "datasets"], + }) + }, + }) + const onSubmit: SubmitHandler = (data) => { + mutation.mutate(data) + } + + return ( + <> + + + + Reuse environment + + + + + Path (relative to project folder) + + + {errors.path && ( + {errors.path.message} + )} + + + Title + + {errors.title && ( + {errors.title.message} + )} + + + Description +