Reinstate enable vercel connections config flag (supabase#25747)

Author: joshenlim

apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx

@@ -23,6 +23,7 @@ import type {
   IntegrationProjectConnection,
 } from 'data/integrations/integrations.types'
 import { useVercelConnectionUpdateMutation } from 'data/integrations/vercel-connection-update-mutate'
+import { useFlag } from 'hooks'
 
 const VercelIntegrationConnectionForm = ({
   connection,
@@ -32,6 +33,7 @@ const VercelIntegrationConnectionForm = ({
   integration: Integration
 }) => {
   const config = connection.metadata.supabaseConfig
+  const enableVercelConnectionsConfig = useFlag('enableVercelConnectionsConfig')
 
   const FormSchema = z.object({
     environmentVariablesProduction: z
@@ -59,6 +61,11 @@ const VercelIntegrationConnectionForm = ({
   })
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
+    /**
+     * remove this hardcoded if statement when we are ready to enable this feature
+     */
+    if (!enableVercelConnectionsConfig) return
+
     const metadata = {
       ...connection.metadata,
     }
@@ -94,7 +101,10 @@ const VercelIntegrationConnectionForm = ({
         </Alert_Shadcn_>
       </div>
       <ScaffoldDivider />
-      <form onSubmit={form.handleSubmit(onSubmit)} className={cn('w-full space-y-6')}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn(!enableVercelConnectionsConfig && 'opacity-30', 'w-full space-y-6')}
+      >
         <div>
           {/* {isUpdatingVercelConnection && 'isUpdatingVercelConnection'} */}
           <div className="flex flex-col gap-6 px-8 py-8">
@@ -115,6 +125,7 @@ const VercelIntegrationConnectionForm = ({
                   <FormControl_Shadcn_>
                     <Switch
                       checked={field.value}
+                      disabled={!enableVercelConnectionsConfig}
                       onCheckedChange={(e) => {
                         field.onChange(e)
                         form.handleSubmit(onSubmit)()
@@ -141,6 +152,7 @@ const VercelIntegrationConnectionForm = ({
                   <FormControl_Shadcn_>
                     <Switch
                       checked={field.value}
+                      disabled={!enableVercelConnectionsConfig}
                       onCheckedChange={(e) => {
                         field.onChange(e)
                         form.handleSubmit(onSubmit)()
@@ -171,6 +183,7 @@ const VercelIntegrationConnectionForm = ({
                   <FormControl_Shadcn_>
                     <Switch
                       checked={field.value}
+                      disabled={!enableVercelConnectionsConfig}
                       onCheckedChange={(e) => {
                         field.onChange(e)
                         form.handleSubmit(onSubmit)()
@@ -196,6 +209,7 @@ const VercelIntegrationConnectionForm = ({
                   <FormControl_Shadcn_>
                     <Switch
                       checked={field.value}
+                      disabled={!enableVercelConnectionsConfig}
                       onCheckedChange={(e) => {
                         field.onChange(e)
                         form.handleSubmit(onSubmit)()
@@ -207,7 +221,6 @@ const VercelIntegrationConnectionForm = ({
             />
           </div>
         </div>
-        {/* <Button htmlType="submit">Submit</Button> */}
       </form>
     </Form_Shadcn_>
   )