Display only directly assigned roles in user modal

Not only assigned but also derived roles were display in the "Roles" tab
of the user modal.

Author: snoesberger

src/components/shared/wizard/SelectContainer.tsx

@@ -252,7 +252,8 @@ const SelectContainer = ({
 							onChange={(e) => handleChangeRemove(e)}
 							value={markedForRemoval}
 						>
-{/* @ts-expect-error TS(7006): Parameter 'item' implicitly has an 'any' type. */}
+							{/* Show assigned users or directly assigned roles*/}
+							{/* @ts-expect-error TS(7006): Parameter 'item' implicitly has an 'any' type. */}
 							{selectedItems.map((item, key) => (
 								<option key={key} value={item.name}>
 									{item.name}

src/components/users/partials/modal/UserDetails.tsx

@@ -24,9 +24,11 @@ const UserDetails: React.FC<{
 	const [page, setPage] = useState(0);
 
 	const userDetails = useAppSelector(state => getUserDetails(state));
+	const assignedRoles = userDetails.roles.filter(role => role.type === "GROUP" || role.type === "INTERNAL")
 
 	const initialValues = {
 		...userDetails,
+		assignedRoles,
 		password: "",
 		passwordConfirmation: "",
 	};
@@ -58,8 +60,16 @@ const UserDetails: React.FC<{
 		setPage(tabNr);
 	};
 
-	const handleSubmit = (values: UpdateUser) => {
-		dispatch(updateUserDetails({values: values, username: userDetails.username}));
+	const handleSubmit = (values: any) => {
+		const newValues: UpdateUser = {
+			email: values.email,
+			name: values.name,
+			username: values.username,
+			roles: values.assignedRoles,
+			password: values.password,
+		};
+
+		dispatch(updateUserDetails({values: newValues, username: userDetails.username}));
 		close();
 	};
 

src/components/users/partials/wizard/UserRolesTab.tsx

@@ -44,7 +44,7 @@ const UserRolesTab = <T extends RequiredFormProps>({
 							label: "USERS.USERS.DETAILS.ROLES",
 							items: roles,
 						}}
-						formikField="roles"
+						formikField="assignedRoles"
 						manageable={formik.values.manageable}
 					/>
 				)}