diff --git a/src/components/App.jsx b/src/components/App.jsx index f1f6ec725c..5706db525f 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -14,6 +14,7 @@ import Loading from './common/Loading'; import config from '../config.json'; import '../App.css'; +import { ModalProvider } from 'context/ModalContext'; const { persistor, store } = configureStore(); const {tokenKey} = config; @@ -51,7 +52,9 @@ class App extends Component { return ( } persistor={persistor}> + {routes} + ); diff --git a/src/components/Dashboard/Dashboard.css b/src/components/Dashboard/Dashboard.css index 27548df75b..b46ce79392 100644 --- a/src/components/Dashboard/Dashboard.css +++ b/src/components/Dashboard/Dashboard.css @@ -6,4 +6,4 @@ .tab-pane { max-height: 1500px; } -} +} \ No newline at end of file diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index b0be7e5baa..8a8b9e2979 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -10,6 +10,10 @@ import './Dashboard.css'; import '../../App.css'; import TimeOffRequestDetailModal from './TimeOffRequestDetailModal'; import { cantUpdateDevAdminDetails } from 'utils/permissions'; +import { ENDPOINTS } from 'utils/URL'; +import './Dashboard.css'; +import axios from 'axios'; +import { Modal, ModalHeader, ModalBody, Button } from 'reactstrap'; import { DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY, DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY, @@ -21,6 +25,9 @@ export function Dashboard(props) { const [summaryBarData, setSummaryBarData] = useState(null); const { authUser } = props; + const [actualUserProfile, setActualUserProfile] = useState(null); + const [showModal, setShowModal] = useState(false); + const checkSessionStorage = () => JSON.parse(sessionStorage.getItem('viewingUser')) ?? false; const [viewingUser, setViewingUser] = useState(checkSessionStorage); const [displayUserId, setDisplayUserId] = useState( @@ -64,8 +71,70 @@ export function Dashboard(props) { }; }, []); + const getUserData = async () => { + + try { + const url = ENDPOINTS.USER_PROFILE(authUser.userid); + const allUserInfo = await axios.get(url).then(res => res.data); + + const userType = authUser.role.toLowerCase(); + const permissionsKey = `permissions_${userType}`; + const storedPermissions = JSON.parse(localStorage.getItem(permissionsKey)) || []; + const currentPermissions = allUserInfo.permissions.frontPermissions; + const hasPermissionsChanged = JSON.stringify(storedPermissions) !== JSON.stringify(currentPermissions); + + + if (currentPermissions.includes('showModal') && hasPermissionsChanged) { + setShowModal(true); + setActualUserProfile(allUserInfo); + localStorage.setItem(permissionsKey, JSON.stringify(currentPermissions)); + } + + } catch (error) { + console.error("Error", error); + } + }; + + const handleCloseModal = async () => { + if (actualUserProfile) { + + try { + const userId = actualUserProfile?._id; + const url = ENDPOINTS.USER_PROFILE(userId); + + const FilteredPermission = actualUserProfile.permissions.frontPermissions.filter(permission => permission !== 'showModal'); + const newUserInfo = { ...actualUserProfile, permissions: { frontPermissions: FilteredPermission } }; + + await axios.put(url, newUserInfo); + + setActualUserProfile(null); + } catch (error) { + console.error("Error", error); + } + } + setShowModal(false); + }; + + useEffect(() => { + getUserData() + }, [authUser.userid]); + + + return ( + + + Important Notification + + + Your permissions have been updated. Please log out and log back in for the changes to take effect. + + + { + setIsMobile(window.innerWidth <= 768); + }; + useEffect(() => { + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); const handleModalOpen = () => { setContent(description); @@ -39,10 +53,12 @@ function PermissionListItem(props) { const togglePermission = permissionKey => { if (rolePermissions.includes(permissionKey) || immutablePermissions.includes(permissionKey)) { setPermissions(previous => previous.filter(perm => perm !== permissionKey)); + } else if (rolePermissions.includes('showModal')) { + setPermissions(previous => [...previous, permissionKey]); } else { setPermissions(previous => [...previous, permissionKey]); } - // eslint-disable-next-line react/destructuring-assignment + props.onChange(); }; @@ -57,9 +73,10 @@ function PermissionListItem(props) { }; // returns 'All', 'None', or 'Some' depending on if that role has that selection of permissions - const checkSubperms = () => { + // eslint-disable-next-line no-shadow + const checkSubperms = subperms => { if (!subperms) { - return 'None'; // or any other appropriate default value + return; } let list = [...subperms]; @@ -78,11 +95,14 @@ function PermissionListItem(props) { } if (all) { + // eslint-disable-next-line consistent-return return 'All'; } if (none) { + // eslint-disable-next-line consistent-return return 'None'; } + // eslint-disable-next-line consistent-return return 'Some'; }; @@ -100,13 +120,18 @@ function PermissionListItem(props) { } else if (darkMode) { color = hasThisPermission ? 'lightgreen' : '#f94144'; } else { + // eslint-disable-next-line no-unused-vars color = hasThisPermission ? 'green' : 'red'; } + // eslint-disable-next-line no-unused-vars const fontSize = isCategory ? '20px' : undefined; - const paddingLeft = `${50 * depth}px`; + // eslint-disable-next-line no-unused-vars + const textIndent = `${50 * depth}px`; + // eslint-disable-next-line no-unused-vars const textShadow = darkMode ? '0.5px 0.5px 2px black' : ''; + // eslint-disable-next-line no-unused-vars const getColor = () => { if (howManySubpermsInRole === 'All') { return 'danger'; @@ -122,10 +147,19 @@ function PermissionListItem(props) {

  • @@ -145,20 +179,26 @@ function PermissionListItem(props) { style={{ color: darkMode ? 'white' : 'black' }} /> - {/* eslint-disable-next-line no-nested-ternary */} - {!editable ? null : isCategory ? ( + {!editable ? ( + <> + ) : isCategory ? (

    • diff --git a/src/components/PermissionsManagement/PermissionsManagement.css b/src/components/PermissionsManagement/PermissionsManagement.css index ec9f3c3233..449d782c2b 100644 --- a/src/components/PermissionsManagement/PermissionsManagement.css +++ b/src/components/PermissionsManagement/PermissionsManagement.css @@ -29,6 +29,7 @@ } #modal-content__new-role { + position: relative; width: 100%; max-width: 700px; } @@ -63,8 +64,16 @@ align-items: flex-end; padding-bottom: 5px; padding-top: 5px; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: 100%; +} +.permission-label { + word-break: break-word; + white-space: normal; + max-width: calc(100% - 60px); + margin-right: 10px; } - #info-icon__permissions { cursor: pointer; align-self: flex-end; @@ -141,8 +150,154 @@ font-size: 30px; } -@media only screen and (max-width: 1199px) { +.ContainerReminder{ + width: 90%; + max-width: 400px; + padding: 20px; + margin: 0 auto; + position: fixed; + top: 30%; + right: 10%; + transform: translate(50%, -50%); + background-color: white; + z-index: 1000; + border: 1px solid #ccc; + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0px 2px 10px black; +} + +.ReminderTitle{ + display: flex; + justify-content: center; + flex: 1; +} +.ReminderTitle h2{ + color: black; + font-size: 22px; + align-items: center; + display: flex; +} + +.ReminderBody{ + padding: 10px 0; + border-bottom: 1px solid #ccc; + border-top: 1px solid #ccc; + text-align: center; + margin-bottom: 10px; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.ReminderButton{ + display: flex; + gap: 10px; + justify-content: center; + width: 100%; + padding-top: 10px; +} +.ReminderButton button:first-child{ + height: 80%; + width: 140px; + background-color: #007bff; + color: #fff; + border-radius: 5px; + cursor: pointer; + font-weight: 500; +} + +.ReminderButton button:nth-child(2){ + background-color: red; + color: #fff; + height: 80%; + width: 70px; + margin-right: 25px; + border-radius: 5px; + cursor: pointer; + font-weight: 500; +} + + +@media only screen and (max-width: 1110px) { .permissions-management__header { flex-direction: column; } } + +@media only screen and (min-width: 300px) { + .ContainerReminder { + position: absolute; + width: 400px; + top: 100%; + right: 50%; + } +} + +@media only screen and (min-width: 1200px) { + .ContainerReminder { + position: fixed; + width: 200px; + top: 35%; + right: 11%; + } + .ReminderTitle{ + display: flex; + justify-content: center; + flex: 10; + padding-left: 10px; + } + .ReminderButton button:first-child{ + height: 100%; + width: 140px; + background-color: #007bff; + color: #fff; + border-radius: 5px; + cursor: pointer; + font-weight: 500; + } + +} + +@media only screen and (min-width: 1400px) { + .ContainerReminder { + width: 300px; + right: 13%; + } + .ReminderTitle{ + display: flex; + justify-content: center; + flex: 1; + padding-left: 20px; + } +} + +@media only screen and (min-width: 1600px) { + .ContainerReminder { + width: 400px; + right: 15%; + } + + .ReminderTitle{ + display: flex; + justify-content: center; + flex: 1; + padding-left: 1px; + } +} + +@media only screen and (min-width: 1900px) { + .ContainerReminder { + right: 20%; + } +} +@media (max-width: 600px) { + .ContainerReminder { + width: 95%; + max-width: none; + padding: 15px; + margin: 20px auto; + position: relative; + } +} \ No newline at end of file diff --git a/src/components/PermissionsManagement/PermissionsManagement.jsx b/src/components/PermissionsManagement/PermissionsManagement.jsx index f3ccb0a4e4..849d12aa26 100644 --- a/src/components/PermissionsManagement/PermissionsManagement.jsx +++ b/src/components/PermissionsManagement/PermissionsManagement.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, useContext } from 'react'; import axios from 'axios'; import { Button, Modal, ModalBody, ModalHeader } from 'reactstrap'; @@ -14,6 +14,7 @@ import ReactTooltip from 'react-tooltip'; // Importing react-tooltip for tooltip import '../Header/DarkMode.css'; import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal'; import { ENDPOINTS } from 'utils/URL'; +import { ModalContext } from 'context/ModalContext'; import UserPermissionsPopUp from './UserPermissionsPopUp'; import { getAllRoles } from '../../actions/role'; import { addNewRole } from '../../actions/role'; @@ -25,6 +26,8 @@ import PermissionChangeLogTable from './PermissionChangeLogTable'; function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode }) { const [isNewRolePopUpOpen, setIsNewRolePopUpOpen] = useState(false); const [isUserPermissionsOpen, setIsUserPermissionsOpen] = useState(false); + const [reminderModal, setReminderModal] = useState(false); + const { modalStatus, reminderUser } = useContext(ModalContext); const canPostRole = hasPermission('postRole'); const canPutRole = hasPermission('putRole'); @@ -47,6 +50,14 @@ function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode const dispatch = useDispatch(); useEffect(() => { + if (reminderUser !== null) { + // console.log(reminderUser); + } + }, [reminderUser]); + + useEffect(() => { + getAllRoles(); + getInfoCollections(); getUserRole(auth?.user.userid); @@ -64,7 +75,11 @@ function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode }, []); const togglePopUpUserPermissions = () => { - setIsUserPermissionsOpen(previousState => !previousState); + if (modalStatus === false) { + setIsUserPermissionsOpen(previousState => !previousState); + } else { + setReminderModal(!reminderModal); + } }; const role = userProfile?.role; // eslint-disable-next-line no-shadow @@ -210,15 +225,18 @@ function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode Manage User Permissions - - + + diff --git a/src/components/PermissionsManagement/PermissionsManagement.test.js b/src/components/PermissionsManagement/PermissionsManagement.test.js index 01c39ff89e..85fb8beca7 100644 --- a/src/components/PermissionsManagement/PermissionsManagement.test.js +++ b/src/components/PermissionsManagement/PermissionsManagement.test.js @@ -7,6 +7,7 @@ import { screen } from '@testing-library/react'; import { renderWithRouterMatch } from '../../__tests__/utils'; import configureMockStore from 'redux-mock-store'; import userEvent from '@testing-library/user-event'; +import { ModalProvider } from 'context/ModalContext'; jest.mock('actions/role.js'); @@ -32,7 +33,9 @@ describe('permissions management page structure', () => { store.dispatch = jest.fn(); renderWithRouterMatch( - {props => }, + + {props => } + , { route: `/permissionsmanagement`, store, diff --git a/src/components/PermissionsManagement/ReminderModal.jsx b/src/components/PermissionsManagement/ReminderModal.jsx new file mode 100644 index 0000000000..756e9dbad3 --- /dev/null +++ b/src/components/PermissionsManagement/ReminderModal.jsx @@ -0,0 +1,42 @@ +/* eslint-disable react/button-has-type */ +import './PermissionsManagement.css'; +import { ModalContext } from 'context/ModalContext'; +import { useContext } from 'react'; + +function ReminderModal({ + setReminderModal, + reminderModal, + updateProfileOnSubmit, + changedAccount, + darkMode, +}) { + const { modalStatus, updateModalStatus } = useContext(ModalContext); + + return ( +
    +
    +

    Remember to Save Your Changes!

    +
    +
    + + Please log out and log back in to your account, {changedAccount} to apply the changes. + +
    +
    + + + +
    +
    + ); +} + +export default ReminderModal; diff --git a/src/components/PermissionsManagement/UserPermissionsPopUp.jsx b/src/components/PermissionsManagement/UserPermissionsPopUp.jsx index e8510e218f..6f556b381e 100644 --- a/src/components/PermissionsManagement/UserPermissionsPopUp.jsx +++ b/src/components/PermissionsManagement/UserPermissionsPopUp.jsx @@ -6,6 +6,7 @@ import { getAllUserProfile } from 'actions/userManagement'; import './PermissionsManagement.css'; import axios from 'axios'; import { ENDPOINTS } from 'utils/URL'; +// eslint-disable-next-line no-unused-vars import { boxStyle, boxStyleDark } from 'styles'; import { DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY, @@ -15,14 +16,28 @@ import { import PermissionList from './PermissionList'; import { addNewRole, getAllRoles } from '../../actions/role'; import { cantUpdateDevAdminDetails } from '../../utils/permissions'; +import ReminderModal from './ReminderModal'; -function UserPermissionsPopUp({ toggle, allUserProfiles, getAllUsers, roles, authUser, darkMode }) { +function UserPermissionsPopUp({ + allUserProfiles, + // eslint-disable-next-line no-unused-vars + toggle, + getAllUsers, + roles, + authUser, + setReminderModal, + reminderModal, + modalStatus, + darkMode, +}) { const [searchText, onInputChange] = useState(''); const [actualUserProfile, setActualUserProfile] = useState(); const [userPermissions, setUserPermissions] = useState(); const [isOpen, setIsOpen] = useState(false); const [isInputFocus, setIsInputFocus] = useState(false); const [actualUserRolePermission, setActualUserRolePermission] = useState(); + const [selectedAccount, setSelectedAccount] = useState(''); + const [toastShown, setToastShown] = useState(false); const setToDefault = () => { setUserPermissions([]); @@ -37,6 +52,7 @@ function UserPermissionsPopUp({ toggle, allUserProfiles, getAllUsers, roles, aut const url = ENDPOINTS.USER_PROFILE(userId); const allUserInfo = await axios.get(url).then(res => res.data); setActualUserProfile(allUserInfo); + setSelectedAccount(`${allUserInfo.firstName} ${allUserInfo.lastName}`); }; useEffect(() => { @@ -70,13 +86,15 @@ function UserPermissionsPopUp({ toggle, allUserProfiles, getAllUsers, roles, aut await axios .put(url, newUserInfo) .then(() => { - const SUCCESS_MESSAGE = ` - Permission has been updated successfully. Be sure to tell them that you are changing these - permissions and for that they need to log out and log back in for their new permissions to take - place.`; - toast.success(SUCCESS_MESSAGE, { - autoClose: 10000, - }); + if (!toastShown) { + const SUCCESS_MESSAGE = ` + Permissions have been updated successfully. + Please inform the user to log out and log back in for the new permissions to take effect.`; + toast.success(SUCCESS_MESSAGE, { + autoClose: 10000, + }); + setToastShown(true); + } toggle(); }) .catch(err => { @@ -92,113 +110,136 @@ function UserPermissionsPopUp({ toggle, allUserProfiles, getAllUsers, roles, aut useEffect(() => { refInput.current.focus(); }, []); + useEffect(() => { + if (!modalStatus) { + setToastShown(false); + } + }, [modalStatus]); return ( -
    { - updateProfileOnSubmit(e); - }} - > -
    -

    User name:

    - -
    - { - setIsOpen(!isOpen); + <> + {modalStatus && ( + + )} + { + updateProfileOnSubmit(e); }} - style={{ width: '100%', marginRight: '5px' }} > - { - setIsInputFocus(true); - setIsOpen(true); - }} - onChange={e => { - onInputChange(e.target.value); - setIsOpen(true); - }} - placeholder="Shows only ACTIVE users" - /> - {isInputFocus || (searchText !== '' && allUserProfiles && allUserProfiles.length > 0) ? ( -
    +

    User name:

    +
    - ) : null} -     -
    -

    Permissions:

    -
      - +
    + { + setIsOpen(!isOpen); + }} + style={{ width: '100%', marginRight: '5px' }} + > + { + setIsInputFocus(true); + setIsOpen(true); + }} + onChange={e => { + onInputChange(e.target.value); + setIsOpen(true); + }} + placeholder="Shows only ACTIVE users" /> - - - - + {isInputFocus || (searchText !== '' && allUserProfiles && allUserProfiles.length > 0) ? ( +
    + {allUserProfiles + // eslint-disable-next-line array-callback-return, consistent-return + .filter(user => { + if ( + user.firstName.toLowerCase().includes(searchText.toLowerCase()) || + user.lastName.toLowerCase().includes(searchText.toLowerCase()) || + `${user.firstName} ${user.lastName}` + .toLowerCase() + .includes(searchText.toLowerCase()) + ) { + if (user.isActive) { + return user; + } + } + }) + .map(user => ( +
    { + onInputChange(`${user.firstName} ${user.lastName}`); + setIsOpen(false); + setActualUserProfile(user); + getUserData(user._id); + }} + > + {`${user.firstName} ${user.lastName}`} +
    + ))} +
    + ) : ( + // eslint-disable-next-line react/jsx-no-useless-fragment + <> + )} +
    +
    +

    + Permissions: +

    +
      + +
    +
    + + + ); } diff --git a/src/components/PermissionsManagement/__tests__/NewRolePopUp.test.js b/src/components/PermissionsManagement/__tests__/NewRolePopUp.test.js index c165ddd432..6a8874641a 100644 --- a/src/components/PermissionsManagement/__tests__/NewRolePopUp.test.js +++ b/src/components/PermissionsManagement/__tests__/NewRolePopUp.test.js @@ -4,7 +4,11 @@ import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import configureStore from 'redux-mock-store'; import CreateNewRolePopup from '../NewRolePopUp' -import { themeMock } from '__tests__/mockStates'; +import { ModalProvider } from 'context/ModalContext'; +import axios from 'axios'; + +jest.mock('axios'); + const mockTogglePopUpNewRole = jest.fn() @@ -21,6 +25,10 @@ const mockAuth = { }, firstName: 'Jerry' } + +const themeMock = { + primaryColor: '#000000', +}; const middlewares = [thunk] const mockStore = configureStore(middlewares) const store = mockStore({ @@ -29,6 +37,14 @@ const store = mockStore({ theme: themeMock, }) +const renderComponent = () => { + const { container } = render( + + + + + + ) const renderComponent = () => { const { container } = render( @@ -43,7 +59,8 @@ const renderComponent = () => { beforeEach(() => { - store.clearActions(); + store.clearActions(); + axios.get.mockResolvedValue({ data: {} }); }); @@ -89,4 +106,4 @@ describe('Render NewRolePopUp component', () => { }) }); }) - +} \ No newline at end of file diff --git a/src/components/PermissionsManagement/__tests__/RolePermissions.test.js b/src/components/PermissionsManagement/__tests__/RolePermissions.test.js index d3a41a3512..74dae6de53 100644 --- a/src/components/PermissionsManagement/__tests__/RolePermissions.test.js +++ b/src/components/PermissionsManagement/__tests__/RolePermissions.test.js @@ -10,6 +10,12 @@ import axios from 'axios'; import { toast } from 'react-toastify'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; +import { ModalContext } from 'context/ModalContext'; + +const mockModalContext = { + modalStatus: false, + updateModalStatus: jest.fn(), +}; const mockStore = configureStore([thunk]); let store; @@ -64,17 +70,19 @@ const flushAllPromises = () => new Promise(setImmediate); const renderComponent = (newStore, history, newRoleName, newRoleId) => { return render( - - - - - , + + + + + + + ); }; diff --git a/src/components/PermissionsManagement/__tests__/UserPermissionsPopup.test.js b/src/components/PermissionsManagement/__tests__/UserPermissionsPopup.test.js index a36edaa002..0458d67420 100644 --- a/src/components/PermissionsManagement/__tests__/UserPermissionsPopup.test.js +++ b/src/components/PermissionsManagement/__tests__/UserPermissionsPopup.test.js @@ -9,9 +9,16 @@ import { Provider } from 'react-redux'; import { toast } from 'react-toastify'; import axios from 'axios'; import { themeMock } from '__tests__/mockStates'; +import { ModalContext } from 'context/ModalContext'; const mockStore = configureStore([thunk]); let store; + +const mockModalContext = { + modalStatus: false, + updateModalStatus: jest.fn(), +}; + beforeEach(() => { store = mockStore({ auth: { @@ -85,7 +92,9 @@ describe('UserPermissionsPopup component', () => { }); render( - + + + , ); await flushAllPromises(); @@ -98,7 +107,9 @@ describe('UserPermissionsPopup component', () => { }); render( - + + + , ); await flushAllPromises(); @@ -117,7 +128,9 @@ describe('UserPermissionsPopup component', () => { }); render( - + + + , ); await flushAllPromises(); @@ -138,7 +151,9 @@ describe('UserPermissionsPopup component', () => { render( - + + + , ); const nameElement = screen.getByText('Test1 Volunteer'); @@ -148,9 +163,8 @@ describe('UserPermissionsPopup component', () => { }); expect(toast.success).toHaveBeenCalledWith( ` - Permission has been updated successfully. Be sure to tell them that you are changing these - permissions and for that they need to log out and log back in for their new permissions to take - place.`, + Permissions have been updated successfully. + Please inform the user to log out and log back in for the new permissions to take effect.`, { autoClose: 10000, }, @@ -171,7 +185,9 @@ describe('UserPermissionsPopup component', () => { render( - + + + , ); const nameElement = screen.getByText('Test1 Volunteer'); @@ -179,9 +195,8 @@ describe('UserPermissionsPopup component', () => { await waitFor(() => { expect(toast.success).not.toHaveBeenCalledWith( ` - Permission has been updated successfully. Be sure to tell them that you are changing these - permissions and for that they need to log out and log back in for their new permissions to take - place.`, + Permissions have been updated successfully. + Please inform the user to log out and log back in for the new permissions to take effect.`, { autoClose: 10000, }, @@ -202,7 +217,9 @@ describe('UserPermissionsPopup component', () => { axios.put.mockRejectedValue({ err: 'server error' }); render( - + + + , ); const mockObject = {}; @@ -238,7 +255,9 @@ describe('UserPermissionsPopup component', () => { render( - + + + , ); const userElement = screen.getByText('Test2 Manager'); diff --git a/src/components/PermissionsManagement/__tests__/UserRoleTab.test.js b/src/components/PermissionsManagement/__tests__/UserRoleTab.test.js index 74161c10e7..94f4b4398c 100644 --- a/src/components/PermissionsManagement/__tests__/UserRoleTab.test.js +++ b/src/components/PermissionsManagement/__tests__/UserRoleTab.test.js @@ -10,6 +10,7 @@ import axios from 'axios'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { themeMock } from '__tests__/mockStates'; +import { ModalProvider } from 'context/ModalContext'; const mockStore = configureStore([thunk]); let store; @@ -46,7 +47,9 @@ describe('UserRoleTab component when the role does not exist', () => { }); render( + + , ); }); @@ -57,7 +60,9 @@ describe('UserRoleTab component when the role does not exist', () => { }); render( + + , ); expect(screen.queryByText('Error')).toBeInTheDocument(); @@ -69,7 +74,9 @@ describe('UserRoleTab component when the role does not exist', () => { }); render( + + , ); expect(screen.queryByText('User Role not existent')).toBeInTheDocument(); @@ -81,7 +88,9 @@ describe('UserRoleTab component when the role does not exist', () => { }); render( + + , ); const linkElement = screen.getByText('Back to permissions management'); @@ -115,7 +124,9 @@ describe('UserRoleTab component when the role does exist', () => { render( + + , ); diff --git a/src/context/ModalContext.jsx b/src/context/ModalContext.jsx new file mode 100644 index 0000000000..ff72956856 --- /dev/null +++ b/src/context/ModalContext.jsx @@ -0,0 +1,17 @@ +import { createContext, useState, useMemo } from 'react'; + +export const ModalContext = createContext(); + +export function ModalProvider({ children }) { + const [modalStatus, setModalStatus] = useState(false); + + const updateModalStatus = newStatus => { + setModalStatus(newStatus); + }; + + const contextValue = useMemo(() => { + return { modalStatus, updateModalStatus }; + }, [modalStatus]); + + return {children}; +}