From 79c5bb9788dd351affedbcd95aeda4da695a97db Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 4 Jun 2024 17:02:47 +0800
Subject: [PATCH] [Dashboard] Data API on/off switch (#26796)

* init layouts in project settings

* Update general.tsx

* update gap

* Update Scaffold.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* spacing issues

* now added a enabled switch

* Revert "now added a enabled switch"

This reverts commit f22050302aa339c23b59cf008ee9b4fdc0e3c2b7.

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* revert

* Update project-postgrest-config-update-mutation.ts

* add bottom padding

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* fix

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* add collapible

* update FormPanel component to be more composable

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* update callout to warning variant

* Update FormLayout.tsx

* Update PostgrestConfig.tsx

* Small copy changes

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
---
 .../SQLEditor/OngoingQueriesPanel.tsx         |   9 +-
 .../Settings/API/PostgrestConfig.tsx          | 546 +++++++++++-------
 apps/studio/components/ui/Forms/FormPanel.tsx |  70 ++-
 packages/config/tailwind.config.js            |  10 +
 packages/ui-patterns/admonition.tsx           |  22 +-
 .../ui-patterns/form/Layout/FormLayout.tsx    |   2 +-
 .../ui-patterns/multi-select/multi-select.tsx |  11 +-
 7 files changed, 436 insertions(+), 234 deletions(-)

diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index 34eba6240e1..898b5679f3b 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -100,7 +100,14 @@ export const OngoingQueriesPanel = ({ visible, onClose }: OngoingQueriesPanel) =
             )}
             {queries.length === 0 && (
               <div className="flex flex-col gap-y-2 items-center justify-center h-full text-foreground-light text-sm">
-                <span>No ongoing queries running on database</span>
+                <span>
+                  No queries are currently running on the{' '}
+                  {database?.identifier !== project?.ref
+                    ? `read replica ${database?.identifier}`
+                    : (databases ?? []).length > 1
+                      ? 'primary database'
+                      : 'database'}
+                </span>
                 <Button
                   type="default"
                   loading={isLoadingOngoingQueries || isFetchingOngoingQueries}
diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 969cc833024..836dde124d4 100644
--- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -2,9 +2,16 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { FormActions, FormPanel } from 'components/ui/Forms'
+import {
+  FormActions,
+  FormPanelContainer,
+  FormPanelContent,
+  FormPanelFooter,
+  FormPanelHeader,
+} from 'components/ui/Forms'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import { useProjectPostgrestConfigUpdateMutation } from 'data/config/project-postgrest-config-update-mutation'
+import { useDatabaseExtensionDisableMutation } from 'data/database-extensions/database-extension-disable-mutation'
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { useCheckPermissions } from 'hooks'
@@ -15,14 +22,23 @@ import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
 import {
   Admonition,
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
   Button,
+  CollapsibleContent_Shadcn_,
+  Collapsible_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
+  Separator,
   Skeleton,
+  Switch,
 } from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   MultiSelector,
@@ -34,29 +50,45 @@ import {
 } from 'ui-patterns/multi-select'
 import { z } from 'zod'
 
-const formSchema = z.object({
-  dbSchema: z.array(z.string()),
-  dbExtraSearchPath: z.string(),
-  maxRows: z.number().max(1000000, "Can't be more than 1,000,000"),
-  dbPool: z
-    .number()
-    .min(0, 'Must be more than 0')
-    .max(1000, "Can't be more than 1000")
-    .optional()
-    .nullable(),
-})
+const formSchema = z
+  .object({
+    dbSchema: z.array(z.string()),
+    dbExtraSearchPath: z.string(),
+    maxRows: z.number().max(1000000, "Can't be more than 1,000,000"),
+    dbPool: z
+      .number()
+      .min(0, 'Must be more than 0')
+      .max(1000, "Can't be more than 1000")
+      .optional()
+      .nullable(),
+    enableDataApi: z.boolean(),
+  })
+  .refine(
+    (data) => {
+      if (data.enableDataApi && data.dbSchema.length === 0) {
+        return false
+      }
+      return true
+    },
+    {
+      message: 'Must have at least one schema if Data API is enabled',
+      path: ['dbSchema'],
+    }
+  )
 
 const PostgrestConfig = () => {
   const { ref: projectRef } = useParams()
   const { project } = useProjectContext()
 
+  const { data: config, isError } = useProjectPostgrestConfigQuery({ projectRef })
+  const { data: extensions } = useDatabaseExtensionsQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
   const { data: schemas, isLoading: isLoadingSchemas } = useSchemasQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
-
-  const { data: config, isError } = useProjectPostgrestConfigQuery({ projectRef })
-
   const { mutate: updatePostgrestConfig, isLoading: isUpdating } =
     useProjectPostgrestConfigUpdateMutation({
       onSuccess: () => {
@@ -64,15 +96,14 @@ const PostgrestConfig = () => {
       },
     })
 
+  const formId = 'project-postgres-config'
+  const hiddenSchema = ['auth', 'pgbouncer', 'hooks', 'extensions']
   const canUpdatePostgrestConfig = useCheckPermissions(
     PermissionAction.UPDATE,
     'custom_config_postgrest'
   )
-
-  const { data: extensions } = useDatabaseExtensionsQuery({
-    projectRef: project?.ref,
-    connectionString: project?.connectionString,
-  })
+  const isGraphqlExtensionEnabled =
+    (extensions ?? []).find((ext) => ext.name === 'pg_graphql')?.installed_version !== null
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -85,21 +116,6 @@ const PostgrestConfig = () => {
     },
   })
 
-  const formId = 'project-postgres-config'
-
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    if (!projectRef) return console.error('Project ref is required') // is this needed ?
-
-    updatePostgrestConfig({
-      projectRef,
-      dbSchema: values.dbSchema.join(', '),
-      maxRows: values.maxRows,
-      dbExtraSearchPath: values.dbExtraSearchPath,
-      dbPool: values.dbPool ? values.dbPool : null,
-    })
-  }
-
-  const hiddenSchema = ['auth', 'pgbouncer', 'hooks', 'extensions']
   const schema =
     schemas
       ?.filter((x) => {
@@ -115,34 +131,301 @@ const PostgrestConfig = () => {
         }
       }) ?? []
 
-  const isGraphqlExtensionEnabled =
-    (extensions ?? []).find((ext) => ext.name === 'pg_graphql')?.installed_version !== null
+  function resetForm(values?: Partial<z.infer<typeof formSchema>>) {
+    const dbSchema =
+      config?.db_schema && config?.db_schema ? config.db_schema.replace(/ /g, '').split(',') : []
+
+    if (values?.enableDataApi && dbSchema.length === 0) {
+      dbSchema.push('public', 'storage')
+    }
+
+    const defaultValues = {
+      dbSchema: values?.dbSchema ?? dbSchema,
+      maxRows: values?.maxRows ?? config?.max_rows,
+      dbExtraSearchPath: values?.dbExtraSearchPath ?? config?.db_extra_search_path,
+      dbPool: values?.dbPool ?? config?.db_pool,
+      enableDataApi: values?.enableDataApi,
+    }
 
-  function resetForm() {
     if (config) {
       form.reset({
-        dbSchema: config.db_schema ? config.db_schema.replace(/ /g, '').split(',') : [],
-        maxRows: config.max_rows,
-        dbExtraSearchPath: config.db_extra_search_path,
-        dbPool: config.db_pool,
+        ...defaultValues,
       })
     }
   }
 
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    if (!projectRef) return console.error('Project ref is required') // is this needed ?
+
+    updatePostgrestConfig({
+      projectRef,
+      dbSchema: values.dbSchema.join(', '),
+      maxRows: values.maxRows,
+      dbExtraSearchPath: values.dbExtraSearchPath,
+      dbPool: values.dbPool ? values.dbPool : null,
+    })
+  }
+
   useEffect(() => {
-    if (schema && config) {
-      resetForm()
+    if (config) {
+      /**
+       * Checks if enableDataApi should be enabled or disabled
+       * based on the db_schema value being empty string
+       */
+      const enableDataApi = config.db_schema ? true : false
+      /**
+       * Reset the form to default values
+       */
+      resetForm({ enableDataApi })
     }
-  }, [schema && config])
+    // ignore dep array warning, as cant have resetForm as a dependency
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config])
+
+  const isDataApiEnabledInForm = form.getValues('enableDataApi')
 
   return (
     <Form_Shadcn_ {...form}>
       <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
-        <FormPanel
-          disabled={true}
-          header={<p>Data API Settings</p>}
-          footer={
-            <div className="flex px-8 py-4">
+        <FormPanelContainer>
+          <FormPanelHeader>Data API Settings</FormPanelHeader>
+          <FormPanelContent>
+            {isError ? (
+              <Admonition type="destructive" title="Failed to retrieve API settings" />
+            ) : (
+              <>
+                <FormField_Shadcn_
+                  control={form.control}
+                  name="enableDataApi"
+                  render={({ field }) => (
+                    <FormItem_Shadcn_ className="w-full">
+                      <FormItemLayout
+                        className="w-full px-8 py-8"
+                        layout="flex"
+                        label="Enable Data API"
+                        description="When enabled you will be able to use any Supabase client library and PostgREST endpoints with any schema configured below."
+                      >
+                        <FormControl_Shadcn_>
+                          <Switch
+                            size="large"
+                            checked={field.value}
+                            onCheckedChange={(value) => {
+                              field.onChange(value)
+
+                              if (!value) {
+                                /**
+                                 * reset the form to default values
+                                 */
+                                resetForm({ enableDataApi: false, dbSchema: [] })
+                                /**
+                                 * remove all the schema values when disabling the Data API
+                                 */
+                              } else {
+                                /**
+                                 * reset the form to default values
+                                 * when disabled the Data API
+                                 */
+
+                                resetForm({ enableDataApi: true })
+                              }
+                            }}
+                          />
+                        </FormControl_Shadcn_>
+                      </FormItemLayout>
+
+                      {!field.value && (
+                        <>
+                          <Separator />
+                          <Alert_Shadcn_
+                            variant="warning"
+                            className="mb-0 border-none rounded-none"
+                          >
+                            <WarningIcon className="!left-[2rem]" />
+                            <AlertTitle_Shadcn_ className="!pl-[3.5rem] !left-[6rem]">
+                              No schemas can be queried
+                            </AlertTitle_Shadcn_>
+                            <AlertDescription_Shadcn_ className="!pl-[3.5rem]">
+                              <p>
+                                With this setting disabled, you will not be able to query any
+                                schemas via the Data API.
+                              </p>
+                              <p>
+                                You will see errors from the Postgrest endpoint
+                                <code className="text-xs">/rest/v1/</code>.
+                              </p>
+                            </AlertDescription_Shadcn_>
+                          </Alert_Shadcn_>
+                        </>
+                      )}
+                    </FormItem_Shadcn_>
+                  )}
+                />
+                <Collapsible_Shadcn_ open={form.getValues('enableDataApi')}>
+                  <CollapsibleContent_Shadcn_ className="border-t divide-y transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="dbSchema"
+                      render={({ field }) => (
+                        <FormItem_Shadcn_ className="w-full">
+                          <FormItemLayout
+                            label="Exposed schemas"
+                            description="The schemas to expose in your API. Tables, views and stored procedures in
+                          these schemas will get API endpoints."
+                            layout="horizontal"
+                            className="px-8 py-8"
+                          >
+                            {isLoadingSchemas ? (
+                              <div className="col-span-12 flex flex-col gap-2 lg:col-span-7">
+                                <Skeleton className="w-full h-[38px]" />
+                              </div>
+                            ) : (
+                              <MultiSelector
+                                onValuesChange={field.onChange}
+                                values={field.value}
+                                size={'small'}
+                                disabled={!canUpdatePostgrestConfig || !isDataApiEnabledInForm}
+                              >
+                                <MultiSelectorTrigger>
+                                  <MultiSelectorInput placeholder="Select schemas for Data API..." />
+                                </MultiSelectorTrigger>
+                                <MultiSelectorContent>
+                                  {schema.length <= 0 ? (
+                                    <MultiSelectorList>
+                                      <MultiSelectorItem key={'empty'} value={'no'}>
+                                        no
+                                      </MultiSelectorItem>
+                                    </MultiSelectorList>
+                                  ) : (
+                                    <MultiSelectorList>
+                                      {schema.map((x, i) => (
+                                        <MultiSelectorItem key={x.id + '-' + i} value={x.name}>
+                                          {x.name}
+                                        </MultiSelectorItem>
+                                      ))}
+                                    </MultiSelectorList>
+                                  )}
+                                </MultiSelectorContent>
+                              </MultiSelector>
+                            )}
+
+                            {!field.value.includes('public') && field.value.length > 0 && (
+                              <Admonition
+                                type="default"
+                                title="The public schema for this project is not exposed"
+                                className="mt-2"
+                                description={
+                                  <>
+                                    <p>
+                                      You will not be able to query tables and views in the{' '}
+                                      <code>public</code> schema via supabase-js or HTTP clients.
+                                    </p>
+                                    {isGraphqlExtensionEnabled && (
+                                      <>
+                                        <p>
+                                          Tables in the <code className="text-xs">public</code>{' '}
+                                          schema are still exposed over our GraphQL endpoints.
+                                        </p>
+                                        <Button asChild type="default">
+                                          <Link href={`/project/${projectRef}/database/extensions`}>
+                                            Disable the pg_graphql extension
+                                          </Link>
+                                        </Button>
+                                      </>
+                                    )}
+                                  </>
+                                }
+                              />
+                            )}
+                          </FormItemLayout>
+                        </FormItem_Shadcn_>
+                      )}
+                    />
+
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="dbExtraSearchPath"
+                      render={({ field }) => (
+                        <FormItem_Shadcn_ className="w-full">
+                          <FormItemLayout
+                            className="w-full px-8 py-8"
+                            layout="horizontal"
+                            label="Extra search path"
+                            description="Extra schemas to add to the search path of every request. Multiple schemas must be comma-separated."
+                          >
+                            <FormControl_Shadcn_>
+                              <Input_Shadcn_
+                                size="small"
+                                disabled={!canUpdatePostgrestConfig || !isDataApiEnabledInForm}
+                                {...field}
+                              />
+                            </FormControl_Shadcn_>
+                          </FormItemLayout>
+                        </FormItem_Shadcn_>
+                      )}
+                    />
+
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="maxRows"
+                      render={({ field }) => (
+                        <FormItem_Shadcn_ className="w-full">
+                          <FormItemLayout
+                            className="w-full px-8 py-8"
+                            layout="horizontal"
+                            label="Max rows"
+                            description="The maximum number of rows returned from a view, table, or stored procedure. Limits payload size for accidental or malicious requests."
+                          >
+                            <FormControl_Shadcn_>
+                              <Input_Shadcn_
+                                size="small"
+                                disabled={!canUpdatePostgrestConfig || !isDataApiEnabledInForm}
+                                {...field}
+                                type="number"
+                                {...form.register('maxRows', {
+                                  valueAsNumber: true, // Ensure the value is handled as a number
+                                })}
+                              />
+                            </FormControl_Shadcn_>
+                          </FormItemLayout>
+                        </FormItem_Shadcn_>
+                      )}
+                    />
+
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="dbPool"
+                      render={({ field }) => (
+                        <FormItem_Shadcn_ className="w-full">
+                          <FormItemLayout
+                            className="w-full px-8 py-8"
+                            layout="horizontal"
+                            label="Pool size"
+                            description="Number of maximum connections to keep open in the Data API server's database pool. Unset to let it be configured automatically based on compute size."
+                          >
+                            <FormControl_Shadcn_>
+                              <Input_Shadcn_
+                                size="small"
+                                disabled={!canUpdatePostgrestConfig || !isDataApiEnabledInForm}
+                                {...field}
+                                type="number"
+                                placeholder="Configured automatically based on compute size"
+                                onChange={(e) =>
+                                  field.onChange(
+                                    e.target.value === '' ? null : Number(e.target.value)
+                                  )
+                                }
+                                value={field.value === null ? '' : field.value}
+                              />
+                            </FormControl_Shadcn_>
+                          </FormItemLayout>
+                        </FormItem_Shadcn_>
+                      )}
+                    />
+                  </CollapsibleContent_Shadcn_>
+                </Collapsible_Shadcn_>
+              </>
+            )}
+            <FormPanelFooter className="flex px-8 py-4">
               <FormActions
                 form={formId}
                 isSubmitting={isUpdating}
@@ -155,166 +438,9 @@ const PostgrestConfig = () => {
                     : undefined
                 }
               />
-            </div>
-          }
-        >
-          {isError ? (
-            <Admonition type="destructive" title="Failed to retrieve API settings" />
-          ) : (
-            <>
-              <FormField_Shadcn_
-                control={form.control}
-                name="dbSchema"
-                render={({ field }) => (
-                  <FormItem_Shadcn_ className="w-full">
-                    <FormItemLayout
-                      label="Exposed schemas"
-                      description="The schemas to expose in your API. Tables, views and stored procedures in
-                          these schemas will get API endpoints."
-                      layout="horizontal"
-                      className="px-8 py-8"
-                    >
-                      {isLoadingSchemas ? (
-                        <div className="col-span-12 flex flex-col gap-2 lg:col-span-7">
-                          <Skeleton className="w-full h-[38px]" />
-                        </div>
-                      ) : (
-                        <MultiSelector
-                          onValuesChange={field.onChange}
-                          values={field.value}
-                          size={'small'}
-                        >
-                          <MultiSelectorTrigger>
-                            <MultiSelectorInput placeholder="Select schemas for Data API..." />
-                          </MultiSelectorTrigger>
-                          <MultiSelectorContent>
-                            <MultiSelectorList>
-                              {schema.map((x, i) => (
-                                <MultiSelectorItem key={x.id + '-' + i} value={x.name}>
-                                  {x.name}
-                                </MultiSelectorItem>
-                              ))}
-                            </MultiSelectorList>
-                          </MultiSelectorContent>
-                        </MultiSelector>
-                      )}
-
-                      {!field.value.includes('public') && (
-                        <Admonition
-                          type="default"
-                          title="The public schema for this project is not exposed"
-                          className="mt-2"
-                        >
-                          <>
-                            <p>
-                              You will not be able to query tables and views in the{' '}
-                              <code>public</code> schema via supabase-js or HTTP clients.
-                            </p>
-                            {isGraphqlExtensionEnabled && (
-                              <>
-                                <p>
-                                  Tables in the <code className="text-xs">public</code> schema are
-                                  still exposed over our GraphQL endpoints.
-                                </p>
-                                <Button asChild type="default">
-                                  <Link
-                                    href={`/project/${projectRef}/database/extensions`}
-                                    // className="!no-underline !hover:bg-surface-100 !text-foreground"
-                                  >
-                                    Disable the pg_graphql extension
-                                  </Link>
-                                </Button>
-                              </>
-                            )}
-                          </>
-                        </Admonition>
-                      )}
-                    </FormItemLayout>
-                  </FormItem_Shadcn_>
-                )}
-              />
-
-              <FormField_Shadcn_
-                control={form.control}
-                name="dbExtraSearchPath"
-                render={({ field }) => (
-                  <FormItem_Shadcn_ className="w-full">
-                    <FormItemLayout
-                      className="w-full px-8 py-8"
-                      layout="horizontal"
-                      label="Extra search path"
-                      description="Extra schemas to add to the search path of every request. Multiple schemas must be comma-separated."
-                    >
-                      <FormControl_Shadcn_>
-                        <Input_Shadcn_
-                          size="small"
-                          disabled={!canUpdatePostgrestConfig}
-                          {...field}
-                        />
-                      </FormControl_Shadcn_>
-                    </FormItemLayout>
-                  </FormItem_Shadcn_>
-                )}
-              />
-
-              <FormField_Shadcn_
-                control={form.control}
-                name="maxRows"
-                render={({ field }) => (
-                  <FormItem_Shadcn_ className="w-full">
-                    <FormItemLayout
-                      className="w-full px-8 py-8"
-                      layout="horizontal"
-                      label="Max rows"
-                      description="The maximum number of rows returned from a view, table, or stored procedure. Limits payload size for accidental or malicious requests."
-                    >
-                      <FormControl_Shadcn_>
-                        <Input_Shadcn_
-                          size="small"
-                          disabled={!canUpdatePostgrestConfig}
-                          {...field}
-                          type="number"
-                          {...form.register('maxRows', {
-                            valueAsNumber: true, // Ensure the value is handled as a number
-                          })}
-                        />
-                      </FormControl_Shadcn_>
-                    </FormItemLayout>
-                  </FormItem_Shadcn_>
-                )}
-              />
-
-              <FormField_Shadcn_
-                control={form.control}
-                name="dbPool"
-                render={({ field }) => (
-                  <FormItem_Shadcn_ className="w-full">
-                    <FormItemLayout
-                      className="w-full px-8 py-8"
-                      layout="horizontal"
-                      label="Pool size"
-                      description="Number of maximum connections to keep open in the Data API server's database pool. Unset to let it be configured automatically based on compute size."
-                    >
-                      <FormControl_Shadcn_>
-                        <Input_Shadcn_
-                          size="small"
-                          disabled={!canUpdatePostgrestConfig}
-                          {...field}
-                          type="number"
-                          placeholder="Configured automatically based on compute size"
-                          onChange={(e) =>
-                            field.onChange(e.target.value === '' ? null : Number(e.target.value))
-                          }
-                          value={field.value === null ? '' : field.value}
-                        />
-                      </FormControl_Shadcn_>
-                    </FormItemLayout>
-                  </FormItem_Shadcn_>
-                )}
-              />
-            </>
-          )}
-        </FormPanel>
+            </FormPanelFooter>
+          </FormPanelContent>
+        </FormPanelContainer>
       </form>
     </Form_Shadcn_>
   )
