Skip to content

Commit

Permalink
🛡️ feat: Add Role Dropdown to Prompt/Agents Admin Settings (danny-avi…
Browse files Browse the repository at this point in the history 
…la#4922)

* style: update AdminSettings dialog content styles for improved accessibility/theming

* style: update icon colors in ExportAndShareMenu for improved theming

* feat: enhance DropdownPopup component with additional props for customization

* feat: add role selection dropdown to AdminSettings for enhanced user permissions management

* feat: add role selection dropdown to AdminSettings for Prompt permission management

* style: add gap to button in AdminSettings for improved layout

* feat: add warning message for Admin role access in Permissions settings
  • Loading branch information
@danny-avila
danny-avila authored Dec 10, 2024
1 parent 1c05251 commit 4640e1b
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 95 deletions.
6 changes: 3 additions & 3 deletions client/src/components/Chat/ExportAndShareMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@ export default function ExportAndShareMenu({
{
label: localize('com_endpoint_export'),
onClick: exportHandler,
icon: <Upload className="icon-md mr-2 dark:text-gray-300" />,
icon: <Upload className="icon-md mr-2 text-text-secondary" />,
},
{
label: localize('com_ui_share'),
onClick: shareHandler,
icon: <Share2 className="icon-md mr-2 dark:text-gray-300" />,
icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
show: isSharedButtonEnabled,
},
];
Expand All @@ -72,7 +72,7 @@ export default function ExportAndShareMenu({
aria-label="Export options"
className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<Upload className="icon-md dark:text-gray-300" aria-hidden="true" focusable="false" />
<Upload className="icon-md text-text-secondary" aria-hidden="true" focusable="false" />
</Ariakit.MenuButton>
}
items={dropdownItems}
Expand Down
148 changes: 102 additions & 46 deletions client/src/components/Prompts/AdminSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useMemo, useEffect } from 'react';
import * as Ariakit from '@ariakit/react';
import { useMemo, useEffect, useState } from 'react';
import { ShieldEllipsis } from 'lucide-react';
import { useForm, Controller } from 'react-hook-form';
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
import { OGDialog, OGDialogTitle, OGDialogContent, OGDialogTrigger } from '~/components/ui';
import { useUpdatePromptPermissionsMutation } from '~/data-provider';
import { useLocalize, useAuthContext } from '~/hooks';
import { Button, Switch } from '~/components/ui';
import { Button, Switch, DropdownPopup } from '~/components/ui';
import { useToastContext } from '~/Providers';

type FormValues = Record<Permissions, boolean>;
Expand All @@ -19,8 +20,6 @@ type LabelControllerProps = {
getValues: UseFormGetValues<FormValues>;
};

const defaultValues = roleDefaults[SystemRoles.USER];

const LabelController: React.FC<LabelControllerProps> = ({
control,
promptPerm,
Expand All @@ -32,7 +31,6 @@ const LabelController: React.FC<LabelControllerProps> = ({
<button
className="cursor-pointer select-none"
type="button"
// htmlFor={promptPerm}
onClick={() =>
setValue(promptPerm, !getValues(promptPerm), {
shouldDirty: true,
Expand Down Expand Up @@ -70,6 +68,16 @@ const AdminSettings = () => {
},
});

const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);

const defaultValues = useMemo(() => {
if (roles?.[selectedRole]) {
return roles[selectedRole][PermissionTypes.PROMPTS];
}
return roleDefaults[selectedRole][PermissionTypes.PROMPTS];
}, [roles, selectedRole]);

const {
reset,
control,
Expand All @@ -79,20 +87,16 @@ const AdminSettings = () => {
formState: { isSubmitting },
} = useForm<FormValues>({
mode: 'onChange',
defaultValues: useMemo(() => {
if (roles?.[SystemRoles.USER]) {
return roles[SystemRoles.USER][PermissionTypes.PROMPTS];
}

return defaultValues[PermissionTypes.PROMPTS];
}, [roles]),
defaultValues,
});

useEffect(() => {
if (roles?.[SystemRoles.USER]?.[PermissionTypes.PROMPTS]) {
reset(roles[SystemRoles.USER][PermissionTypes.PROMPTS]);
if (roles?.[selectedRole]?.[PermissionTypes.PROMPTS]) {
reset(roles[selectedRole][PermissionTypes.PROMPTS]);
} else {
reset(roleDefaults[selectedRole][PermissionTypes.PROMPTS]);
}
}, [roles, reset]);
}, [roles, selectedRole, reset]);

if (user?.role !== SystemRoles.ADMIN) {
return null;
Expand All @@ -103,20 +107,35 @@ const AdminSettings = () => {
promptPerm: Permissions.SHARED_GLOBAL,
label: localize('com_ui_prompts_allow_share_global'),
},
{
promptPerm: Permissions.USE,
label: localize('com_ui_prompts_allow_use'),
},
{
promptPerm: Permissions.CREATE,
label: localize('com_ui_prompts_allow_create'),
},
{
promptPerm: Permissions.USE,
label: localize('com_ui_prompts_allow_use'),
},
];

const onSubmit = (data: FormValues) => {
mutate({ roleName: SystemRoles.USER, updates: data });
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>
Expand All @@ -129,33 +148,70 @@ const AdminSettings = () => {
<span className="hidden sm:flex">{localize('com_ui_admin')}</span>
</Button>
</OGDialogTrigger>
<OGDialogContent className="bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300">
<OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
'com_ui_prompts',
)}`}</OGDialogTitle>
<form className="p-2" onSubmit={handleSubmit(onSubmit)}>
<div className="py-5">
{labelControllerData.map(({ promptPerm, label }) => (
<LabelController
key={promptPerm}
control={control}
promptPerm={promptPerm}
label={label}
getValues={getValues}
setValue={setValue}
/>
))}
</div>
<div className="flex justify-end">
<button
type="submit"
disabled={isSubmitting || isLoading}
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
>
{localize('com_ui_save')}
</button>
<OGDialogContent className="w-1/4 border-border-light bg-surface-primary text-text-primary">
<OGDialogTitle>
{`${localize('com_ui_admin_settings')} - ${localize('com_ui_prompts')}`}
</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
menuId="prompt-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}
className="border border-border-light bg-surface-primary"
itemClassName="hover:bg-surface-tertiary items-center justify-center"
sameWidth={true}
/>
</div>
</form>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="py-5">
{labelControllerData.map(({ promptPerm, label }) => (
<div key={promptPerm}>
<LabelController
control={control}
promptPerm={promptPerm}
label={label}
getValues={getValues}
setValue={setValue}
/>
{selectedRole === SystemRoles.ADMIN && promptPerm === Permissions.USE && (
<>
<div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
<span>{localize('com_ui_admin_access_warning')}</span>
{'\n'}
<a
href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
target="_blank"
rel="noreferrer"
className="text-blue-500 underline"
>
{localize('com_ui_more_info')}
</a>
</div>
</>
)}
</div>
))}
</div>
<div className="flex justify-end">
<button
type="submit"
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>
);
Expand Down
Loading

0 comments on commit 4640e1b

Please sign in to comment.