konnosDashboard
CloudProviderSelector.tsx76 lines · main
1import { UseFormReturn } from 'react-hook-form'
2import {
3 FormControl,
4 FormField,
5 Select,
6 SelectContent,
7 SelectGroup,
8 SelectItem,
9 SelectTrigger,
10 SelectValue,
11 useWatch,
12} from 'ui'
13import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
14
15import { CreateProjectForm } from './ProjectCreation.schema'
16import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
17import { PROVIDERS } from '@/lib/constants'
18
19const HA_SUPPORTED_PROVIDERS = ['AWS_K8S']
20
21interface CloudProviderSelectorProps {
22 form: UseFormReturn<CreateProjectForm>
23}
24
25export const CloudProviderSelector = ({ form }: CloudProviderSelectorProps) => {
26 const { infraCloudProviders: validCloudProviders } = useCustomContent(['infra:cloud_providers'])
27 const highAvailability = useWatch({ control: form.control, name: 'highAvailability' })
28
29 return (
30 <FormField
31 control={form.control}
32 name="cloudProvider"
33 render={({ field }) => (
34 <FormItemLayout
35 label="Cloud provider"
36 layout="horizontal"
37 description={
38 highAvailability ? (
39 <p className="text-warning">High availability is only supported on AWS (Revamped)</p>
40 ) : (
41 'Select which cloud provider to spin up project from'
42 )
43 }
44 >
45 <Select
46 onValueChange={(value) => field.onChange(value)}
47 defaultValue={field.value}
48 value={field.value}
49 >
50 <FormControl>
51 <SelectTrigger>
52 <SelectValue placeholder="Select a cloud provider" />
53 </SelectTrigger>
54 </FormControl>
55 <SelectContent>
56 <SelectGroup>
57 {Object.values(PROVIDERS)
58 .filter((provider) => validCloudProviders?.includes(provider.id) ?? true)
59 .map((providerObj) => {
60 const label = providerObj['name']
61 const value = providerObj['id']
62 const isDisabled = highAvailability && !HA_SUPPORTED_PROVIDERS.includes(value)
63 return (
64 <SelectItem key={value} value={value} disabled={isDisabled}>
65 {label}
66 </SelectItem>
67 )
68 })}
69 </SelectGroup>
70 </SelectContent>
71 </Select>
72 </FormItemLayout>
73 )}
74 />
75 )
76}