1
1
"use client" ;
2
2
3
3
import { zodResolver } from "@hookform/resolvers/zod" ;
4
- import { Checkbox , Divider } from "@nextui-org/react" ;
5
- import { SaveIcon } from "lucide-react" ;
4
+ import { Checkbox , Divider , Tooltip } from "@nextui-org/react" ;
5
+ import { clsx } from "clsx" ;
6
+ import { InfoIcon , SaveIcon } from "lucide-react" ;
6
7
import { useRouter } from "next/navigation" ;
7
8
import { useEffect } from "react" ;
8
9
import { Controller , useForm } from "react-hook-form" ;
@@ -16,6 +17,7 @@ import {
16
17
CustomInput ,
17
18
} from "@/components/ui/custom" ;
18
19
import { Form } from "@/components/ui/form" ;
20
+ import { permissionFormFields } from "@/lib" ;
19
21
import { ApiError , editRoleFormSchema } from "@/types" ;
20
22
21
23
type FormValues = z . infer < typeof editRoleFormSchema > ;
@@ -162,19 +164,6 @@ export const EditRoleForm = ({
162
164
}
163
165
} ;
164
166
165
- const permissions = [
166
- { field : "manage_users" , label : "Invite and Manage Users" } ,
167
- ...( process . env . NEXT_PUBLIC_IS_CLOUD_ENV === "true"
168
- ? [ { field : "manage_billing" , label : "Manage Billing" } ]
169
- : [ ] ) ,
170
- { field : "manage_account" , label : "Manage Account" } ,
171
- { field : "manage_providers" , label : "Manage Cloud Providers" } ,
172
- // TODO: Add back when we have integrations ready
173
- // { field: "manage_integrations", label: "Manage Integrations" },
174
- { field : "manage_scans" , label : "Manage Scans" } ,
175
- { field : "unlimited_visibility" , label : "Unlimited Visibility" } ,
176
- ] ;
177
-
178
167
return (
179
168
< Form { ...form } >
180
169
< form
@@ -198,7 +187,7 @@ export const EditRoleForm = ({
198
187
199
188
{ /* Select All Checkbox */ }
200
189
< Checkbox
201
- isSelected = { permissions . every ( ( perm ) =>
190
+ isSelected = { permissionFormFields . every ( ( perm ) =>
202
191
form . watch ( perm . field as keyof FormValues ) ,
203
192
) }
204
193
onChange = { ( e ) => onSelectAllChange ( e . target . checked ) }
@@ -212,19 +201,37 @@ export const EditRoleForm = ({
212
201
213
202
{ /* Permissions Grid */ }
214
203
< div className = "grid grid-cols-2 gap-4" >
215
- { permissions . map ( ( { field, label } ) => (
216
- < Checkbox
217
- key = { field }
218
- { ...form . register ( field as keyof FormValues ) }
219
- isSelected = { ! ! form . watch ( field as keyof FormValues ) }
220
- classNames = { {
221
- label : "text-small" ,
222
- wrapper : "checkbox-update" ,
223
- } }
224
- >
225
- { label }
226
- </ Checkbox >
227
- ) ) }
204
+ { permissionFormFields
205
+ . filter (
206
+ ( permission ) =>
207
+ permission . field !== "manage_billing" ||
208
+ process . env . NEXT_PUBLIC_IS_CLOUD_ENV === "true" ,
209
+ )
210
+ . map ( ( { field, label, description } ) => (
211
+ < div key = { field } className = "flex items-center gap-2" >
212
+ < Checkbox
213
+ { ...form . register ( field as keyof FormValues ) }
214
+ isSelected = { ! ! form . watch ( field as keyof FormValues ) }
215
+ classNames = { {
216
+ label : "text-small" ,
217
+ wrapper : "checkbox-update" ,
218
+ } }
219
+ >
220
+ { label }
221
+ </ Checkbox >
222
+ < Tooltip content = { description } placement = "right" >
223
+ < div className = "flex w-fit items-center justify-center" >
224
+ < InfoIcon
225
+ className = { clsx (
226
+ "cursor-pointer text-default-400 group-data-[selected=true]:text-foreground" ,
227
+ ) }
228
+ aria-hidden = { "true" }
229
+ width = { 16 }
230
+ />
231
+ </ div >
232
+ </ Tooltip >
233
+ </ div >
234
+ ) ) }
228
235
</ div >
229
236
</ div >
230
237
< Divider className = "my-4" />
0 commit comments