Merge pull request #3396 from OneCommunityGlobal/vinay/notify-user-new-permission

Vinay - Let a user know through a popup that Permissions have been changed for them

Author: one-community

src/components/Header/Header.jsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useMemo } from 'react';
-// import { getUserProfile } from '../../actions/userProfile'
 import { ENDPOINTS } from 'utils/URL';
 import axios from 'axios';
 import { getWeeklySummaries } from 'actions/weeklySummaries';
@@ -62,6 +61,7 @@ import {
 import NotificationCard from '../Notification/notificationCard';
 import DarkModeButton from './DarkModeButton';
 import BellNotification from './BellNotification';
+import { getUserProfile } from '../../actions/userProfile';
 
 export function Header(props) {
   const location = useLocation();
@@ -153,6 +153,7 @@ export function Header(props) {
   const history = useHistory();
 
   const [showProjectDropdown, setShowProjectDropdown] = useState(false);
+  const [isAckLoading, setIsAckLoading] = useState(false);
 
   useEffect(() => {
     const handleStorageEvent = () => {
@@ -216,6 +217,28 @@ export function Header(props) {
   const openModal = () => {
     setLogoutPopup(true);
   };
+  
+  const handlePermissionChangeAck = async () => {
+    // handle setting the ack true
+    try {
+      setIsAckLoading(true)
+      const {firstName: name, lastName, personalLinks, adminLinks, _id} = props.userProfile
+      axios.put(ENDPOINTS.USER_PROFILE(_id), {
+        // req fields for updation
+        firstName: name, 
+        lastName, 
+        personalLinks,
+        adminLinks,
+        
+        isAcknowledged: true,
+      }).then(()=>{
+        setIsAckLoading(false);
+        dispatch(getUserProfile(_id));
+      });
+    } catch (e) {
+      // console.log('update ack', e);
+    }
+  }
 
   const removeViewingUser = () => {
     setPopup(false);
@@ -304,6 +327,7 @@ export function Header(props) {
 
   if (location.pathname === '/login') return null;
 
+  const viewingUser = JSON.parse(window.sessionStorage.getItem('viewingUser'))
   return (
     <div className="header-wrapper">
       <Navbar className="py-3 navbar" color="dark" dark expand="md">
@@ -552,8 +576,16 @@ export function Header(props) {
       </Navbar>
       {!isAuthUser && (
         <PopUpBar
+          message={`You are currently viewing the header for ${viewingUser.firstName} ${viewingUser.lastName}`}
           onClickClose={() => setPopup(prevPopup => !prevPopup)}
-          viewingUser={JSON.parse(window.sessionStorage.getItem('viewingUser'))}
+          />
+      )}
+      {props.auth.isAuthenticated && props.userProfile?.permissions?.isAcknowledged===false && (
+        <PopUpBar
+          message="Heads Up, there were permission changes made to this account"
+          onClickClose={handlePermissionChangeAck}
+          textColor="black_text"
+          isLoading={isAckLoading}
         />
       )}
       <div>
@@ -607,4 +639,5 @@ export default connect(mapStateToProps, {
   getAllRoles,
   hasPermission,
   getWeeklySummaries,
+  getUserProfile,
 })(Header);

src/components/PopUpBar/PopUpBar.css

@@ -10,6 +10,9 @@
   z-index: 2;
   opacity: 0.8;
 }
+.popup_container.black_text{
+  color: #000000
+}
 
 .close_button {
   background: none;
@@ -21,4 +24,15 @@
   top: 50%;
   right: 30px;
   transform: translateY(-50%);
-}
+}
+
+.close_button.btn_padding{
+  @media (max-width: 768px) { 
+    top: 70%;
+  }
+}
+
+.close_button > .container-fluid {
+  padding: 0px;
+}
+  

src/components/PopUpBar/PopUpBar.jsx

@@ -1,15 +1,21 @@
 // import React from 'react';
+import Loading from 'components/common/Loading';
 import './PopUpBar.css';
 
 function PopUpBar(props) {
-  const { viewingUser, onClickClose } = props;
-  const { firstName, lastName } = viewingUser;
+  const { message, onClickClose, textColor, isLoading = false } = props;
   return (
-    <div className="popup_container" data-testid="test-popup">
-      {`You are currently viewing the header for ${firstName} ${lastName}`}
-      <button type="button" className="close_button" onClick={onClickClose}>
-        X
-      </button>
+    <div className={`popup_container ${textColor}`} data-testid="test-popup">
+      {message}
+      {isLoading ? (
+        <span className="close_button">
+          <Loading className="fa-sm" />
+        </span>
+      ) : (
+        <button type="button" className="close_button btn_padding" onClick={onClickClose}>
+          X
+        </button>
+      )}
     </div>
   );
 }

src/components/PopUpBar/__tests__/PopUpBar.test.jsx

@@ -1,15 +1,10 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import { render, screen, fireEvent } from '@testing-library/react';
 import PopUpBar from '../PopUpBar';
 
-const viewingUser = {
-  firstName: 'TestUser',
-  lastName: 'LastName',
-};
-
 // render Component
 const renderComponent = (props = {}) => {
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  render(<PopUpBar viewingUser={viewingUser} {...props} />);
+  render(<PopUpBar message="PopUpBar text message" {...props} />);
 };
 
 // Test Cases
@@ -22,7 +17,7 @@ describe('Test Suite for PopUpBar', () => {
 
   it('Test Case 2: Renders with correct text', () => {
     renderComponent();
-    const expectedText = `You are currently viewing the header for ${viewingUser.firstName} ${viewingUser.lastName}`;
+    const expectedText = `PopUpBar text message`;
     const actualText = screen.getByText(expectedText);
     expect(actualText).toBeInTheDocument();
   });

src/components/common/Loading/Loading.jsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line react/function-component-definition
-const Loading = ({ align, darkMode }) => {
+const Loading = ({ align, darkMode, className }) => {
   let alignClassName = '';
   if (align === 'center') {
     alignClassName = 'd-flex justify-content-center align-items-center';
@@ -10,7 +10,7 @@ const Loading = ({ align, darkMode }) => {
   }
   return (
     <div className={`container-fluid ${alignClassName}`} data-testid="loading">
-      <div className="fa-5x">
+      <div className={className || 'fa-5x'}>
         <i
           className={`fa fa-spinner fa-pulse ${darkMode ? 'text-azure' : ''}`}
           data-testid="loading-spinner"