Merge branch 'master' into EXUI-3457-manage-caseLink-event-not-working

Author: olusegz07

RELEASE-NOTES.md

@@ -1,5 +1,8 @@
 ## RELEASE NOTES
 
+### Version 7.2.47
+**EXUI-2916** Welsh Translation - issues seen during Testing of EXUI-1848
+
 ### Version 7.2.46
 **EXUI-2836** PED: Duplicate calls being received when users leave
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.47-manage-caseLink-event",
+  "version": "7.2.48-manage-caseLink-event",
   "engines": {
     "node": ">=18.19.0"
   },

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

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.47-manage-caseLink-event",
+  "version": "7.2.48-manage-caseLink-event",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/utils/field-label.pipe.ts

@@ -30,4 +30,8 @@ export class FieldLabelPipe implements PipeTransform {
       return field.label;
     }
   }
+
+  public getOriginalLabelForYesNoTranslation(field: CaseField): string {
+    return field.originalLabel || field.label;
+  }
 }

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/yes-no/write-yes-no-field.html

@@ -11,7 +11,7 @@
     <div [id]="createElementId('radio')">
   	  <div class="multiple-choice" *ngFor="let value of yesNoValues" [ngClass]="{selected: yesNoControl.value === value}">
   	    <input class="form-control" [id]="createElementId(value)" [attr.name]="id()" [name]="id()" type="radio" [formControl]="yesNoControl" [value]="value">
-        <label class="form-label" [for]="createElementId(value)">{{caseField.label ? (caseField.label | rpxTranslate:null:value) : value}}</label>
+        <label class="form-label" [for]="createElementId(value)">{{caseField.label ? ((caseField.originalLabel || caseField.label) | rpxTranslate:null:value) : value}}</label>
   	  </div>
     </div>
 	</fieldset>

projects/ccd-case-ui-toolkit/src/lib/shared/directives/substitutor/label-substitutor.directive.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, DebugElement, Input } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { CaseField } from '../../domain/definition/case-field.model';
@@ -10,6 +10,27 @@ import { PlaceholderService } from './services/placeholder.service';
 import createSpyObj = jasmine.createSpyObj;
 import { RpxTranslatePipe, RpxTranslationConfig, RpxTranslationService } from 'rpx-xui-translation';
 import { HttpClient, HttpHandler } from '@angular/common/http';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+
