Use export name in export deletion dialog instead of file id (#11049)

* use export name in dialog instead of file id

* add type for deletion

web/src/pages/Exports.tsx

@@ -12,7 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Export } from "@/types/export";
+import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
@@ -43,14 +43,14 @@ function Exports() {
 
   // Deleting
 
-  const [deleteClip, setDeleteClip] = useState<string | undefined>();
+  const [deleteClip, setDeleteClip] = useState<DeleteClipType | undefined>();
 
   const onHandleDelete = useCallback(() => {
     if (!deleteClip) {
       return;
     }
 
-    axios.delete(`export/${deleteClip}`).then((response) => {
+    axios.delete(`export/${deleteClip.file}`).then((response) => {
       if (response.status == 200) {
         setDeleteClip(undefined);
         mutate();
@@ -86,7 +86,7 @@ function Exports() {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Export</AlertDialogTitle>
             <AlertDialogDescription>
-              Confirm deletion of {deleteClip}.
+              Are you sure you want to delete {deleteClip?.exportName}?
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -149,7 +149,9 @@ function Exports() {
                 exportedRecording={item}
                 onSelect={setSelected}
                 onRename={onHandleRename}
-                onDelete={(id) => setDeleteClip(id)}
+                onDelete={({ file, exportName }) =>
+                  setDeleteClip({ file, exportName })
+                }
               />
             ))}
           </div>