konnosDashboard
AdvancedConfiguration.tsx136 lines · main
1import { useFlag } from 'common'
2import { ChevronRight } from 'lucide-react'
3import { UseFormReturn } from 'react-hook-form'
4import {
5 Badge,
6 cn,
7 Collapsible,
8 CollapsibleContent,
9 CollapsibleTrigger,
10 FormControl,
11 FormField,
12 FormItem,
13 RadioGroupStacked,
14 RadioGroupStackedItem,
15 Tooltip,
16 TooltipContent,
17 TooltipTrigger,
18} from 'ui'
19import { Admonition } from 'ui-patterns'
20import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
21
22import { CreateProjectForm } from './ProjectCreation.schema'
23import { DocsButton } from '@/components/ui/DocsButton'
24import Panel from '@/components/ui/Panel'
25import { DOCS_URL } from '@/lib/constants'
26
27interface AdvancedConfigurationProps {
28 form: UseFormReturn<CreateProjectForm>
29}
30
31export const AdvancedConfiguration = ({ form }: AdvancedConfigurationProps) => {
32 const disableOrioleProjectCreation = useFlag('disableOrioleProjectCreation')
33
34 return (
35 <Panel.Content>
36 <Collapsible>
37 <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">
38 Advanced Configuration
39 <ChevronRight
40 size={16}
41 strokeWidth={1}
42 className="mr-2 group-data-open/advanced-trigger:rotate-90 group-hover/advanced-trigger:text-foreground-light transition"
43 />
44 </CollapsibleTrigger>
45 <CollapsibleContent
46 className={cn(
47 'pt-2 data-closed:animate-collapsible-up data-open:animate-collapsible-down'
48 )}
49 >
50 <p className="text-xs text-foreground-lighter mb-6">
51 These settings cannot be changed after the project is created
52 </p>
53 <FormField
54 name="useOrioleDb"
55 control={form.control}
56 render={({ field }) => (
57 <>
58 <FormItemLayout
59 layout="horizontal"
60 label="Postgres Type"
61 className="[&>div>label]:break-normal!"
62 >
63 <FormControl>
64 <RadioGroupStacked
65 // Due to radio group not supporting boolean values
66 // value is converted to boolean
67 onValueChange={(value) => field.onChange(value === 'true')}
68 defaultValue={field.value.toString()}
69 >
70 <FormItem asChild>
71 <FormControl>
72 <RadioGroupStackedItem
73 value="false"
74 // @ts-ignore
75 label={
76 <>
77 Postgres
78 <Badge>Default</Badge>
79 </>
80 }
81 description="Recommended for production workloads"
82 className="[&>div>div>p]:text-left [&>div>div>p]:text-xs [&>div>div>label]:flex [&>div>div>label]:items-center [&>div>div>label]:gap-x-2"
83 />
84 </FormControl>
85 </FormItem>
86 <FormItem asChild>
87 <FormControl>
88 <Tooltip>
89 <TooltipTrigger asChild>
90 <RadioGroupStackedItem
91 value="true"
92 // @ts-ignore
93 label={
94 <>
95 Postgres with OrioleDB
96 <Badge variant="warning">Alpha</Badge>
97 </>
98 }
99 description="Not recommended for production workloads"
100 className={cn(
101 '[&>div>div>p]:text-left [&>div>div>p]:text-xs [&>div>div>label]:flex [&>div>div>label]:items-center [&>div>div>label]:gap-x-2',
102 form.getValues('useOrioleDb') ? 'rounded-b-none!' : ''
103 )}
104 disabled={disableOrioleProjectCreation}
105 />
106 </TooltipTrigger>
107 {disableOrioleProjectCreation && (
108 <TooltipContent side="right" className="w-60 text-center">
109 OrioleDB is temporarily disabled for new projects. Please try again
110 later.
111 </TooltipContent>
112 )}
113 </Tooltip>
114 </FormControl>
115 </FormItem>
116 </RadioGroupStacked>
117 </FormControl>
118 {form.getValues('useOrioleDb') && (
119 <Admonition
120 type="warning"
121 className="rounded-t-none [&>div]:text-xs"
122 title="OrioleDB is not production ready"
123 description="Postgres with OrioleDB extension is currently in Public Alpha and not recommended for production usage yet."
124 >
125 <DocsButton className="mt-2" href={`${DOCS_URL}/guides/database/orioledb`} />
126 </Admonition>
127 )}
128 </FormItemLayout>
129 </>
130 )}
131 />
132 </CollapsibleContent>
133 </Collapsible>
134 </Panel.Content>
135 )
136}