Improvement[TW29167]: Migrate change report tab to change report page

jadenpuckett · jadenpuckett · commit 8ebe886f652e · 2025-12-09T08:05:56.000-07:00
diff --git a/web/apps/osee/src/app/actra/components/add-attachments-dialog/add-attachments-dialog.component.html b/web/apps/osee/src/app/actra/components/add-attachments-dialog/add-attachments-dialog.component.html
@@ -89,7 +89,7 @@ <h3 class="tw-font-semibold">Add attachments</h3>
 	</button>
 	<button
 		mat-button
-		class="tw-rounded tw-bg-primary tw-px-3 tw-py-2 tw-text-background-background hover:tw-bg-osee-neutral-87 disabled:tw-opacity-50"
+		class="tw-rounded tw-bg-osee-blue-7 tw-px-3 tw-py-2 tw-text-background-background hover:tw-bg-osee-neutral-87 disabled:tw-opacity-50 dark:tw-bg-osee-blue-10"
 		color="primary"
 		type="button"
 		[disabled]="files().length === 0"
diff --git a/web/apps/osee/src/app/actra/components/update-attachment-dialog/update-attachment-dialog.component.html b/web/apps/osee/src/app/actra/components/update-attachment-dialog/update-attachment-dialog.component.html
@@ -85,7 +85,7 @@ <h3 class="tw-font-semibold">Update attachment</h3>
 	</button>
 	<button
 		mat-button
-		class="tw-rounded tw-bg-primary tw-px-3 tw-py-2 tw-text-background-background hover:tw-bg-osee-neutral-87 disabled:tw-opacity-50"
+		class="tw-rounded tw-bg-osee-blue-7 tw-px-3 tw-py-2 tw-text-background-background hover:tw-bg-osee-neutral-87 disabled:tw-opacity-50 dark:tw-bg-osee-blue-10"
 		color="primary"
 		type="button"
 		[disabled]="!file()"
diff --git a/web/apps/osee/src/app/actra/components/workflow-attachments/workflow-attachments.component.html b/web/apps/osee/src/app/actra/components/workflow-attachments/workflow-attachments.component.html
@@ -22,7 +22,7 @@ <h2 class="tw-text-xl tw-font-semibold">Attachments</h2>
 			matTooltipShowDelay="300">
 			<button
 				mat-raised-button
-				class="tw-bg-primary tw-text-background-background hover:tw-bg-osee-neutral-87"
+				class="tw-bg-osee-blue-7 tw-text-background-background hover:tw-bg-osee-neutral-87 dark:tw-bg-osee-blue-10"
 				(click)="openAddDialog()"
 				[disabled]="loadingGlobal() === 'true'">
 				Add Attachments
@@ -40,7 +40,7 @@ <h2 class="tw-text-xl tw-font-semibold">Attachments</h2>
 			matTooltipShowDelay="300">
 			<button
 				mat-raised-button
-				class="tw-bg-primary tw-text-background-background hover:tw-bg-osee-neutral-87 disabled:tw-bg-background-selected-disabled-button"
+				class="tw-bg-osee-blue-7 tw-text-background-background hover:tw-bg-osee-neutral-87 disabled:tw-bg-background-selected-disabled-button dark:tw-bg-osee-blue-10"
 				(click)="deleteSelected()"
 				[disabled]="
 					loadingGlobal() === 'true' || selectedCount() === 0
diff --git a/web/apps/osee/src/app/actra/workflow/actra-workflow-editor.component.html b/web/apps/osee/src/app/actra/workflow/actra-workflow-editor.component.html
@@ -106,6 +106,10 @@
 							[workingBranch]="wf.workingBranch"
 							(updated)="updateWorkflow()" />
 
+						<osee-change-report-button
+							[inputBranchId]="wf.workingBranch.id"
+							[inputBranchType]="wf.workingBranch.branchState" />
+
 						<div
 							[matTooltip]="
 								wf.branchEditable
