konnosDashboard
CreateVectorBucketDialog.tsx233 lines · main
1// @ts-nocheck
2import { zodResolver } from '@hookform/resolvers/zod'
3import { useParams } from 'common'
4import { useEffect, useState } from 'react'
5import { SubmitHandler, useForm } from 'react-hook-form'
6import { toast } from 'sonner'
7import {
8 Button,
9 Dialog,
10 DialogContent,
11 DialogFooter,
12 DialogHeader,
13 DialogSection,
14 DialogSectionSeparator,
15 DialogTitle,
16 Form,
17 FormControl,
18 FormField,
19 Input,
20} from 'ui'
21import { Admonition } from 'ui-patterns/admonition'
22import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
23import z from 'zod'
24
25import { validVectorBucketName } from './CreateVectorBucketDialog.utils'
26import { useS3VectorsWrapperExtension } from './useS3VectorsWrapper'
27import { InlineLink } from '@/components/ui/InlineLink'
28import { useDatabaseExtensionEnableMutation } from '@/data/database-extensions/database-extension-enable-mutation'
29import { useS3VectorsWrapperCreateMutation } from '@/data/storage/s3-vectors-wrapper-create-mutation'
30import { useVectorBucketCreateMutation } from '@/data/storage/vector-bucket-create-mutation'
31import { useVectorBucketsQuery } from '@/data/storage/vector-buckets-query'
32import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
33import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
34import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
35import { DOCS_URL } from '@/lib/constants'
36
37const FormSchema = z.object({
38 name: z
39 .string()
40 .trim()
41 .min(3, 'Bucket name should be at least 3 characters')
42 .max(63, 'Bucket name should be up to 63 characters')
43 .superRefine((name, ctx) => {
44 if (!validVectorBucketName.test(name)) {
45 if (/[A-Z]/.test(name)) {
46 return ctx.addIssue({
47 path: [],
48 code: z.ZodIssueCode.custom,
49 message: 'Bucket name can only be lowercase characters',
50 })
51 }
52
53 if (!/^[a-z0-9]/.test(name)) {
54 return ctx.addIssue({
55 path: [],
56 code: z.ZodIssueCode.custom,
57 message: 'Bucket name must start with a lowercase letter or number.',
58 })
59 }
60
61 if (!/[a-z0-9]$/.test(name)) {
62 return ctx.addIssue({
63 path: [],
64 code: z.ZodIssueCode.custom,
65 message: 'Bucket name must end with a lowercase letter or number.',
66 })
67 }
68
69 const [match] = name.match(/[^a-z0-9-]/) ?? []
70 return ctx.addIssue({
71 path: [],
72 code: z.ZodIssueCode.custom,
73 message: !!match
74 ? `Bucket name cannot contain the "${match}" character`
75 : 'Bucket name contains an invalid special character',
76 })
77 }
78 }),
79})
80
81const formId = 'create-storage-bucket-form'
82
83export type CreateBucketForm = z.infer<typeof FormSchema>
84
85export const CreateVectorBucketDialog = ({
86 visible,
87 setVisible,
88}: {
89 visible: boolean
90 setVisible: (visible: boolean) => void
91}) => {
92 const { ref } = useParams()
93 const { data: org } = useSelectedOrganizationQuery()
94 const { data: project } = useSelectedProjectQuery()
95 const [isLoading, setIsLoading] = useState(false)
96
97 const { data } = useVectorBucketsQuery({ projectRef: ref })
98
99 const form = useForm<CreateBucketForm>({
100 resolver: zodResolver(FormSchema as any),
101 defaultValues: { name: '' },
102 })
103
104 const { mutate: sendEvent } = useSendEventMutation()
105 const { mutateAsync: createVectorBucket } = useVectorBucketCreateMutation({
106 onError: () => {},
107 })
108
109 const { extension: wrappersExtension, state: wrappersExtensionState } =
110 useS3VectorsWrapperExtension()
111
112 const { mutateAsync: createS3VectorsWrapper } = useS3VectorsWrapperCreateMutation()
113
114 const { mutateAsync: enableExtension } = useDatabaseExtensionEnableMutation()
115
116 const onSubmit: SubmitHandler<CreateBucketForm> = async (values) => {
117 if (!ref) return console.error('Project ref is required')
118
119 const hasExistingBucket = (data?.vectorBuckets ?? []).some(
120 (x) => x.vectorBucketName === values.name
121 )
122 if (hasExistingBucket) return toast.error('Bucket name already exists')
123
124 setIsLoading(true)
125 try {
126 await createVectorBucket({ projectRef: ref, bucketName: values.name })
127 } catch (error: any) {
128 toast.error(`Failed to create vector bucket: ${error.message}`)
129 setIsLoading(false)
130 return
131 }
132
133 try {
134 if (!wrappersExtension) throw new Error('Unable to find wrappers extension.')
135 if (wrappersExtensionState === 'not-installed') {
136 // when it's not installed, we need to enable the extension and create the wrapper
137 await enableExtension({
138 projectRef: project?.ref!,
139 connectionString: project?.connectionString,
140 name: wrappersExtension.name,
141 schema: wrappersExtension.schema ?? 'extensions',
142 version: wrappersExtension.default_version,
143 })
144 }
145
146 await createS3VectorsWrapper({ bucketName: values.name })
147 } catch (error: any) {
148 toast.warning(
149 `Failed to create vector bucket integration: ${error.message}. The bucket will be created but you will need to manually install the integration.`
150 )
151 }
152 setIsLoading(false)
153
154 sendEvent({
155 action: 'storage_bucket_created',
156 properties: { bucketType: 'vector' },
157 groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
158 })
159 toast.success(`Successfully created vector bucket ${values.name}`)
160 form.reset()
161 setVisible(false)
162 }
163
164 useEffect(() => {
165 if (!visible) form.reset()
166 }, [visible, form])
167
168 return (
169 <Dialog open={visible} onOpenChange={setVisible}>
170 <DialogContent>
171 <DialogHeader>
172 <DialogTitle>Create vector bucket</DialogTitle>
173 </DialogHeader>
174
175 <DialogSectionSeparator />
176
177 <Form {...form}>
178 <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
179 <DialogSection className="flex flex-col p-0!">
180 <FormField
181 key="name"
182 name="name"
183 control={form.control}
184 render={({ field }) => (
185 <FormItemLayout
186 name="name"
187 label="Bucket name"
188 className="px-5 py-5"
189 labelOptional="Cannot be changed after creation"
190 description="Must be between 3–63 characters. Only lowercase letters, numbers, and hyphens are allowed"
191 >
192 <FormControl>
193 <Input
194 id="name"
195 data-1p-ignore
196 data-lpignore="true"
197 data-form-type="other"
198 data-bwignore
199 {...field}
200 placeholder="Enter bucket name"
201 />
202 </FormControl>
203 </FormItemLayout>
204 )}
205 />
206
207 <Admonition type="default" className="border-x-0 border-b-0 rounded-none">
208 <p>
209 Briven will install the{' '}
210 {wrappersExtensionState !== 'installed' ? 'Wrappers extension and ' : ''}
211 S3 Vectors Wrapper integration on your behalf.{' '}
212 <InlineLink href={`${DOCS_URL}/guides/database/extensions/wrappers/s3-vectors`}>
213 Learn more
214 </InlineLink>
215 .
216 </p>
217 </Admonition>
218 </DialogSection>
219 </form>
220 </Form>
221
222 <DialogFooter>
223 <Button type="default" disabled={isLoading} onClick={() => setVisible(false)}>
224 Cancel
225 </Button>
226 <Button form={formId} htmlType="submit" loading={isLoading}>
227 Create
228 </Button>
229 </DialogFooter>
230 </DialogContent>
231 </Dialog>
232 )
233}