(feature) Add deletion confirmation for api keys

frontend/src/components/Keys/list.tsx

@@ -1,11 +1,23 @@
-import { Badge, Button, useColorMode, useToast } from "@chakra-ui/react"
+import {
+  Badge,
+  Button,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  useColorMode,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react"
 import { ApiKey } from "@common/types"
 import { deleteKey } from "api/keys"
 import EmptyView from "components/utils/EmptyView"
 import { getCustomStyles } from "components/utils/TableUtils"
-import _ from "lodash"
 import { DateTime } from "luxon"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import DataTable, { TableColumn } from "react-data-table-component"
 import { makeToast } from "utils"
 
@@ -17,13 +29,22 @@ interface ListKeysInterface {
 const ListKeys: React.FC<ListKeysInterface> = ({ keys, setKeys }) => {
   const colorMode = useColorMode()
   const [isDeleting, setIsDeleting] = useState<Array<string>>([])
+  const [deletePromptKeyName, setDeletePromptKeyName] = useState<string>("")
+  const { isOpen, onClose, onOpen } = useDisclosure()
+  const leastDestructiveRef = useRef()
   const toast = useToast()
 
   const onDeletePress = async (key_name: string) => {
+    setDeletePromptKeyName(key_name)
+    onOpen()
+  }
+
+  const onDeleteConfirm = async (key_name: string) => {
     let _keys = [...isDeleting]
     _keys.push(key_name)
     setIsDeleting(_keys)
     try {
+      onClose()
       await deleteKey(key_name)
       setIsDeleting([...isDeleting].filter(v => v != key_name))
       setKeys(keys.filter(v => v.name != key_name))
@@ -93,11 +114,44 @@ const ListKeys: React.FC<ListKeysInterface> = ({ keys, setKeys }) => {
     return <EmptyView text="No API Keys found." />
   } else {
     return (
-      <DataTable
-        columns={columns}
-        data={keys.sort((a, b) => a.name.localeCompare(b.name))}
-        customStyles={getCustomStyles(colorMode.colorMode)}
-      />
+      <>
+        <DataTable
+          columns={columns}
+          data={keys.sort((a, b) => a.name.localeCompare(b.name))}
+          customStyles={getCustomStyles(colorMode.colorMode)}
+        />
+        <AlertDialog
+          isOpen={isOpen}
+          onClose={onClose}
+          leastDestructiveRef={leastDestructiveRef}
+        >
+          <AlertDialogOverlay />
+          <AlertDialogContent>
+            <AlertDialogHeader>Confirm Deletion of API Key</AlertDialogHeader>
+            <AlertDialogCloseButton />
+            <AlertDialogBody>
+              Confirm deletion of API Key : 
+              <span style={{ fontWeight: "bold", paddingInlineStart: 4   }}>
+                {deletePromptKeyName}
+              </span>
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button mr={3} onClick={onClose} ref={leastDestructiveRef}>
+                Cancel
+              </Button>
+              <Button
+                colorScheme="red"
+                mr={3}
+                onClick={() => {
+                  onDeleteConfirm(deletePromptKeyName)
+                }}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </>
     )
   }
 }

frontend/src/pages/settings.tsx

@@ -48,16 +48,14 @@ const Keys = ({ keys: _keysString }) => {
   const addKey = async (key_name: string) => {
     setIsAddingKey(true)
     try {
-      let resp = await addKeyReq(key_name)
-      console.log(resp)
+      let resp = await addKeyReq(key_name)      
       let new_keys = [...keys]
       new_keys.push({
         name: resp.name,
         identifier: resp.identifier,
         created: resp.created,
         for: resp.for,
-      })
-      console.log(new_keys)
+      })      
       setKeys(new_keys)
       setNewKeyValue([resp.apiKey, resp.name])
       onNewKeyOpen()