feat: userroles and permissions

build/asset-manifest.json

@@ -62,6 +62,7 @@
     "static/media/chevron-up-selected.svg": "/static/media/chevron-up-selected.svg",
     "static/media/chevron-right.svg": "/static/media/chevron-right.svg",
     "static/media/people.svg": "/static/media/people.svg",
+    "static/media/arrow-down.svg": "/static/media/arrow-down.svg",
     "static/media/hamburger-menu.svg": "/static/media/hamburger-menu.svg",
     "static/media/provider-facebook.svg": "/static/media/provider-facebook.svg",
     "static/media/Union-yellow.png": "/static/media/Union-yellow.png",

src/api/userroles/user/roles.ts

@@ -15,20 +15,30 @@
 
 import { getApiUrl, useFetchData } from "../../../utils";
 
+export type UserRolesResponse =
+	| {
+			status: "OK";
+			roles: string[];
+	  }
+	| {
+			status: "FEATURE_NOT_ENABLED_ERROR";
+	  };
+
 export const useUserRolesService = () => {
 	const fetchData = useFetchData();
 
 	const addRoleToUser = async (
 		userId: string,
-		role: string
+		role: string,
+		tenantId: string
 	): Promise<
 		| {
 				status: "OK" | "UNKNOWN_ROLE_ERROR";
 		  }
 		| undefined
 	> => {
 		const response = await fetchData({
-			url: getApiUrl("/api/userroles/user/roles"),
+			url: getApiUrl("/api/userroles/user/roles", tenantId),
 			method: "PUT",
 			config: {
 				body: JSON.stringify({
@@ -46,20 +56,9 @@ export const useUserRolesService = () => {
 		return undefined;
 	};
 
-	const getRolesForUser = async (
-		userId: string
-	): Promise<
-		| {
-				status: "OK";
-				roles: string[];
-		  }
-		| {
-				status: "FEATURE_NOT_ENABLED_ERROR";
-		  }
-		| undefined
-	> => {
+	const getRolesForUser = async (userId: string, tenantId: string): Promise<UserRolesResponse | undefined> => {
 		const response = await fetchData({
-			url: getApiUrl("/api/userroles/user/roles"),
+			url: getApiUrl("/api/userroles/user/roles", tenantId),
 			method: "GET",
 			query: {
 				userId,
@@ -76,7 +75,8 @@ export const useUserRolesService = () => {
 
 	const removeUserRole = async (
 		userId: string,
-		role: string
+		role: string,
+		tenantId: string
 	): Promise<
 		| {
 				status: "OK";
@@ -87,7 +87,7 @@ export const useUserRolesService = () => {
 		| undefined
 	> => {
 		const response = await fetchData({
-			url: getApiUrl("/api/userroles/user/roles"),
+			url: getApiUrl("/api/userroles/user/roles", tenantId),
 			method: "DELETE",
 			query: {
 				userId,

src/images.ts

@@ -24,6 +24,7 @@ import "./assets/ST_icon_dark_theme.svg";
 import "./assets/ST_icon_light_theme.svg";
 import "./assets/Union-yellow.png";
 import "./assets/Union.png";
+import "./assets/arrow-down.svg";
 import "./assets/auth-background-portrait.png";
 import "./assets/auth-background.png";
 import "./assets/auth-method.svg";

src/ui/components/select/index.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { ReactComponent as ArrowDown } from "../../../assets/arrow-down.svg";
+
+import "./select.scss";
+
+type SelectProps = {
+	options: { value: string; name: string }[];
+	selectedOption: string;
+	onOptionSelect: (value: string) => void;
+};
+export default function Select({ onOptionSelect, options, selectedOption }: SelectProps) {
+	const [showOptions, setShowOptions] = useState(false);
+	return (
+		<div
+			className="select-container"
+			onMouseLeave={() => setShowOptions(false)}
+			onMouseEnter={() => setShowOptions(true)}>
+			<div className="select-action">
+				{selectedOption}{" "}
+				<ArrowDown
+					color="#000"
+					style={{ rotate: showOptions ? "180deg" : undefined }}
+				/>
+			</div>
+			{showOptions ? (
+				<div className="select-dropdown-wrapper">
+					<div className="select-dropdown">
+						{options.map((option) => {
+							return (
+								<div
+									className="select-item"
+									key={option.value}
+									onClick={(e) => {
+										e.stopPropagation();
+										onOptionSelect(option.value);
+										setShowOptions(false);
+									}}>
+									{option.name}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			) : null}
+		</div>
+	);
+}

src/ui/components/select/select.scss

@@ -0,0 +1,53 @@
+.select-container {
+	position: relative;
+	cursor: pointer;
+
+	.select-action {
+		display: flex;
+		width: 210px;
+		height: 36px;
+		padding: 9px 13px;
+		justify-content: space-between;
+		align-items: center;
+		gap: 10px;
+		flex-shrink: 0;
+
+		border-radius: 6px;
+		border: 1px solid #e5e5e5;
+		background: #fff;
+
+		color: #222;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+	.select-dropdown-wrapper {
+		padding-top: 5px;
+		z-index: 5;
+		position: absolute;
+		width: 100%;
+
+		.select-dropdown {
+			background: #fff;
+			border-radius: 6px;
+			background: #fff;
+			box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
+
+			.select-item {
+				cursor: pointer;
+				padding: 12px;
+				color: #222;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+
+				&:hover {
+					background: #f0f0f0;
+					width: 100%;
+				}
+			}
+		}
+	}
+}

src/ui/components/userDetail/userDetail.tsx

@@ -18,8 +18,8 @@ import { Tenant } from "../../../api/tenants/list";
 import { GetUserInfoResult, UpdateUserInformationResponse, useUserService } from "../../../api/user";
 import useMetadataService from "../../../api/user/metadata";
 import useSessionsForUserService from "../../../api/user/sessions";
-import { useUserRolesService } from "../../../api/userroles/user/roles";
-import { getImageUrl, getRecipeNameFromid } from "../../../utils";
+import { UserRolesResponse, useUserRolesService } from "../../../api/userroles/user/roles";
+import { getImageUrl, getRecipeNameFromid, getSelectedTenantId } from "../../../utils";
 import { getTenantsObjectsForIds } from "../../../utils/user";
 import { PopupContentContext } from "../../contexts/PopupContentContext";
 import { User, UserRecipeType } from "../../pages/usersList/types";
@@ -56,8 +56,8 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 	const [userMetaData, setUserMetaData] = useState<string | undefined>(undefined);
 	const [shouldShowLoadingOverlay, setShowLoadingOverlay] = useState<boolean>(false);
 	const [isLoading, setIsLoading] = useState(false);
-	const [userRoles, setUserRoles] = useState<string[] | undefined>(undefined);
-	const [isUserRolesFeatureEnabled, setIsUserRolesFeatureEnabled] = useState<boolean | undefined>(undefined);
+	const [userRolesData, setUserRolesData] = useState<UserRolesResponse | undefined>(undefined);
+	const [currentlySelectedTenantId, setCurrentlySelectedTenantId] = useState(getSelectedTenantId() ?? "public");
 
 	const { getUser, updateUserInformation } = useUserService();
 	const { getUserMetaData } = useMetadataService();
@@ -155,16 +155,10 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 	}, []);
 
 	async function fetchUserRoles() {
-		const response = await getRolesForUser(user);
+		setUserRolesData(undefined);
+		const response = await getRolesForUser(user, currentlySelectedTenantId);
 		if (response !== undefined) {
-			if (response.status === "OK") {
-				setUserRoles(response.roles);
-				setIsUserRolesFeatureEnabled(true);
-			}
-
-			if (response.status === "FEATURE_NOT_ENABLED_ERROR") {
-				setIsUserRolesFeatureEnabled(false);
-			}
+			setUserRolesData(response);
 		} else {
 			showToast({
 				iconImage: getImageUrl("form-field-error-icon.svg"),
@@ -204,7 +198,11 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		void fetchData();
 	}, []);
 
-	if (userDetail === undefined || isLoading) {
+	useEffect(() => {
+		void fetchUserRoles();
+	}, [currentlySelectedTenantId]);
+
+	if (userDetail === undefined || userRolesData === undefined || isLoading) {
 		return (
 			<div className="user-detail-page-loader">
 				<div className="loader"></div>
@@ -280,8 +278,13 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 				<UserDetailInfoGrid {...props} />
 
 				<UserRolesList
-					isFeatureEnabled={isUserRolesFeatureEnabled}
-					roles={userRoles}
+					key={currentlySelectedTenantId}
+					currentlySelectedTenantId={currentlySelectedTenantId}
+					onTenantIdChange={(tenantId: string) => {
+						setCurrentlySelectedTenantId(tenantId);
+					}}
+					isFeatureEnabled={userRolesData.status !== "FEATURE_NOT_ENABLED_ERROR"}
+					roles={userRolesData.status === "OK" ? userRolesData.roles : []}
 					userId={user}
 				/>