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/components/card/ExportCard.tsx

@@ -6,10 +6,16 @@ import { isDesktop } from "react-device-detect";
 import { FaDownload, FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
-import { Dialog, DialogContent, DialogFooter, DialogTitle } from "../ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "../ui/dialog";
 import { Input } from "../ui/input";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { Export } from "@/types/export";
+import { DeleteClipType, Export } from "@/types/export";
 import { MdEditSquare } from "react-icons/md";
 import { baseUrl } from "@/api/baseUrl";
 
@@ -18,7 +24,7 @@ type ExportProps = {
   exportedRecording: Export;
   onSelect: (selected: Export) => void;
   onRename: (original: string, update: string) => void;
-  onDelete: (file: string) => void;
+  onDelete: ({ file, exportName }: DeleteClipType) => void;
 };
 
 export default function ExportCard({
@@ -62,6 +68,9 @@ export default function ExportCard({
       >
         <DialogContent>
           <DialogTitle>Rename Export</DialogTitle>
+          <DialogDescription>
+            Enter a new name for this export.
+          </DialogDescription>
           {editName && (
             <>
               <Input
@@ -135,7 +144,12 @@ export default function ExportCard({
               </Chip>
               <Chip
                 className="bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
-                onClick={() => onDelete(exportedRecording.id)}
+                onClick={() =>
+                  onDelete({
+                    file: exportedRecording.id,
+                    exportName: exportedRecording.name,
+                  })
+                }
               >
                 <LuTrash className="size-4 text-destructive fill-destructive" />
               </Chip>

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>

web/src/types/export.ts

@@ -7,3 +7,8 @@ export type Export = {
   thumb_path: string;
   in_progress: boolean;
 };
+
+export type DeleteClipType = {
+  file: string;
+  exportName: string;
+};