feat(teams): Add hasTeamRole and hasSomeTeamRoles directives

src/app/core/teams/directives/has-some-team-roles.directive.ts

@@ -0,0 +1,76 @@
+import { NgIf } from '@angular/common';
+import { Directive, Input, OnInit, inject } from '@angular/core';
+
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+
+import { AuthorizationService } from '../../auth/authorization.service';
+import { SessionService } from '../../auth/session.service';
+import { TeamAuthorizationService } from '../team-authorization.service';
+import { TeamRole } from '../team-role.model';
+import { Team } from '../team.model';
+
+@UntilDestroy()
+@Directive({
+	selector: '[hasSomeTeamRoles]',
+	hostDirectives: [
+		{
+			directive: NgIf,
+			inputs: ['ngIfElse: hasSomeTeamRolesElse', 'ngIfThen: hasSomeTeamRolesThen']
+		}
+	]
+})
+export class HasSomeTeamRolesDirective implements OnInit {
+	private team: Pick<Team, '_id'>;
+	private roles: Array<string | TeamRole> = [];
+	private andCondition = true;
+	private orCondition = false;
+
+	private ngIfDirective = inject(NgIf);
+	private sessionService = inject(SessionService);
+	private authorizationService = inject(AuthorizationService);
+	private teamAuthorizationService = inject(TeamAuthorizationService);
+
+	@Input()
+	set hasSomeTeamRoles(team: Pick<Team, '_id'>) {
+		this.team = team;
+		this.updateNgIf();
+	}
+
+	@Input()
+	set hasSomeTeamRolesRoles(roles: Array<string | TeamRole>) {
+		this.roles = roles;
+		this.updateNgIf();
+	}
+
+	@Input()
+	set hasSomeTeamRolesAnd(condition: boolean) {
+		this.andCondition = condition;
+		this.updateNgIf();
+	}
+
+	@Input()
+	set hasSomeTeamRolesOr(condition: boolean) {
+		this.orCondition = condition;
+		this.updateNgIf();
+	}
+
+	ngOnInit() {
+		this.sessionService
+			.getSession()
+			.pipe(untilDestroyed(this))
+			.subscribe(() => {
+				this.updateNgIf();
+			});
+	}
+
+	protected checkPermission(): boolean {
+		return (
+			this.authorizationService.isAdmin() ||
+			this.teamAuthorizationService.hasSomeRoles(this.team, this.roles)
+		);
+	}
+
+	private updateNgIf() {
+		this.ngIfDirective.ngIf = this.orCondition || (this.andCondition && this.checkPermission());
+	}
+}

src/app/core/teams/directives/has-team-role.directive.ts

@@ -0,0 +1,76 @@
+import { NgIf } from '@angular/common';
+import { Directive, Input, OnInit, inject } from '@angular/core';
+
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+
+import { AuthorizationService } from '../../auth/authorization.service';
+import { SessionService } from '../../auth/session.service';
+import { TeamAuthorizationService } from '../team-authorization.service';
+import { TeamRole } from '../team-role.model';
+import { Team } from '../team.model';
+
+@UntilDestroy()
+@Directive({
+	selector: '[hasTeamRole]',
+	hostDirectives: [
+		{
+			directive: NgIf,
+			inputs: ['ngIfElse: hasTeamRoleElse', 'ngIfThen: hasTeamRoleThen']
+		}
+	]
+})
+export class HasTeamRoleDirective implements OnInit {
+	private team: Pick<Team, '_id'>;
+	private role: string | TeamRole;
+	private andCondition = true;
+	private orCondition = false;
+
+	private ngIfDirective = inject(NgIf);
+	private sessionService = inject(SessionService);
+	private authorizationService = inject(AuthorizationService);
+	private teamAuthorizationService = inject(TeamAuthorizationService);
+
+	@Input()
+	set hasTeamRole(team: Pick<Team, '_id'>) {
+		this.team = team;
+		this.updateNgIf();
+	}
+
+	@Input()
+	set hasTeamRoleRole(role: string | TeamRole) {
+		this.role = role;
+		this.updateNgIf();
+	}
+
+	@Input()
+	set hasTeamRoleAnd(condition: boolean) {
+		this.andCondition = condition;
+		this.updateNgIf();
+	}
+
+	@Input()
+	set hasTeamRoleOr(condition: boolean) {
+		this.orCondition = condition;
+		this.updateNgIf();
+	}
+
+	ngOnInit() {
+		this.sessionService
+			.getSession()
+			.pipe(untilDestroyed(this))
+			.subscribe(() => {
+				this.updateNgIf();
+			});
+	}
+
+	protected checkPermission(): boolean {
+		return (
+			this.authorizationService.isAdmin() ||
+			this.teamAuthorizationService.hasRole(this.team, this.role)
+		);
+	}
+
+	private updateNgIf() {
+		this.ngIfDirective.ngIf = this.orCondition || (this.andCondition && this.checkPermission());
+	}
+}

