add panel to suggest switching to io2

apps/studio/components/interfaces/DiskManagement/DiskManagement.schema.ts

@@ -37,7 +37,7 @@ export const CreateDiskStorageSchema = (defaultTotalSize: number) => {
     if (storageType === 'io2') {
       // Validation rules for io2
 
-      if (provisionedIOPS > 256000) {
+      if (provisionedIOPS > IOPS_RANGE[DiskType.IO2].max) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message:
@@ -48,7 +48,7 @@ export const CreateDiskStorageSchema = (defaultTotalSize: number) => {
 
       const maxIOPSforDiskSizeWithio2 = calculateMaxIopsAllowedForDiskSizeWithio2(totalSize)
 
-      if (provisionedIOPS < 100) {
+      if (provisionedIOPS < IOPS_RANGE[DiskType.IO2].min) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: 'Provisioned IOPS must be at least 100',

apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx

@@ -343,7 +343,11 @@ export function DiskManagementForm() {
             <ComputeSizeField form={form} disabled={disableComputeInputs} />
             <Separator />
             <DiskCountdownRadial />
-            <DiskSizeField form={form} disableInput={disableDiskInputs} />
+            <DiskSizeField
+              form={form}
+              disableInput={disableDiskInputs}
+              setAdvancedSettingsOpenState={setAdvancedSettingsOpenState}
+            />
             {/* {isPlanUpgradeRequired && <DiskManagementPlanUpgradeRequired />} */}
             <Separator />
             <Collapsible_Shadcn_

apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx

@@ -5,7 +5,7 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { GB } from 'lib/constants'
 import { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Skeleton, cn } from 'ui'
+import { Button, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Skeleton, cn } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { DiskStorageSchemaType } from '../DiskManagement.schema'
 import { calculateDiskSizePrice } from '../DiskManagement.utils'
@@ -17,13 +17,19 @@ import { InputPostTab } from '../ui/InputPostTab'
 import { InputResetButton } from '../ui/InputResetButton'
 import FormMessage from '../ui/FormMessage'
 import { useDiskAttributesQuery } from 'data/config/disk-attributes-query'
+import { DiskTypeReccomendationSection } from '../ui/DiskTypeReccomendationSection'
 
 type DiskSizeFieldProps = {
   form: UseFormReturn<DiskStorageSchemaType>
   disableInput: boolean
+  setAdvancedSettingsOpenState: (state: boolean) => void
 }
 
-export function DiskSizeField({ form, disableInput }: DiskSizeFieldProps) {
+export function DiskSizeField({
+  form,
+  disableInput,
+  setAdvancedSettingsOpenState,
+}: DiskSizeFieldProps) {
   const { ref: projectRef } = useParams()
   const { control, formState, setValue, trigger, getValues, resetField, watch } = form
   const org = useSelectedOrganization()
@@ -141,6 +147,22 @@ export function DiskSizeField({ form, disableInput }: DiskSizeFieldProps) {
               subscription?.plan.id &&
               `Your plan includes ${includedDiskGB} GB of disk size for ${watchedStorageType}.`}
           </span>
+          <DiskTypeReccomendationSection
+            form={form}
+            actions={
+              <Button
+                type="default"
+                onClick={() => {
+                  setValue('storageType', 'io2')
+                  trigger('provisionedIOPS')
+                  trigger('totalSize')
+                  setAdvancedSettingsOpenState(true)
+                }}
+              >
+                Change to High Performance SSD
+              </Button>
+            }
+          />
         </div>
       </div>
       <div className="col-span-8">

apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx

@@ -0,0 +1,40 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { UseFormReturn } from 'react-hook-form'
+import { Admonition } from 'ui-patterns/admonition'
+import { DiskStorageSchemaType } from '../DiskManagement.schema'
+import { DISK_LIMITS, DISK_TYPE_OPTIONS, DiskType, IOPS_RANGE } from './DiskManagement.constants'
+
+export function DiskTypeReccomendationSection({
+  actions,
+  form,
+}: {
+  actions?: React.ReactNode
+  form: UseFormReturn<DiskStorageSchemaType>
+}) {
+  const { watch } = form
+
+  const totalSize = watch('totalSize')
+  const storageType = watch('storageType')
+  const isVisible = storageType === DiskType.GP3 && totalSize > DISK_LIMITS[DiskType.GP3].maxStorage
+  const io2Option = DISK_TYPE_OPTIONS.find((option) => option.type === DiskType.IO2)
+
+  return (
+    <AnimatePresence initial={false}>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{ duration: 0.15 }}
+        >
+          <Admonition
+            type="default"
+            title={`You will need to use ${io2Option?.name} to use a larger Disk size`}
+          >
+            <div className="flex flex-col gap-2">{actions && <div>{actions}</div>}</div>
+          </Admonition>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}