diff --git a/web/apps/osee/src/app/actra/workflow/actra-workflow-editor.component.ts b/web/apps/osee/src/app/actra/workflow/actra-workflow-editor.component.ts
@@ -48,6 +48,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { ActraPageTitleComponent } from '../actra-page-title/actra-page-title.component';
 import { WorkflowAttachmentsComponent } from '../components/workflow-attachments/workflow-attachments.component';
 import { CreateWorkingBranchFromWorkflowButtonComponent } from '../../configuration-management/components/create-working-branch-from-workflow-button/create-working-branch-from-workflow-button';
+import { ChangeReportButtonComponent } from '../../ple/artifact-explorer/lib/components/hierarchy/change-report-button/change-report-button.component';
 
 @Component({
 	selector: 'osee-actra-workflow-editor',
@@ -66,6 +67,7 @@ import { CreateWorkingBranchFromWorkflowButtonComponent } from '../../configurat
 		MatIconButton,
 		ActraPageTitleComponent,
 		RouterLink,
+		ChangeReportButtonComponent,
 	],
 	templateUrl: './actra-workflow-editor.component.html',
 })
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/artifact-tab-group/artifact-tab-group.component.html b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/artifact-tab-group/artifact-tab-group.component.html
@@ -57,12 +57,6 @@
 						@case ('Artifact') {
 							<osee-artifact-editor [tab]="tab" />
 						}
-						@case ('ChangeReport') {
-							<osee-change-report-table
-								[branchId]="
-									tab.branchId
-								"></osee-change-report-table>
-						}
 						@default {
 							No tab defined for this type
 						}
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/change-report-table/change-report-table.component.ts b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/change-report-table/change-report-table.component.ts
@@ -11,13 +11,7 @@
  *     Boeing - initial API and implementation
  **********************************************************************/
 import { AsyncPipe } from '@angular/common';
-import {
-	Component,
-	Input,
-	OnChanges,
-	SimpleChanges,
-	inject,
-} from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import {
 	MatCell,
 	MatCellDef,
@@ -32,15 +26,10 @@ import {
 } from '@angular/material/table';
 import { HeaderService } from '@osee/shared/services';
 import { changeReportRow } from '@osee/shared/types/change-report';
-import {
-	BehaviorSubject,
-	combineLatest,
-	of,
-	shareReplay,
-	switchMap,
-} from 'rxjs';
+import { combineLatest, of, shareReplay, switchMap } from 'rxjs';
 import { changeReportHeaders } from './change-report-table-headers';
 import { ChangeReportService } from './services/change-report.service';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
 	selector: 'osee-change-report-table',
@@ -60,17 +49,11 @@ import { ChangeReportService } from './services/change-report.service';
 		MatRowDef,
 	],
 })
