Csfd 15 ungrey back button

RELEASE-NOTES.md

@@ -33,6 +33,9 @@
 ### Version 7.0.20
 **EUI-1300** accessibility change
 
+### Version 7.0.18-event-flow-cancel-navigation-v2
+**CSFD-18** Ungrey back button - event flow cancel navigation
+
 ### Version 7.0.19
 **EUI-1067** No error message is displayed when entering incorrect postcode
 **EUI-1123** TextArea fields are not preloaded even the data is present in response intermittently

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.48",
+  "version": "7.0.48-ungrey-back-button-2",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.48",
+  "version": "7.0.48-ungrey-back-button-2",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/src/lib/shared/components/case-editor/case-edit-page/case-edit-page.component.spec.ts

@@ -43,6 +43,7 @@ import {
   FormErrorService,
   FormValueService,
   LoadingService,
+  MultipageComponentStateService,
 } from '../../../services';
 import { ValidPageListCaseFieldsService } from '../services/valid-page-list-caseFields.service';
 import { FieldsUtils } from '../../../services/fields/fields.utils';
@@ -81,6 +82,7 @@ describe('CaseEditPageComponent - creation and update event trigger tests', () =
     caseEditDataService = {},
     loadingService = {},
     validPageListCaseFieldsService = {},
+    multipageComponentStateService = new MultipageComponentStateService(),
     addressesService = {}
   }) =>
   new CaseEditPageComponent(
@@ -95,6 +97,7 @@ describe('CaseEditPageComponent - creation and update event trigger tests', () =
     caseEditDataService as CaseEditDataService,
     loadingService as LoadingService,
     validPageListCaseFieldsService as ValidPageListCaseFieldsService,
+    multipageComponentStateService as MultipageComponentStateService,
     addressesService as AddressesService
   );
 
@@ -104,6 +107,43 @@ describe('CaseEditPageComponent - creation and update event trigger tests', () =
     expect(component).toBeTruthy();
   });
 
