EUI-8999: Case Flags v2.1 fixes

RELEASE-NOTES.md

@@ -1,4 +1,7 @@
 ## RELEASE NOTES
+### Version 6.19.13-case-flags-v2-1-consolidation-final-fixes-6
+**EUI-8999** Restrict display of the comments visibility warning text to flags not of type "Other (internal)" for the "Create Case Flag" journey, and flags that were previously created as external for the "Manage Case Flags" journey
+
 ### Version 6.19.13-case-flags-v2-manage-case-flags-status-fix
 **EUI-8990** Fix bug where `UpdateFlagComponent` and `ManageCaseFlagsComponent` are using the flag status updated via the UI as if it was the actual persisted status. This causes problems when a user sets the status to "Inactive" or "Not approved", then returns to an earlier point in the "Manage Case Flags" journey via the Case Flag Summary (CYA) page. `UpdateFlagComponent` displays the wrong flag status options or none at all (if "Not approved" was selected previously), and `ManageCaseFlagsComponent` no longer displays the flag in the selection list because it has been wrongly filtered out
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "6.19.13-case-flags-v2-manage-case-flags-status-fix",
+  "version": "6.19.13-case-flags-v2-1-consolidation-final-fixes-6",
   "engines": {
     "yarn": "^3.5.0",
     "npm": "^8.10.0"

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

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "6.19.13-case-flags-v2-manage-case-flags-status-fix",
+  "version": "6.19.13-case-flags-v2-1-consolidation-final-fixes-6",
   "engines": {
     "yarn": "^3.5.0",
     "npm": "^8.10.0"

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/add-comments/add-comments.component.html

@@ -8,7 +8,8 @@ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--m" [for]=
       <div id="add-comments-hint" class="govuk-hint">
         {{addCommentsHint | rpxTranslate}}
       </div>
-      <div class="govuk-warning-text" *ngIf="!isDisplayContextParameterExternal && isDisplayContextParameter2Point1Enabled">
+      <div class="govuk-warning-text"
+        *ngIf="!isDisplayContextParameterExternal && isDisplayContextParameter2Point1Enabled && !otherInternalFlagTypeSelected">
         <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
         <strong class="govuk-warning-text__text">
           <span class="govuk-warning-text__assistive">{{'Warning' | rpxTranslate}}</span>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/add-comments/add-comments.component.spec.ts

@@ -1,15 +1,17 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MockRpxTranslatePipe } from '../../../../../test/mock-rpx-translate.pipe';
-import { AddCommentsErrorMessage, AddCommentsStep, CaseFlagFieldState, CaseFlagWizardStepTitle } from '../../enums';
+import { AddCommentsErrorMessage, AddCommentsStep, CaseFlagFieldState, CaseFlagFormFields, CaseFlagWizardStepTitle } from '../../enums';
 import { AddCommentsComponent } from './add-comments.component';
 
 describe('AddCommentsComponent', () => {
   let component: AddCommentsComponent;
   let fixture: ComponentFixture<AddCommentsComponent>;
   let nextButton: HTMLElement;
   let textareaInput: string;
+  // Code for "Other" flag type as defined in Reference Data
+  const otherFlagTypeCode = 'OT0001';
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -164,9 +166,33 @@ describe('AddCommentsComponent', () => {
     expect(component.addCommentsTitle).toBe(CaseFlagWizardStepTitle.ADD_FLAG_COMMENTS_EXTERNAL_MODE);
   });
 
-  it('should display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled', () => {
+  it('should not display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled and the ' +
+    'selected flag is of type "Other" and is internally visible only', () => {
     component.isDisplayContextParameterExternal = false;
     component.isDisplayContextParameter2Point1Enabled = true;
+    component.formGroup.addControl(CaseFlagFormFields.FLAG_TYPE, new FormControl({ flagCode: otherFlagTypeCode }));
+    component.formGroup.addControl(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY, new FormControl(true));
+    fixture.detectChanges();
+    const warningTextElement = fixture.debugElement.nativeElement.querySelector('.govuk-warning-text');
+    expect(warningTextElement).toBeNull();
+  });
+
+  it('should display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled and the ' +
+    'selected flag is of type "Other" and is externally visible', () => {
+    component.isDisplayContextParameterExternal = false;
+    component.isDisplayContextParameter2Point1Enabled = true;
+    component.formGroup.addControl(CaseFlagFormFields.FLAG_TYPE, new FormControl({ flagCode: otherFlagTypeCode }));
+    component.formGroup.addControl(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY, new FormControl(false));
+    fixture.detectChanges();
+    const warningTextElement = fixture.debugElement.nativeElement.querySelector('.govuk-warning-text');
+    expect(warningTextElement.textContent.trim()).toContain(AddCommentsStep.WARNING_TEXT);
+  });
+
+  it('should display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled and the ' +
+    'selected flag is not of type "Other"', () => {
+    component.isDisplayContextParameterExternal = false;
+    component.isDisplayContextParameter2Point1Enabled = true;
+    component.formGroup.addControl(CaseFlagFormFields.FLAG_TYPE, new FormControl({ flagCode: 'ABC' }));
     fixture.detectChanges();
     const warningTextElement = fixture.debugElement.nativeElement.querySelector('.govuk-warning-text');
     expect(warningTextElement.textContent.trim()).toContain(AddCommentsStep.WARNING_TEXT);

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/add-comments/add-comments.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ErrorMessage } from '../../../../../domain';
 import { CaseFlagState } from '../../domain';
-import { AddCommentsErrorMessage, AddCommentsStep, CaseFlagFieldState, CaseFlagWizardStepTitle } from '../../enums';
+import { AddCommentsErrorMessage, AddCommentsStep, CaseFlagFieldState, CaseFlagFormFields, CaseFlagWizardStepTitle } from '../../enums';
 
 @Component({
   selector: 'ccd-add-comments',
@@ -24,6 +24,13 @@ export class AddCommentsComponent implements OnInit {
   public addCommentsStepEnum = AddCommentsStep;
   public readonly flagCommentsControlName = 'flagComments';
   private readonly commentsMaxCharLimit = 200;
+  // Code for "Other" flag type as defined in Reference Data
+  private readonly otherFlagTypeCode = 'OT0001';
+
+  public get otherInternalFlagTypeSelected(): boolean {
+    return this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.value?.flagCode === this.otherFlagTypeCode &&
+      this.formGroup.get(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY)?.value === true;
+  }
 
   public ngOnInit(): void {
     this.addCommentsTitle = !this.isDisplayContextParameterExternal ?

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/manage-case-flags/manage-case-flags.component.spec.ts

@@ -92,7 +92,8 @@ describe('ManageCaseFlagsComponent', () => {
             ...flag2
           }
         ] as FlagDetail[],
-        flagsCaseFieldId: 'CaseFlag1'
+        flagsCaseFieldId: 'CaseFlag1',
+        visibility: 'Internal'
       },
       pathToFlagsFormGroup: 'CaseFlag1',
       caseField: {
@@ -142,7 +143,8 @@ describe('ManageCaseFlagsComponent', () => {
             ...flag3
           }
         ] as FlagDetail[],
-        flagsCaseFieldId: 'CaseFlag2'
+        flagsCaseFieldId: 'CaseFlag2',
+        visibility: 'External'
       },
       pathToFlagsFormGroup: 'CaseFlag2',
       caseField: {
@@ -357,6 +359,7 @@ describe('ManageCaseFlagsComponent', () => {
     expect(component.flagsDisplayData[0].flagDetailDisplay.flagDetail.flagCode).toEqual(flagsData[0].flags.details[0].flagCode);
     expect(component.flagsDisplayData[0].pathToFlagsFormGroup).toEqual(flagsData[0].pathToFlagsFormGroup);
     expect(component.flagsDisplayData[0].originalStatus).toEqual(flagsData[0].caseField.formatted_value.details[0].value.status);
+    expect(component.flagsDisplayData[0].flagDetailDisplay.visibility).toEqual(flagsData[0].flags.visibility);
     // Check correct mapping of the second party's flags
     expect(component.flagsDisplayData[1].flagDetailDisplay.partyName).toEqual(flagsData[1].flags.partyName);
     expect(component.flagsDisplayData[1].flagDetailDisplay.flagDetail.name).toEqual(flagsData[1].flags.details[1].name);
@@ -461,7 +464,8 @@ describe('ManageCaseFlagsComponent', () => {
         flagDetailDisplay: {
           partyName: flagsData[1].flags.partyName,
           flagDetail: flagsData[1].flags.details[1],
-          flagsCaseFieldId: flagsData[1].flags.flagsCaseFieldId
+          flagsCaseFieldId: flagsData[1].flags.flagsCaseFieldId,
+          visibility: flagsData[1].flags.visibility
         },
         pathToFlagsFormGroup: flagsData[1].pathToFlagsFormGroup,
         caseField: flagsData[1].caseField,

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/manage-case-flags/manage-case-flags.component.ts

@@ -84,7 +84,8 @@ export class ManageCaseFlagsComponent implements OnInit {
       flagDetailDisplay: {
         partyName: flagsInstance.flags.partyName,
         flagDetail,
-        flagsCaseFieldId: flagsInstance.caseField.id
+        flagsCaseFieldId: flagsInstance.caseField.id,
+        visibility: flagsInstance.flags.visibility
       },
       pathToFlagsFormGroup: flagsInstance.pathToFlagsFormGroup,
       caseField: flagsInstance.caseField,

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/select-flag-type/select-flag-type.component.spec.ts

@@ -626,4 +626,19 @@ describe('SelectFlagTypeComponent', () => {
     const flagVisibilityCheckboxEl = fixture.debugElement.nativeElement.querySelector('#is-visible-externally');
     expect(flagVisibilityCheckboxEl).toBeNull();
   });
+
+  it('should set the correct FormControl value when the flag visibility checkbox is checked', () => {
+    fixture.detectChanges();
+    // Select "Other" flag type otherwise the outer containing div element is not rendered
+    const nativeElement = fixture.debugElement.nativeElement;
+    nativeElement.querySelector('#flag-type-2').click();
+    component.isDisplayContextParameterExternal = false;
+    component.isCaseLevelFlag = false;
+    component.isDisplayContextParameter2Point1Enabled = true;
+    fixture.detectChanges();
+    const flagVisibilityCheckboxEl = fixture.debugElement.nativeElement.querySelector('#is-visible-externally');
+    expect(component.formGroup.get(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY).value).toBe(false);
+    flagVisibilityCheckboxEl.click();
+    expect(component.formGroup.get(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY).value).toBe(true);
+  });
 });

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/select-flag-type/select-flag-type.component.ts

@@ -85,7 +85,8 @@ export class SelectFlagTypeComponent implements OnInit, OnDestroy {
 
     this.formGroup.addControl(CaseFlagFormFields.FLAG_TYPE, new FormControl(''));
     this.formGroup.addControl(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION, new FormControl(''));
-    this.formGroup.addControl(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY, new FormControl(''));
+    // FormControl is linked to a checkbox input element, so initial value should be false
+    this.formGroup.addControl(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY, new FormControl(false));
 
     // Should clear descriptionControlName if flagTypeControlName is changed
     this.flagTypeControlChangesSubscription = this.formGroup.get(CaseFlagFormFields.FLAG_TYPE).valueChanges

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/update-flag/update-flag.component.html

@@ -26,7 +26,7 @@ <h1 class="govuk-label-wrapper govuk-!-margin-bottom-4">
                 : (updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL_2_POINT_1 | rpxTranslate)
             }}
           </div>
-          <div class="govuk-warning-text" *ngIf="internalUser2Point1EnabledUpdate">
+          <div class="govuk-warning-text" *ngIf="internalUser2Point1EnabledUpdate && externallyVisibleFlag">
             <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
             <strong class="govuk-warning-text__text">
               <span class="govuk-warning-text__assistive">{{'Warning' | rpxTranslate}}</span>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/update-flag/update-flag.component.spec.ts

@@ -73,7 +73,7 @@ describe('UpdateFlagComponent', () => {
   const selectedFlag1 = {
     flagDetailDisplay: {
       partyName: 'Rose Bank',
-      flagDetail: activeFlag,
+      flagDetail: activeFlag
     },
     pathToFlagsFormGroup: ''
   } as FlagDetailDisplayWithFormGroupPath;
@@ -87,7 +87,8 @@ describe('UpdateFlagComponent', () => {
   const selectedFlag3 = {
     flagDetailDisplay: {
       partyName: 'Rose Bank',
-      flagDetail: requestedFlag
+      flagDetail: requestedFlag,
+      visibility: 'External'
     },
     pathToFlagsFormGroup: ''
   } as FlagDetailDisplayWithFormGroupPath;
@@ -525,8 +526,23 @@ describe('UpdateFlagComponent', () => {
     expect(checkboxWelshTranslation).toBeNull();
   });
 
-  it('should display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled', () => {
+  it('should not display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled and the ' +
+    'selected flag is internally visible only', () => {
     component.displayContextParameter = CaseFlagDisplayContextParameter.UPDATE_2_POINT_1;
+    component.formGroup = new FormGroup({
+      selectedManageCaseLocation: new FormControl(selectedFlag1)
+    });
+    fixture.detectChanges();
+    const warningTextElement = fixture.debugElement.nativeElement.querySelector('.govuk-warning-text');
+    expect(warningTextElement).toBeNull();
+  });
+
+  it('should display the warning text for case workers and internal staff users if Case Flags v2.1 is enabled and the ' +
+    'selected flag is externally visible', () => {
+    component.displayContextParameter = CaseFlagDisplayContextParameter.UPDATE_2_POINT_1;
+    component.formGroup = new FormGroup({
+      selectedManageCaseLocation: new FormControl(selectedFlag3)
+    });
     fixture.detectChanges();
     const warningTextElement = fixture.debugElement.nativeElement.querySelector('.govuk-warning-text');
     expect(warningTextElement.textContent.trim()).toContain(UpdateFlagStep.WARNING_TEXT);

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/components/update-flag/update-flag.component.ts

@@ -42,6 +42,10 @@ export class UpdateFlagComponent implements OnInit {
   public internalUserUpdate = false;
   public internalUser2Point1EnabledUpdate = false;
 
+  public get externallyVisibleFlag(): boolean {
+    return this.selectedFlag.flagDetailDisplay.visibility?.toLowerCase() === 'external';
+  }
+
   constructor(private readonly rpxTranslationService: RpxTranslationService) { }
 
   public ngOnInit(): void {

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-flag/domain/case-flag.model.ts

@@ -43,6 +43,7 @@ export interface FlagDetailDisplay {
   // The flagsCaseFieldId property could be removed in future, given that the full path is now available through the
   // FlagDetailDisplayWithFormGroupPath interface
   flagsCaseFieldId: string;
+  visibility: string;
 }
 
 /**