konnosDashboard
CreateNewAPIKeysButton.tsx67 lines · main
1import { useParams } from 'common'
2import { useState } from 'react'
3import { toast } from 'sonner'
4import {
5 AlertDialog,
6 AlertDialogAction,
7 AlertDialogCancel,
8 AlertDialogContent,
9 AlertDialogDescription,
10 AlertDialogFooter,
11 AlertDialogHeader,
12 AlertDialogTitle,
13 Button,
14} from 'ui'
15
16import { useAPIKeyCreateMutation } from '@/data/api-keys/api-key-create-mutation'
17
18export const CreateNewAPIKeysButton = () => {
19 const { ref: projectRef } = useParams()
20
21 const [isCreatingKeys, setIsCreatingKeys] = useState(false)
22 const [createKeysDialogOpen, setCreateKeysDialogOpen] = useState(false)
23
24 const { mutateAsync: createAPIKey } = useAPIKeyCreateMutation()
25
26 const handleCreateNewApiKeys = async () => {
27 if (!projectRef) return
28 setIsCreatingKeys(true)
29
30 try {
31 // Create publishable key
32 await createAPIKey({ projectRef, type: 'publishable', name: 'default' })
33
34 // Create secret key
35 await createAPIKey({ projectRef, type: 'secret', name: 'default' })
36
37 setCreateKeysDialogOpen(false)
38 toast.success('Successfully created a new set of API keys!')
39 } catch (error) {
40 console.error('Failed to create API keys:', error)
41 } finally {
42 setIsCreatingKeys(false)
43 }
44 }
45
46 return (
47 <AlertDialog open={createKeysDialogOpen} onOpenChange={setCreateKeysDialogOpen}>
48 <Button onClick={() => setCreateKeysDialogOpen(true)}>Create new API keys</Button>
49 <AlertDialogContent>
50 <AlertDialogHeader>
51 <AlertDialogTitle>Create new API keys</AlertDialogTitle>
52 <AlertDialogDescription>
53 This will create a default publishable key and a default secret key both named{' '}
54 <code className="break-keep! text-code-inline">default</code>. These keys are required
55 to connect your application to your Briven project.
56 </AlertDialogDescription>
57 </AlertDialogHeader>
58 <AlertDialogFooter>
59 <AlertDialogCancel>Cancel</AlertDialogCancel>
60 <AlertDialogAction onClick={handleCreateNewApiKeys} disabled={isCreatingKeys}>
61 {isCreatingKeys ? 'Creating...' : 'Create keys'}
62 </AlertDialogAction>
63 </AlertDialogFooter>
64 </AlertDialogContent>
65 </AlertDialog>
66 )
67}