+class MockRpxTranslationService {
+  private langSubject = new BehaviorSubject<string>('en');
+  private _language = 'en';
+  language$ = this.langSubject.asObservable();
+  
+  get language() {
+    return this._language;
+  }
+  
+  set language(lang: string) {
+    this._language = lang;
+    this.langSubject.next(lang);
+  }
+
+  setLanguage(lang: string) {
+    this._language = lang;
+    this.langSubject.next(lang);
+  }
+}
 
 @Component({
   template: `
@@ -73,7 +94,7 @@ describe('LabelSubstitutorDirective', () => {
         FieldsUtils,
         FormatTranslatorService,
         { provide: RpxTranslatePipe, useValue: mockTranslationPipe },
-        RpxTranslationService,
+        { provide: RpxTranslationService, useClass: MockRpxTranslationService },
         RpxTranslationConfig,
         HttpClient,
         HttpHandler,
@@ -728,4 +749,160 @@ describe('LabelSubstitutorDirective', () => {
       expect(placeholderService.resolvePlaceholders).toHaveBeenCalledWith({ LabelB: '', LabelA: TRANSFORMED_VALUES }, label);
     });
   });
-});
+
+  describe('Language change and translation functionality', () => {
+    let translationService: MockRpxTranslationService;
+
+    beforeEach(() => {
+      translationService = TestBed.inject(RpxTranslationService) as any;
+    });
+
+    it('should set isTranslated to false when language is not cy', fakeAsync(() => {
+      const label = 'English label with ${placeholder}';
+      comp.caseField = textField('LabelB', '', label);
+      comp.caseFields = [comp.caseField, textField('LabelA', 'ValueA', '')];
+
+      placeholderService.resolvePlaceholders.and.returnValues('English label with ValueA', '', '');
+      fixture.detectChanges();
+
+      placeholderService.resolvePlaceholders.calls.reset();
+      placeholderService.resolvePlaceholders.and.returnValues('English label with ValueA', '', '');
+
+      translationService.setLanguage('en');
+
+      tick(100);
+      fixture.detectChanges();
+
+      expect(comp.caseField.isTranslated).toBe(false);
+    }));
+
+    it('should translate unsubstituted text first then apply substitutions', () => {
+      const label = 'English text with ${LabelA} placeholder';
+      const translatedTemplate = 'Welsh text with ${LabelA} placeholder';
+      const finalText = 'Welsh text with ValueA placeholder';
+      
+      comp.caseField = textField('LabelB', '', label);
+      comp.caseFields = [comp.caseField, textField('LabelA', 'ValueA', '')];
+
+      placeholderService.resolvePlaceholders.and.returnValues(
+        'English text with ValueA placeholder',
+        finalText,
+        '',
+        ''
+      );
+      mockTranslationPipe.transform.and.returnValue(translatedTemplate);
+
+      fixture.detectChanges();
+
+      expect(mockTranslationPipe.transform).toHaveBeenCalledWith(label);
+      expect(comp.caseField.label).toBe(finalText);
+      expect(placeholderService.resolvePlaceholders).toHaveBeenCalledTimes(4);
+      expect(placeholderService.resolvePlaceholders).toHaveBeenCalledWith(
+        jasmine.objectContaining({ LabelA: 'ValueA' }),
+        translatedTemplate
+      );
+    });
+
+    it('should handle hint_text during language changes', fakeAsync(() => {
+      const initialHint = 'Initial hint with ${placeholder}';
+      comp.caseField = textField('LabelB', '', '', initialHint);
+      comp.caseFields = [comp.caseField, textField('LabelA', 'ValueA', '')];
+
+      placeholderService.resolvePlaceholders.and.callFake((_fields: any, str: any) => {
+        if (str === initialHint) return 'Initial hint with ValueA';
+        if (str === '') return '';
+        return str;
+      });
+      fixture.detectChanges();
+
+      comp.caseField.hint_text = 'Modified hint';
+      
+      placeholderService.resolvePlaceholders.calls.reset();
+      placeholderService.resolvePlaceholders.and.callFake((_fields: any, str: any) => {
+        if (str === initialHint) return 'Initial hint with ValueA after change';
+        if (str === '') return '';
+        return str;
+      });
+
+      translationService.setLanguage('en');
+
+      tick(100);
+      fixture.detectChanges();
+
+      expect(comp.caseField.hint_text).toBe('Initial hint with ValueA after change');
+      expect(hintEl.innerText).toBe('Initial hint with ValueA after change');
+    }));
+
+    it('should not call translation when label has no placeholders', () => {
+      const label = 'Simple label without placeholders';
+      comp.caseField = textField('LabelB', '', label);
+      comp.caseFields = [comp.caseField];
+
+      placeholderService.resolvePlaceholders.and.returnValue(label);
+      fixture.detectChanges();
+
+      expect(mockTranslationPipe.transform).not.toHaveBeenCalled();
+      expect(comp.caseField.label).toBe(label);
+      expect(comp.caseField.isTranslated).toBe(false);
+    });
+
+    it('should handle language change timeout correctly', fakeAsync(() => {
+      const label = 'Label with ${placeholder}';
+      comp.caseField = textField('LabelB', '', label);
+      comp.caseFields = [comp.caseField, textField('LabelA', 'ValueA', '')];
+
+      placeholderService.resolvePlaceholders.and.returnValues('Label with ValueA', '', '');
+      fixture.detectChanges();
+
+      placeholderService.resolvePlaceholders.calls.reset();
+
+      translationService.setLanguage('cy');
+
+      expect(placeholderService.resolvePlaceholders).not.toHaveBeenCalled();
+
+      tick(50);
+      expect(placeholderService.resolvePlaceholders).not.toHaveBeenCalled();
+
+      tick(50);
+      fixture.detectChanges();
+      expect(placeholderService.resolvePlaceholders).toHaveBeenCalled();
+    }));
+
+    it('should clean up language subscription on destroy', () => {
+      const label = 'Test label';
+      comp.caseField = textField('LabelB', '', label);
+      comp.caseFields = [comp.caseField];
+
+      placeholderService.resolvePlaceholders.and.returnValues(label, '', '');
+      fixture.detectChanges();
+
+      const directiveEl = de.query(By.directive(LabelSubstitutorDirective));
+      const directive = directiveEl.injector.get(LabelSubstitutorDirective);
+      spyOn(directive['languageSubscription'], 'unsubscribe');
+
+      fixture.destroy();
+
+      expect(directive['languageSubscription'].unsubscribe).toHaveBeenCalled();
+    });
+
+    it('should restore initial values on destroy', () => {
+      const initialLabel = 'Initial label';
+      const initialHint = 'Initial hint';
+      comp.caseField = textField('LabelB', '', initialLabel, initialHint);
+      comp.caseFields = [comp.caseField];
+
+      placeholderService.resolvePlaceholders.and.returnValues('Modified label', 'Modified hint', '');
+      fixture.detectChanges();
+
+      comp.caseField.label = 'Changed label';
+      comp.caseField.hint_text = 'Changed hint';
+      comp.caseField.isTranslated = true;
+
+      fixture.destroy();
+
+      expect(comp.caseField.label).toBe('Modified label');
+      expect(comp.caseField.hint_text).toBe(initialHint);
+      expect(comp.caseField.isTranslated).toBe(false);
+    });
+  });
+});

projects/ccd-case-ui-toolkit/src/lib/shared/directives/substitutor/label-substitutor.directive.ts

@@ -4,7 +4,8 @@ import { FormGroup } from '@angular/forms';
 import { CaseField } from '../../domain/definition/case-field.model';
 import { FieldsUtils } from '../../services/fields/fields.utils';
 import { PlaceholderService } from './services/placeholder.service';
-import { RpxTranslatePipe } from 'rpx-xui-translation';
+import { RpxTranslatePipe, RpxTranslationService } from 'rpx-xui-translation';
+import { Subscription } from 'rxjs';
 
 @Directive({ selector: '[ccdLabelSubstitutor]' })
 /**
@@ -17,31 +18,44 @@ export class LabelSubstitutorDirective implements OnInit, OnDestroy {
   @Input() public formGroup: FormGroup;
   @Input() public elementsToSubstitute: string[] = ['label', 'hint_text'];
 
-  private initialLabel: string;
   private initialHintText: string;
+  private languageSubscription: Subscription
 
   constructor(
     private readonly fieldsUtils: FieldsUtils,
     private readonly placeholderService: PlaceholderService,
-    private readonly rpxTranslationPipe: RpxTranslatePipe
+    private readonly rpxTranslationPipe: RpxTranslatePipe,
+    private readonly rpxTranslationService: RpxTranslationService
   ) {}
 
   public ngOnInit(): void {
-    this.initialLabel = this.caseField.label;
     this.initialHintText = this.caseField.hint_text;
+    this.caseField.originalLabel = this.caseField.label;
     this.formGroup = this.formGroup || new FormGroup({});
 
+    this.languageSubscription = this.rpxTranslationService.language$.subscribe(() => {
+      // timeout is required to prevent race conditions with translation pipe
+      setTimeout(() => {
+        this.onLanguageChange();
+      }, 100);
+    });
+
+    this.applySubstitutions()
+  }
+
+  private applySubstitutions(): void {
     const fields: object = this.getReadOnlyAndFormFields();
 
     if (this.shouldSubstitute('label')) {
       const oldLabel = this.caseField.label;
       const substitutedLabel = this.resolvePlaceholders(fields, this.caseField.label);
       if (oldLabel && oldLabel !== substitutedLabel) {
         // we need to translate the uninterpolated data then substitute the values in translated string
+        this.caseField.originalLabel = substitutedLabel;
         const translated = this.rpxTranslationPipe.transform(oldLabel)
         const transSubstitutedLabel = this.resolvePlaceholders(fields, translated);
         this.caseField.label = transSubstitutedLabel;
-        this.caseField.isTranslated = true;
+        this.caseField.isTranslated = this.rpxTranslationService.language === 'cy' && translated !== oldLabel;
       } else {
         this.caseField.label = substitutedLabel;
         this.caseField.isTranslated = false;
@@ -55,13 +69,26 @@ export class LabelSubstitutorDirective implements OnInit, OnDestroy {
     }
   }
 
-  public ngOnDestroy(): void {
-    if (this.initialLabel) {
-      this.caseField.label = this.initialLabel;
+  private onLanguageChange(): void {
+    this.resetToInitialValues();
+    this.applySubstitutions();
+  }
+
+  private resetToInitialValues(): void {
+    if (this.caseField?.originalLabel) {
+      this.caseField.label = this.caseField.originalLabel;
     }
     if (this.initialHintText) {
       this.caseField.hint_text = this.initialHintText;
     }
+    this.caseField.isTranslated = false;
+  }
+
+  public ngOnDestroy(): void {
+    this.resetToInitialValues();
+    if (this.languageSubscription) {
+      this.languageSubscription.unsubscribe();
+    }
   }
 
   private shouldSubstitute(element: string): boolean {

projects/ccd-case-ui-toolkit/src/lib/shared/domain/definition/case-field.model.ts

@@ -13,6 +13,7 @@ export class CaseField implements Orderable {
   public hidden: boolean;
   public hiddenCannotChange: boolean;
   public label: string;
+  public originalLabel?: string;
   public order?: number;
   @Exclude()
   public parent?: CaseField;