diff --git a/apps/studio/components/ui/Forms/FormPanel.tsx b/apps/studio/components/ui/Forms/FormPanel.tsx
index a2a58fe81d0..d16420c94b8 100644
--- a/apps/studio/components/ui/Forms/FormPanel.tsx
+++ b/apps/studio/components/ui/Forms/FormPanel.tsx
@@ -1,3 +1,6 @@
+import { HTMLAttributes, forwardRef } from 'react'
+import { cn } from 'ui'
+
 interface Props {
   children: React.ReactNode
   header?: React.ReactNode
@@ -9,22 +12,55 @@ interface Props {
 }
 
 const FormPanel = ({ children, header, footer }: Props) => (
-  <div
-    className="
-      bg-surface-100
-      border-default
-      overflow-hidden 
-      rounded-md border shadow"
-  >
-    {header && <div className="border-default border-b px-8 py-4">{header}</div>}
-    <div className="divide-border flex flex-col gap-0 divide-y">{children}</div>
-    {footer && (
-      <>
-        <div className="border-default border-t"></div>
-        {footer}
-      </>
-    )}
-  </div>
+  <FormPanelContainer>
+    {header && <FormPanelHeader>{header}</FormPanelHeader>}
+    <FormPanelContent className="divide-y">{children}</FormPanelContent>
+    {footer && <FormPanelFooter>{footer}</FormPanelFooter>}
+  </FormPanelContainer>
 )
 
-export { FormPanel }
+const FormPanelContainer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => (
+    <div
+      ref={ref}
+      {...props}
+      className={cn('bg-surface-100 border overflow-hidden rounded-md shadow', props.className)}
+    >
+      {children}
+    </div>
+  )
+)
+
+FormPanelContainer.displayName = FormPanelContainer.displayName
+
+const FormPanelHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => (
+    <div ref={ref} {...props} className={cn('border-default border-b px-8 py-4', props.className)}>
+      {children}
+    </div>
+  )
+)
+
+FormPanelHeader.displayName = FormPanelHeader.displayName
+
+const FormPanelContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => (
+    <div ref={ref} {...props} className={cn('divide-border flex flex-col gap-0', props.className)}>
+      {children}
+    </div>
+  )
+)
+
+FormPanelContent.displayName = FormPanelContent.displayName
+
+const FormPanelFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => (
+    <div ref={ref} {...props} className={cn('border-t', props.className)}>
+      {children}
+    </div>
+  )
+)
+
+FormPanelFooter.displayName = FormPanelFooter.displayName
+
+export { FormPanel, FormPanelContainer, FormPanelContent, FormPanelHeader, FormPanelFooter }
diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js
index 50803243ff0..7e5f9a0fa0e 100644
--- a/packages/config/tailwind.config.js
+++ b/packages/config/tailwind.config.js
@@ -380,12 +380,22 @@ const uiConfig = ui({
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 },
         },
