feat: Refactor the org upgrade dialog

apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx

@@ -3,8 +3,7 @@ import { ControllerRenderProps, UseFormReturn } from 'react-hook-form'
 
 import { useDefaultRegionQuery } from 'data/misc/get-default-region-query'
 import { useFlag } from 'hooks/ui/useFlag'
-import { PROVIDERS } from 'lib/constants'
-import type { CloudProvider } from 'shared-data'
+import { PROVIDERS, type CloudProvider } from 'shared-data'
 import {
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx

@@ -12,18 +12,18 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
-import { AWS_REGIONS_DEFAULT, BASE_PATH } from 'lib/constants'
+import { BASE_PATH } from 'lib/constants'
 import type { AWS_REGIONS_KEYS } from 'shared-data'
-import { AWS_REGIONS } from 'shared-data'
+import { AWS_REGIONS, AWS_REGIONS_DEFAULT } from 'shared-data'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
   Alert_Shadcn_,
   Button,
   Listbox,
   SidePanel,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui'
 import { AVAILABLE_REPLICA_REGIONS } from './InstanceConfiguration.constants'
 
 // [Joshen] FYI this is purely for AWS only, need to update to support Fly eventually

apps/studio/data/projects/project-create-mutation.ts

@@ -1,10 +1,10 @@
 import * as Sentry from '@sentry/nextjs'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'react-hot-toast'
+import { PROVIDERS } from 'shared-data'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
-import { PROVIDERS } from 'lib/constants'
 import type { ResponseError } from 'types'
 import { projectKeys } from './keys'
 

apps/studio/lib/cloudprovider-utils.ts

@@ -1,4 +1,4 @@
-import { PROVIDERS } from './constants'
+import { PROVIDERS } from 'shared-data'
 
 export function getCloudProviderArchitecture(cloudProvider: string | undefined) {
   switch (cloudProvider) {

apps/studio/lib/constants/infrastructure.ts

@@ -1,14 +1,7 @@
 import type { CloudProvider } from 'shared-data'
-import { AWS_REGIONS, FLY_REGIONS } from 'shared-data'
 
 import type { components } from 'data/api'
 
-export const AWS_REGIONS_DEFAULT =
-  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? AWS_REGIONS.SOUTHEAST_ASIA : AWS_REGIONS.EAST_US
-
-// TO DO, change default to US region for prod
-export const FLY_REGIONS_DEFAULT = FLY_REGIONS.SOUTHEAST_ASIA
-
 export const PRICING_TIER_LABELS_ORG = {
   FREE: 'Free - $0/month',
   PRO: 'Pro - $25/month',
@@ -25,22 +18,6 @@ export const PRICING_TIER_PRODUCT_IDS = {
 
 export const DEFAULT_PROVIDER: CloudProvider = 'AWS'
 
-export const PROVIDERS = {
-  FLY: {
-    id: 'FLY',
-    name: 'Fly.io',
-    default_region: FLY_REGIONS_DEFAULT,
-    regions: { ...FLY_REGIONS },
-  },
-  AWS: {
-    id: 'AWS',
-    name: 'AWS',
-    DEFAULT_SSH_KEY: 'supabase-app-instance',
-    default_region: AWS_REGIONS_DEFAULT,
-    regions: { ...AWS_REGIONS },
-  },
-} as const
-
 export const PROJECT_STATUS: {
   [key: string]: components['schemas']['ResourceWithServicesStatusResponse']['status']
 } = {

apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx

@@ -18,10 +18,9 @@ import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-pr
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectCreateMutation } from 'data/projects/project-create-mutation'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { PROVIDERS } from 'lib/constants'
 import { getInitialMigrationSQLFromGitHubRepo } from 'lib/integration-utils'
 import passwordStrength from 'lib/password-strength'
-import { AWS_REGIONS } from 'shared-data'
+import { AWS_REGIONS, PROVIDERS } from 'shared-data'
 import { useIntegrationInstallationSnapshot } from 'state/integration-installation'
 import type { NextPageWithLayout } from 'types'
 

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

@@ -11,7 +11,6 @@ import toast from 'react-hot-toast'
 import { z } from 'zod'
 
 import { PopoverSeparator } from '@ui/components/shadcn/ui/popover'
-import { components } from 'api-types'
 import { useParams } from 'common'
 import {
   FreeProjectLimitWarning,
@@ -37,16 +36,17 @@ import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { withAuth } from 'hooks/misc/withAuth'
 import { useFlag } from 'hooks/ui/useFlag'
 import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils'
+import { DEFAULT_MINIMUM_PASSWORD_STRENGTH, DEFAULT_PROVIDER, PROJECT_STATUS } from 'lib/constants'
+import passwordStrength from 'lib/password-strength'
 import {
   AWS_REGIONS_DEFAULT,
-  DEFAULT_MINIMUM_PASSWORD_STRENGTH,
-  DEFAULT_PROVIDER,
+  DesiredInstanceSize,
   FLY_REGIONS_DEFAULT,
-  PROJECT_STATUS,
   PROVIDERS,
-} from 'lib/constants'
-import passwordStrength from 'lib/password-strength'
-import type { CloudProvider } from 'shared-data'
+  instanceSizeSpecs,
+  instanceSizes,
+  type CloudProvider,
+} from 'shared-data'
 import type { NextPageWithLayout } from 'types'
 import {
   Admonition,
@@ -80,114 +80,6 @@ import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 
-type DesiredInstanceSize = components['schemas']['DesiredInstanceSize']
-
-const sizes: DesiredInstanceSize[] = [
-  'micro',
-  'small',
-  'medium',
-  'large',
-  'xlarge',
-  '2xlarge',
-  '4xlarge',
-  '8xlarge',
-  '12xlarge',
-  '16xlarge',
-]
-
-const instanceSizeSpecs: Record<
-  DesiredInstanceSize,
-  {
-    label: string
-    ram: string
-    cpu: string
-    priceHourly: number
-    priceMonthly: number
-    cloud_providers: string[]
-  }
-> = {
-  micro: {
-    label: 'Micro',
-    ram: '1 GB',
-    cpu: '2-core',
-    priceHourly: 0.01344,
-    priceMonthly: 10,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  small: {
-    label: 'Small',
-    ram: '2 GB',
-    cpu: '2-core',
-    priceHourly: 0.0206,
-    priceMonthly: 15,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  medium: {
-    label: 'Medium',
-    ram: '4 GB',
-    cpu: '2-core',
-    priceHourly: 0.0822,
-    priceMonthly: 60,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  large: {
-    label: 'Large',
-    ram: '8 GB',
-    cpu: '2-core',
-    priceHourly: 0.1517,
-    priceMonthly: 110,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  xlarge: {
-    label: 'XL',
-    ram: '16 GB',
-    cpu: '4-core',
-    priceHourly: 0.2877,
-    priceMonthly: 210,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  '2xlarge': {
-    label: '2XL',
-    ram: '32 GB',
-    cpu: '8-core',
-    priceHourly: 0.562,
-    priceMonthly: 410,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  '4xlarge': {
-    label: '4XL',
-    ram: '64 GB',
-    cpu: '16-core',
-    priceHourly: 1.32,
-    priceMonthly: 960,
-    cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
-  },
-  '8xlarge': {
-    label: '8XL',
-    ram: '128 GB',
-    cpu: '32-core',
-    priceHourly: 2.562,
-    priceMonthly: 1870,
-    cloud_providers: [PROVIDERS.AWS.id],
-  },
-  '12xlarge': {
-    label: '12XL',
-    ram: '192 GB',
-    cpu: '48-core',
-    priceHourly: 3.836,
-    priceMonthly: 2800,
-    cloud_providers: [PROVIDERS.AWS.id],
-  },
-  '16xlarge': {
-    label: '16XL',
-    ram: '256 GB',
-    cpu: '64-core',
-    priceHourly: 5.12,
-    priceMonthly: 3730,
-    cloud_providers: [PROVIDERS.AWS.id],
-  },
-}
-
 const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
   const { slug } = useParams()
@@ -313,7 +205,7 @@ const Wizard: NextPageWithLayout = () => {
       dbPass: '',
       dbPassStrength: 0,
       dbRegion: defaultRegion || undefined,
-      instanceSize: sizes[0],
+      instanceSize: instanceSizes[0],
       dataApi: true,
       useApiSchema: false,
     },
@@ -645,7 +537,7 @@ const Wizard: NextPageWithLayout = () => {
                                 </SelectTrigger_Shadcn_>
                                 <SelectContent_Shadcn_>
                                   <SelectGroup_Shadcn_>
-                                    {sizes
+                                    {instanceSizes
                                       .filter((option) =>
                                         instanceSizeSpecs[option].cloud_providers.includes(
                                           form.getValues('cloudProvider') as CloudProvider

apps/studio/pages/vercel/setupProject.tsx

@@ -7,7 +7,6 @@ import { ChangeEvent, createContext, useContext, useEffect, useRef, useState } f
 import { toast } from 'react-hot-toast'
 import { Button, Input, Listbox } from 'ui'
 
-import type { Dictionary } from 'types'
 import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
 import {
   createVercelEnv,
@@ -17,14 +16,11 @@ import {
 import { Loading } from 'components/ui/Loading'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
 import { useProjectCreateMutation } from 'data/projects/project-create-mutation'
-import {
-  DEFAULT_MINIMUM_PASSWORD_STRENGTH,
-  PRICING_TIER_PRODUCT_IDS,
-  PROVIDERS,
-} from 'lib/constants'
+import { DEFAULT_MINIMUM_PASSWORD_STRENGTH, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import passwordStrength from 'lib/password-strength'
 import { VERCEL_INTEGRATION_CONFIGS } from 'lib/vercelConfigs'
-import { AWS_REGIONS } from 'shared-data'
+import { AWS_REGIONS, PROVIDERS } from 'shared-data'
+import type { Dictionary } from 'types'
 
 interface ISetupProjectStore {
   token: string

packages/shared-data/index.ts

@@ -1,24 +1,31 @@
 import config from './config'
 import extensions from './extensions.json'
+import { type DesiredInstanceSize, instanceSizes, instanceSizeSpecs } from './instance-sizes'
 import logConstants from './logConstants'
 import { plans, PricingInformation } from './plans'
 import { pricing } from './pricing'
 import { products } from './products'
+import { PROVIDERS } from './providers'
 import questions from './questions'
 import type { AWS_REGIONS_KEYS, CloudProvider, Region } from './regions'
-import { AWS_REGIONS, FLY_REGIONS } from './regions'
+import { AWS_REGIONS, AWS_REGIONS_DEFAULT, FLY_REGIONS, FLY_REGIONS_DEFAULT } from './regions'
 import tweets from './tweets'
 
-export type { AWS_REGIONS_KEYS, CloudProvider, PricingInformation, Region }
 export {
   AWS_REGIONS,
-  FLY_REGIONS,
+  AWS_REGIONS_DEFAULT,
   config,
   extensions,
+  FLY_REGIONS,
+  FLY_REGIONS_DEFAULT,
+  instanceSizes,
+  instanceSizeSpecs,
   logConstants,
   plans,
   pricing,
   products,
+  PROVIDERS,
   questions,
   tweets,
 }
+export type { AWS_REGIONS_KEYS, CloudProvider, DesiredInstanceSize, PricingInformation, Region }