d6b97b29f7
* Move DeleteButton into a separate file * Rename plural relations * Add ability to fork * Fork automatically after auth upon return * Add experiment card skeleton * Create HeaderButtons component * return no header buttons while experiment loading * Fix prettier * Remove unused variable * Remove newline * Default json values to undefined * Change header styles * Fix prettier * Give AddScenario icon less width * Move useEffect * Skip invalidating experiments list after forking * Require user to be able to view experiment to fork it * Move experiment creation into same transaction * Only return the forked experiment id * Put delete button in experiment settings drawer * Move useEffect hook
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import {
|
|
Button,
|
|
Icon,
|
|
AlertDialog,
|
|
AlertDialogBody,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogContent,
|
|
AlertDialogOverlay,
|
|
useDisclosure,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
|
|
import { useRouter } from "next/router";
|
|
import { useRef } from "react";
|
|
import { BsTrash } from "react-icons/bs";
|
|
import { api } from "~/utils/api";
|
|
import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
|
|
|
|
export const DeleteButton = () => {
|
|
const experiment = useExperiment();
|
|
const mutation = api.experiments.delete.useMutation();
|
|
const utils = api.useContext();
|
|
const router = useRouter();
|
|
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const cancelRef = useRef<HTMLButtonElement>(null);
|
|
|
|
const [onDeleteConfirm] = useHandledAsyncCallback(async () => {
|
|
if (!experiment.data?.id) return;
|
|
await mutation.mutateAsync({ id: experiment.data.id });
|
|
await utils.experiments.list.invalidate();
|
|
await router.push({ pathname: "/experiments" });
|
|
onClose();
|
|
}, [mutation, experiment.data?.id, router]);
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
variant={{ base: "outline", lg: "ghost" }}
|
|
colorScheme="red"
|
|
fontWeight="normal"
|
|
onClick={onOpen}
|
|
>
|
|
<Icon as={BsTrash} boxSize={4} />
|
|
<Text display={{ base: "none", lg: "block" }} ml={2}>
|
|
Delete Experiment
|
|
</Text>
|
|
</Button>
|
|
|
|
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
|
|
<AlertDialogOverlay>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
|
Delete Experiment
|
|
</AlertDialogHeader>
|
|
|
|
<AlertDialogBody>
|
|
If you delete this experiment all the associated prompts and scenarios will be deleted
|
|
as well. Are you sure?
|
|
</AlertDialogBody>
|
|
|
|
<AlertDialogFooter>
|
|
<Button ref={cancelRef} onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button colorScheme="red" onClick={onDeleteConfirm} ml={3}>
|
|
Delete
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialogOverlay>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
};
|