Skip to content

Commit 6aeffae

Browse files
RamaruvaRamaruva
committed
fix: simplify permission checks and disable links based on user interaction capabilit
1 parent efebcdb commit 6aeffae

1 file changed

Lines changed: 65 additions & 57 deletions

File tree

‎src/components/Header/Header.jsx‎

Lines changed: 65 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -87,68 +87,69 @@ export function Header(props) {
8787
() => ALLOWED_ROLES_TO_INTERACT.includes(props.auth.user.role),
8888
[ALLOWED_ROLES_TO_INTERACT, props.auth.user.role],
8989
);
90+
const headerDisabled = isAuthUser ? false : !canInteractWithViewingUser;
9091

9192
// Reports
9293
const canGetReports = props.hasPermission(
9394
'getReports',
94-
!isAuthUser && canInteractWithViewingUser,
95+
!isAuthUser ,
9596
);
9697
const canGetWeeklySummaries = props.hasPermission(
9798
'getWeeklySummaries',
98-
!isAuthUser && canInteractWithViewingUser,
99+
!isAuthUser,
99100
);
100101
const canGetWeeklyVolunteerSummary = props.hasPermission('getWeeklySummaries');
101102
const canGetJobAnalytics = props.hasPermission('getJobReports');
102103

103104
// Users
104105
const canAccessUserManagement =
105-
props.hasPermission('postUserProfile', !isAuthUser && canInteractWithViewingUser) ||
106-
props.hasPermission('deleteUserProfile', !isAuthUser && canInteractWithViewingUser) ||
107-
props.hasPermission('changeUserStatus', !isAuthUser && canInteractWithViewingUser) ||
108-
props.hasPermission('getUserProfiles', !isAuthUser && canInteractWithViewingUser) ||
109-
props.hasPermission('setFinalDay', !isAuthUser && canInteractWithViewingUser);
106+
props.hasPermission('postUserProfile', !isAuthUser ) ||
107+
props.hasPermission('deleteUserProfile', !isAuthUser ) ||
108+
props.hasPermission('changeUserStatus', !isAuthUser ) ||
109+
props.hasPermission('getUserProfiles', !isAuthUser ) ||
110+
props.hasPermission('setFinalDay', !isAuthUser);
110111

