Update branching info (#19715)

* Update branching info

* swap

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -5,12 +5,16 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
 import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
   Button,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormMessage_Shadcn_,
   Form_Shadcn_,
+  IconAlertCircle,
   IconCheck,
   IconExternalLink,
   IconLoader,
@@ -210,6 +214,20 @@ const CreateBranchModal = ({ visible, onClose }: CreateBranchModalProps) => {
 
           <Modal.Separator />
 
+          <Modal.Content className="py-2">
+            <Alert_Shadcn_ variant="warning">
+              <IconAlertCircle strokeWidth={1.5} />
+              <AlertTitle_Shadcn_>Preview branches are billed per hour</AlertTitle_Shadcn_>
+              <AlertDescription_Shadcn_>
+                Launching a new preview branch incurs additional compute costs, starting at $0.01344
+                per hour (~$10/month). This cost will continue for as long as the branch has not
+                been removed.
+              </AlertDescription_Shadcn_>
+            </Alert_Shadcn_>
+          </Modal.Content>
+
+          <Modal.Separator />
+
           <Modal.Content>
             <div className="flex items-center justify-end space-x-2 py-2 pb-4">
               <Button disabled={isCreating} type="default" onClick={() => onClose()}>

apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx

@@ -3,7 +3,15 @@ import { useParams } from 'common'
 import { last } from 'lodash'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, IconFileText, IconGitBranch, Modal } from 'ui'
+import {
+  Button,
+  Form_Shadcn_,
+  IconDollarSign,
+  IconExternalLink,
+  IconFileText,
+  IconGitBranch,
+  Modal,
+} from 'ui'
 import * as z from 'zod'
 
 import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker'
@@ -19,6 +27,7 @@ import { useAppStateSnapshot } from 'state/app-state'
 import BranchingPITRNotice from './BranchingPITRNotice'
 import BranchingPostgresVersionNotice from './BranchingPostgresVersionNotice'
 import GithubRepositorySelection from './GithubRepositorySelection'
+import Link from 'next/link'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import BranchingPlanNotice from './BranchingPlanNotice'
 
@@ -137,8 +146,8 @@ const EnableBranchingModal = () => {
         hideFooter
         visible={snap.showEnableBranchingModal}
         onCancel={() => snap.setShowEnableBranchingModal(false)}
-        className="!bg"
-        size="large"
+        className="!bg !max-w-[40rem]"
+        size="xlarge"
       >
         <Form_Shadcn_ {...form}>
           <form
@@ -146,12 +155,23 @@ const EnableBranchingModal = () => {
             onSubmit={form.handleSubmit(onSubmit)}
             onChange={() => setIsValid(false)}
           >
-            <Modal.Content className="px-7 py-5 flex items-center space-x-4">
-              <IconGitBranch strokeWidth={2} size={20} />
-              <div>
-                <p className="text-foreground">Enable database branching</p>
-                <p className="text-sm text-foreground-light">Manage environments in Supabase</p>
+            <Modal.Content className="px-7 py-5 flex items-center justify-between space-x-4">
+              <div className="flex items-center gap-x-4">
+                <IconGitBranch strokeWidth={2} size={20} />
+                <div>
+                  <p className="text-foreground">Enable database branching</p>
+                  <p className="text-sm text-foreground-light">Manage environments in Supabase</p>
+                </div>
               </div>
+              <Button type="default" icon={<IconExternalLink strokeWidth={1.5} />}>
+                <Link
+                  href="https://supabase.com/docs/guides/platform/branching"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Documentation
+                </Link>
+              </Button>
             </Modal.Content>
 
             {isLoading && (
@@ -207,6 +227,23 @@ const EnableBranchingModal = () => {
                     Please keep in mind the following:
                   </p>
                   <div className="flex flex-row gap-4">
+                    <div>
+                      <figure className="w-10 h-10 rounded-md bg-warning-200 border border-warning-300 flex items-center justify-center">
+                        <IconDollarSign className="text-amber-900" size={20} strokeWidth={2} />
+                      </figure>
+                    </div>
+                    <div className="flex flex-col gap-y-1">
+                      <p className="text-sm text-foreground">
+                        Preview branches are billed per hour
+                      </p>
+                      <p className="text-sm text-foreground-light">
+                        Launching a new preview branch incurs additional compute costs, starting at
+                        $0.01344 per hour (~$10/month). This cost will continue for as long as the
+                        branch has not been removed.
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex flex-row gap-4 mt-2">
                     <div>
                       <figure className="w-10 h-10 rounded-md bg-warning-200 border border-warning-300 flex items-center justify-center">
                         <IconFileText className="text-amber-900" size={20} strokeWidth={2} />