🛡️ feat: Add Role Dropdown to Prompt/Agents Admin Settings (#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
This commit is contained in:
Danny Avila 2024-12-09 19:50:03 -05:00 committed by GitHub
parent 1c05251826
commit 4640e1b124
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 227 additions and 95 deletions

View file

@ -17,7 +17,10 @@ interface DropdownProps {
setIsOpen: (isOpen: boolean) => void;
className?: string;
iconClassName?: string;
itemClassName?: string;
sameWidth?: boolean;
anchor?: { x: string; y: string };
gutter?: number;
modal?: boolean;
menuId: string;
}
@ -29,7 +32,11 @@ const DropdownPopup: React.FC<DropdownProps> = ({
setIsOpen,
menuId,
modal,
gutter = 8,
sameWidth,
className,
iconClassName,
itemClassName,
}) => {
const menu = Ariakit.useMenuStore({ open: isOpen, setOpen: setIsOpen });
@ -38,9 +45,13 @@ const DropdownPopup: React.FC<DropdownProps> = ({
{trigger}
<Ariakit.Menu
id={menuId}
className="absolute z-50 mt-2 overflow-hidden rounded-lg bg-header-primary p-1.5 shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring-primary"
gutter={8}
className={cn(
'absolute z-50 mt-2 overflow-hidden rounded-lg bg-header-primary p-1.5 shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
className,
)}
gutter={gutter}
modal={modal}
sameWidth={sameWidth}
>
{items
.filter((item) => item.show !== false)
@ -50,7 +61,10 @@ const DropdownPopup: React.FC<DropdownProps> = ({
) : (
<Ariakit.MenuItem
key={index}
className="group flex w-full cursor-pointer items-center gap-2 rounded-lg p-2.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover"
className={cn(
'group flex w-full cursor-pointer items-center gap-2 rounded-lg p-2.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover',
itemClassName,
)}
disabled={item.disabled}
onClick={(event) => {
event.preventDefault();