PostgresVersionSelector() — supabase Function Reference

Source Code

apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx lines 56–149

export const PostgresVersionSelector = ({
  cloudProvider,
  dbRegion,
  organizationSlug,
  field,
  form,
  type = 'create',
  layout = 'horizontal',
  label = 'Postgres version',
}: PostgresVersionSelectorProps) => {
  const { data: project } = useSelectedProjectQuery()

  const dbRegionExact = smartRegionToExactRegion(dbRegion)

  const {
    data: createVersions,
    isPending: isLoadingProjectCreateVersions,
    isSuccess,
  } = useProjectCreationPostgresVersionsQuery(
    {
      cloudProvider,
      dbRegion: dbRegionExact,
      organizationSlug,
    },
    { enabled: type === 'create' }
  )

  const { data: unpauseVersions, isPending: isLoadingProjectUnpauseVersions } =
    useProjectUnpausePostgresVersionsQuery(
      { projectRef: project?.ref },
      { enabled: type === 'unpause' }
    )

  const versions =
    type === 'create'
      ? createVersions?.available_versions ?? []
      : unpauseVersions?.available_versions ?? []
  const availableVersions = versions.sort((a, b) => a.version.localeCompare(b.version)).reverse()
  const { postgresVersionSelection } = form.watch()

  useEffect(() => {
    if (availableVersions.length > 0) {
      const gaVersion = availableVersions.find((x) => x.release_channel === 'ga')
      const defaultValue = gaVersion ? formatValue(gaVersion) : formatValue(availableVersions[0])
      form.setValue('postgresVersionSelection', defaultValue)
    }
  }, [isSuccess, availableVersions, form])

  return (
    <FormItemLayout label={label} layout={layout}>
      <Select_Shadcn_
        value={postgresVersionSelection}
        onValueChange={field.onChange}
        disabled={
          availableVersions.length === 0 ||
          (type === 'create' && isLoadingProjectCreateVersions) ||
          (type === 'unpause' && isLoadingProjectUnpauseVersions)
        }
      >
        <SelectTrigger_Shadcn_ className="[&>:nth-child(1)]:w-full [&>:nth-child(1)]:flex [&>:nth-child(1)]:items-start">
          <SelectValue_Shadcn_ placeholder="Select a Postgres version for your project" />
        </SelectTrigger_Shadcn_>
        <SelectContent_Shadcn_>
          <SelectGroup_Shadcn_>
            {availableVersions.map((value) => {
              const postgresVersion = value.version
                .split('supabase-postgres-')[1]
                .replace('-orioledb', '')
              return (
                <SelectItem_Shadcn_
                  key={formatValue(value)}
                  value={formatValue(value)}
                  className="w-full [&>:nth-child(2)]:w-full"
                >
                  <div className="flex flex-row items-center justify-between w-full">
                    <span className="text-foreground">{postgresVersion}</span>
                    <div className="flex flex-row gap-x-2">
                      {value.release_channel !== 'ga' && (
                        <Badge variant="warning">{value.release_channel}</Badge>
                      )}
                      {value.postgres_engine.includes('oriole') && (
                        <Badge variant="default">OrioleDB</Badge>
                      )}
                    </div>
                  </div>
                </SelectItem_Shadcn_>
              )
            })}
          </SelectGroup_Shadcn_>
        </SelectContent_Shadcn_>
      </Select_Shadcn_>
    </FormItemLayout>
  )
}