[PER-10415][BLOCKED BY BE] Support multiple Archive Stewards per archive

src/app/directive/components/directive-dialog/directive-dialog.component.html

@@ -2,8 +2,8 @@
 	@default {
 		<pr-directive-display
 			[checkLegacyContact]="true"
-			[initialDirective]="directive"
-			(loadedDirective)="setSavedDirective($event)"
+			[initialDirectives]="directives"
+			(loadedDirectives)="setLoadedDirectives($event)"
 			(beginEdit)="switchToEdit($event)"
 		></pr-directive-display>
 	}
@@ -12,7 +12,7 @@
 			<fa-icon [icon]="['fas', 'chevron-left']"></fa-icon>
 		</a>
 		<pr-directive-edit
-			[directive]="directive"
+			[directive]="editing"
 			(savedDirective)="saveEditedDirective($event)"
 		></pr-directive-edit>
 	}

src/app/directive/components/directive-dialog/directive-dialog.component.spec.ts

@@ -7,8 +7,32 @@ import { ApiService } from '@shared/services/api/api.service';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { AccountService } from '@shared/services/account/account.service';
 import { AccountVO } from '@models/account-vo';
+import { Directive } from '@models/directive';
 import { DirectiveDialogComponent } from './directive-dialog.component';
 
+const buildDirective = (
+	directiveId: string,
+	stewardEmail: string,
+	note: string,
+): Directive =>
+	new Directive({
+		directiveId,
+		archiveId: 1,
+		type: 'admin',
+		createdDt: new Date(),
+		updatedDt: new Date(),
+		trigger: {
+			directiveTriggerId: directiveId,
+			directiveId,
+			type: 'admin',
+			createdDt: new Date(),
+			updatedDt: new Date(),
+		},
+		steward: { email: stewardEmail, name: '' },
+		note,
+		executionDt: null,
+	});
+
 describe('DirectiveDialogComponent', () => {
 	let component: DirectiveDialogComponent;
 	let fixture: ComponentFixture<DirectiveDialogComponent>;
@@ -38,4 +62,53 @@ describe('DirectiveDialogComponent', () => {
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
+
+	it('should switch to edit mode with the selected directive', () => {
+		const directive = buildDirective(
+			'directive-1',
+			'first@example.com',
+			'note',
+		);
+		component.switchToEdit(directive);
+
+		expect(component.mode).toBe('edit');
+		expect(component.editing).toBe(directive);
+	});
+
+	it('should switch to edit mode with null when adding a new steward', () => {
+		component.switchToEdit(null);
+
+		expect(component.mode).toBe('edit');
+		expect(component.editing).toBeNull();
+	});
+
+	it('should append a saved directive when its id is not in the list', () => {
+		component.directives = [
+			buildDirective('directive-1', 'first@example.com', 'one'),
+		];
+		const newDirective = buildDirective(
+			'directive-2',
+			'second@example.com',
+			'two',
+		);
+
+		component.saveEditedDirective(newDirective);
+
+		expect(component.directives.length).toBe(2);
+		expect(component.directives[1]).toBe(newDirective);
+		expect(component.mode).toBe('display');
+		expect(component.editing).toBeNull();
+	});
+
+	it('should replace a saved directive when its id matches an existing entry', () => {
+		const existing = buildDirective('directive-1', 'old@example.com', 'old');
+		component.directives = [existing];
+		const updated = buildDirective('directive-1', 'new@example.com', 'new');
+
+		component.saveEditedDirective(updated);
+
+		expect(component.directives.length).toBe(1);
+		expect(component.directives[0]).toBe(updated);
+		expect(component.directives[0]).not.toBe(existing);
+	});
 });

src/app/directive/components/directive-dialog/directive-dialog.component.ts

@@ -18,19 +18,32 @@ export class DirectiveDialogComponent {
 		});
 	}
 	public mode: DialogState = 'display';
-	public directive: Directive;
+	public directives: Directive[] = [];
+	public editing: Directive | null = null;
 
