Function RoleSelector

site/src/modules/roles/RoleSelector.tsx:23–86

({
	hideLabel,
	loading,
	error,
	availableRoles = [],
	selectedRoles,
	onChange,
})

};

export const RoleSelector: FC<RoleSelectorProps> = ({
	hideLabel,
	loading,
	error,
	availableRoles = [],
	selectedRoles,
	onChange,
}) => {
	if (loading) {
		return (
			<RoleSelectorLayout>
				<RoleSelectorSkeleton />
				<MemberRole />
			</RoleSelectorLayout>
		);
	}

	if (error) {
		return (
			<RoleSelectorLayout>
				<Alert severity="error">
					<AlertTitle>
						{getErrorMessage(error, "Failed to load roles.")}
					</AlertTitle>
				</Alert>
			</RoleSelectorLayout>
		);
	}

	const { selectableRoles = [], advancedRoles = [] } = Object.groupBy(
		availableRoles.filter((r) => r.name !== "member"),
		(it) =>
			advancedRoleNames.includes(it.name) ? "advancedRoles" : "selectableRoles",
	);

	if (selectableRoles.length === 0) {
		return null;
	}

	const handleToggle = (roleName: string) => {
		const newRoles = new Set(selectedRoles);
		if (newRoles.has(roleName)) {
			newRoles.delete(roleName);
		} else {
			newRoles.add(roleName);
		}
		onChange(newRoles);
	};

	return (
		<RoleSelectorLayout hideLabel={hideLabel}>
			{selectableRoles.length > 0 && (
				<RoleSelectorList
					selectableRoles={selectableRoles}
					advancedRoles={advancedRoles}
					selectedRoles={selectedRoles}
					handleToggle={handleToggle}
				/>