+  describe('multipageComponentStateService', () => {
+    it('should trigger previous step with the multi-page component state service', () => {
+      const multipageComponentStateService: MultipageComponentStateService = new MultipageComponentStateService();
+      const component:CaseEditPageComponent = initializeComponent({ multipageComponentStateService });
+      multipageComponentStateService.resetJourneyCollection();
+      spyOn(multipageComponentStateService, 'previous');
+
+      multipageComponentStateService.setInstigator(component);
+      component.previousStep();
+
+      expect(multipageComponentStateService.previous).toHaveBeenCalled();
+    });
+
+    it('should trigger next step with the multi-page component state service', () => {
+      const multipageComponentStateService: MultipageComponentStateService = new MultipageComponentStateService();
+      const caseEditDataService: CaseEditDataService = new CaseEditDataService();
+      const component:CaseEditPageComponent = initializeComponent({ multipageComponentStateService, caseEditDataService });
+      spyOn(multipageComponentStateService, 'next');
+
+      multipageComponentStateService.setInstigator(component);
+      component.nextStep();
+
+      expect(multipageComponentStateService.next).toHaveBeenCalled();
+    });
+
+    it('should reset the multi-page component state service on destruction',  () => {
+      const multipageComponentStateService: MultipageComponentStateService = new MultipageComponentStateService();
+      const component:CaseEditPageComponent = initializeComponent({ multipageComponentStateService });
+      spyOn(multipageComponentStateService, 'reset');
+
+      multipageComponentStateService.setInstigator(component);
+      component.ngOnDestroy();
+
+      expect(multipageComponentStateService.reset).toHaveBeenCalled();
+    });
+  });
+
   describe('updateEventTriggerCaseFields', () => {
     it(`should NOT update event trigger's case fields as eventTrigger is null`, () => {
       component = initializeComponent({});
@@ -353,6 +393,8 @@ describe('CaseEditPageComponent - all other tests', () => {
   const caseField1 = new CaseField();
   const caseField2 = new CaseField();
   const eventData = new CaseEventData();
+  let multipageComponentStateService = new MultipageComponentStateService();
+
   const caseEventDataPrevious: CaseEventData = {
     data: {
       field1: 'Updated value',
@@ -458,6 +500,7 @@ describe('CaseEditPageComponent - all other tests', () => {
         };
         loadingServiceMock = createSpyObj<LoadingService>('LoadingService', ['register', 'unregister']);
         const addressesServiceMock = jasmine.createSpyObj('addressesService', ['setMandatoryError']);
+        multipageComponentStateService = new MultipageComponentStateService();
 
         TestBed.configureTestingModule({
           imports: [FormsModule, ReactiveFormsModule],
@@ -481,7 +524,8 @@ describe('CaseEditPageComponent - all other tests', () => {
             PlaceholderService,
             { provide: LoadingService, useValue: loadingServiceMock },
             { provide: ValidPageListCaseFieldsService, useValue: validPageListCaseFieldsService},
-            { provide: AddressesService, useValue: addressesServiceMock }
+            { provide: AddressesService, useValue: addressesServiceMock },
+            { provide: MultipageComponentStateService, useValue: multipageComponentStateService }
           ],
         }).compileComponents();
         fixture = TestBed.createComponent(CaseEditPageComponent);

projects/ccd-case-ui-toolkit/src/lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts

@@ -9,7 +9,7 @@ import { CaseEventData } from '../../../domain/case-event-data.model';
 import { CaseEventTrigger } from '../../../domain/case-view/case-event-trigger.model';
 import { CaseField } from '../../../domain/definition';
 import { DRAFT_PREFIX } from '../../../domain/draft.model';
-import { AddressesService, LoadingService } from '../../../services';
+import { AddressesService, LoadingService, MultipageComponentStateService } from '../../../services';
 import { CaseFieldService } from '../../../services/case-fields/case-field.service';
 import { FieldsUtils } from '../../../services/fields';
 import { FormErrorService } from '../../../services/form/form-error.service';
@@ -22,13 +22,14 @@ import { WizardPage } from '../domain/wizard-page.model';
 import { Wizard } from '../domain/wizard.model';
 import { PageValidationService } from '../services/page-validation.service';
 import { ValidPageListCaseFieldsService } from '../services/valid-page-list-caseFields.service';
+import { JourneyInstigator } from '../../../domain/journey';
 
 @Component({
   selector: 'ccd-case-edit-page',
   templateUrl: 'case-edit-page.html',
   styleUrls: ['./case-edit-page.scss']
 })
-export class CaseEditPageComponent implements OnInit, AfterViewChecked, OnDestroy {
+export class CaseEditPageComponent implements OnInit, AfterViewChecked, OnDestroy, JourneyInstigator {
   public static readonly RESUMED_FORM_DISCARD = 'RESUMED_FORM_DISCARD';
   public static readonly NEW_FORM_DISCARD = 'NEW_FORM_DISCARD';
   public static readonly NEW_FORM_SAVE = 'NEW_FORM_CHANGED_SAVE';
@@ -85,8 +86,32 @@ export class CaseEditPageComponent implements OnInit, AfterViewChecked, OnDestro
     private readonly caseEditDataService: CaseEditDataService,
     private readonly loadingService: LoadingService,
     private readonly validPageListCaseFieldsService: ValidPageListCaseFieldsService,
+    private readonly multipageComponentStateService: MultipageComponentStateService,
     private readonly addressService: AddressesService
   ) {
+    this.multipageComponentStateService.setInstigator(this);
+  }
+
+  public onFinalNext(): void {
+    this.submit();
+  }
+
+  public onFinalPrevious(): void {
+    this.cancel();
+  }
+
+  public isAtStart(): boolean {
+    return this.multipageComponentStateService.isAtStart;
+  }
+
+  // This method will be triggered by the next button in the app component
+  public nextStep(): void {
+    this.multipageComponentStateService.next();
+  }
+
+  // This method will be triggered by the previous button in the app component
+  public previousStep(): void {
+    this.multipageComponentStateService.previous();
   }
 
   public ngOnInit(): void {
@@ -148,6 +173,7 @@ export class CaseEditPageComponent implements OnInit, AfterViewChecked, OnDestro
     this.dialogRefAfterClosedSub?.unsubscribe();
     this.saveDraftSub?.unsubscribe();
     this.caseFormValidationErrorsSub?.unsubscribe();
+    this.multipageComponentStateService.reset();
   }
 
   public applyValuesChanged(valuesChanged: boolean): void {
@@ -175,11 +201,11 @@ export class CaseEditPageComponent implements OnInit, AfterViewChecked, OnDestro
    */
   public toPreviousPage(): void {
     this.caseEditDataService.clearFormValidationErrors();
-
     const caseEventData: CaseEventData = this.buildCaseEventData(true);
     caseEventData.data = caseEventData.event_data;
     this.updateFormData(caseEventData);
     this.previous();
+    this.previousStep();
     CaseEditPageComponent.setFocusToTop();
   }
 
@@ -455,6 +481,7 @@ export class CaseEditPageComponent implements OnInit, AfterViewChecked, OnDestro
     }
 
     this.caseEditDataService.clearFormValidationErrors();
+    this.multipageComponentStateService.reset();
   }
 
   public submitting(): boolean {

projects/ccd-case-ui-toolkit/src/lib/shared/components/case-editor/case-edit-page/case-edit-page.html

@@ -40,7 +40,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
   (callbackErrorsContext)="callbackErrorsNotify($event)">
 </ccd-callback-errors>
 <div class="width-50">
-  <form *ngIf="currentPage" class="form" [formGroup]="editForm" (submit)="submit()">
+  <form *ngIf="currentPage" class="form" [formGroup]="editForm" (submit)="nextStep()">
     <fieldset id="fieldset-case-data">
       <legend style="display: none;"></legend>
       <!-- single column -->
@@ -62,7 +62,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
     </fieldset>
 
     <div class="form-group form-group-related">
-      <button class="button button-secondary" type="button" [disabled]="!(hasPreviousPage$ | async)" (click)="toPreviousPage()">
+      <button class="button button-secondary" type="button" (click)="toPreviousPage()" [disabled]="isAtStart()">
         {{'Previous' | rpxTranslate}}
       </button>
       <button class="button" type="submit" [disabled]="submitting()">{{triggerText | rpxTranslate}}</button>

projects/ccd-case-ui-toolkit/src/lib/shared/components/case-editor/case-edit-submit/case-edit-submit.component.ts

@@ -7,6 +7,7 @@ import { Task } from '../../../domain/work-allocation/Task';
 import {
   CaseFieldService,
   FieldsUtils,
+  MultipageComponentStateService,
   FormValidatorsService,
   OrderService,
   ProfileNotifier
@@ -72,6 +73,7 @@ export class CaseEditSubmitComponent implements OnInit, OnDestroy {
     private readonly route: ActivatedRoute,
     private readonly orderService: OrderService,
     private readonly profileNotifier: ProfileNotifier,
+    private readonly multipageComponentStateService: MultipageComponentStateService,
     private readonly formValidatorsService: FormValidatorsService
   ) {
   }
@@ -96,6 +98,7 @@ export class CaseEditSubmitComponent implements OnInit, OnDestroy {
       this.eventTrigger.case_fields.some(caseField => FieldsUtils.isCaseFieldOfType(caseField, ['ComponentLauncher']));
     this.pageTitle = this.getPageTitle();
 
+    console.log(this.multipageComponentStateService.getInstigator());
     this.summary = this.formValidatorsService.addMarkDownValidators(this.editForm, 'event.summary');
     this.description = this.formValidatorsService.addMarkDownValidators(this.editForm, 'event.description');
   }

projects/ccd-case-ui-toolkit/src/lib/shared/components/case-editor/case-editor.module.ts

@@ -51,6 +51,7 @@ import { CaseEditWizardGuard } from './services/case-edit-wizard.guard';
 import { CaseFlagStateService } from './services/case-flag-state.service';
 import { CaseworkerService } from './services/case-worker.service';
 import { ValidPageListCaseFieldsService } from './services/valid-page-list-caseFields.service';
+import { MultipageComponentStateService } from '../../services';
 
 @NgModule({
   imports: [
@@ -116,8 +117,9 @@ import { ValidPageListCaseFieldsService } from './services/valid-page-list-caseF
     CaseworkerService,
     SessionStorageService,
     EventCompletionStateMachineService,
-    CaseFlagStateService,
-    ValidPageListCaseFieldsService
+    CaseFlagStateService,  
+    ValidPageListCaseFieldsService,
+    MultipageComponentStateService
   ]
 })
 export class CaseEditorModule { }

projects/ccd-case-ui-toolkit/src/lib/shared/components/case-viewer/case-event-trigger/case-event-trigger.component.spec.ts

@@ -60,7 +60,7 @@ describe('CaseEventTriggerComponent', () => {
     event: {
       id: EVENT_TRIGGER.id,
       summary: 'Some summary',
-      description: 'Some description',
+      description: 'Some description'
     },
     event_token: 'cbcdcbdh',
     ignore_warning: false
@@ -148,9 +148,11 @@ describe('CaseEventTriggerComponent', () => {
     activityPollingService.postEditActivity.and.returnValue(of(true));
     router = {
       navigate: jasmine.createSpy('navigate'),
-      url: ''
+      url: '',
+      getCurrentNavigation: jasmine.createSpy('getCurrentNavigation')
     };
-    router.navigate.and.returnValue({ then: f => f() });
+    router.navigate.and.returnValue({ then: (f) => f() });
+    router.getCurrentNavigation.and.returnValue({ previousNavigation: { finalUrl: '/cases/case-details/1707912713167104#Claim%20details' } });
 
     TestBed
       .configureTestingModule({
@@ -227,7 +229,7 @@ describe('CaseEventTriggerComponent', () => {
 
   it('should alert warning message after task completion error available and set to true in session storage', () => {
     casesService.createEvent.and.returnValue(of({}));
-    sessionStorageService.getItem.and.returnValue('true')
+    sessionStorageService.getItem.and.returnValue('true');
 
     component.submitted({ caseId: 123, status: 'happy' });
 
@@ -242,18 +244,9 @@ describe('CaseEventTriggerComponent', () => {
     expect(alertService.warning).toHaveBeenCalled();
   });
 
-  it('should have a cancel button going back to the create case', () => {
+  it('should verify cancel navigate to the correct url', () => {
     component.cancel();
-
-    expect(router.navigate).toHaveBeenCalledWith([`/${URL_SEGMENTS[0].path}/${URL_SEGMENTS[1].path}`]);
-  });
-
-  it('should cancel navigate to linked cases tab', () => {
-    const routerWithModifiedUrl = TestBed.get(Router);
-    routerWithModifiedUrl.url = 'linkCases';
-    component.caseDetails.case_id = '1111-2222-3333-4444';
-    component.cancel();
-    expect(router.navigate).toHaveBeenCalledWith(['cases', 'case-details', '1111-2222-3333-4444'], { fragment: 'Linked cases' });
+    expect(router.navigate).toHaveBeenCalledWith(['/cases/case-details/1707912713167104'], { fragment: 'Claim details' });
   });
 
   it('should bypass validation if the eventTrigger case fields contain a FlagLauncher field', (done) => {
@@ -277,13 +270,13 @@ describe('CaseEventTriggerComponent', () => {
       },
       hasPages(): boolean {
         return false;
-      },
+      }
     };
     SANITISED_EDIT_FORM.data = {
       caseFlagLauncherField1: null
     };
 
-    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe(result => {
+    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe((result) => {
       expect(result).toBeNull();
       done();
     });
@@ -312,13 +305,13 @@ describe('CaseEventTriggerComponent', () => {
       },
       hasPages(): boolean {
         return false;
-      },
+      }
     };
     SANITISED_EDIT_FORM.data = {
       caseFlagLauncherField1: null
     };
 
-    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe(result => {
+    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe((result) => {
       expect(result).not.toBeNull();
       done();
     });
@@ -339,13 +332,13 @@ describe('CaseEventTriggerComponent', () => {
       },
       hasPages(): boolean {
         return false;
-      },
+      }
     };
     SANITISED_EDIT_FORM.data = {
       caseFlagLauncherField1: null
     };
 
-    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe(result => {
+    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe((result) => {
       expect(result).not.toBeNull();
       done();
     });
@@ -357,19 +350,11 @@ describe('CaseEventTriggerComponent', () => {
     spyOn(FieldsUtils, 'isCaseFieldOfType').and.callThrough();
     component.eventTrigger = null;
 
-    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe(result => {
+    component.validate()(SANITISED_EDIT_FORM, PAGE_ID).subscribe((result) => {
       expect(result).not.toBeNull();
       done();
     });
     expect(FieldsUtils.isCaseFieldOfType).not.toHaveBeenCalled();
     expect(casesService.validateCase).toHaveBeenCalled();
   });
-
-  it('should cancel navigate to linked cases tab', () => {
-    const routerWithModifiedUrl = TestBed.get(Router);
-    routerWithModifiedUrl.url = 'linkCases';
-    component.caseDetails.case_id = '1111-2222-3333-4444';
-    component.cancel();
-    expect(router.navigate).toHaveBeenCalledWith(['cases', 'case-details', '1111-2222-3333-4444'], { fragment: 'Linked cases' });
-  });
 });