improvement: hide some elements base on user profile

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