mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
Ivan VasilovandJoshen Lim
693294ec85
* Move listEncryptedColumns method to a function. * Remove encryptColumn method since it's unused. * Add CRUD RQ queries/mutations for vault secrets. * Use the new queries/mutations. * Add RQ for secret/decrypted values of secrets. * Add RQ queries/mutations for pg-sodium keys. * Use the new hook for decrypted value. * Use the new hooks for pg sodium keys. * Remove unneeded code from the vault store. * Delete VaultStore and all usages of it. * Small style fix * Fix invalidation for create, update, delete secrets * Small UI fixes to EditSecretModal * Fix invalidation for pg-sodium-keys rq * Add default error handler for pg sodium keys rq * Undo * Add default error handler for vault secrets RQ * Remove observer on vault pages * Fix database wrappers with vault * Add loading state for vault keys * fix pg sodium keys invalidation * Opt for immutable const declaration in SecretsManagement * remove keyId and keyName context from ColumnEditor, no longer supports TLE * Address PR comments --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { noop } from 'lodash'
|
|
import { IconPlus, Input, Listbox, Modal } from 'ui'
|
|
|
|
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
|
import { usePgSodiumKeysQuery } from 'data/pg-sodium-keys/pg-sodium-keys-query'
|
|
|
|
interface EncryptionKeySelectorProps {
|
|
id?: string
|
|
nameId?: string
|
|
label?: string
|
|
labelOptional?: string
|
|
selectedKeyId?: any
|
|
error?: string
|
|
onSelectKey: (keyId: string) => void
|
|
onUpdateDescription?: (desc: string) => void
|
|
}
|
|
|
|
const EncryptionKeySelector = ({
|
|
id = 'keyId',
|
|
nameId = 'keyName',
|
|
label = 'Encryption key',
|
|
labelOptional,
|
|
selectedKeyId,
|
|
error,
|
|
onSelectKey = noop,
|
|
onUpdateDescription = noop,
|
|
}: EncryptionKeySelectorProps) => {
|
|
const { project } = useProjectContext()
|
|
|
|
const { data } = usePgSodiumKeysQuery({
|
|
projectRef: project?.ref,
|
|
connectionString: project?.connectionString,
|
|
})
|
|
|
|
const keys = data || []
|
|
|
|
return (
|
|
<>
|
|
<Listbox
|
|
id={id}
|
|
label={label}
|
|
size="small"
|
|
defaultValue={selectedKeyId}
|
|
value={selectedKeyId}
|
|
labelOptional={labelOptional}
|
|
onChange={onSelectKey}
|
|
>
|
|
<Listbox.Option
|
|
key="create-new"
|
|
id="create-new"
|
|
value="create-new"
|
|
label="Create a new Encryption Key"
|
|
addOnBefore={() => <IconPlus size={16} strokeWidth={1.5} />}
|
|
>
|
|
Create a new Encryption Key
|
|
</Listbox.Option>
|
|
{keys.length > 0 && <Modal.Separator />}
|
|
{keys.map((key) => (
|
|
<Listbox.Option key={key.id} label={key.name} value={key.id}>
|
|
<div className="space-y-1">
|
|
<p>{key.name || 'No name provided'}</p>
|
|
<p className="text-xs">
|
|
ID: <span className="font-mono">{key.id}</span>
|
|
</p>
|
|
</div>
|
|
</Listbox.Option>
|
|
))}
|
|
</Listbox>
|
|
{selectedKeyId === 'create-new' && (
|
|
<Input
|
|
id={nameId}
|
|
label="Name of encryption key"
|
|
error={error}
|
|
onChange={(event) => onUpdateDescription(event.target.value)}
|
|
descriptionText="Provide a name for your key for easier identification"
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default EncryptionKeySelector
|