header bar improvements

src/pages/experiments/[id].tsx

@@ -8,9 +8,17 @@ import {
   HStack,
   Icon,
   Input,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
 } from "@chakra-ui/react";
+
 import { useRouter } from "next/router";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { BsGearFill, BsTrash } from "react-icons/bs";
 import { RiFlaskLine } from "react-icons/ri";
 import OutputsTable from "~/components/OutputsTable";
@@ -20,25 +28,57 @@ import { api } from "~/utils/api";
 import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
 import { useStore } from "~/utils/store";
 
-const DeleteButton = (props: { experimentId: string }) => {
+const DeleteButton = () => {
+  const experiment = useExperiment();
   const mutation = api.experiments.delete.useMutation();
   const utils = api.useContext();
   const router = useRouter();
 
-  const [onClick] = useHandledAsyncCallback(async () => {
-    const nextExperiment = await mutation.mutateAsync({ id: props.experimentId });
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  const [onDeleteConfirm] = useHandledAsyncCallback(async () => {
+    if (!experiment.data?.id) return;
+    const nextExperiment = await mutation.mutateAsync({ id: experiment.data.id });
     await utils.experiments.list.invalidate();
 
     if (nextExperiment) {
       await router.push({ pathname: "/experiments/[id]", query: { id: nextExperiment } });
     }
-  }, [mutation, props.experimentId]);
+    onClose();
+  }, [mutation, experiment.data?.id, router]);
 
   return (
-    <Button size="sm" variant="ghost" colorScheme="gray" fontWeight="normal" onClick={onClick}>
-      <Icon as={BsTrash} boxSize={4} mr={2} />
-      Delete Experiment
-    </Button>
+    <>
+      <Button size="sm" variant="ghost" colorScheme="gray" fontWeight="normal" onClick={onOpen}>
+        <Icon as={BsTrash} boxSize={4} mr={2} />
+        Delete Experiment
+      </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>
+    </>
   );
 };
 
@@ -94,7 +134,7 @@ export default function Experiment() {
                 borderColor="transparent"
                 fontSize={16}
                 px={0}
-                minW={400}
+                minW={300}
                 flex={1}
                 _hover={{ borderColor: "gray.300" }}
                 _focus={{ borderColor: "blue.500", outline: "none" }}
@@ -111,10 +151,12 @@ export default function Experiment() {
           >
             Edit Vars & Evals
           </Button>
-          <DeleteButton experimentId={router.query.id as string} />
+          <DeleteButton />
         </HStack>
         <SettingsDrawer />
-        <OutputsTable experimentId={router.query.id as string | undefined} />
+        <Box w="100%" overflowX="auto">
+          <OutputsTable experimentId={router.query.id as string | undefined} />
+        </Box>
       </Box>
     </AppShell>
   );