111112
// Badges
112113
const canAccessBadgeManagement =
113-
props.hasPermission('seeBadges', !isAuthUser && canInteractWithViewingUser) ||
114-
props.hasPermission('createBadges', !isAuthUser && canInteractWithViewingUser) ||
115-
props.hasPermission('updateBadges', !isAuthUser && canInteractWithViewingUser) ||
116-
props.hasPermission('deleteBadges', !isAuthUser && canInteractWithViewingUser);
114+
props.hasPermission('seeBadges', !isAuthUser ) ||
115+
props.hasPermission('createBadges', !isAuthUser ) ||
116+
props.hasPermission('updateBadges', !isAuthUser) ||
117+
props.hasPermission('deleteBadges', !isAuthUser );
117118
// Projects
118119
const canAccessProjects =
119-
props.hasPermission('postProject', !isAuthUser && canInteractWithViewingUser) ||
120-
props.hasPermission('deleteProject', !isAuthUser && canInteractWithViewingUser) ||
121-
props.hasPermission('putProject', !isAuthUser && canInteractWithViewingUser) ||
122-
props.hasPermission('getProjectMembers', !isAuthUser && canInteractWithViewingUser) ||
123-
props.hasPermission('assignProjectToUsers', !isAuthUser && canInteractWithViewingUser) ||
124-
props.hasPermission('postWbs', !isAuthUser && canInteractWithViewingUser) ||
125-
props.hasPermission('deleteWbs', !isAuthUser && canInteractWithViewingUser) ||
126-
props.hasPermission('postTask', !isAuthUser && canInteractWithViewingUser) ||
127-
props.hasPermission('updateTask', !isAuthUser && canInteractWithViewingUser) ||
128-
props.hasPermission('deleteTask', !isAuthUser && canInteractWithViewingUser);
120+
props.hasPermission('postProject', !isAuthUser ) ||
121+
props.hasPermission('deleteProject', !isAuthUser ) ||
122+
props.hasPermission('putProject', !isAuthUser ) ||
123+
props.hasPermission('getProjectMembers', !isAuthUser ) ||
124+
props.hasPermission('assignProjectToUsers', !isAuthUser ) ||
125+
props.hasPermission('postWbs', !isAuthUser ) ||
126+
props.hasPermission('deleteWbs', !isAuthUser ) ||
127+
props.hasPermission('postTask', !isAuthUser ) ||
128+
props.hasPermission('updateTask', !isAuthUser ) ||
129+
props.hasPermission('deleteTask', !isAuthUser);
129130
// Tasks
130131
const canUpdateTask = props.hasPermission(
131132
'updateTask',
132-
!isAuthUser && canInteractWithViewingUser,
133+
!isAuthUser,
133134
);
134135
// Teams
135136
const canAccessTeams =
136-
props.hasPermission('postTeam', !isAuthUser && canInteractWithViewingUser) ||
137-
props.hasPermission('putTeam', !isAuthUser && canInteractWithViewingUser) ||
138-
props.hasPermission('deleteTeam', !isAuthUser && canInteractWithViewingUser) ||
139-
props.hasPermission('assignTeamToUsers', !isAuthUser && canInteractWithViewingUser);
137+
props.hasPermission('postTeam', !isAuthUser ) ||
138+
props.hasPermission('putTeam', !isAuthUser) ||
139+
props.hasPermission('deleteTeam', !isAuthUser ) ||
140+
props.hasPermission('assignTeamToUsers', !isAuthUser);
140141
// Popups
141142
const canAccessPopups =
142-
props.hasPermission('createPopup', !isAuthUser && canInteractWithViewingUser) ||
143-
props.hasPermission('updatePopup', !isAuthUser && canInteractWithViewingUser);
143+
props.hasPermission('createPopup', !isAuthUser) ||
144+
props.hasPermission('updatePopup', !isAuthUser );
144145
// SendEmails
145146
const canAccessSendEmails = props.hasPermission('sendEmails', !isAuthUser);
146147
// Permissions
147148
const canAccessPermissionsManagement =
148-
props.hasPermission('postRole', !isAuthUser && canInteractWithViewingUser) ||
149-
props.hasPermission('putRole', !isAuthUser && canInteractWithViewingUser) ||
150-
props.hasPermission('deleteRole', !isAuthUser && canInteractWithViewingUser) ||
151-
props.hasPermission('putUserProfilePermissions', !isAuthUser && canInteractWithViewingUser);
149+
props.hasPermission('postRole', !isAuthUser ) ||
150+
props.hasPermission('putRole', !isAuthUser ) ||
151+
props.hasPermission('deleteRole', !isAuthUser ) ||
152+
props.hasPermission('putUserProfilePermissions', !isAuthUser);
152153

