mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Joshen Lim
2f64b5401e
## Context Changes here aren't public facing - we're just shifting some internal only fields on the new project page to consolidate them into the "internal-only" collapsible Mainly to improve clarity from our POV RE what fields do users see and the general look of the new project form <img width="727" height="558" alt="image" src="https://github.com/user-attachments/assets/7d8f2915-3a81-4d9d-a067-cd45c1725726" /> So everything that's not within the collapsible are essentially fields that users will see on prod. The changes here also subsequently deprecates the use of 2 feature flags on the new project page: - `showPostgresVersionSelector` -> replaced by new flag `newProjectInternalOnlyConfiguration` - `enableFlyCloudProvider` -> was used to control the visibility of the cloud provider field, now replaced by `newProjectInternalOnlyConfiguration` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Reorganized project creation form layout and field ordering for improved structure. * Updated project resume flow with refined confirmation modal UI. * Simplified cloud provider selection interface. * Streamlined high-availability configuration presentation. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45873) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { UseFormReturn } from 'react-hook-form'
|
|
import {
|
|
FormControl,
|
|
FormField,
|
|
Select_Shadcn_,
|
|
SelectContent_Shadcn_,
|
|
SelectGroup_Shadcn_,
|
|
SelectItem_Shadcn_,
|
|
SelectTrigger_Shadcn_,
|
|
SelectValue_Shadcn_,
|
|
useWatch,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { CreateProjectForm } from './ProjectCreation.schema'
|
|
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
|
|
import { PROVIDERS } from '@/lib/constants'
|
|
|
|
const HA_SUPPORTED_PROVIDERS = ['AWS_K8S']
|
|
|
|
interface CloudProviderSelectorProps {
|
|
form: UseFormReturn<CreateProjectForm>
|
|
}
|
|
|
|
export const CloudProviderSelector = ({ form }: CloudProviderSelectorProps) => {
|
|
const { infraCloudProviders: validCloudProviders } = useCustomContent(['infra:cloud_providers'])
|
|
const highAvailability = useWatch({ control: form.control, name: 'highAvailability' })
|
|
|
|
return (
|
|
<FormField
|
|
control={form.control}
|
|
name="cloudProvider"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
label="Cloud provider"
|
|
layout="horizontal"
|
|
description={
|
|
highAvailability ? (
|
|
<p className="text-warning">High availability is only supported on AWS (Revamped)</p>
|
|
) : (
|
|
'Select which cloud provider to spin up project from'
|
|
)
|
|
}
|
|
>
|
|
<Select_Shadcn_
|
|
onValueChange={(value) => field.onChange(value)}
|
|
defaultValue={field.value}
|
|
value={field.value}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger_Shadcn_>
|
|
<SelectValue_Shadcn_ placeholder="Select a cloud provider" />
|
|
</SelectTrigger_Shadcn_>
|
|
</FormControl>
|
|
<SelectContent_Shadcn_>
|
|
<SelectGroup_Shadcn_>
|
|
{Object.values(PROVIDERS)
|
|
.filter((provider) => validCloudProviders?.includes(provider.id) ?? true)
|
|
.map((providerObj) => {
|
|
const label = providerObj['name']
|
|
const value = providerObj['id']
|
|
const isDisabled = highAvailability && !HA_SUPPORTED_PROVIDERS.includes(value)
|
|
return (
|
|
<SelectItem_Shadcn_ key={value} value={value} disabled={isDisabled}>
|
|
{label}
|
|
</SelectItem_Shadcn_>
|
|
)
|
|
})}
|
|
</SelectGroup_Shadcn_>
|
|
</SelectContent_Shadcn_>
|
|
</Select_Shadcn_>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
)
|
|
}
|