feat: require explicit user confirmation when creating project on size > small

apps/studio/pages/new/[slug].tsx

@@ -84,6 +84,7 @@ import { Admonition } from 'ui-patterns/admonition'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 type DesiredInstanceSize = components['schemas']['DesiredInstanceSize']
 
@@ -100,6 +101,8 @@ const sizes: DesiredInstanceSize[] = [
   '16xlarge',
 ]
 
+const sizesWithNoCostConfirmationRequired: DesiredInstanceSize[] = ['micro', 'small']
+
 const FormSchema = z.object({
   organization: z.string({
     required_error: 'Please select an organization',
@@ -147,6 +150,9 @@ const Wizard: NextPageWithLayout = () => {
   const [passwordStrengthMessage, setPasswordStrengthMessage] = useState('')
   const [passwordStrengthWarning, setPasswordStrengthWarning] = useState('')
 
+  const [isComputeCostsConfirmationModalVisible, setIsComputeCostsConfirmationModalVisible] =
+    useState(false)
+
   const { data: organizations, isSuccess: isOrganizationsSuccess } = useOrganizationsQuery()
   const currentOrg = organizations?.find((o: any) => o.slug === slug)
 
@@ -292,6 +298,17 @@ const Wizard: NextPageWithLayout = () => {
     delayedCheckPasswordStrength(password)
   }
 
+  const onSubmitWithComputeCostsConfirmation = async (values: z.infer<typeof FormSchema>) => {
+    if (
+      values.instanceSize &&
+      !sizesWithNoCostConfirmationRequired.includes(values.instanceSize as DesiredInstanceSize)
+    ) {
+      setIsComputeCostsConfirmationModalVisible(true)
+    } else {
+      await onSubmit(values)
+    }
+  }
+
   const onSubmit = async (values: z.infer<typeof FormSchema>) => {
     if (!currentOrg) return console.error('Unable to retrieve current organization')
 
@@ -397,7 +414,7 @@ const Wizard: NextPageWithLayout = () => {
 
   return (
     <Form_Shadcn_ {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form onSubmit={form.handleSubmit(onSubmitWithComputeCostsConfirmation)}>
         <Panel
           loading={!isOrganizationsSuccess || isLoadingFreeProjectLimitCheck}
           title={
@@ -937,6 +954,27 @@ const Wizard: NextPageWithLayout = () => {
             )}
           </>
         </Panel>
+
+        <ConfirmationModal
+          size="large"
+          loading={false}
+          visible={isComputeCostsConfirmationModalVisible}
+          title={<>Confirm compute costs</>}
+          confirmLabel="Confirm"
+          onCancel={() => setIsComputeCostsConfirmationModalVisible(false)}
+          onConfirm={async () => {
+            const values = form.getValues()
+            await onSubmit(values)
+            setIsComputeCostsConfirmationModalVisible(false)
+          }}
+          variant={'warning'}
+        >
+          <p className="text-sm text-foreground-light">
+            Launching a project on compute size "{instanceLabel(instanceSize)}" increases your
+            monthly compute costs by ${additionalMonthlySpend}. By clicking "Confirm", you agree to
+            the additional costs and the project creation starts.
+          </p>
+        </ConfirmationModal>
       </form>
     </Form_Shadcn_>
   )