diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx index bdae8a3c438..dcac0b7097f 100644 --- a/apps/studio/pages/new/[slug].tsx +++ b/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) => { + if ( + values.instanceSize && + !sizesWithNoCostConfirmationRequired.includes(values.instanceSize as DesiredInstanceSize) + ) { + setIsComputeCostsConfirmationModalVisible(true) + } else { + await onSubmit(values) + } + } + const onSubmit = async (values: z.infer) => { if (!currentOrg) return console.error('Unable to retrieve current organization') @@ -397,7 +414,7 @@ const Wizard: NextPageWithLayout = () => { return ( -
+ { )} + + Confirm compute costs} + confirmLabel="Confirm" + onCancel={() => setIsComputeCostsConfirmationModalVisible(false)} + onConfirm={async () => { + const values = form.getValues() + await onSubmit(values) + setIsComputeCostsConfirmationModalVisible(false) + }} + variant={'warning'} + > +

+ 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. +

+
)