153154
// Blue Square Email Management
154155
const canAccessBlueSquareEmailManagement = props.hasPermission('resendBlueSquareAndSummaryEmails', !isAuthUser);
@@ -413,71 +414,74 @@ export function Header(props) {
413414
>
414415
{canUpdateTask && (
415416
<NavItem className="responsive-spacing">
416-
<NavLink tag={Link} to="/taskeditsuggestions">
417+
<NavLink tag={Link} to="/taskeditsuggestions" disabled={headerDisabled}>
417418
<div className="redBackGroupHeader">
418419
<span>{props.taskEditSuggestionCount}</span>
419420
</div>
420421
</NavLink>
421422
</NavItem>
422423
)}
423424
<NavItem className="responsive-spacing">
424-
<NavLink tag={Link} to="/dashboard">
425+
<NavLink tag={Link} to="/dashboard" disabled={headerDisabled}>
425426
<span className="dashboard-text-link">{DASHBOARD}</span>
426427
</NavLink>
427428
</NavItem>
428429
<NavItem className="responsive-spacing">
429-
<NavLink tag={Link} to="/timelog#currentWeek">
430+
<NavLink tag={Link} to="/timelog#currentWeek" disabled={headerDisabled}>
430431
<span className="dashboard-text-link">{TIMELOG}</span>
431432
</NavLink>
432433
</NavItem>
433434

434435
{showProjectDropdown && (
435436
<UncontrolledDropdown nav inNavbar className="responsive-spacing">
436-
<DropdownToggle nav caret>
437+
<DropdownToggle nav caret disabled={headerDisabled}>
437438
<span className="dashboard-text-link">{PROJECTS}</span>
438439
</DropdownToggle>
439-
<DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
440+
<DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''} disabled={headerDisabled}>
440441
<DropdownItem
441442
tag={Link}
442443
to="/bmdashboard/materials/add"
443444
className={fontColor}
444445
>
445446
Add Material
446447
</DropdownItem>
447-
<DropdownItem tag={Link} to="/bmdashboard/logMaterial" className={fontColor}>
448+
<DropdownItem tag={Link} to="/bmdashboard/logMaterial" className={fontColor} disabled={headerDisabled}>
448449
Log Material
449450
</DropdownItem>
450-
<DropdownItem tag={Link} to="/bmdashboard/materials" className={fontColor}>
451+
<DropdownItem tag={Link} to="/bmdashboard/materials" className={fontColor} disabled={headerDisabled}>
451452
Material List
452453
</DropdownItem>
453454
<DropdownItem
454455
tag={Link}
455456
to="/bmdashboard/equipment/add"
456457
className={fontColor}
458+
disabled={headerDisabled}
457459
>
458460
Add Equipment/Tool
459461
</DropdownItem>
460462
<DropdownItem
461463
tag={Link}
462464
to="/bmdashboard/equipment/:equipmentId"
463465
className={fontColor}
466+
disabled={headerDisabled}
464467
>
465468
Log Equipment/Tool
466469
</DropdownItem>
467470
<DropdownItem
468471
tag={Link}
469472
to="/bmdashboard/tools/:equipmentId/update"
470473
className={fontColor}
474+
disabled={headerDisabled}
471475
>
472476
Update Equipment/Tool
473477
</DropdownItem>
474-
<DropdownItem tag={Link} to="/bmdashboard/equipment" className={fontColor}>
478+
<DropdownItem tag={Link} to="/bmdashboard/equipment" className={fontColor} disabled={headerDisabled}>
475479
Equipment/Tool List
476480
</DropdownItem>
477-
<DropdownItem tag={Link} to="/bmdashboard/Issue" className={fontColor}>
481+
<DropdownItem tag={Link} to="/bmdashboard/Issue" className={fontColor} disabled={headerDisabled}>
478482
Issue
479483
</DropdownItem>
480-
<DropdownItem tag={Link} to="/bmdashboard/lessonform/" className={fontColor}>
484+
<DropdownItem tag={Link} to="/bmdashboard/lessonform/" className={fontColor} disabled={headerDisabled}>
481485
Lesson
482486
</DropdownItem>
483487
</DropdownMenu>
@@ -492,48 +496,49 @@ export function Header(props) {
492496
</DropdownToggle>
493497
<DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
494498
{canGetReports && (
495-
<DropdownItem tag={Link} to="/reports" className={`${fontColor}`}>
499+
<DropdownItem tag={Link} to="/reports" className={`${fontColor}`} disabled={headerDisabled}>
496500
{REPORTS}
497501
</DropdownItem>
498502
)}
499503
{canGetWeeklySummaries && (
500-
<DropdownItem tag={Link} to="/weeklysummariesreport" className={fontColor}>
504+
<DropdownItem tag={Link} to="/weeklysummariesreport" className={fontColor} disabled={headerDisabled}>
501505
{WEEKLY_SUMMARIES_REPORT}
502506
</DropdownItem>
503507
)}
504508
{canGetWeeklyVolunteerSummary && (
505-
<DropdownItem tag={Link} to="/totalorgsummary" className={fontColor}>
509+
<DropdownItem tag={Link} to="/totalorgsummary" className={fontColor} disabled={headerDisabled}>
506510
{TOTAL_ORG_SUMMARY}
507511
</DropdownItem>
508512
)}
509513
{canGetJobAnalytics && (
510-
<DropdownItem tag={Link} to="/application/analytics" className={fontColor}>
514+
<DropdownItem tag={Link} to="/application/analytics" className={fontColor} disabled={headerDisabled}>
511515
{JOB_ANALYTICS_REPORT}
512516
</DropdownItem>
513517
)}
514-
<DropdownItem tag={Link} to="/teamlocations" className={fontColor}>
518+
<DropdownItem tag={Link} to="/teamlocations" className={fontColor} disabled={headerDisabled}>
515519
{TEAM_LOCATIONS}
516520
</DropdownItem>
517521
<DropdownItem
518522
tag={Link}
519523
to="/bmdashboard/totalconstructionsummary"
520524
className={fontColor}
525+
disabled={headerDisabled}
521526
>
522527
{TOTAL_CONSTRUCTION_SUMMARY}
523528
</DropdownItem>
524-
<DropdownItem onClick={() => setShowPromotionsPopup(true)} className={fontColor}>
529+
<DropdownItem onClick={() => setShowPromotionsPopup(true)} className={fontColor} disabled={headerDisabled}>
525530
{PR_PROMOTIONS}
526531
</DropdownItem>
527532
</DropdownMenu>
528533
</UncontrolledDropdown>
529534
) : (
530535
<NavItem className="responsive-spacing">
531-
<NavLink tag={Link} to="/teamlocations">
536+
<NavLink tag={Link} to="/teamlocations" disabled={headerDisabled}>
532537
<span className="dashboard-text-link">{TEAM_LOCATIONS}</span>
533538
</NavLink>
534539
</NavItem>
535540
)}
536-
<NavItem className="responsive-spacing">
541+
<NavItem className="responsive-spacing" disabled={headerDisabled}>
537542
<BellNotification userId={displayUserId} />
538543
</NavItem>
539544
{(canAccessUserManagement ||
@@ -550,27 +555,27 @@ export function Header(props) {
550555
</DropdownToggle>
551556
<DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
552557
{canAccessUserManagement && (
553-
<DropdownItem tag={Link} to="/usermanagement" className={fontColor}>
558+
<DropdownItem tag={Link} to="/usermanagement" className={fontColor} disabled={headerDisabled}>
554559
{USER_MANAGEMENT}
555560
</DropdownItem>
556561
)}
557562
{canAccessBadgeManagement && (
558-
<DropdownItem tag={Link} to="/badgemanagement" className={fontColor}>
563+
<DropdownItem tag={Link} to="/badgemanagement" className={fontColor} disabled={headerDisabled}>
559564
{BADGE_MANAGEMENT}
560565
</DropdownItem>
561566
)}
562567
{canAccessProjects && (
563-
<DropdownItem tag={Link} to="/projects" className={fontColor}>
568+
<DropdownItem tag={Link} to="/projects" className={fontColor} disabled={headerDisabled}>
564569
{PROJECTS}
565570
</DropdownItem>
566571
)}
567572
{canAccessTeams && (
568-
<DropdownItem tag={Link} to="/teams" className={fontColor}>
573+
<DropdownItem tag={Link} to="/teams" className={fontColor} disabled={headerDisabled}>
569574
{TEAMS}
570575
</DropdownItem>
571576
)}
572577
{canAccessSendEmails && (
573-
<DropdownItem tag={Link} to="/announcements" className={fontColor}>
578+
<DropdownItem tag={Link} to="/announcements" className={fontColor} disabled={headerDisabled}>
574579
{SEND_EMAILS}
575580
</DropdownItem>
576581
)}
@@ -581,20 +586,22 @@ export function Header(props) {
581586
tag={Link}
582587
to="/permissionsmanagement"
583588
className={fontColor}
589+
disabled={headerDisabled}
584590
>
585591
{PERMISSIONS_MANAGEMENT}
586592
</DropdownItem>
587593
</>
588594
)}
589595
<DropdownItem divider />
590-
<DropdownItem tag={Link} to="/pr-dashboard/overview" className={fontColor}>
596+
<DropdownItem tag={Link} to="/pr-dashboard/overview" className={fontColor} disabled={headerDisabled}>
591597
PR Team Analytics
592598
</DropdownItem>
593599
{canAccessBlueSquareEmailManagement && (
594600
<DropdownItem
595601
tag={Link}
596602
to="/bluesquare-email-management"
597603
className={fontColor}
604+
disabled={headerDisabled}
598605
>
599606
{BLUE_SQUARE_EMAIL_MANAGEMENT}
600607
</DropdownItem>
@@ -634,6 +641,7 @@ export function Header(props) {
634641
tag={Link}
635642
to={`/userprofile/${displayUserId}`}
636643
className={fontColor}
644+
disabled={headerDisabled}
637645
>
638646
{VIEW_PROFILE}
639647
</DropdownItem>
@@ -653,7 +661,7 @@ export function Header(props) {
653661
<DarkModeButton />
654662
</DropdownItem>
655663
<DropdownItem divider />
656-
<DropdownItem onClick={openModal} className={fontColor}>
664+
<DropdownItem onClick={openModal} className={fontColor} disabled={headerDisabled}>
657665
{LOGOUT}
658666
</DropdownItem>
659667
</DropdownMenu>

0 commit comments

Comments
 (0)