Clicking on roles in user table to set filter

Allows users to click on a role in the user table to set
that role as filter.

Author: Arnei

src/components/users/partials/UsersRolesCell.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { User } from "../../../slices/userSlice";
+import { fetchUsers, User } from "../../../slices/userSlice";
+import MultiValueCell from "../../shared/MultiValueCell";
+import { loadUsersIntoTable } from "../../../thunks/tableThunks";
 
 /**
  * This component renders the roles cells of users in the table view
@@ -13,6 +15,7 @@ const UsersRolesCell = ({
 
 	const getRoleString = () => {
 		const displayRoles = [];
+		const squashedRoles = [];
 		let roleCountUI = 0;
 		let roleCountAPI = 0;
 		let roleCountCaptureAgent = 0;
@@ -31,21 +34,36 @@ const UsersRolesCell = ({
 
 		if (roleCountUI > 0) {
       const desc = t("USERS.USERS.TABLE.COLLAPSED.UI");
-			displayRoles.push(`${roleCountUI} ${desc}`);
+			squashedRoles.push(`${roleCountUI} ${desc}`);
 		}
 		if (roleCountAPI > 0) {
       const desc = t("USERS.USERS.TABLE.COLLAPSED.API");
-			displayRoles.push(`${roleCountAPI} ${desc}`);
+			squashedRoles.push(`${roleCountAPI} ${desc}`);
 		}
 		if (roleCountCaptureAgent > 0) {
       const desc = t("USERS.USERS.TABLE.COLLAPSED.CAPTURE_AGENT");
-			displayRoles.push(`${roleCountCaptureAgent} ${desc}`);
+			squashedRoles.push(`${roleCountCaptureAgent} ${desc}`);
 		}
 
-		return displayRoles.join(", ");
+		return { displayRoles, squashedRoles };
 	};
 
-	return <span>{getRoleString()}</span>;
+	const { displayRoles, squashedRoles } = getRoleString();
+
+	return (
+		<>
+			<MultiValueCell
+				resource="users"
+				values={displayRoles}
+				filterName="Role"
+				fetchResource={fetchUsers}
+				loadResourceIntoTable={loadUsersIntoTable}
+				tooltipText="USERS.USERS.TABLE.TOOLTIP.ROLES"
+			/>
+			{ displayRoles.length > 0 && squashedRoles.length > 0 && <span>, </span> }
+			<span>{squashedRoles.join(", ")}</span>
+		</>
+	);
 };
 
 export default UsersRolesCell;

src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -1352,6 +1352,7 @@
 				"PROVIDER": "Provider",
 				"ACTION": "Actions",
 				"TOOLTIP": {
+					"ROLES": "Filter for this role",
 					"DELETE": "Delete user",
 					"DETAILS": "Open user details"
 				}