konnosDashboard
PrivilegesHead.tsx141 lines · main
1import {
2 Button,
3 Select,
4 SelectContent,
5 SelectGroup,
6 SelectItem,
7 SelectTrigger,
8 SelectValue,
9} from 'ui'
10
11import SchemaSelector from '@/components/ui/SchemaSelector'
12
13export interface PrivilegesHeadProps {
14 disabled: boolean
15 selectedSchema: string
16 selectedRole: string
17 selectedTable?: { name: string }
18 tables: string[]
19 roles: string[]
20 onChangeSchema: (schema: string) => void
21 onChangeRole: (role: string) => void
22 onChangeTable: (table: string) => void
23 hasChanges?: boolean
24 resetChanges: () => void
25 applyChanges: () => void
26 isApplyingChanges?: boolean
27}
28
29const PrivilegesHead = ({
30 disabled,
31 selectedSchema,
32 onChangeSchema,
33 selectedRole,
34 roles,
35 onChangeRole,
36 selectedTable,
37 tables,
38 onChangeTable,
39 hasChanges = false,
40 resetChanges,
41 applyChanges,
42 isApplyingChanges = false,
43}: PrivilegesHeadProps) => {
44 return (
45 <div className="flex items-center justify-between">
46 <div className="flex items-center gap-x-2">
47 <SchemaSelector
48 className="bg-control rounded-md w-[180px] [&>button]:py-[5px]"
49 selectedSchemaName={selectedSchema}
50 onSelectSchema={onChangeSchema}
51 />
52 <TablesSelect selectedTable={selectedTable} tables={tables} onChangeTable={onChangeTable} />
53 <div className="h-[20px] w-px border-r border-scale-600"></div>
54 <RolesSelect selectedRole={selectedRole} roles={roles} onChangeRole={onChangeRole} />
55 </div>
56
57 <div className="flex items-center gap-2">
58 <Button
59 type="default"
60 size="tiny"
61 onClick={resetChanges}
62 disabled={!hasChanges || isApplyingChanges}
63 >
64 Reset
65 </Button>
66 <Button
67 type="primary"
68 size="tiny"
69 onClick={applyChanges}
70 disabled={disabled || !hasChanges || isApplyingChanges}
71 loading={isApplyingChanges}
72 >
73 Apply Changes
74 </Button>
75 </div>
76 </div>
77 )
78}
79
80const RolesSelect = ({
81 selectedRole,
82 roles,
83 onChangeRole,
84}: {
85 selectedRole: string
86 roles: string[]
87 onChangeRole: (role: string) => void
88}) => {
89 return (
90 <Select value={selectedRole} onValueChange={onChangeRole}>
91 <SelectTrigger size="tiny" className="w-40">
92 <SelectValue placeholder="Select a role" />
93 </SelectTrigger>
94 <SelectContent>
95 <SelectGroup>
96 {roles.map((role) => (
97 <SelectItem key={role} value={role} className="text-xs">
98 <span className="text-foreground-light mr-1">role</span> {role}
99 </SelectItem>
100 ))}
101 </SelectGroup>
102 </SelectContent>
103 </Select>
104 )
105}
106
107const TablesSelect = ({
108 selectedTable,
109 tables,
110 onChangeTable,
111}: {
112 selectedTable?: {
113 name: string
114 }
115 tables: string[]
116 onChangeTable: (table: string) => void
117}) => {
118 return (
119 <Select value={selectedTable?.name} onValueChange={onChangeTable}>
120 <SelectTrigger size="tiny" className="w-44">
121 <SelectValue placeholder="Select a table" />
122 </SelectTrigger>
123 <SelectContent>
124 <SelectGroup>
125 {tables.length === 0 ? (
126 <div className="text-xs text-foreground-light p-2">
127 No tables available in this schema
128 </div>
129 ) : null}
130 {tables.map((table) => (
131 <SelectItem key={table} value={table} className="text-xs">
132 <span className="text-foreground-light mr-1">table</span> {table}
133 </SelectItem>
134 ))}
135 </SelectGroup>
136 </SelectContent>
137 </Select>
138 )
139}
140
141export default PrivilegesHead