-	public setSavedDirective(directive: Directive): void {
-		this.directive = directive;
+	public setLoadedDirectives(directives: Directive[]): void {
+		this.directives = directives;
 	}
 
-	public switchToEdit(directive: Directive): void {
-		this.setSavedDirective(directive);
+	public switchToEdit(directive: Directive | null): void {
+		this.editing = directive;
 		this.mode = 'edit';
 	}
 
 	public saveEditedDirective(directive: Directive): void {
-		this.setSavedDirective(directive);
+		const matchingIndex = this.directives.findIndex(
+			(existing) => existing.directiveId === directive.directiveId,
+		);
+		if (matchingIndex >= 0) {
+			this.directives = [
+				...this.directives.slice(0, matchingIndex),
+				directive,
+				...this.directives.slice(matchingIndex + 1),
+			];
+		} else {
+			this.directives = [...this.directives, directive];
+		}
+		this.editing = null;
 		this.mode = 'display';
 	}
 }

src/app/directive/components/directive-display/directive-display.component.html

@@ -25,9 +25,9 @@
 		>
 	</p>
 	<div class="archive-steward-header">
-		Archive Steward: The {{ archiveName }} Archive
+		Archive Stewards: The {{ archiveName }} Archive
 	</div>
-	@if (noPlan) {
+	@if (showNoPlanWarning) {
 		<div class="no-plan-warning">
 			<div class="warning-icon">
 				<fa-icon [icon]="['fas', 'exclamation-triangle']"></fa-icon>
@@ -47,47 +47,61 @@
 		</div>
 	}
 	<p class="archive-steward-description">
-		The Archive Steward for this archive will receive your note when your Legacy
-		Plan is activated.
+		Each Archive Steward for this archive will receive your note when your
+		Legacy Plan is activated.
 	</p>
 	@if (error) {
 		<div class="error">
-			An error occured while trying to find the Archive Steward for the current
+			An error occured while trying to find the Archive Stewards for the current
 			archive. Please reload the page and try again.
 		</div>
 	}
 	@if (!error) {
-		<div class="archive-steward-table">
-			<div class="row">
-				<div>Archive Steward email</div>
-				<div
-					[class]="{
-						'archive-steward-email': true,
-						'not-assigned': !directive?.steward?.email
-					}"
+		@for (directive of directives; track directive.directiveId) {
+			<div
+				class="archive-steward-card"
+				role="button"
+				tabindex="0"
+				(click)="onCardActivated($event, directive)"
+				(keydown.enter)="onCardActivated($event, directive)"
+				(keydown.space)="onCardActivated($event, directive)"
+			>
+				<i class="material-icons edit-icon" aria-label="Edit Archive Steward"
+					>edit</i
 				>
-					{{ directive?.steward?.email ?? 'not assigned' }}
+				<div class="archive-steward-table">
+					<div class="row">
+						<div>Archive Steward email</div>
+						<div
+							[class]="{
+								'archive-steward-email': true,
+								'not-assigned': !directive?.steward?.email
+							}"
+						>
+							{{ directive?.steward?.email ?? 'not assigned' }}
+						</div>
+					</div>
+					<div class="row">
+						<div>Note to Steward</div>
+						<div
+							[class]="{
+								'archive-steward-note': true,
+								'not-assigned': !directive?.note
+							}"
+						>
+							{{ directive?.note ?? 'none' }}
+						</div>
+					</div>
 				</div>
 			</div>
-			<div class="row">
-				<div>Note to Steward</div>
-				<div
-					[class]="{
-						'archive-steward-note': true,
-						'not-assigned': !directive?.note
-					}"
-				>
-					{{ directive?.note ?? 'none' }}
-				</div>
-			</div>
-		</div>
+		}
 	}
 	<button
 		class="btn btn-primary"
-		[disabled]="error || noPlan"
-		(click)="beginEdit.emit(directive)"
+		[disabled]="gateAddButton"
+		(click)="beginEdit.emit(null)"
 	>
-		{{ directive?.steward?.email ? 'Edit' : 'Assign' }} Archive Steward
+		Add a new Archive Steward
 	</button>
 	<div>&nbsp;</div>
 </div>

src/app/directive/components/directive-display/directive-display.component.scss

@@ -18,6 +18,27 @@
 	display: block;
 }
 
+.archive-steward-card {
+	position: relative;
+	border: 1px solid $PR-blue-100;
+	border-radius: 0.25rem;
+	padding: 1em 2.5em 1em 1em;
+	margin-bottom: 0.75em;
+	cursor: pointer;
+
+	&:hover,
+	&:focus-visible {
+		background: $PR-blue-25;
+	}
+
+	.edit-icon {
+		position: absolute;
+		top: 0.75em;
+		right: 0.75em;
+		color: $gray-dark;
+	}
+}
+
 .archive-steward-table {
 	display: table;