Disable Additional Roles in Selfcare

[kausik10]

Hi, for a project, I wanted one user to have one role so I modified the membership-controls.tsx to keep track of the selectedRole as:

 const selectedRoles = roles
        ? Object.keys(roles).filter((role) =>
              memberships.some((it) => it.role === role)
          )
        : [];

Thus I would only display this div if there are no roles selected

<div>
                {remainingRoles.length > 0 && selectedRoles.length < 1 ? (
                    <DropdownMenu>
                        <DropdownMenuTrigger>
                            <Button variant="outline">
                                <PlusIcon className="w-3 h-3" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent>
                            {remainingRoles.map((role: any) => (
                                <DropdownMenuItem
                                    key={role}
                                    onClick={() =>
                                        setMemberships([
                                            ...memberships,
                                            { role: role, variables: [] },
                                        ])
                                    }
                                >
                                    {roles?.[role].label}
                                </DropdownMenuItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                ) : null}
            </div>

For the current application where user invitation is done from within the app, it works well.

However, for projects where we require user invitation from the selfcare-panel how can I disable the ability for one user to have more than one role?

In this ss below, I don't want the + button to appear when one role eg: admin already exist. Thank you!

[jonasnobile]

There should be MembershipsControl component in lib/tenant/forms/memberships-control.tsx. You can simply modify the condition to hide DropdownMenu when there is role selected.

Something like this:

export const MembershipsControl = ({ setMemberships, memberships, roles }: MembershipsControlProps) => {
	const remainingRoles = roles ? Object.keys(roles).filter(role => !memberships.some(it => it.role === role)) : []

	return (
		<div className="flex flex-col gap-4">
			{memberships.length < 2 ? <div>
				<DropdownMenu>
					<DropdownMenuTrigger asChild>
						<Button variant="outline" className="flex gap-2"><PlusIcon className="w-4 h-4"/>{dict.tenant.invite.addRole}</Button>
					</DropdownMenuTrigger>
					<DropdownMenuContent>
						{remainingRoles.map(role => <DropdownMenuItem
							key={role}
							onClick={() => setMemberships([...memberships, {
								role: role,
								variables: [],
							}])}
						>{roles?.[role].label}</DropdownMenuItem>)}
					</DropdownMenuContent>
				</DropdownMenu>
			</div> : null}
...