konnosDashboard
CopyEnvButton.tsx46 lines · main
1import { Copy } from 'lucide-react'
2import { useCallback, useState } from 'react'
3import { toast } from 'sonner'
4import { Button, copyToClipboard } from 'ui'
5
6import { getDecryptedValue } from '@/data/vault/vault-secret-decrypted-value-query'
7import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
8
9export const CopyEnvButton = ({
10 serverOptions,
11 values,
12}: {
13 serverOptions: { name: string; secureEntry: boolean }[]
14 values: Record<string, string>
15}) => {
16 const { data: project } = useSelectedProjectQuery()
17 const [isLoading, setIsLoading] = useState(false)
18
19 const onCopy = useCallback(async () => {
20 setIsLoading(true)
21 const envFile = Promise.all(
22 serverOptions.map(async (option) => {
23 if (option.secureEntry) {
24 const decryptedValue = await getDecryptedValue({
25 projectRef: project?.ref,
26 connectionString: project?.connectionString,
27 id: values[option.name],
28 })
29 return `${option.name.toUpperCase().replace('VAULT_', '')}=${decryptedValue[0].decrypted_secret}`
30 }
31 return `${option.name.toUpperCase().replace('.', '_')}=${values[option.name]}`
32 })
33 ).then((values) => values.join('\n'))
34
35 copyToClipboard(envFile, () => {
36 toast.success('Copied to clipboard as environment variables')
37 setIsLoading(false)
38 })
39 }, [serverOptions, values])
40
41 return (
42 <Button type="default" loading={isLoading} icon={<Copy />} onClick={onCopy}>
43 Copy all
44 </Button>
45 )
46}