src/app/core/teams/list-team-members/list-team-members.component.html

@@ -11,10 +11,10 @@
 
 			<div class="mb-3 ml-auto">
 				<button
-					*ngIf="canManageTeam"
-					(click)="addMembers()"
 					type="button"
 					class="btn btn-primary ml-auto"
+					(click)="addMembers()"
+					*hasTeamRole="team; role: 'admin'"
 				>
 					<span class="fa-solid fa-plus"></span> Add New
 				</button>
@@ -71,7 +71,7 @@
 						class="dropdown dropdown-table-inline"
 						dropdown
 						container="body"
-						*ngIf="canManageTeam; else readOnlyRole"
+						*hasTeamRole="team; role: 'admin'; else: readOnlyRole"
 					>
 						<span class="dropdown-toggle" dropdownToggle>
 							<span class="mr-1">{{ member.roleDisplay }}</span>
@@ -95,12 +95,12 @@
 				<th cdk-header-cell *cdkHeaderCellDef></th>
 				<td cdk-cell *cdkCellDef="let member">
 					<a
-						*ngIf="member.explicit"
 						class="btn-icon"
 						tooltip="Remove Member"
 						container="body"
 						placement="bottom"
 						(click)="removeMember(member)"
+						*hasTeamRole="team; role: 'admin'; and: member.explicit"
 					>
 						<span class="fa-solid fa-lg fa-trash"></span>
 					</a>

src/app/core/teams/list-team-members/list-team-members.component.ts

@@ -48,8 +48,6 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 
 	isUserAdmin = false;
 
-	canManageTeam = false;
-
 	teamRoleOptions: any[] = TeamRole.ROLES;
 
 	typeFilterOptions: ListFilterOption[] = [
@@ -97,9 +95,6 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 		}
 		this.alertService.clearAllAlerts();
 
-		this.canManageTeam =
-			this.authorizationService.isAdmin() || this.teamAuthorizationService.isAdmin(this.team);
-
 		this.sessionService
 			.getSession()
 			.pipe(isNotNullOrUndefined(), untilDestroyed(this))
@@ -108,9 +103,9 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 				this.isUserAdmin = this.authorizationService.isAdmin();
 			});
 
