Fix S3 cred form validation (#25885)

fix form validation

apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx

@@ -1,3 +1,9 @@
+import { differenceInDays } from 'date-fns'
+import React from 'react'
+import toast from 'react-hot-toast'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { AlertTitle } from '@ui/components/shadcn/ui/alert'
 import { useParams } from 'common'
 import {
@@ -12,11 +18,8 @@ import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useS3AccessKeyCreateMutation } from 'data/storage/s3-access-key-create-mutation'
 import { useS3AccessKeyDeleteMutation } from 'data/storage/s3-access-key-delete-mutation'
 import { useStorageCredentialsQuery } from 'data/storage/s3-access-key-query'
-import { differenceInDays } from 'date-fns'
 import { AlertCircle, MoreVertical, TrashIcon } from 'lucide-react'
 import Link from 'next/link'
-import React from 'react'
-import toast from 'react-hot-toast'
 import {
   AlertDescription_Shadcn_,
   Alert_Shadcn_,
@@ -34,6 +37,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Form_Shadcn_,
   TooltipContent_Shadcn_,
   TooltipTrigger_Shadcn_,
   Tooltip_Shadcn_,
@@ -42,6 +46,7 @@ import {
 import { GenericSkeletonLoader } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { FormField } from '@ui/components/shadcn/ui/form'
 
 export const S3Connection = () => {
   const [openCreateCred, setOpenCreateCred] = React.useState(false)
@@ -84,6 +89,24 @@ export const S3Connection = () => {
 
   const s3connectionUrl = getConnectionURL()
 
+  const FormSchema = z.object({
+    description: z.string().min(3, {
+      message: 'Description must be at least 3 characters long',
+    }),
+  })
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      description: '',
+    },
+  })
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    await createS3AccessKey.mutateAsync(data)
+    setShowSuccess(true)
+  }
+
   return (
     <>
       <div>
@@ -204,35 +227,35 @@ export const S3Connection = () => {
                       </DialogDescription>
                     </DialogHeader>
                     <DialogSectionSeparator />
-                    <form
-                      onSubmit={async (e) => {
-                        e.preventDefault()
-
-                        const formData = new FormData(e.target as HTMLFormElement)
-                        const description = formData.get('description') as string
-
-                        await createS3AccessKey.mutateAsync({ description })
-                        setShowSuccess(true)
-                      }}
-                    >
-                      <DialogSection>
-                        <FormItemLayout label="Description" isReactForm={false}>
-                          <Input
-                            autoComplete="off"
-                            placeholder="My test key"
-                            type="text"
+                    <Form_Shadcn_ {...form}>
+                      <form onSubmit={form.handleSubmit(onSubmit)}>
+                        <DialogSection>
+                          <FormField
                             name="description"
-                            required
+                            render={({ field }) => (
+                              <FormItemLayout label="Description">
+                                <Input
+                                  autoComplete="off"
+                                  placeholder="My test key"
+                                  type="text"
+                                  {...form.register('description')}
+                                />
+                              </FormItemLayout>
+                            )}
                           />
-                        </FormItemLayout>
-                      </DialogSection>
+                        </DialogSection>
 
-                      <DialogFooter>
-                        <Button htmlType="submit" loading={createS3AccessKey.isLoading}>
-                          Create access key
-                        </Button>
-                      </DialogFooter>
-                    </form>
+                        <DialogFooter>
+                          <Button
+                            className="mt-4"
+                            htmlType="submit"
+                            loading={createS3AccessKey.isLoading}
+                          >
+                            Create access key
+                          </Button>
+                        </DialogFooter>
+                      </form>
+                    </Form_Shadcn_>
                   </>
                 )}
               </DialogContent>