Sai Preetham taking over for Clemar add a reminder to save changes modal to permissions management page

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 (
       <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
+          <ModalProvider>
           <Router>{routes}</Router>
+          </ModalProvider>
         </PersistGate>
       </Provider>
     );

src/components/Dashboard/Dashboard.css

@@ -6,4 +6,4 @@
   .tab-pane {
     max-height: 1500px;
   }
-}
+}

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 (
     <Container fluid className={darkMode ? 'bg-oxford-blue' : ''}>
+      <Modal isOpen={showModal} toggle={handleCloseModal} id="modal-content__new-role">
+        <ModalHeader
+          toggle={handleCloseModal}
+          cssModule={{ 'modal-title': 'w-100 text-center my-auto' }}
+        >
+          Important Notification
+        </ModalHeader>
+        <ModalBody id="modal-body_new-role--padding">
+          Your permissions have been updated. Please log out and log back in for the changes to take effect.
+          <Button color="primary" className="mt-3" onClick={handleCloseModal}>Close</Button>
+        </ModalBody>
+      </Modal>
       <SummaryBar
         displayUserId={displayUserId}
         toggleSubmitForm={toggle}

src/components/PermissionsManagement/PermissionListItem.jsx

@@ -1,8 +1,12 @@
-import { useState } from 'react';
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable no-nested-ternary */
+import { useState, useContext, useEffect } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { connect } from 'react-redux';
 import { boxStyle, boxStyleDark } from 'styles';
 // eslint-disable-next-line import/no-cycle
+import { ModalContext } from 'context/ModalContext';
+// eslint-disable-next-line import/no-cycle
 import PermissionList from './PermissionList';
 import hasPermission from '../../utils/permissions';
 import './UserRoleTab.css';
@@ -20,12 +24,22 @@ function PermissionListItem(props) {
     setPermissions,
     darkMode,
   } = props;
-
   const isCategory = !!subperms;
   const [infoRoleModal, setinfoRoleModal] = useState(false);
   const [modalContent, setContent] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
   const hasThisPermission =
     rolePermissions.includes(permission) || immutablePermissions.includes(permission);
+  const { updateModalStatus } = useContext(ModalContext);
+
+  const handleResize = () => {
+    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) {
       <li className="user-role-tab__permissions" key={permission} data-testid={permission}>
         <p
           style={{
-            color,
-            fontSize,
-            paddingLeft,
-            textShadow,
+            color: isCategory
+              ? howManySubpermsInRole === 'All'
+                ? 'green'
+                : howManySubpermsInRole === 'Some'
+                ? darkMode
+                  ? 'white'
+                  : 'black'
+                : 'red'
+              : hasThisPermission
+              ? 'green'
+              : 'red',
+            fontSize: isCategory && '20px',
+            textIndent: `${50 * depth}px`,
           }}
           className="permission-label"
         >
@@ -145,20 +179,26 @@ function PermissionListItem(props) {
               style={{ color: darkMode ? 'white' : 'black' }}
             />
           </div>
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {!editable ? null : isCategory ? (
+          {!editable ? (
+            <></>
+          ) : isCategory ? (
             <Button
               className="icon-button"
-              color={getColor()}
+              color={
+                howManySubpermsInRole === 'All'
+                  ? 'danger'
+                  : howManySubpermsInRole === 'Some'
+                  ? 'secondary'
+                  : 'success'
+              }
               onClick={() => {
                 // eslint-disable-next-line no-debugger
                 // const state = howManySubpermsInRole !== 'None';
                 setSubpermissions(subperms, howManySubpermsInRole !== 'All');
-                // eslint-disable-next-line react/destructuring-assignment
                 props.onChange();
+                updateModalStatus(true);
               }}
-              // eslint-disable-next-line react/destructuring-assignment
-              disabled={immutablePermissions.includes(permission)}
+              disabled={!props.hasPermission('putRole')}
               style={darkMode ? boxStyleDark : boxStyle}
             >
               {howManySubpermsInRole === 'All' ? 'Delete' : 'Add'}
@@ -169,8 +209,11 @@ function PermissionListItem(props) {
               color={hasThisPermission ? 'danger' : 'success'}
               onClick={() => {
                 togglePermission(permission);
+                updateModalStatus(true);
               }}
-              disabled={immutablePermissions.includes(permission)}
+              disabled={
+                !props.hasPermission('putRole') || immutablePermissions.includes(permission)
+              }
               style={darkMode ? boxStyleDark : boxStyle}
             >
               {hasThisPermission ? 'Delete' : 'Add'}
@@ -194,7 +237,7 @@ function PermissionListItem(props) {
             setPermissions={setPermissions}
             // eslint-disable-next-line react/destructuring-assignment
             onChange={props.onChange}
-            depth={depth + 1}
+            depth={isMobile ? depth : depth + 1}
             darkMode={darkMode}
           />
         </li>