-export class ChangeReportTableComponent implements OnChanges {
+export class ChangeReportTableComponent {
 	private headerService = inject(HeaderService);
 	private crService = inject(ChangeReportService);
 
-	@Input() branchId = '';
-
-	ngOnChanges(changes: SimpleChanges): void {
-		if (changes.branchId) {
-			this.branchId$.next(this.branchId);
-		}
-	}
+	branchId = input.required<string>();
 
 	headers: (keyof changeReportRow)[] = [
 		'ids',
@@ -86,10 +69,11 @@ export class ChangeReportTableComponent implements OnChanges {
 		return this.headerService.getHeaderByName(changeReportHeaders, value);
 	}
 
-	branchId$ = new BehaviorSubject<string>('');
+	private branchId$ = toObservable(this.branchId);
 
 	branch = this.branchId$.pipe(
-		switchMap((branchId) => this.crService.getBranchInfo(branchId))
+		switchMap((id) => this.crService.getBranchInfo(id)),
+		shareReplay(1)
 	);
 
 	parentBranch = this.branch.pipe(
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/editor/relation-delete-dialog/relation-delete-dialog.component.html b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/editor/relation-delete-dialog/relation-delete-dialog.component.html
@@ -12,7 +12,7 @@
  -->
 <div
 	mat-dialog-title
-	class="tw-flex tw-justify-center tw-bg-primary tw-p-0 tw-text-background">
+	class="tw-flex tw-justify-center tw-bg-osee-blue-7 tw-p-0 tw-text-background dark:tw-bg-osee-blue-10">
 	<div class="tw-mt-1">Remove Relation?</div>
 </div>
 <mat-dialog-content class="tw-mt-4 tw-flex">
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/change-report-button/change-report-button.component.ts b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/change-report-button/change-report-button.component.ts
@@ -10,46 +10,69 @@
  * Contributors:
  *     Boeing - initial API and implementation
  **********************************************************************/
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	input,
+} from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { CurrentBranchInfoService, UiService } from '@osee/shared/services';
 import { map } from 'rxjs';
 import { ArtifactExplorerTabService } from '../../../services/artifact-explorer-tab.service';
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
 
 @Component({
 	selector: 'osee-change-report-button',
-	imports: [MatButton, MatIcon, MatTooltip],
+	imports: [MatButton, MatIcon, MatTooltip, RouterLink],
 	template: `@if (branchId() && branchType()) {
-		<button
-			mat-flat-button
-			class="tw-flex tw-justify-center tw-bg-osee-blue-7 tw-text-background-background dark:tw-bg-osee-blue-10 [&_*]:tw-m-0"
-			(click)="openChangeReport()"
-			matTooltip="Change Report">
-			<mat-icon class="material-icons-outlined">differences</mat-icon>
-		</button>
+		<a
+			[routerLink]="'/ple/change-report/' + branchId()"
+			target="_blank">
+			<button
+				mat-flat-button
+				class="tw-flex tw-justify-center tw-bg-osee-blue-7 tw-text-background-background dark:tw-bg-osee-blue-10 [&_*]:tw-m-0"
+				matTooltip="Change Report">
+				<mat-icon class="material-icons-outlined">differences</mat-icon>
+			</button>
+		</a>
 	}`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChangeReportButtonComponent {
+	inputBranchType = input<string>('');
+	inputBranchId = input<string>('');
+
 	private currentBranchService = inject(CurrentBranchInfoService);
 	private tabService = inject(ArtifactExplorerTabService);
 	private uiService = inject(UiService);
 
-	protected branchType = toSignal(this.uiService.type, { initialValue: '' });
-	protected branchId = toSignal(this.uiService.id, { initialValue: '' });
+	protected serviceBranchType = toSignal(this.uiService.type, {
+		initialValue: '',
+	});
+	protected serviceBranchId = toSignal(this.uiService.id, {
+		initialValue: '',
+	});
+
+	protected branchType = computed(() =>
+		this.inputBranchType() === ''
+			? this.serviceBranchType()
+			: this.inputBranchType()
+	);
+
+	protected branchId = computed(() =>
+		this.inputBranchId() === ''
+			? this.serviceBranchId()
+			: this.inputBranchId()
+	);
 
 	branchName = toSignal(
 		this.currentBranchService.currentBranch.pipe(
 			map((branch) => branch.name)
 		)
 	);
-
-	openChangeReport() {
-		this.tabService.addChangeReportTab(
-			'Change Report - ' + this.branchName()
-		);
-	}
 }
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/services/artifact-explorer-tab.service.ts b/web/apps/osee/src/app/ple/artifact-explorer/lib/services/artifact-explorer-tab.service.ts
@@ -64,18 +64,6 @@ export class ArtifactExplorerTabService {
 		this.SelectedIndex = this.tabs().length - 1;
 	}
 
-	addChangeReportTab(tabTitle: string) {
-		const newTab: tab = {
-			tabId: this.generateTabId(),
-			tabType: 'ChangeReport',
-			tabTitle,
-			branchId: this.branchId(),
-			branchName: this.branchName(),
-			viewId: this.viewId(),
-		};
-		this.addTab(newTab);
-	}
-
 	addArtifactTab(artifact: artifactWithRelations) {
 		this.addArtifactTabOnBranch(artifact, this.branchId(), this.viewId());
 	}
@@ -116,8 +104,6 @@ export class ArtifactExplorerTabService {
 		switch (tab.tabType) {
 			case 'Artifact':
 				return tab.artifact.icon.icon;
-			case 'ChangeReport':
-				return 'differences';
 			default:
 				return '';
 		}
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/types/artifact-explorer.ts b/web/apps/osee/src/app/ple/artifact-explorer/lib/types/artifact-explorer.ts
@@ -30,11 +30,7 @@ export type artifactTab = {
 	artifact: artifactWithRelations;
 } & abstractTab;
 
-export type changeReportTab = {
-	tabType: 'ChangeReport';
-} & abstractTab;
-
-export type tab = artifactTab | changeReportTab;
+export type tab = artifactTab;
 
 export type artifactHierarchyOptions = {
 	showRelations: boolean;
diff --git a/web/apps/osee/src/app/ple/change-report/change-report.component.spec.ts b/web/apps/osee/src/app/ple/change-report/change-report.component.spec.ts
@@ -0,0 +1,34 @@
+/*********************************************************************
+ * Copyright (c) 2025 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangeReportComponent } from './change-report.component';
+
+describe('ChangeReportComponent', () => {
+	let component: ChangeReportComponent;
+	let fixture: ComponentFixture<ChangeReportComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [ChangeReportComponent],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(ChangeReportComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/web/apps/osee/src/app/ple/change-report/change-report.component.ts b/web/apps/osee/src/app/ple/change-report/change-report.component.ts
@@ -0,0 +1,50 @@
+/*********************************************************************
+ * Copyright (c) 2025 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { Component, input, effect, inject } from '@angular/core';
+import { ChangeReportTableComponent } from '../artifact-explorer/lib/components/change-report-table/change-report-table.component';
+import { UiService } from '@osee/shared/services';
+import { ActraPageTitleComponent } from '../../actra/actra-page-title/actra-page-title.component';
+
+@Component({
+	selector: 'osee-change-report',
+	imports: [ChangeReportTableComponent, ActraPageTitleComponent],
+	template: `
+		<osee-actra-page-title
+			title="Change Report"
+			icon="differences" />
+		@if (branchId() !== undefined && branchId() !== '') {
+			<osee-change-report-table
+				[branchId]="branchId()"></osee-change-report-table>
+		}
+	`,
+})
+export class ChangeReportComponent {
+	branchId = input<string>('');
+
+	private uiService = inject(UiService);
+
+	constructor() {
+		effect(() => {
+			const id = this.branchId();
+			this.uiService.idValue = id ?? '';
+
+			if (id === undefined || id === '') {
+				this.uiService.setErrorTextAndDetails(
+					'Set Branch ID in the URL',
+					'For example: `{domain}/ple/change-report/{branch-id}`'
+				);
+			}
+		});
+	}
+}
+export default ChangeReportComponent;
diff --git a/web/apps/osee/src/app/ple/change-report/change-report.routes.ts b/web/apps/osee/src/app/ple/change-report/change-report.routes.ts
@@ -0,0 +1,33 @@
+/*********************************************************************
+ * Copyright (c) 2025 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+	{
+		path: '',
+		loadChildren: () => import('../artifact-explorer/toolbar.routes'),
+		outlet: 'toolbar',
+	},
+	{
+		path: '',
+		title: 'Change Report',
+		loadComponent: () => import('./change-report.component'),
+	},
+	{
+		path: ':branchId',
+		title: 'Change Report',
+		loadComponent: () => import('./change-report.component'),
+	},
+];
+
+export default routes;
diff --git a/web/apps/osee/src/app/ple/ple.routes.ts b/web/apps/osee/src/app/ple/ple.routes.ts
diff --git a/web/apps/osee/src/app/shared/components/expansion-panel/expansion-panel.component.ts b/web/apps/osee/src/app/shared/components/expansion-panel/expansion-panel.component.ts
diff --git a/web/apps/osee/src/app/shared/services/ple_aware/ui/ui.service.ts b/web/apps/osee/src/app/shared/services/ple_aware/ui/ui.service.ts

Original file line number	Diff line number	Diff line change
`@@ -57,12 +57,6 @@`
`57`	`57`	`@case ('Artifact') {`
`58`	`58`	`<osee-artifact-editor [tab]="tab" />`
`59`	`59`	`}`
`60`		`- @case ('ChangeReport') {`
`61`		`- <osee-change-report-table`
`62`		`- [branchId]="`
`63`		`- tab.branchId`
`64`		`- "></osee-change-report-table>`
`65`		`- }`
`66`	`60`	`@default {`
`67`	`61`	`No tab defined for this type`
`68`	`62`	`}`