(fea) ui - see delete confirmation before deleting

ui/litellm-dashboard/src/components/view_key_table.tsx

@@ -33,22 +33,60 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   setData,
 }) => {
   const [isButtonClicked, setIsButtonClicked] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [keyToDelete, setKeyToDelete] = useState<string | null>(null);
 
-  const handleDelete = async (token: String) => {
+  const handleDelete = async (token: string) => {
     if (data == null) {
       return;
     }
+
+    // Set the key to delete and open the confirmation modal
+    setKeyToDelete(token);
+    setIsDeleteModalOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (keyToDelete == null || data == null) {
+      return;
+    }
+
     try {
-      await keyDeleteCall(accessToken, token);
+      await keyDeleteCall(accessToken, keyToDelete);
       // Successfully completed the deletion. Update the state to trigger a rerender.
-      const filteredData = data.filter((item) => item.token !== token);
+      const filteredData = data.filter((item) => item.token !== keyToDelete);
       setData(filteredData);
     } catch (error) {
       console.error("Error deleting the key:", error);
       // Handle any error situations, such as displaying an error message to the user.
     }
+
+    // Close the confirmation modal and reset the keyToDelete
+    setIsDeleteModalOpen(false);
+    setKeyToDelete(null);
+  };
+
+  const cancelDelete = () => {
+    // Close the confirmation modal and reset the keyToDelete
+    setIsDeleteModalOpen(false);
+    setKeyToDelete(null);
   };
 
+  // const handleDelete = async (token: String) => {
+  //   if (data == null) {
+  //     return;
+  //   }
+  //   try {
+  //     await keyDeleteCall(accessToken, token);
+  //     // Successfully completed the deletion. Update the state to trigger a rerender.
+  //     const filteredData = data.filter((item) => item.token !== token);
+  //     setData(filteredData);
+  //   } catch (error) {
+  //     console.error("Error deleting the key:", error);
+  //     // Handle any error situations, such as displaying an error message to the user.
+  //   }
+  // };
+
   if (data == null) {
     return;
   }
@@ -139,6 +177,40 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
           })}
         </TableBody>
       </Table>
+      {isDeleteModalOpen && (
+        <div className="fixed z-10 inset-0 overflow-y-auto">
+          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
+              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+
+            {/* Modal Panel */}
+            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+              &#8203;
+            </span>
+
+            {/* Confirmation Modal Content */}
+            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">
+                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <h3 className="text-lg leading-6 font-medium text-gray-900">Delete Key</h3>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">Are you sure you want to delete this key ?</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                <Button onClick={confirmDelete} color="red" className="ml-2">
+                  Delete
+                </Button>
+                <Button onClick={cancelDelete}>Cancel</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </Card>
   );
 };