improvement: hide some elements base on user profile

frontend/src/accessRules.js

@@ -4,7 +4,14 @@ const rules = {
 	},
 
 	admin: {
-		static: ["drawer-admin-items:view", "tickets-manager:showall"],
+		static: [
+			"drawer-admin-items:view",
+			"tickets-manager:showall",
+			"user-modal:editProfile",
+			"user-modal:editQueues",
+			"ticket-options:deleteTicket",
+			"contacts-page:deleteContact",
+		],
 	},
 };
 

frontend/src/components/Can/index.js

@@ -36,4 +36,4 @@ Can.defaultProps = {
 	no: () => null,
 };
 
-export default Can;
+export { Can };

frontend/src/components/TicketOptionsMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
@@ -8,11 +8,14 @@ import api from "../../services/api";
 import ConfirmationModal from "../ConfirmationModal";
 import TransferTicketModal from "../TransferTicketModal";
 import toastError from "../../errors/toastError";
+import { Can } from "../Can";
+import { AuthContext } from "../../context/Auth/AuthContext";
 
 const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
 	const [transferTicketModalOpen, setTransferTicketModalOpen] = useState(false);
 	const isMounted = useRef(true);
+	const { user } = useContext(AuthContext);
 
 	useEffect(() => {
 		return () => {
@@ -62,9 +65,16 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				open={menuOpen}
 				onClose={handleClose}
 			>
-				<MenuItem onClick={handleOpenConfirmationModal}>
+				<Can
-					{i18n.t("ticketOptionsMenu.delete")}
+					role={user.profile}
-				</MenuItem>
+					perform="ticket-options:deleteTicket"
+					yes={() => (
+						<MenuItem onClick={handleOpenConfirmationModal}>
+							{i18n.t("ticketOptionsMenu.delete")}
+						</MenuItem>
+					)}
+				/>
+
 				<MenuItem onClick={handleOpenTransferModal}>
 					{i18n.t("ticketOptionsMenu.transfer")}
 				</MenuItem>

frontend/src/components/TicketsManager/index.js

@@ -18,7 +18,7 @@ import TabPanel from "../TabPanel";
 
 import { i18n } from "../../translate/i18n";
 import { AuthContext } from "../../context/Auth/AuthContext";
-import Can from "../Can";
+import { Can } from "../Can";
 import TicketsQueueSelect from "../TicketsQueueSelect";
 import { Button } from "@material-ui/core";
 import { useLocalStorage } from "../../hooks/useLocalStorage";

frontend/src/components/UserModal/index.js

@@ -23,6 +23,7 @@ import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
 import QueueSelect from "../QueueSelect";
+import { Can } from "../Can";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -182,25 +183,40 @@ const UserModal = ({ open, onClose, userId }) => {
 										className={classes.formControl}
 										margin="dense"
 									>
-										<InputLabel id="profile-selection-input-label">
+										<Can
-											{i18n.t("userModal.form.profile")}
+											role={user.profile}
-										</InputLabel>
+											perform="user-modal:editProfile"
-										<Field
+											yes={() => (
-											as={Select}
+												<>
-											label={i18n.t("userModal.form.profile")}
+													<InputLabel id="profile-selection-input-label">
-											name="profile"
+														{i18n.t("userModal.form.profile")}
-											labelId="profile-selection-label"
+													</InputLabel>
-											id="profile-selection"
+
-											required
+													<Field
-										>
+														as={Select}
-											<MenuItem value="admin">Admin</MenuItem>
+														label={i18n.t("userModal.form.profile")}
-											<MenuItem value="user">User</MenuItem>
+														name="profile"
-										</Field>
+														labelId="profile-selection-label"
+														id="profile-selection"
+														required
+													>
+														<MenuItem value="admin">Admin</MenuItem>
+														<MenuItem value="user">User</MenuItem>
+													</Field>
+												</>
+											)}
+										/>
 									</FormControl>
 								</div>
-								<QueueSelect
+								<Can
-									selectedQueueIds={selectedQueueIds}
+									role={user.profile}
-									onChange={values => setSelectedQueueIds(values)}
+									perform="user-modal:editQueues"
+									yes={() => (
+										<QueueSelect
+											selectedQueueIds={selectedQueueIds}
+											onChange={values => setSelectedQueueIds(values)}
+										/>
+									)}
 								/>
 							</DialogContent>
 							<DialogActions>

frontend/src/context/Auth/AuthContext.js

@@ -5,11 +5,18 @@ import useAuth from "./useAuth";
 const AuthContext = createContext();
 
 const AuthProvider = ({ children }) => {
-	const { loading, user, isAuth, handleLogin, handleLogout } = useAuth();
+	const {
+		loading,
+		user,
+		setUser,
+		isAuth,
+		handleLogin,
+		handleLogout,
+	} = useAuth();
 
 	return (
 		<AuthContext.Provider
-			value={{ loading, user, isAuth, handleLogin, handleLogout }}
+			value={{ loading, user, setUser, isAuth, handleLogin, handleLogout }}
 		>
 			{children}
 		</AuthContext.Provider>

frontend/src/layout/MainListItems.js

@@ -18,7 +18,7 @@ import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
 import { AuthContext } from "../context/Auth/AuthContext";
-import Can from "../components/Can";
+import { Can } from "../components/Can";
 
 function ListItemLink(props) {
 	const { icon, primary, to, className } = props;

frontend/src/pages/Contacts/index.js

@@ -33,6 +33,7 @@ import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper"
 import MainContainer from "../../components/MainContainer";
 import toastError from "../../errors/toastError";
 import { AuthContext } from "../../context/Auth/AuthContext";
+import { Can } from "../../components/Can";
 
 const reducer = (state, action) => {
 	if (action.type === "LOAD_CONTACTS") {
@@ -318,15 +319,21 @@ const Contacts = () => {
 										>
 											<EditIcon />
 										</IconButton>
-										<IconButton
+										<Can
-											size="small"
+											role={user.profile}
-											onClick={e => {
+											perform="contacts-page:deleteContact"
-												setConfirmOpen(true);
+											yes={() => (
-												setDeletingContact(contact);
+												<IconButton
-											}}
+													size="small"
-										>
+													onClick={e => {
-											<DeleteOutlineIcon />
+														setConfirmOpen(true);
-										</IconButton>
+														setDeletingContact(contact);
+													}}
+												>
+													<DeleteOutlineIcon />
+												</IconButton>
+											)}
+										/>
 									</TableCell>
 								</TableRow>
 							))}