konnosDashboard
InternalOnlyConfiguration.tsx110 lines · main
1import { useParams } from 'common'
2import { ChevronRight } from 'lucide-react'
3import { UseFormReturn } from 'react-hook-form'
4import { type CloudProvider } from 'shared-data'
5import {
6 Collapsible,
7 CollapsibleContent,
8 CollapsibleTrigger,
9 FormControl,
10 FormField,
11 Input,
12} from 'ui'
13import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
14
15import { CloudProviderSelector } from './CloudProviderSelector'
16import { HighAvailabilityInput } from './HighAvailabilityInput'
17import { PostgresVersionSelector } from './PostgresVersionSelector'
18import { CreateProjectForm } from './ProjectCreation.schema'
19import Panel from '@/components/ui/Panel'
20
21interface InternalOnlyConfigurationProps {
22 form: UseFormReturn<CreateProjectForm>
23}
24
25export const InternalOnlyConfiguration = ({ form }: InternalOnlyConfigurationProps) => {
26 const { slug } = useParams()
27 const showNonProdFields = process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
28
29 return (
30 <Panel.Content>
31 <Collapsible>
32 <CollapsibleTrigger className="group/advanced-trigger font-mono uppercase tracking-widest text-xs flex items-center gap-1 text-foreground-lighter/75 hover:text-foreground-light transition data-open:text-foreground-light">
33 Internal-only Configuration
34 <ChevronRight
35 size={16}
36 strokeWidth={1}
37 className="mr-2 group-data-open/advanced-trigger:rotate-90 group-hover/advanced-trigger:text-foreground-light transition"
38 />
39 </CollapsibleTrigger>
40 <CollapsibleContent className="pt-2 data-closed:animate-collapsible-up data-open:animate-collapsible-down flex flex-col gap-y-6">
41 <div>
42 <p className="text-xs text-foreground-lighter mb-6">
43 These settings are only visible to internal staff
44 </p>
45 <div className="flex flex-col gap-y-4">
46 <FormField
47 control={form.control}
48 name="postgresVersionSelection"
49 render={({ field }) => (
50 <PostgresVersionSelector
51 field={field}
52 form={form}
53 cloudProvider={form.getValues('cloudProvider') as CloudProvider}
54 organizationSlug={slug}
55 dbRegion={form.getValues('dbRegion')}
56 />
57 )}
58 />
59
60 <HighAvailabilityInput form={form} />
61 </div>
62 </div>
63
64 {showNonProdFields && (
65 <div>
66 <p className="text-xs text-foreground-lighter mb-6">
67 The settings below are only applicable for local/staging projects
68 </p>
69 <div className="flex flex-col gap-y-4">
70 <CloudProviderSelector form={form} />
71
72 <FormField
73 control={form.control}
74 name="postgresVersion"
75 render={({ field }) => (
76 <FormItemLayout
77 label="Custom Postgres version"
78 layout="horizontal"
79 description="Specify a custom version of Postgres (defaults to the latest)."
80 >
81 <FormControl>
82 <Input placeholder="e.g 17.6.1.104" {...field} autoComplete="off" />
83 </FormControl>
84 </FormItemLayout>
85 )}
86 />
87
88 <FormField
89 control={form.control}
90 name="instanceType"
91 render={({ field }) => (
92 <FormItemLayout
93 label="Custom instance type"
94 layout="horizontal"
95 description="Specify a custom instance type."
96 >
97 <FormControl>
98 <Input placeholder="e.g t3.nano" {...field} autoComplete="off" />
99 </FormControl>
100 </FormItemLayout>
101 )}
102 />
103 </div>
104 </div>
105 )}
106 </CollapsibleContent>
107 </Collapsible>
108 </Panel.Content>
109 )
110}