-		this.displayedColumns = this.columns
-			.filter((column) => this.canManageTeam || column !== 'actions')
-			.filter((column) => this.team.implicitMembers || column !== 'explicit');
+		this.displayedColumns = this.columns.filter(
+			(column) => this.team.implicitMembers || column !== 'explicit'
+		);
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
@@ -210,7 +205,7 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 				)
 				.subscribe(() => {
 					// If we successfully removed the role from ourselves, redirect away
-					this.router.navigate(['/teams', { clearCachedFilter: true }]);
+					this.router.navigate(['/teams']);
 				});
 		} else if (!member.explicit) {
 			// Member is implicitly in team, should explicitly add this member with the desired role

src/app/core/teams/team-authorization.service.ts

@@ -69,7 +69,7 @@ export class TeamAuthorizationService {
 
 	private roleToString(role: string | TeamRole) {
 		if (typeof role !== 'string') {
-			return role.role;
+			return role?.role;
 		}
 		return role;
 	}

src/app/core/teams/teams.module.ts

@@ -17,6 +17,8 @@ import { SystemAlertModule } from '../../common/system-alert.module';
 import { TableModule } from '../../common/table.module';
 import { AddMembersModalComponent } from './add-members-modal/add-members-modal.component';
 import { CreateTeamComponent } from './create-team/create-team.component';
+import { HasSomeTeamRolesDirective } from './directives/has-some-team-roles.directive';
+import { HasTeamRoleDirective } from './directives/has-team-role.directive';
 import { TeamsHelpComponent } from './help/teams-help.component';
 import { ListTeamMembersComponent } from './list-team-members/list-team-members.component';
 import { ListSubTeamsComponent } from './list-teams/list-sub-teams.component';
@@ -57,7 +59,9 @@ import { ViewTeamComponent } from './view-team/view-team.component';
 		ViewTeamComponent,
 		TeamsHelpComponent,
 		TeamSelectInputComponent,
-		GeneralDetailsComponent
+		GeneralDetailsComponent,
+		HasTeamRoleDirective,
+		HasSomeTeamRolesDirective
 	],
 	providers: [TeamsHelpComponent]
 })

src/app/core/teams/view-team/general-details/general-details.component.html

@@ -18,8 +18,8 @@ <h2>Details</h2>
 					class="btn btn-outline-secondary ml-3"
 					type="button"
 					[disabled]="isEditing"
-					*ngIf="canManageTeam"
 					(click)="edit()"
+					*hasTeamRole="team; role: 'admin'"
 				>
 					<span class="fa-solid fa-lg fa-pencil"></span>
 				</button>

src/app/core/teams/view-team/general-details/general-details.component.ts

@@ -5,10 +5,8 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { first, map, switchMap, tap } from 'rxjs/operators';
 
 import { SystemAlertService } from '../../../../common/system-alert/system-alert.service';
-import { AuthorizationService } from '../../../auth/authorization.service';
 import { SessionService } from '../../../auth/session.service';
 import { ConfigService } from '../../../config.service';
-import { TeamAuthorizationService } from '../../team-authorization.service';
 import { Team } from '../../team.model';
 import { TeamsService } from '../../teams.service';
 
@@ -25,8 +23,6 @@ export class GeneralDetailsComponent implements OnInit {
 	nestedTeamsEnabled = false;
 	implicitMembersStrategy?: string;
 
-	canManageTeam = false;
-
 	isEditing = false;
 
 	constructor(
@@ -35,9 +31,7 @@ export class GeneralDetailsComponent implements OnInit {
 		private alertService: SystemAlertService,
 		private configService: ConfigService,
 		private sessionService: SessionService,
-		private teamsService: TeamsService,
-		private authorizationService: AuthorizationService,
-		private teamAuthorizationService: TeamAuthorizationService
+		private teamsService: TeamsService
 	) {}
 
 	ngOnInit(): void {
@@ -62,8 +56,6 @@ export class GeneralDetailsComponent implements OnInit {
 	updateTeam(team: Team) {
 		if (team) {
 			this.team = team;
-			this.canManageTeam =
-				this.authorizationService.isAdmin() || this.teamAuthorizationService.isAdmin(team);
 		} else {
 			this.router.navigate(['resource/invalid', { type: 'team' }]);
 		}
@@ -86,7 +78,7 @@ export class GeneralDetailsComponent implements OnInit {
 					this.isEditing = false;
 					if (team) {
 						this.team = team;
-						this.alertService.addAlert('Updated team metadata', 'success', 5000);
+						this.alertService.addAlert('Team updated', 'success', 5000);
 					}
 				}),
 				switchMap(() => this.sessionService.reloadSession()),

src/app/core/teams/view-team/view-team.component.html

@@ -15,7 +15,7 @@ <h1>{{ team.name }}</h1>
 			type="button"
 			class="btn btn-link ml-auto"
 			(click)="remove(team)"
-			*ngIf="canManageTeam"
+			*hasTeamRole="team; role: 'admin'"
 		>
 			Delete Team
 		</button>