EUI-1783: Support for deleting hidden field values (#591)

* EUI-1783: Support for deleting hidden field values

Ensure any existing value of a hidden field is deleted in the CCD backend, unless the field has the `retain_hidden_value` flag set to `true` (see RDM-9024), in which case the existing value will remain untouched.

* Refactor `fg` parameter to `formGroup` for clarity, following suggestion from @rayliangatos

Author: Daniel-Lam

RELEASE-NOTES.md

@@ -1,4 +1,7 @@
 ## RELEASE NOTES
+### Version 2.64.42-retain-hidden-value-support
+**EUI-1783** Delete hidden field value except if `retain_hidden_value` flag is true
+
 ### Version 2.64.41-reinstate-EUI-2575
 **EUI-2657** - Reinstate EUI-2575 (`use_case` query param), in line with the reversion in CCD Demo environment being undone
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "2.64.41-reinstate-EUI-2575",
+  "version": "2.64.42-retain-hidden-value-support",
   "engines": {
     "yarn": "^1.12.3",
     "npm": "^5.6.0"

src/shared/components/case-editor/case-edit-submit/case-edit-submit.component.spec.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 import { of, Observable, BehaviorSubject } from 'rxjs';
 import { FormControl, FormGroup } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import createSpy = jasmine.createSpy;
 import createSpyObj = jasmine.createSpyObj;
 import { FieldsUtils } from '../../../services/fields/fields.utils';
 import { CaseReferencePipe } from '../../../pipes/case-reference/case-reference.pipe';
@@ -22,9 +23,11 @@ import { CaseEditSubmitComponent } from './case-edit-submit.component';
 import { CaseEditComponent } from '../case-edit/case-edit.component';
 import { CaseEditPageComponent } from '../case-edit-page/case-edit-page.component';
 import { ProfileService, ProfileNotifier } from '../../../services/profile';
-import { Profile } from '../../../domain';
+import { CaseEventData, Profile } from '../../../domain';
 import { createAProfile } from '../../../domain/profile/profile.test.fixture';
 import { text } from '../../../test/helpers';
+import { FieldsPurger } from '../../../services';
+import { WizardPageField } from '../domain';
 
 describe('CaseEditSubmitComponent', () => {
 
@@ -40,6 +43,13 @@ describe('CaseEditSubmitComponent', () => {
   const FORM_GROUP = new FormGroup({
     'data': new FormGroup({ 'PersonLastName': new FormControl('Khaleesi') })
   });
+  const FORM_GROUP_WITH_HIDDEN_FIELDS = new FormGroup({
+    'data': new FormGroup({
+      'field1': new FormControl({ value: 'Hidden value to be retained', disabled: true }),
+      'field2': new FormControl({ value: 'Hidden value not to be retained', disabled: true }),
+      'field3': new FormControl('Hide both')
+    })
+  });
   let caseEditComponent: any;
   let pages: WizardPage[];
   let wizard: Wizard;
@@ -51,6 +61,7 @@ describe('CaseEditSubmitComponent', () => {
   let caseField1: CaseField = aCaseField('field1', 'field1', 'Text', 'OPTIONAL', 3);
   let caseField2: CaseField = aCaseField('field2', 'field2', 'Text', 'OPTIONAL', 2);
   let caseField3: CaseField = aCaseField('field3', 'field3', 'Text', 'OPTIONAL', 1);
+  let caseFieldRetainHiddenValue: CaseField = aCaseField('field1', 'field1', 'Text', 'OPTIONAL', 3, null, true);
   const $EVENT_NOTES = By.css('#fieldset-event');
   let cancelled: any;
   let snapshot: any;
@@ -692,4 +703,129 @@ describe('CaseEditSubmitComponent', () => {
       expect(error).toBeFalsy();
     });
   });
+
+  describe('Form submit test', () => {
+    pages = [
+      aWizardPage('page1', 'Page 1', 1),
+    ];
+    const firstPage = pages[0];
+    caseFieldRetainHiddenValue.show_condition = 'field3!="Hide both"';
+    caseField2.show_condition = 'field3!="Hide both"';
+    const WP_FIELD_1: WizardPageField = { case_field_id: caseFieldRetainHiddenValue.id };
+    const WP_FIELD_2: WizardPageField = { case_field_id: caseField2.id };
+    const WP_FIELD_3: WizardPageField = { case_field_id: caseField3.id };
+    firstPage.wizard_page_fields = [WP_FIELD_1, WP_FIELD_2, WP_FIELD_3];
+    wizard = new Wizard(pages);
+    const queryParamMapNoProfile = createSpyObj('queryParamMap', ['get']);
+    const snapshotNoProfile = {
+      pathFromRoot: [
+        {},
+        {
+          data: {
+            nonProfileData: {
+              user: {
+                idam: {
+                  id: 'userId',
+                  email: 'string',
+                  forename: 'string',
+                  surname: 'string',
+                  roles: ['caseworker', 'caseworker-test', 'caseworker-probate-solicitor']
+                }
+              },
+              'isSolicitor': () => false,
+            }
+          }
+        }
+      ],
+      queryParamMap: queryParamMapNoProfile,
+    };
+    let PROFILE_OBS: Observable<Profile> = Observable.of(PROFILE);
+    const mockRouteNoProfile = {
+      params: of({id: 123}),
+      snapshot: snapshotNoProfile
+    };
+    let caseEditComponentSubmitSpy: any;
+
+    beforeEach(async(() => {
+      // Need to set the page case_fields here because, for some reason, if set initially then these get overridden
+      // by some unknown default!
+      firstPage.case_fields = [caseFieldRetainHiddenValue, caseField2, caseField3];
+      orderService = new OrderService();
+      casesReferencePipe = createSpyObj<CaseReferencePipe>('caseReference', ['transform']);
+      cancelled = createSpyObj('cancelled', ['emit'])
+      caseEditComponent = {
+        'form': FORM_GROUP_WITH_HIDDEN_FIELDS,
+        'fieldsPurger': new FieldsPurger(fieldsUtils),
+        'data': '',
+        'eventTrigger': { 'case_fields': [caseFieldRetainHiddenValue, caseField2, caseField3], 'can_save_draft': true },
+        'wizard': wizard,
+        'hasPrevious': () => true,
+        'getPage': () => firstPage,
+        'navigateToPage': () => undefined,
+        'next': () => new FieldsPurger(fieldsUtils).clearHiddenFields(
+          caseEditComponent.form, caseEditComponent.wizard, caseEditComponent.eventTrigger, firstPage.id),
+        'cancel': () => undefined,
+        'cancelled': cancelled,
+        'submit': createSpy('submit').and.returnValue({
+          // Provide a dummy subscribe function to be called in place of the real one
+          subscribe: () => {}
+        })
+      };
+      formErrorService = createSpyObj<FormErrorService>('formErrorService', ['mapFieldErrors']);
+      formValueService = createSpyObj<FormValueService>('formValueService', ['sanitise']);
+      formValueService.sanitise.and.callFake((rawValue: object) => {
+        return rawValue;
+      });
+
+      profileService = createSpyObj<ProfileService>('profileService', ['get']);
+      profileService.get.and.returnValue(PROFILE_OBS);
+      profileNotifier = new ProfileNotifier();
+      profileNotifier.profile = new BehaviorSubject(createAProfile()).asObservable();
+      profileNotifierSpy = spyOn(profileNotifier, 'announceProfile').and.callThrough();
+
+      TestBed.configureTestingModule({
+        declarations: [
+          CaseEditSubmitComponent,
+          IsCompoundPipe,
+          CaseReferencePipe
+        ],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [
+          { provide: CaseEditComponent, useValue: caseEditComponent },
+          { provide: FormValueService, useValue: formValueService },
+          { provide: FormErrorService, useValue: formErrorService },
+          { provide: CaseFieldService, useValue: caseFieldService },
+          { provide: FieldsUtils, useValue: fieldsUtils },
+          { provide: CaseReferencePipe, useValue: casesReferencePipe },
+          { provide: ActivatedRoute, useValue: mockRouteNoProfile },
+          { provide: OrderService, useValue: orderService },
+          { provide: ProfileService, useValue: profileService },
+          { provide: ProfileNotifier, useValue: profileNotifier }
+        ]
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CaseEditSubmitComponent);
+      comp = fixture.componentInstance;
+      de = fixture.debugElement;
+      fixture.detectChanges();
+    });
+
+    it('should submit CaseEventData with null for any hidden fields whose values are not to be retained', () => {
+      // Trigger the clearing of hidden fields by invoking next()
+      caseEditComponent.next();
+
+      // Submit the form and check the expected CaseEventData is being passed to the CaseEditComponent for submission
+      comp.submit();
+      expect(caseEditComponent.submit).toHaveBeenCalledWith({
+        data: {
+          field2: null,
+          field3: 'Hide both'
+        },
+        event_token: undefined,
+        ignore_warning: false
+      });
+    });
+  });
 });

src/shared/components/case-editor/case-edit-submit/case-edit-submit.component.ts

@@ -87,7 +87,7 @@ export class CaseEditSubmitComponent implements OnInit, OnDestroy {
 
   submit(): void {
     this.isSubmitting = true;
-    let caseEventData: CaseEventData = this.formValueService.sanitise(this.editForm.value) as CaseEventData;
+    let caseEventData: CaseEventData = this.formValueService.sanitise(this.filterRawFormValues(this.editForm).value) as CaseEventData;
     caseEventData.event_token = this.eventTrigger.event_token;
     caseEventData.ignore_warning = this.ignoreWarning;
     this.caseEdit.submit(caseEventData)
@@ -112,6 +112,33 @@ export class CaseEditSubmitComponent implements OnInit, OnDestroy {
       );
   }
 
+  /**
+   * Filter *all* the values of a {@link FormGroup}, including those for disabled fields (i.e. hidden ones), removing
+   * any whose {@link FormControl} is hidden (disabled) AND whose value is to be retained (i.e. `retain_hidden_value`
+   * = `true`). This is necessary to allow hidden fields whose values are **not** to be retained, to be passed to the
+   * backend to be updated.
+   *
+   * @param formGroup The `FormGroup` instance whose raw values are to be filtered
+   * @returns `formGroup` with the filtered raw form value data (as key-value pairs) in place of the original value data
+   */
+  private filterRawFormValues(formGroup: FormGroup): any {
+    // Get the raw form value data, which includes the values of any disabled controls, as key-value pairs
+    const rawFormValueData = formGroup.getRawValue().data;
+
+    // Discard any value whose FormControl is hidden (status = DISABLED) AND corresponds to a case_field with the
+    // retain_hidden_value flag set to true (these fields should not be updated in the backend)
+    Object.keys(rawFormValueData).forEach((key) => {
+      const case_field = this.eventTrigger.case_fields[key];
+      if ((formGroup.get('data') as FormGroup).get(key).status === 'DISABLED' && case_field && case_field.retain_hidden_value) {
+        delete rawFormValueData[key];
+      }
+    });
+
+    // Set the filtered raw form value data back on the FormGroup
+    formGroup.value.data = rawFormValueData;
+    return formGroup;
+  }
+
   isDisabled(): boolean {
     return this.isSubmitting || !this.editForm.valid || this.hasErrors();
   }

src/shared/components/case-editor/case-edit/case-edit.component.spec.ts

@@ -77,7 +77,7 @@ describe('CaseEditComponent', () => {
 
   const CASE_FIELD_2: CaseField = <CaseField>({
     id: 'PersonLastName',
-    label: 'First name',
+    label: 'Last name',
     field_type: null,
     display_context: 'READONLY'
   });
@@ -538,14 +538,18 @@ describe('CaseEditComponent', () => {
           expect(component.form.get('data').get(CASE_FIELD_3.id)).not.toBeNull();
         });
 
-        it('should navigate to next page when next is called and clear hidden simple form field', () => {
+        it('should navigate to next page when next is called and clear hidden simple form fields with retain_hidden_value true', () => {
           component.wizard = wizard;
           let currentPage = new WizardPage();
           currentPage.wizard_page_fields = [WIZARD_PAGE_1];
           currentPage.case_fields = [CASE_FIELD_1];
           wizard.getPage.and.returnValue(currentPage);
           let nextPage = new WizardPage();
           nextPage.show_condition = 'PersonFirstName=\"John\"';
+          // Ensure retain_hidden_value is true for fields that will be cleared but whose value is to be retained in
+          // the backend (i.e. form control removed to prevent backend update)
+          CASE_FIELD_2.retain_hidden_value = true;
+          CASE_FIELD_3.retain_hidden_value = true;
           nextPage.case_fields = [CASE_FIELD_2, CASE_FIELD_3]
           nextPage.wizard_page_fields = [WIZARD_PAGE_2, WIZARD_PAGE_3];
           wizard.nextPage.and.returnValue(nextPage);

src/shared/domain/definition/case-field.model.ts

@@ -24,6 +24,7 @@ export class CaseField implements Orderable {
   show_summary_content_option?: number;
   acls?: AccessControlList[];
   metadata?: boolean;
+  retain_hidden_value: boolean;
 
   @Type(() => WizardPageField)
   wizardProps?: WizardPageField;

src/shared/fixture/shared.test.fixture.ts

@@ -29,7 +29,8 @@ export let createCaseEventTrigger = (id: string,
 };
 
 export let aCaseField = (id: string, label: string, type: FieldTypeEnum, display_context: string,
-                         show_summary_content_option: number, typeComplexFields: CaseField[] = []): CaseField => {
+                         show_summary_content_option: number, typeComplexFields: CaseField[] = [],
+                         retain_hidden_value?: boolean): CaseField => {
   return <CaseField>({
     id: id || 'personFirstName',
     field_type: {
@@ -39,7 +40,8 @@ export let aCaseField = (id: string, label: string, type: FieldTypeEnum, display
     },
     display_context: display_context || 'OPTIONAL',
     label: label || 'First name',
-    show_summary_content_option: show_summary_content_option
+    show_summary_content_option: show_summary_content_option,
+    retain_hidden_value: retain_hidden_value || false
   });
 };