+        'collapsible-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 0 },
+        },
       },
       animation: {
         'flash-code': 'flash-code 1s forwards',
         'flash-code-slow': 'flash-code 2s forwards',
         'accordion-down': 'accordion-down 0.15s ease-out',
         'accordion-up': 'accordion-up 0.15s ease-out',
+        'collapsible-down': 'collapsible-down 0.10s ease-out',
+        'collapsible-up': 'collapsible-up 0.10s ease-out',
       },
       borderRadius: {
         // lg: `var(--radius)`,
diff --git a/packages/ui-patterns/admonition.tsx b/packages/ui-patterns/admonition.tsx
index 225e414a45b..38f5f067434 100644
--- a/packages/ui-patterns/admonition.tsx
+++ b/packages/ui-patterns/admonition.tsx
@@ -17,6 +17,10 @@ export interface AdmonitionProps {
   title?: string
   description?: string | React.ReactNode
   showIcon?: boolean
+  childProps?: {
+    title?: React.ComponentProps<typeof AlertTitle>
+    description?: React.ComponentProps<typeof AlertDescription>
+  }
 }
 
 const admonitionToAlertMapping: Record<
@@ -113,17 +117,29 @@ export const Admonition = forwardRef<
         {label || title ? (
           <>
             <AlertTitle
+              {...props.childProps?.title}
               className={cn(
                 'text mt-0.5 flex gap-3 text-sm [&_p]:mb-1.5 [&_p]:mt-0',
-                !label && 'flex-col'
+                !label && 'flex-col',
+                props.childProps?.title?.className
               )}
             >
               {label || title}
             </AlertTitle>
-            {description && <AlertDescription>{description}</AlertDescription>}
+            {description && (
+              <AlertDescription className={props.childProps?.description?.className}>
+                {description}
+              </AlertDescription>
+            )}
             {/* // children is to handle Docs and MDX issues with children and <p> elements */}
             {children && (
-              <AlertDescription className="mt-3 [&_p]:mb-1.5 [&_p]:mt-0">
+              <AlertDescription
+                {...props.childProps?.description}
+                className={cn(
+                  'mt-3 [&_p]:mb-1.5 [&_p]:mt-0',
+                  props.childProps?.description?.className
+                )}
+              >
                 {children}
               </AlertDescription>
             )}
diff --git a/packages/ui-patterns/form/Layout/FormLayout.tsx b/packages/ui-patterns/form/Layout/FormLayout.tsx
index cd0f95b2f06..713ab2a026e 100644
--- a/packages/ui-patterns/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/form/Layout/FormLayout.tsx
@@ -26,7 +26,7 @@ type Props = {
   name?: string
 }
 
-const ContainerVariants = cva('grid gap-2', {
+const ContainerVariants = cva('relative grid gap-2', {
   variants: {
     size: {
       tiny: 'text-xs',
diff --git a/packages/ui-patterns/multi-select/multi-select.tsx b/packages/ui-patterns/multi-select/multi-select.tsx
index a993f9a9e37..9c99c467001 100644
--- a/packages/ui-patterns/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/multi-select/multi-select.tsx
@@ -43,6 +43,7 @@ type MultiSelectorProps = {
   values: string[]
   onValuesChange: (value: string[]) => void
   loop?: boolean
+  disabled?: boolean
 } & React.ComponentPropsWithoutRef<typeof Command> &
   VariantProps<typeof MultiSelectorVariants>
 
@@ -56,6 +57,7 @@ interface MultiSelectContextProps {
   activeIndex: number
   setActiveIndex: React.Dispatch<React.SetStateAction<number>>
   size: MultiSelectorProps['size']
+  disabled?: boolean
 }
 
 const MultiSelectContext = createContext<MultiSelectContextProps | null>(null)
@@ -76,6 +78,7 @@ const MultiSelector = ({
   children,
   dir,
   size = 'small',
+  disabled,
   ...props
 }: MultiSelectorProps) => {
   const [inputValue, setInputValue] = useState('')
@@ -154,6 +157,7 @@ const MultiSelector = ({
         activeIndex,
         setActiveIndex,
         size: size || 'small',
+        disabled,
       }}
     >
       <CommandPrimitive
@@ -202,7 +206,7 @@ const MultiSelectorTriggerBadgeVariants = cva(
 
 const MultiSelectorTrigger = forwardRef<HTMLDivElement, ButtonVariantProps>(
   ({ className, children, ...props }, ref) => {
-    const { value, onValueChange, activeIndex, size } = useMultiSelect()
+    const { value, onValueChange, activeIndex, size, disabled } = useMultiSelect()
 
     const mousePreventDefault = useCallback((e: React.MouseEvent) => {
       e.preventDefault()
@@ -214,6 +218,7 @@ const MultiSelectorTrigger = forwardRef<HTMLDivElement, ButtonVariantProps>(
         ref={ref}
         className={cn(
           'flex flex-wrap gap-1 border border-control bg-foreground/[.026] rounded-lg px-1',
+          disabled && 'cursor-not-allowed opacity-50',
           className
         )}
         {...props}
@@ -264,7 +269,8 @@ const MultiSelectorInput = forwardRef<
   React.ElementRef<typeof CommandInput>,
   React.ComponentPropsWithoutRef<typeof CommandInput>
 >(({ className, ...props }, ref) => {
-  const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex, size } = useMultiSelect()
+  const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex, size, disabled } =
+    useMultiSelect()
   return (
     <CommandInput
       {...props}
@@ -274,6 +280,7 @@ const MultiSelectorInput = forwardRef<
       onBlur={() => setOpen(false)}
       onFocus={() => setOpen(true)}
       onClick={() => setActiveIndex(-1)}
+      disabled={disabled}
       className={cn(
         MultiSelectorInputVariants({ size }),
         'text-sm bg-transparent border-none outline-none placeholder:text-foreground-muted flex-1',