111638: Highlight newly created processes

Author: AAwouters

src/app/process-page/form/process-form.component.ts

@@ -7,8 +7,7 @@ import { ControlContainer, NgForm } from '@angular/forms';
 import { ScriptParameter } from '../scripts/script-parameter.model';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
-import { RequestService } from '../../core/data/request.service';
-import { Router } from '@angular/router';
+import { Router, NavigationExtras } from '@angular/router';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { RemoteData } from '../../core/data/remote-data';
 import { getProcessListRoute } from '../process-page-routing.paths';
@@ -57,7 +56,6 @@ export class ProcessFormComponent implements OnInit {
     private scriptService: ScriptDataService,
     private notificationsService: NotificationsService,
     private translationService: TranslateService,
-    private requestService: RequestService,
     private router: Router) {
   }
 
@@ -91,7 +89,7 @@ export class ProcessFormComponent implements OnInit {
           const title = this.translationService.get('process.new.notification.success.title');
           const content = this.translationService.get('process.new.notification.success.content');
           this.notificationsService.success(title, content);
-          this.sendBack();
+          this.sendBack(rd.payload);
         } else {
           const title = this.translationService.get('process.new.notification.error.title');
           const content = this.translationService.get('process.new.notification.error.content');
@@ -143,11 +141,17 @@ export class ProcessFormComponent implements OnInit {
     return this.missingParameters.length > 0;
   }
 
-  private sendBack() {
-    this.requestService.removeByHrefSubstring('/processes');
-    /* should subscribe on the previous method to know the action is finished and then navigate,
-    will fix this when the removeByHrefSubstring changes are merged */
-    this.router.navigateByUrl(getProcessListRoute());
+  /**
+   * Redirect the user to the processes overview page with the new process' ID,
+   * so it can be highlighted in the overview table.
+   * @param newProcess The newly created process
+   * @private
+   */
+  private sendBack(newProcess: Process) {
+    const extras: NavigationExtras = {
+      queryParams: { new_process_id: newProcess.processId },
+    };
+    void this.router.navigate([getProcessListRoute()], extras);
   }
 }
 

src/app/process-page/overview/table/process-overview-table.component.html

@@ -37,7 +37,7 @@ <h2 class="flex-grow-1">
 
             <tbody>
             <tr *ngFor="let tableEntry of processesRD?.payload?.page"
-                [class.table-danger]="processBulkDeleteService.isToBeDeleted(tableEntry.process.processId)">
+                [class]="getRowClass(tableEntry.process)">
               <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.processId}}</a></td>
               <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.scriptName}}</a></td>
               <td>{{tableEntry.user}}</td>

src/app/process-page/overview/table/process-overview-table.component.spec.ts

@@ -19,6 +19,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { AuthService } from '../../../core/auth/auth.service';
 import { AuthServiceMock } from '../../../shared/mocks/auth.service.mock';
+import { RouteService } from '../../../core/services/route.service';
+import { routeServiceStub } from '../../../shared/testing/route-service.stub';
 
 
 describe('ProcessOverviewTableComponent', () => {
@@ -31,6 +33,7 @@ describe('ProcessOverviewTableComponent', () => {
   let processBulkDeleteService: ProcessBulkDeleteService;
   let modalService: NgbModal;
   let authService; // : AuthService; Not typed as the mock does not fully implement AuthService
+  let routeService: RouteService;
 
   let processes: Process[];
   let ePerson: EPerson;
@@ -104,6 +107,7 @@ describe('ProcessOverviewTableComponent', () => {
     });
 
     authService = new AuthServiceMock();
+    routeService = routeServiceStub;
   }
 
   beforeEach(waitForAsync(() => {
@@ -119,6 +123,7 @@ describe('ProcessOverviewTableComponent', () => {
         { provide: ProcessBulkDeleteService, useValue: processBulkDeleteService },
         { provide: NgbModal, useValue: modalService },
         { provide: AuthService, useValue: authService },
+        { provide: RouteService, useValue: routeService },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/process-page/overview/table/process-overview-table.component.ts

@@ -18,6 +18,9 @@ import { redirectOn4xx } from '../../../core/shared/authorized.operators';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../core/auth/auth.service';
 import { isPlatformBrowser } from '@angular/common';
+import { RouteService } from '../../../core/services/route.service';
+
+const NEW_PROCESS_PARAM = 'new_process_id';
 
 /**
  * An interface to store a process and extra information related to the process
@@ -84,11 +87,17 @@ export class ProcessOverviewTableComponent implements OnInit {
    */
   isCollapsed = false;
 
+  /**
+   * The id of the process to highlight
+   */
+  newProcessId: string;
+
   constructor(protected processOverviewService: ProcessOverviewService,
               protected processBulkDeleteService: ProcessBulkDeleteService,
               protected ePersonDataService: EPersonDataService,
               protected dsoNameService: DSONameService,
               protected paginationService: PaginationService,
+              protected routeService: RouteService,
               protected router: Router,
               protected auth: AuthService,
               @Inject(PLATFORM_ID) protected platformId: object,
@@ -101,6 +110,10 @@ export class ProcessOverviewTableComponent implements OnInit {
       this.useAutoRefreshingSearchBy = false;
     }
 
+    this.routeService.getQueryParameterValue(NEW_PROCESS_PARAM).pipe(take(1)).subscribe((id) => {
+      this.newProcessId = id;
+    });
+
     // Creates an ID from the first 2 characters of the process status.
     // Should two process status values ever start with the same substring,
     // increase the number of characters until the ids are distinct.
@@ -193,4 +206,18 @@ export class ProcessOverviewTableComponent implements OnInit {
     );
   }
 
+  /**
+   * Get the css class for a row depending on the state of the process
+   * @param process
+   */
+  getRowClass(process: Process): string {
+    if (this.processBulkDeleteService.isToBeDeleted(process.processId)) {
+      return 'table-danger';
+    } else if (this.newProcessId === process.processId) {
+      return 'table-info';
+    } else {
+      return '';
+    }
+  }
+
 }