Anthony/Continuation-For-PR#3917-Role-Change-Permissions-Confirmation-Modal

src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx

@@ -20,6 +20,7 @@ import hasPermission from '~/utils/permissions';
 import { ENDPOINTS } from '~/utils/URL';
 import TimeZoneDropDown from '../TimeZoneDropDown';
 import styles from './BasicInformationTab.module.css';
+import RoleChangePermissionsModal from '~/components/UserProfile/RoleChangePermissionsModal';
 
 
 export const Name = props => {
@@ -490,10 +491,12 @@ const BasicInformationTab = props => {
     loadUserProfile,
     darkMode,
     hasFinalDay,
+    authUser
   } = props;
   const [timeZoneFilter, setTimeZoneFilter] = useState('');
   const [desktopDisplay, setDesktopDisplay] = useState(window.innerWidth > 1024);
   const [errorOccurred, setErrorOccurred] = useState(false);
+  const [showRolePermsModal, setShowRolePermsModal] = useState(false);
   const dispatch = useDispatch();
   const rolesAllowedToEditStatusFinalDay = ['Administrator', 'Owner'];
   const canEditStatus = dispatch(hasPermission('interactWithPauseUserButton'));
@@ -723,43 +726,16 @@ const BasicInformationTab = props => {
       </Col>
       <Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
         {canEditRole ? (
-          <FormGroup>
-            <select
-              id="role"
-              name="role"
-              className={`form-control ${darkMode ? 'bg-darkmode-liblack border-0 text-light' : ''}`}
-              value={userProfile.role || ''}   // make sure this is a string
-              onChange={e => {
-                const newRole = e.target.value;
-                setUserProfile({
-                  ...userProfile,
-                  role: newRole,
-                  permissions: { ...userProfile.permissions, frontPermissions: [] },
-                });
-              }}
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <Button
+              color="primary"
+              style={darkMode ? boxStyleDark : boxStyle}
+              onClick={() => setShowRolePermsModal(true)}
             >
-              {/* Optional placeholder when no role selected */}
-              {!userProfile.role && <option value="">Select role</option>}
-
-              {(roles || [])
-                .map(r => (typeof r === 'string' ? r : r.roleName)) // normalize
-                .filter(Boolean)
-                .map(roleName => {
-                  if (roleName === 'Owner') return null; // skip Owner in this list
-                  return (
-                    <option key={roleName} value={roleName}>
-                      {roleName}
-                    </option>
-                  );
-                })}
-
-              {canAddDeleteEditOwners && (
-                <option value="Owner" style={desktopDisplay ? { marginLeft: '5px' } : {}}>
-                  Owner
-                </option>
-              )}
-            </select>
-          </FormGroup>
+              Manage Role & Permissions
+            </Button>
+          </div>
+
         ) : (
           <p className={`text-right ${darkMode ? 'text-light' : ''}`}>{userProfile.role}</p>
         )}
@@ -1047,6 +1023,17 @@ const BasicInformationTab = props => {
           </>
         )}
       </div>
+      <RoleChangePermissionsModal
+        isOpen={showRolePermsModal}
+        onClose={() => setShowRolePermsModal(false)}
+        roles={roles}
+        userProfile={userProfile}
+        setUserProfile={setUserProfile}
+        loadUserProfile={loadUserProfile}
+        authUser={authUser}
+        desktopDisplay={desktopDisplay}
+        canAddDeleteEditOwners={canAddDeleteEditOwners}
+      />
     </div>
   );
 };
@@ -1105,6 +1092,10 @@ BasicInformationTab.propTypes = {
   loadUserProfile: PropTypes.func.isRequired,
   darkMode: PropTypes.bool,
   hasPermission: PropTypes.func.isRequired,
+  authUser: PropTypes.shape({
+    requestId: PropTypes.number,
+    requestorRole: PropTypes.string
+  })
 };
 Name.propTypes = {
   userProfile: PropTypes.object.isRequired,

src/components/UserProfile/BasicInformationTab/__tests__/BasicInformationTab.test.jsx

@@ -45,6 +45,10 @@ describe('Test Suite for Name component', () => {
     setFormValid: vi.fn(),
     canEdit: true,
     desktopDisplay: 3,
+    authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
   };
   it('Test case 1 : Name component renders with editable fields when canEdit is true ', () => {
     render(<Name {...testProps} />);
@@ -99,6 +103,10 @@ describe('Test Suite for Title component', () => {
    setUserProfile: vi.fn(),
    canEdit: true,
    desktopDisplay: 3,
+   authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
  };
  it('Test case 1 : Title component renders with editable fields when canEdit is true ', () => {
    render(<Title {...testProps} />);
@@ -136,6 +144,10 @@ describe('Test Suite for Email component', () => {
    canEdit: true,
    desktopDisplay: true,
    handleUserProfile:vi.fn(),
+   authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
  };
 
  it('Test case 1 : Email component renders with editable fields when canEdit is true ', () => {
@@ -187,6 +199,10 @@ it('Test case 5 : Verify  if email is not displayed if privacy settings is false
     canEdit: true,
     desktopDisplay: true,
     handleUserProfile:vi.fn(),
+    authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
   };  render(<Email {...testProps} />);
 
   expect(screen.queryByText(testProps.userProfile.email)).not.toBeInTheDocument();
@@ -222,6 +238,10 @@ describe('Test Suite for Phone component', () => {
    canEdit: true,
    desktopDisplay: true,
    handleUserProfile:vi.fn(),
+   authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
  };
 
  it('Test case 1 : Phone component renders with editable fields when canEdit is true ', () => {
@@ -251,6 +271,10 @@ it('Test case 3 : Verify  if phone number  is not displayed if privacy settings
     canEdit: true,
     desktopDisplay: true,
     handleUserProfile:vi.fn(),
+    authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
   };  
   render(<Phone {...testProps} />);
 
@@ -287,6 +311,10 @@ describe('Test suite for TimeZoneDifference component ', () => {
     userProfile: {
       timeZone: 'America/New_York',
     },
+    authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
   };
 
 
@@ -317,6 +345,10 @@ it('Test case 3 : Renders error message if the component has encountered error f
     userProfile: {
       timeZone: 'Invalid/Timezone', // Use an invalid timezone to trigger error
     },
+    authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
   };
 
     render(<TimeZoneDifference {...testProps} />);
@@ -339,6 +371,10 @@ it('Test case 4: Does not render error message if errorOccurred is true', () =>
     userProfile: {
       timeZone: 'Invalid/Timezone',
     },
+    authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
   };
 
   render(<TimeZoneDifference {...testProps} />);
@@ -368,7 +404,10 @@ let testProps= {
      handleUserProfile:vi.fn(),
      roles:['Admin','Owner','Volunteer','Manager'],
      canEditRole:true,
-
+     authUser: {
+      requestorId: '123',
+      requestorRole: 'Owner',
+    },
    };
 
 
@@ -505,7 +544,7 @@ it('Test case 9: Renders the role  component with a combo box  when canEditRole
     </Provider>,
   );
   expect(screen.getByText("Role")).toBeInTheDocument(); // Label
-  expect(screen.getByRole('combobox')).toBeInTheDocument(); // combo box
+  expect(screen.getByRole('button', { name: 'Manage Role & Permissions' })).toBeInTheDocument(); // Role Modal button
 });
 it('Test case 10 : Does not render a combo box for role component   when canEditRole is false', () => {
   testProps.canEditRole=false;