Disable selection of io2 volume type if project region is not supported (#33733)

* disable selection of io2 volume type if project region is not supported

* Update apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

* Fix import

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

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

@@ -0,0 +1,23 @@
+// [Joshen] These should eventually be in shared-types so that it can be used between infra and dashboard
+// https://github.com/supabase/infrastructure/blob/a466d85ece3179cf7b6da1b15c11f2ed2be49bd6/shared/src/volumes.ts#L5-L24
+// https://docs.aws.amazon.com/ebs/latest/userguide/provisioned-iops.html#io2-bx-considerations
+export const IO2_AVAILABLE_REGIONS = [
+  'ap-east-1',
+  'ap-northeast-1',
+  'ap-northeast-2',
+  'ap-south-1',
+  'ap-southeast-1',
+  'ap-southeast-2',
+  'ca-central-1',
+  'eu-central-1',
+  // 'eu-central-2',
+  'eu-north-1',
+  'eu-west-1',
+  'eu-west-2',
+  // 'eu-west-3',
+  // 'sa-east-1',
+  'us-east-1',
+  'us-east-2',
+  'us-west-1',
+  'us-west-2',
+]

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

@@ -1,7 +1,9 @@
 import { UseFormReturn } from 'react-hook-form'
 
 import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
 import { useDiskAttributesQuery } from 'data/config/disk-attributes-query'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import {
   Badge,
   buttonVariants,
@@ -14,8 +16,12 @@ import {
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
   Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { IO2_AVAILABLE_REGIONS } from '../DiskManagement.constants'
 import { DiskStorageSchemaType } from '../DiskManagement.schema'
 import { DISK_LIMITS, DISK_TYPE_OPTIONS, DiskType } from '../ui/DiskManagement.constants'
 import FormMessage from '../ui/FormMessage'
@@ -26,8 +32,11 @@ type StorageTypeFieldProps = {
 }
 
 export function StorageTypeField({ form, disableInput }: StorageTypeFieldProps) {
-  const { ref: projectRef } = useParams()
   const { control, trigger } = form
+  const project = useSelectedProject()
+  const { ref: projectRef } = useParams()
+
+  const isIo2Supported = IO2_AVAILABLE_REGIONS.includes(project?.region ?? '')
 
   const { isLoading, error, isError } = useDiskAttributesQuery({ projectRef })
 
@@ -79,24 +88,46 @@ export function StorageTypeField({ form, disableInput }: StorageTypeFieldProps)
             )}
             <SelectContent_Shadcn_>
               <>
-                {DISK_TYPE_OPTIONS.map((item) => (
-                  <SelectItem_Shadcn_ key={item.type} disabled={disableInput} value={item.type}>
-                    <div className="flex flex-col gap-0 items-start">
-                      <div className="flex gap-3 items-center">
-                        <span className="text-sm text-foreground">{item.name}</span>{' '}
-                        <div>
-                          <Badge
-                            variant={'outline'}
-                            className="font-mono bg-alternative bg-opacity-100"
-                          >
-                            {item.type}
-                          </Badge>
-                        </div>
-                      </div>
-                      <p className="text-foreground-light">{item.description}</p>
-                    </div>
-                  </SelectItem_Shadcn_>
-                ))}
+                {DISK_TYPE_OPTIONS.map((item) => {
+                  const disableIo2 = item.type === 'io2' && !isIo2Supported
+                  return (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <SelectItem_Shadcn_
+                          key={item.type}
+                          disabled={disableInput || disableIo2}
+                          value={item.type}
+                          className={cn(disableIo2 && '!pointer-events-auto')}
+                        >
+                          <div className="flex flex-col gap-0 items-start">
+                            <div className="flex gap-3 items-center">
+                              <span className="text-sm text-foreground">{item.name}</span>{' '}
+                              <div>
+                                <Badge
+                                  variant={'outline'}
+                                  className="font-mono bg-alternative bg-opacity-100"
+                                >
+                                  {item.type}
+                                </Badge>
+                              </div>
+                            </div>
+                            <p className="text-foreground-light">{item.description}</p>
+                          </div>
+                        </SelectItem_Shadcn_>
+                      </TooltipTrigger>
+                      {disableIo2 && (
+                        <TooltipContent side="right" className="w-64">
+                          IO2 Volume Type is not available in your project's region (
+                          {project?.region}). More information available{' '}
+                          <InlineLink href="https://docs.aws.amazon.com/ebs/latest/userguide/provisioned-iops.html#io2-bx-considerations">
+                            here
+                          </InlineLink>
+                          .
+                        </TooltipContent>
+                      )}
+                    </Tooltip>
+                  )
+                })}
               </>
             </SelectContent_Shadcn_>
           </Select_Shadcn_>