konnosDashboard
EditSecretSheet.tsx160 lines · main
1import { zodResolver } from '@hookform/resolvers/zod'
2import { useParams } from 'common'
3import { Eye, EyeOff } from 'lucide-react'
4import { useEffect, useState } from 'react'
5import { SubmitHandler, useForm } from 'react-hook-form'
6import { useLatest } from 'react-use'
7import { toast } from 'sonner'
8import {
9 Button,
10 Form,
11 FormControl,
12 FormField,
13 Input,
14 Sheet,
15 SheetContent,
16 SheetFooter,
17 SheetHeader,
18 SheetSection,
19 SheetTitle,
20} from 'ui'
21import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
22import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
23import z from 'zod'
24
25import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
26import { useSecretsCreateMutation } from '@/data/secrets/secrets-create-mutation'
27import { ProjectSecret } from '@/data/secrets/secrets-query'
28import { useConfirmOnClose } from '@/hooks/ui/useConfirmOnClose'
29
30const FORM_ID = 'edit-secret-sidepanel'
31
32const FormSchema = z.object({
33 name: z.string().min(1, 'Please provide a name for your secret'),
34 value: z.string().min(1, 'Please provide a value for your secret'),
35})
36
37type FormSchemaType = z.infer<typeof FormSchema>
38
39interface EditSecretSheetProps {
40 secret?: ProjectSecret
41 visible: boolean
42 onClose: () => void
43}
44
45export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetProps) {
46 const { ref: projectRef } = useParams()
47 const secretName = useLatest(secret?.name)
48 const [showSecretValue, setShowSecretValue] = useState(false)
49
50 const form = useForm<FormSchemaType>({
51 resolver: zodResolver(FormSchema as any),
52 })
53
54 const isValid = form.formState.isValid
55 const isDirty = form.formState.isDirty
56
57 const { mutate: updateSecret, isPending: isUpdating } = useSecretsCreateMutation({
58 onSuccess: (_, variables) => {
59 toast.success(`Successfully updated secret "${variables.secrets[0].name}"`)
60 onClose()
61 },
62 })
63 const onSubmit: SubmitHandler<FormSchemaType> = async ({ name, value }) => {
64 updateSecret({
65 projectRef,
66 secrets: [{ name, value }],
67 })
68 }
69
70 const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
71 checkIsDirty: () => isDirty,
72 onClose,
73 })
74
75 useEffect(() => {
76 if (visible) {
77 form.reset({ name: secretName.current ?? '', value: '' })
78 }
79 }, [form, secretName, visible])
80
81 return (
82 <Sheet open={visible} onOpenChange={handleOpenChange}>
83 <SheetContent size="default" className={'min-w-screen! lg:min-w-[600px]! flex flex-col'}>
84 <SheetHeader className="py-3 flex flex-row gap-3 items-center">
85 <SheetTitle>Edit secret</SheetTitle>
86 </SheetHeader>
87
88 <SheetSection className="h-full">
89 <Form {...form}>
90 <form
91 id={FORM_ID}
92 className="flex flex-col gap-y-4"
93 onSubmit={form.handleSubmit(onSubmit)}
94 >
95 <FormField
96 control={form.control}
97 name="name"
98 render={({ field }) => (
99 <FormItemLayout label="Name" layout="horizontal">
100 <FormControl>
101 <Input
102 {...field}
103 readOnly
104 className="text-foreground-light! cursor-not-allowed"
105 />
106 </FormControl>
107 </FormItemLayout>
108 )}
109 />
110 <FormField
111 control={form.control}
112 name="value"
113 render={({ field }) => (
114 <FormItemLayout
115 label="Value"
116 layout="horizontal"
117 description="Secrets can’t be retrieved once saved. Enter a new value to overwrite the existing value."
118 >
119 <FormControl>
120 <PasswordInput
121 {...field}
122 type={showSecretValue ? 'text' : 'password'}
123 placeholder="my-secret-value"
124 data-1p-ignore
125 data-lpignore="true"
126 data-form-type="other"
127 data-bwignore
128 actions={
129 <div className="mr-1">
130 <Button
131 type="text"
132 className="px-1"
133 icon={showSecretValue ? <EyeOff /> : <Eye />}
134 onClick={() => setShowSecretValue(!showSecretValue)}
135 />
136 </div>
137 }
138 />
139 </FormControl>
140 </FormItemLayout>
141 )}
142 />
143 </form>
144 </Form>
145 </SheetSection>
146
147 <SheetFooter>
148 <Button disabled={isUpdating} type="default" onClick={confirmOnClose}>
149 Cancel
150 </Button>
151 <Button form={FORM_ID} htmlType="submit" disabled={!isValid} loading={isUpdating}>
152 Save
153 </Button>
154 </SheetFooter>
155 </SheetContent>
156
157 <DiscardChangesConfirmationDialog {...modalProps} />
158 </Sheet>
159 )
160}