mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 17:30:16 +01:00
🧑🤝🧑 feat: Add People Picker Permissions Management UI
This commit is contained in:
Danny Avila
parent
d82a63642d
commit
a434d28579
15 changed files with 419 additions and 229 deletions
|
|
@ -153,7 +153,7 @@ const AdminSettings = () => {
|
|||
<span className="hidden sm:flex">{localize('com_ui_admin')}</span>
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="w-11/12 max-w-lg border-border-light bg-surface-primary text-text-primary">
|
||||
<OGDialogContent className="max-w-lg border-border-light bg-surface-primary text-text-primary md:w-1/4">
|
||||
<OGDialogTitle>
|
||||
{`${localize('com_ui_admin_settings')} - ${localize('com_ui_prompts')}`}
|
||||
</OGDialogTitle>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import {
|
|||
useLocalize,
|
||||
} from '~/hooks';
|
||||
import UnifiedPeopleSearch from './PeoplePicker/UnifiedPeopleSearch';
|
||||
import PeoplePickerAdminSettings from './PeoplePickerAdminSettings';
|
||||
import PublicSharingToggle from './PublicSharingToggle';
|
||||
import { SelectedPrincipalsList } from './PeoplePicker';
|
||||
import { cn } from '~/utils';
|
||||
|
|
@ -366,7 +367,8 @@ export default function GenericGrantAccessDialog({
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-2">
|
||||
<PeoplePickerAdminSettings />
|
||||
<OGDialogClose asChild>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
{localize('com_ui_cancel')}
|
||||
|
|
|
|||
221
client/src/components/Sharing/PeoplePickerAdminSettings.tsx
Normal file
221
client/src/components/Sharing/PeoplePickerAdminSettings.tsx
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
import { useMemo, useEffect, useState } from 'react';
|
||||
import * as Ariakit from '@ariakit/react';
|
||||
import { ShieldEllipsis } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
Switch,
|
||||
OGDialog,
|
||||
DropdownPopup,
|
||||
OGDialogTitle,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
|
||||
import { useUpdatePeoplePickerPermissionsMutation } from '~/data-provider';
|
||||
import { useLocalize, useAuthContext } from '~/hooks';
|
||||
|
||||
type FormValues = {
|
||||
[Permissions.VIEW_USERS]: boolean;
|
||||
[Permissions.VIEW_GROUPS]: boolean;
|
||||
[Permissions.VIEW_ROLES]: boolean;
|
||||
};
|
||||
|
||||
type LabelControllerProps = {
|
||||
label: string;
|
||||
peoplePickerPerm: Permissions.VIEW_USERS | Permissions.VIEW_GROUPS | Permissions.VIEW_ROLES;
|
||||
control: Control<FormValues, unknown, FormValues>;
|
||||
setValue: UseFormSetValue<FormValues>;
|
||||
getValues: UseFormGetValues<FormValues>;
|
||||
};
|
||||
|
||||
const LabelController: React.FC<LabelControllerProps> = ({
|
||||
control,
|
||||
peoplePickerPerm,
|
||||
label,
|
||||
getValues,
|
||||
setValue,
|
||||
}) => (
|
||||
<div className="mb-4 flex items-center justify-between gap-2">
|
||||
<button
|
||||
className="cursor-pointer select-none"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setValue(peoplePickerPerm, !getValues(peoplePickerPerm), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
<Controller
|
||||
name={peoplePickerPerm}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const PeoplePickerAdminSettings = () => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const { user, roles } = useAuthContext();
|
||||
const { mutate, isLoading } = useUpdatePeoplePickerPermissionsMutation({
|
||||
onSuccess: () => {
|
||||
showToast({ status: 'success', message: localize('com_ui_saved') });
|
||||
},
|
||||
onError: () => {
|
||||
showToast({ status: 'error', message: localize('com_ui_error_save_admin_settings') });
|
||||
},
|
||||
});
|
||||
|
||||
const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
|
||||
const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
|
||||
|
||||
const defaultValues = useMemo(() => {
|
||||
const rolePerms = roles?.[selectedRole]?.permissions;
|
||||
if (rolePerms) {
|
||||
return rolePerms[PermissionTypes.PEOPLE_PICKER];
|
||||
}
|
||||
return roleDefaults[selectedRole].permissions[PermissionTypes.PEOPLE_PICKER];
|
||||
}, [roles, selectedRole]);
|
||||
|
||||
const {
|
||||
reset,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const value = roles?.[selectedRole]?.permissions?.[PermissionTypes.PEOPLE_PICKER];
|
||||
if (value) {
|
||||
reset(value);
|
||||
} else {
|
||||
reset(roleDefaults[selectedRole].permissions[PermissionTypes.PEOPLE_PICKER]);
|
||||
}
|
||||
}, [roles, selectedRole, reset]);
|
||||
|
||||
if (user?.role !== SystemRoles.ADMIN) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const labelControllerData: {
|
||||
peoplePickerPerm: Permissions.VIEW_USERS | Permissions.VIEW_GROUPS | Permissions.VIEW_ROLES;
|
||||
label: string;
|
||||
}[] = [
|
||||
{
|
||||
peoplePickerPerm: Permissions.VIEW_USERS,
|
||||
label: localize('com_ui_people_picker_allow_view_users'),
|
||||
},
|
||||
{
|
||||
peoplePickerPerm: Permissions.VIEW_GROUPS,
|
||||
label: localize('com_ui_people_picker_allow_view_groups'),
|
||||
},
|
||||
{
|
||||
peoplePickerPerm: Permissions.VIEW_ROLES,
|
||||
label: localize('com_ui_people_picker_allow_view_roles'),
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
mutate({ roleName: selectedRole, updates: data });
|
||||
};
|
||||
|
||||
const roleDropdownItems = [
|
||||
{
|
||||
label: SystemRoles.USER,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.USER);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: SystemRoles.ADMIN,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.ADMIN);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative gap-1 rounded-lg font-medium"
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="w-full border-border-light bg-surface-primary text-text-primary md:w-1/4">
|
||||
<OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
|
||||
'com_ui_people_picker',
|
||||
)}`}</OGDialogTitle>
|
||||
<div className="p-2">
|
||||
{/* Role selection dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{localize('com_ui_role_select')}:</span>
|
||||
<DropdownPopup
|
||||
unmountOnHide={true}
|
||||
menuId="role-dropdown"
|
||||
isOpen={isRoleMenuOpen}
|
||||
setIsOpen={setIsRoleMenuOpen}
|
||||
trigger={
|
||||
<Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
|
||||
{selectedRole}
|
||||
</Ariakit.MenuButton>
|
||||
}
|
||||
items={roleDropdownItems}
|
||||
itemClassName="items-center justify-center"
|
||||
sameWidth={true}
|
||||
/>
|
||||
</div>
|
||||
{/* Permissions form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="py-5">
|
||||
{labelControllerData.map(({ peoplePickerPerm, label }) => (
|
||||
<div key={peoplePickerPerm}>
|
||||
<LabelController
|
||||
control={control}
|
||||
peoplePickerPerm={peoplePickerPerm}
|
||||
label={label}
|
||||
getValues={getValues}
|
||||
setValue={setValue}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
disabled={isSubmitting || isLoading}
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default PeoplePickerAdminSettings;
|
||||
|
|
@ -157,7 +157,7 @@ const AdminSettings = () => {
|
|||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="w-1/4 border-border-light bg-surface-primary text-text-primary">
|
||||
<OGDialogContent className="border-border-light bg-surface-primary text-text-primary md:w-1/4">
|
||||
<OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
|
||||
'com_ui_agents',
|
||||
)}`}</OGDialogTitle>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ const AdminSettings = () => {
|
|||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="w-1/4 border-border-light bg-surface-primary text-text-primary">
|
||||
<OGDialogContent className="border-border-light bg-surface-primary text-text-primary md:w-1/4">
|
||||
<OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
|
||||
'com_ui_memories',
|
||||
)}`}</OGDialogTitle>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
dataService,
|
||||
promptPermissionsSchema,
|
||||
memoryPermissionsSchema,
|
||||
peoplePickerPermissionsSchema,
|
||||
} from 'librechat-data-provider';
|
||||
import type {
|
||||
UseQueryOptions,
|
||||
|
|
@ -132,3 +133,39 @@ export const useUpdateMemoryPermissionsMutation = (
|
|||
},
|
||||
);
|
||||
};
|
||||
|
||||
export const useUpdatePeoplePickerPermissionsMutation = (
|
||||
options?: t.UpdatePeoplePickerPermOptions,
|
||||
): UseMutationResult<
|
||||
t.UpdatePermResponse,
|
||||
t.TError | undefined,
|
||||
t.UpdatePeoplePickerPermVars,
|
||||
unknown
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
const { onMutate, onSuccess, onError } = options ?? {};
|
||||
return useMutation(
|
||||
(variables) => {
|
||||
peoplePickerPermissionsSchema.partial().parse(variables.updates);
|
||||
return dataService.updatePeoplePickerPermissions(variables);
|
||||
},
|
||||
{
|
||||
onSuccess: (data, variables, context) => {
|
||||
queryClient.invalidateQueries([QueryKeys.roles, variables.roleName]);
|
||||
if (onSuccess) {
|
||||
onSuccess(data, variables, context);
|
||||
}
|
||||
},
|
||||
onError: (...args) => {
|
||||
const error = args[0];
|
||||
if (error != null) {
|
||||
console.error('Failed to update people picker permissions:', error);
|
||||
}
|
||||
if (onError) {
|
||||
onError(...args);
|
||||
}
|
||||
},
|
||||
onMutate,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -588,6 +588,10 @@
|
|||
"com_ui_agents_allow_create": "Allow creating Agents",
|
||||
"com_ui_agents_allow_share_global": "Allow sharing Agents to all users",
|
||||
"com_ui_agents_allow_use": "Allow using Agents",
|
||||
"com_ui_people_picker": "People Picker",
|
||||
"com_ui_people_picker_allow_view_users": "Allow viewing users",
|
||||
"com_ui_people_picker_allow_view_groups": "Allow viewing groups",
|
||||
"com_ui_people_picker_allow_view_roles": "Allow viewing roles",
|
||||
"com_ui_all": "all",
|
||||
"com_ui_all_proper": "All",
|
||||
"com_ui_analyzing": "Analyzing",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue