mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { noop } from 'lodash'
|
|
import { Plus } from 'lucide-react'
|
|
import { 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={() => <Plus 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
|