edit-role-dialog.tsx•3 kB
import { useMutation, useQuery } from '@tanstack/react-query';
import { t } from 'i18next';
import { Pencil } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
DialogFooter,
} from '@/components/ui/dialog';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { toast } from '@/components/ui/use-toast';
import { projectRoleApi } from '@/features/platform-admin/lib/project-role-api';
import { ProjectMemberWithUser } from '@activepieces/ee-shared';
import { projectMembersApi } from '../lib/project-members-api';
interface EditRoleDialogProps {
member: ProjectMemberWithUser;
onSave: () => void;
disabled: boolean;
}
export function EditRoleDialog({
member,
onSave,
disabled,
}: EditRoleDialogProps) {
const [isOpen, setIsOpen] = useState(false);
const [selectedRole, setSelectedRole] = useState(member.projectRole.name);
const { data: rolesData } = useQuery({
queryKey: ['project-roles'],
queryFn: () => projectRoleApi.list(),
});
const roles = rolesData?.data ?? [];
const { mutate, isPending } = useMutation({
mutationFn: (newRole: string) => {
return projectMembersApi.update(member.id, {
role: newRole,
});
},
onSuccess: () => {
toast({
title: t('Role updated successfully'),
});
onSave();
setIsOpen(false);
},
onError: () => {
toast({
title: t('Error updating role'),
description: t('Please try again later'),
});
},
});
const handleRoleChange = (newRole: string) => {
setSelectedRole(newRole);
};
const handleSave = () => {
mutate(selectedRole);
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button variant="ghost" className="size-8 p-0" disabled={disabled}>
<Pencil className="size-4" />
</Button>
</DialogTrigger>
<DialogContent className="w-full max-w-md">
<DialogHeader>
<DialogTitle>
{t('Edit Role for')} {member.user.firstName} {member.user.lastName}
</DialogTitle>
</DialogHeader>
<div className="grid gap-2">
<Select onValueChange={handleRoleChange} defaultValue={selectedRole}>
<SelectTrigger>
<SelectValue placeholder={t('Select Role')} />
</SelectTrigger>
<SelectContent>
{roles.map((role) => (
<SelectItem key={role.name} value={role.name}>
{role.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<DialogFooter>
<Button onClick={handleSave} loading={isPending}>
{t('Save')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}