Added support for creating api key

src/hooks/useKeysAPI/index.js

@@ -50,6 +50,26 @@ export function useKeysAPI (defaultItemsOptions = {}, top = 1000000) {
     return orderBy(filtered, options.orderBy, options.order)
   }, [options, _keys])
 
+  // new keys item
+  const newKeysItem = async name => {
+    const options = {
+      headers: {
+        'X-API-KEY': API.TOKEN
+      }
+    }
+
+    try {
+      setUpdating(true)
+      const { data } = await axios.post(`${API.URL}/apikeys?fullitem=true`, { name }, options)
+      setKeys([..._keys, data])
+      setUpdating(false)
+      return data
+    } catch (error) {
+      setUpdating(false)
+      throw error
+    }
+  }
+
   const updateKeysItem = async (id, updateObject) => {
     const options = {
       headers: {
@@ -101,6 +121,7 @@ export function useKeysAPI (defaultItemsOptions = {}, top = 1000000) {
     itemsOptions: options,
     loading,
     keys,
+    newKeysItem,
     removeKeysItem,
     setItemsOptions,
     updateKeysItem,

src/pages/APIKeys/index.js

@@ -1,5 +1,5 @@
 import { relativeDateFormat } from '@vtfk/utilities'
-import { IconButton, Table } from '@vtfk/components'
+import { IconButton, Table, TextField } from '@vtfk/components'
 import React, { useState } from 'react'
 import { isEqual } from 'lodash'
 import { words as capitalizeWords } from 'capitalize'
@@ -11,8 +11,10 @@ import { useKeysAPI } from '../../hooks/useKeysAPI'
 import './styles.scss'
 
 export function APIKeys () {
-  const { itemsOptions, keys, loading, removeKeysItem, setItemsOptions, updateKeysItem, updating } = useKeysAPI()
+  const { itemsOptions, keys, loading, newKeysItem, removeKeysItem, setItemsOptions, updateKeysItem, updating } = useKeysAPI()
   const [confirmationItem, setConfirmationItem] = useState(null)
+  const [openNewKeyDialog, setOpenNewKeyDialog] = useState(false)
+  const [newKeyName, setNewKeyName] = useState('')
 
   const headers = [
     {
@@ -81,14 +83,26 @@ export function APIKeys () {
     }
   }
 
+  const handleNewKeyOkClick = async () => {
+    try {
+      await newKeysItem(newKeyName)
+      console.log('Successfully added key', newKeyName) // TODO: Add toast for success
+      setOpenNewKeyDialog(false)
+      setNewKeyName('')
+    } catch (error) {
+      const failed = error.response?.data?.message || error.message || error
+      console.log('Failed to add key:', failed) // TODO: Add toast for error message
+    }
+  }
+
   return (
     <div className='apikeys-container'>
       <div className='apikeys'>
         <IconButton
           className='add-key-button'
           bordered
           icon='add'
-          onClick={() => console.log('Add new key')}
+          onClick={() => setOpenNewKeyDialog(true)}
           title='Add key'
 
         />
@@ -112,6 +126,26 @@ export function APIKeys () {
             onDismiss={() => setConfirmationItem(null)}
           />
       }
+
+      {
+        openNewKeyDialog &&
+          <ConfirmationDialog
+            open
+            title='Create new api key'
+            okBtnText='Create'
+            cancelBtnText='Cancel'
+            okBtnDisabled={updating}
+            onClickCancel={() => setOpenNewKeyDialog(false)}
+            onClickOk={() => handleNewKeyOkClick()}
+            onDismiss={() => setOpenNewKeyDialog(false)}
+          >
+            <TextField
+              placeholder='Key name'
+              value={newKeyName}
+              onChange={(e) => setNewKeyName(e.target.value)}
+              />
+          </ConfirmationDialog>
+      }
     </div>
   )
 }