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}
 			>
+				<Can
+					role={user.profile}
+					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,9 +183,15 @@ const UserModal = ({ open, onClose, userId }) => {
 										className={classes.formControl}
 										margin="dense"
 									>
+										<Can
+											role={user.profile}
+											perform="user-modal:editProfile"
+											yes={() => (
+												<>
 													<InputLabel id="profile-selection-input-label">
 														{i18n.t("userModal.form.profile")}
 													</InputLabel>
+
 													<Field
 														as={Select}
 														label={i18n.t("userModal.form.profile")}
@@ -196,12 +203,21 @@ const UserModal = ({ open, onClose, userId }) => {
 														<MenuItem value="admin">Admin</MenuItem>
 														<MenuItem value="user">User</MenuItem>
 													</Field>
+												</>
+											)}
+										/>
 									</FormControl>
 								</div>
+								<Can
+									role={user.profile}
+									perform="user-modal:editQueues"
+									yes={() => (
 										<QueueSelect
 											selectedQueueIds={selectedQueueIds}
 											onChange={values => setSelectedQueueIds(values)}
 										/>
+									)}
+								/>
 							</DialogContent>
 							<DialogActions>
 								<Button

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,6 +319,10 @@ const Contacts = () => {
 										>
 											<EditIcon />
 										</IconButton>
+										<Can
+											role={user.profile}
+											perform="contacts-page:deleteContact"
+											yes={() => (
 												<IconButton
 													size="small"
 													onClick={e => {
@@ -327,6 +332,8 @@ const Contacts = () => {
 												>
 													<DeleteOutlineIcon />
 												</IconButton>
+											)}
+										/>
 									</TableCell>
 								</TableRow>
 							))}