Display only directly assigned roles in user modal (#1251)

* 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.

* Fix 'any' type and remove leftover comment

* Also fix the user roles in the create user dialogue

As with the user details view, we also need to provide the assignedRoles
attribute in the New User dialogue.

* Only define the necessary attributes for the user handleSubmit.

Reduce the attributes of handleSubmit when updating or creating a user.

Author: snoesberger

src/components/shared/wizard/SelectContainer.tsx

@@ -264,7 +264,7 @@ const SelectContainer = ({
 							onChange={(e) => handleChangeRemove(e)}
 							value={markedForRemoval}
 						>
-{/* @ts-expect-error TS(7006): Parameter 'item' implicitly has an 'any' type. */}
+							{/* @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

@@ -10,6 +10,8 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { UpdateUser, updateUserDetails } from "../../../../slices/userDetailsSlice";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { ParseKeys } from "i18next";
+import { UserRole } from "../../../../slices/userSlice";
+import { SerializedError } from "@reduxjs/toolkit";
 
 /**
  * This component manages the pages of the user details
@@ -24,9 +26,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 +62,23 @@ const UserDetails: React.FC<{
 		setPage(tabNr);
 	};
 
-	const handleSubmit = (values: UpdateUser) => {
-		dispatch(updateUserDetails({values: values, username: userDetails.username}));
+	const handleSubmit = (values: {
+		username: string,
+		name?: string,
+		email?: string,
+		password?: string,
+		roles?: UserRole[],
+		assignedRoles?: UserRole[],
+	}) => {
+		const newValues: UpdateUser = {
+			username: values.username,
+			name: values.name,
+			email: values.email,
+			password: values.password,
+			roles: values.assignedRoles,
+		};
+
+		dispatch(updateUserDetails({values: newValues, username: userDetails.username}));
 		close();
 	};
 

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

@@ -7,10 +7,11 @@ import UserRolesTab from "./UserRolesTab";
 import { initialFormValuesNewUser } from "../../../../configs/modalConfig";
 import { getUsernames } from "../../../../selectors/userSelectors";
 import { NewUserSchema } from "../../../../utils/validate";
-import { NewUser, postNewUser } from "../../../../slices/userSlice";
+import { NewUser, postNewUser, UserRole } from "../../../../slices/userSlice";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
+import { Role } from "../../../../slices/aclSlice";
 
 /**
  * This component renders the new user wizard
@@ -37,8 +38,22 @@ const NewUserWizard = ({
 		setTab(tabNr);
 	};
 
-	const handleSubmit = (values: NewUser) => {
-		const response = dispatch(postNewUser(values));
+	const handleSubmit = (values: {
+			username: string,
+			name: string,
+			email: string,
+			password: string,
+			roles: Role[],
+			assignedRoles: UserRole[],
+	}) => {
+		const newValues: NewUser = {
+			username: values.username,
+			name: values.name,
+			email: values.email,
+			password: values.password,
+			roles: values.assignedRoles,
+		}
+		const response = dispatch(postNewUser(newValues));
 		console.info(response);
 		close();
 	};

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

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

src/configs/modalConfig.ts

@@ -6,6 +6,7 @@ import { initArray } from "../utils/utils";
 import { EditedEvents, Event, UploadAssetsTrack } from "../slices/eventSlice";
 import { Role } from "../slices/aclSlice";
 import { ParseKeys } from "i18next";
+import { UserRole } from "../slices/userSlice";
 
 // Context for notifications shown in modals
 export const NOTIFICATION_CONTEXT = "modal-form";
@@ -182,6 +183,7 @@ export const initialFormValuesNewUser: {
 	password: string,
 	passwordConfirmation: string,
 	roles: Role[],
+	assignedRoles: UserRole[],
 	manageable: boolean,
 } = {
 	username: "",
@@ -190,6 +192,7 @@ export const initialFormValuesNewUser: {
 	password: "",
 	passwordConfirmation: "",
 	roles: [],
+	assignedRoles: [],
 	manageable: true,
 };