[pull] master from supabase:master

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -2132,6 +2132,7 @@ export const deployment: NavMenuConstant = {
       name: 'Environments',
       items: [
         { name: 'Managing environments', url: '/guides/deployment/managing-environments' },
+        { name: 'Database migrations', url: '/guides/deployment/database-migrations' },
         { name: 'Branching', url: '/guides/deployment/branching' },
       ],
     },

apps/docs/content/guides/deployment/database-migrations.mdx

@@ -0,0 +1,257 @@
+---
+id: 'database-migrations'
+title: 'Database Migrations'
+description: 'How to manage schema migrations for your Supabase project.'
+subtitle: 'How to manage schema migrations for your Supabase project.'
+video: 'https://www.youtube-nocookie.com/v/vyHyYpvjaks'
+tocVideo: 'vyHyYpvjaks'
+---
+
+Database schema changes are managed through "migrations". Database migrations are a common way of tracking changes to your database over time.
+
+## Schema migrations
+
+For this guide, we'll create a table called `employees` and see how we can make changes to it.
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+    <StepHikeCompact.Details title="Create your first migration file">
+
+      To get started, generate a [new migration](/docs/reference/cli/supabase-migration-new) to store the SQL needed to create our `employees` table.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```bash
+supabase migration new create_employees_table
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={2}>
+    <StepHikeCompact.Details title="Add the SQL to your migration file">
+      This creates a new migration: supabase/migrations/\<timestamp\>
+        _create_employees_table.sql.
+
+        To that file, add the SQL to create this `employees` table
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```sql
+create table employees (
+  id bigint primary key generated always as identity,
+  name text,
+  email text,
+  created_at timestamptz default now()
+);
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={3}>
+    <StepHikeCompact.Details title="Apply your migration">
+      Now that you have a migration file, you can run this migration and create the `employees` table.
+
+      Use the `reset` command here to reset the database to the current migrations
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```bash
+supabase db reset
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={4}>
+    <StepHikeCompact.Details title="Modify your employees table">
+      Now you can visit your new `employees` table in the Dashboard.
+
+      Next, modify your `employees` table by adding a column for department. Create a new migration file for that.
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```bash
+supabase migration new add_department_to_employees_table
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={5}>
+    <StepHikeCompact.Details title="Add a new column to your table">
+      This creates a new migration file: supabase/migrations/\<timestamp\>
+        _add_department_to_employees_table.sql.
+
+        To that file, add the SQL to create a new department column
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```sql
+alter table if exists public.employees
+add department text default 'Hooli';
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+### Add sample data
+
+Now that you are managing your database with migrations scripts, it would be great have some seed data to use every time you reset the database.
+
+For this, you can create a seed script in `supabase/seed.sql`.
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+    <StepHikeCompact.Details title="Populate your table">
+      Insert data into your `employees` table with your `supabase/seed.sql` file.
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```sql
+insert into public.employees
+  (name)
+values
+  ('Erlich Bachman'),
+  ('Richard Hendricks'),
+  ('Monica Hall');
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={2}>
+    <StepHikeCompact.Details title="Reset your database">
+      Reset your database (apply current migrations), and populate with seed data
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+```bash
+supabase db reset
+```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+You should now see the `employees` table, along with your seed data in the Dashboard! All of your database changes are captured in code, and you can reset to a known state at any time, complete with seed data.
+
+### Diffing changes
+
+This workflow is great if you know SQL and are comfortable creating tables and columns. If not, you can still use the Dashboard to create tables and columns, and then use the CLI to diff your changes and create migrations.
+
+Create a new table called `cities`, with columns `id`, `name` and `population`. To see the corresponding SQL for this, you can use the `supabase db diff --schema public` command. This will show you the SQL that will be run to create the table and columns. The output of `supabase db diff` will look something like this:
+
+```
+Diffing schemas: public
+Finished supabase db diff on branch main.
+
+create table "public"."cities" (
+  "id" bigint primary key generated always as identity,
+  "name" text,
+  "population" bigint
+);
+
+```
+
+Alternately, you can view your table definitions directly from the Table Editor:
+
+![SQL Definition](/docs/img/guides/cli/sql-definitions.png)
+
+You can then copy this SQL into a new migration file, and run `supabase db reset` to apply the changes.
+
+The last step is deploying these changes to a live Supabase project.
+
+## Deploy your project
+
+You've been developing your project locally, making changes to your tables via migrations. It's time to deploy your project to the Supabase Platform and start scaling up to millions of users! Head over to [Supabase](https://supabase.com/dashboard) and create a new project to deploy to.
+
+### Log in to the Supabase CLI
+
+<CH.Code>
+
+```bash Terminal
+supabase login
+```
+
+```bash npx
+npx supabase login
+```
+
+</CH.Code>
+
+### Link your project
+
+Associate your project with your remote project using [`supabase link`](/docs/reference/cli/usage#supabase-link).
+
+```bash
+supabase link --project-ref <project-id>
+# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>
+
+supabase db pull
+# Capture any changes that you have made to your remote database before you went through the steps above
+# If you have not made any changes to the remote database, skip this step
+```
+
+`supabase/migrations` is now populated with a migration in `<timestamp>_remote_schema.sql`.
+This migration captures any changes required for your local database to match the schema of your remote Supabase project.
+
+Review the generated migration file and once happy, apply the changes to your local instance:
+
+```bash
+# To apply the new migration to your local database:
+supabase migration up
+
+# To reset your local database completely:
+supabase db reset
+```
+
+<Admonition type="note">
+
+There are a few commands required to link your project. We are in the process of consolidating these commands into a single command. Bear with us!
+
+</Admonition>
+
+### Deploy database changes
+
+Deploy any local database migrations using [`db push`](/docs/reference/cli/usage#supabase-db-push):
+
+```sh
+supabase db push
+```
+
+Visiting your live project on [Supabase](https://supabase.com/dashboard), you'll see a new `employees` table, complete with the `department` column you added in the second migration above.

apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx

@@ -41,8 +41,11 @@ const TemplateEditor = ({ template }: TemplateEditorProps) => {
     onSuccess: (res) => setValidationResult(res),
   })
 
-  const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation({
-    onError: (error) => toast.error(`Failed to update email templates: ${error.message}`),
+  const { mutate: updateAuthConfig } = useAuthConfigUpdateMutation({
+    onError: (error) => {
+      setIsSavingTemplate(false)
+      toast.error(`Failed to update email templates: ${error.message}`)
+    },
   })
 
   const { id, properties } = template
@@ -66,31 +69,61 @@ const TemplateEditor = ({ template }: TemplateEditorProps) => {
   const [validationResult, setValidationResult] = useState<ValidateSpamResponse>()
   const [bodyValue, setBodyValue] = useState((authConfig && authConfig[messageSlug]) ?? '')
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
+  const [isSavingTemplate, setIsSavingTemplate] = useState(false)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceValidateSpam = useCallback(debounce(validateSpam, 1000), [])
   const spamRules = (validationResult?.rules ?? []).filter((rule) => rule.score > 0)
   const preventSaveFromSpamCheck = builtInSMTP && spamRules.length > 0
 
   const onSubmit = (values: any, { resetForm }: any) => {
+    if (!projectRef) return console.error('Project ref is required')
+
+    setIsSavingTemplate(true)
     const payload = { ...values }
 
     // Because the template content uses the code editor which is not a form component
     // its state is kept separately from the form state, hence why we manually inject it here
     delete payload[messageSlug]
     if (messageProperty) payload[messageSlug] = bodyValue
 
-    updateAuthConfig(
-      { projectRef: projectRef!, config: payload },
+    const [subjectKey] = Object.keys(properties)
+
+    validateSpam(
       {
-        onSuccess: () => {
-          toast.success('Successfully updated settings')
-          resetForm({
-            values: values,
-            initialValues: values,
-          })
-          setHasUnsavedChanges(false) // Reset the unsaved changes state
+        projectRef,
+        template: {
+          subject: payload[subjectKey],
+          content: payload[messageSlug],
         },
+      },
+      {
+        onSuccess: (res) => {
+          const spamRules = (res?.rules ?? []).filter((rule) => rule.score > 0)
+          const preventSaveFromSpamCheck = builtInSMTP && spamRules.length > 0
+
+          if (preventSaveFromSpamCheck) {
+            setIsSavingTemplate(false)
+            toast.error(
+              'Please rectify all spam warnings before saving while using the built-in email service'
+            )
+          } else {
+            updateAuthConfig(
+              { projectRef: projectRef, config: payload },
+              {
+                onSuccess: () => {
+                  setIsSavingTemplate(false)
+                  toast.success('Successfully updated settings')
+                  resetForm({
+                    values: values,
+                    initialValues: values,
+                  })
+                  setHasUnsavedChanges(false) // Reset the unsaved changes state
+                },
+              }
+            )
+          }
+        },
+        onError: () => setIsSavingTemplate(false),
       }
     )
   }
@@ -164,14 +197,6 @@ const TemplateEditor = ({ template }: TemplateEditorProps) => {
                               </ReactMarkdown>
                             ) : null
                           }
-                          onChange={(e) => {
-                            if (projectRef) {
-                              debounceValidateSpam({
-                                projectRef,
-                                template: { subject: e.target.value, content: bodyValue },
-                              })
-                            }
-                          }}
                           disabled={!canUpdateConfig}
                         />
                       </div>
@@ -219,14 +244,6 @@ const TemplateEditor = ({ template }: TemplateEditorProps) => {
                           onInputChange={(e: string | undefined) => {
                             setBodyValue(e ?? '')
                             if (bodyValue !== e) setHasUnsavedChanges(true)
-
-                            if (projectRef) {
-                              const [subjectKey] = Object.keys(values)
-                              debounceValidateSpam({
-                                projectRef,
-                                template: { subject: values[subjectKey], content: e ?? '' },
-                              })
-                            }
                           }}
                           options={{ wordWrap: 'on', contextmenu: false }}
                           value={bodyValue}
@@ -257,9 +274,9 @@ const TemplateEditor = ({ template }: TemplateEditorProps) => {
                       setBodyValue((authConfig && authConfig[messageSlug]) ?? '')
                     }}
                     form={formId}
-                    isSubmitting={isUpdatingConfig}
+                    isSubmitting={isSavingTemplate}
                     hasChanges={hasChanges}
-                    disabled={preventSaveFromSpamCheck || !canUpdateConfig}
+                    disabled={!canUpdateConfig}
                     helper={
                       preventSaveFromSpamCheck
                         ? 'Please rectify all spam warnings before saving while using the built-in email service'