CloudProviderSelector() — supabase Function Reference

Source Code

apps/studio/components/interfaces/ProjectCreation/CloudProviderSelector.tsx lines 23–63

export const CloudProviderSelector = ({ form }: CloudProviderSelectorProps) => {
  const { infraCloudProviders: validCloudProviders } = useCustomContent(['infra:cloud_providers'])

  return (
    <Panel.Content>
      <FormField_Shadcn_
        control={form.control}
        name="cloudProvider"
        render={({ field }) => (
          <FormItemLayout label="Cloud provider" layout="horizontal">
            <Select_Shadcn_
              onValueChange={(value) => field.onChange(value)}
              defaultValue={field.value}
            >
              <FormControl_Shadcn_>
                <SelectTrigger_Shadcn_>
                  <SelectValue_Shadcn_ placeholder="Select a cloud provider" />
                </SelectTrigger_Shadcn_>
              </FormControl_Shadcn_>
              <SelectContent_Shadcn_>
                <SelectGroup_Shadcn_>
                  {Object.values(PROVIDERS)
                    .filter((provider) => validCloudProviders?.includes(provider.id) ?? true)
                    .map((providerObj) => {
                      const label = providerObj['name']
                      const value = providerObj['id']
                      return (
                        <SelectItem_Shadcn_ key={value} value={value}>
                          {label}
                        </SelectItem_Shadcn_>
                      )
                    })}
                </SelectGroup_Shadcn_>
              </SelectContent_Shadcn_>
            </Select_Shadcn_>
          </FormItemLayout>
        )}
      />
    </Panel.Content>
  )
}