[ACS-10732] After switching the language and reloading, the app reverts many components back to English. (#5116)

projects/aca-content/src/lib/components/search/search-save/sidenav/save-search-sidenav.component.spec.ts

@@ -22,18 +22,30 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SaveSearchSidenavComponent } from './save-search-sidenav.component';
 import { AppTestingModule } from '../../../../testing/app-testing.module';
+import { EventEmitter } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { SavedSearchesContextService } from '../../../../services/saved-searches-context.service';
 import { SavedSearch } from '@alfresco/adf-content-services';
 import { NavBarLinkRef } from '@alfresco/adf-extensions';
+import { TranslationService } from '@alfresco/adf-core';
+import { LangChangeEvent } from '@ngx-translate/core';
+
+interface TranslationServiceMock {
+  instant: jasmine.Spy<(key: string) => string>;
+  translate: {
+    onLangChange: EventEmitter<LangChangeEvent>;
+  };
+}
 
 describe('SaveSearchSidenavComponent', () => {
   let fixture: ComponentFixture<SaveSearchSidenavComponent>;
   let component: SaveSearchSidenavComponent;
   let savedSearchesService: SavedSearchesContextService;
+  let translationServiceMock: TranslationServiceMock;
+  const langChangeEmitter = new EventEmitter<LangChangeEvent>();
 
   beforeEach(() => {
     const mockService: Partial<SavedSearchesContextService> = {
@@ -43,12 +55,24 @@ describe('SaveSearchSidenavComponent', () => {
         return of([]);
       }
     };
+
+    translationServiceMock = {
+      instant: jasmine.createSpy('instant').and.callFake((key: string) => key),
+      translate: {
+        onLangChange: langChangeEmitter
+      }
+    };
+
     TestBed.configureTestingModule({
       imports: [AppTestingModule, SaveSearchSidenavComponent],
       providers: [
         {
           provide: SavedSearchesContextService,
           useValue: mockService
+        },
+        {
+          provide: TranslationService,
+          useValue: translationServiceMock
         }
       ]
     });
@@ -81,11 +105,11 @@ describe('SaveSearchSidenavComponent', () => {
     });
   });
 
-  it('should set navbar object with children is searches are saved', fakeAsync(() => {
+  it('should set navbar object with children if searches are saved', () => {
     spyOnProperty(savedSearchesService, 'savedSearches$', 'get').and.returnValue(of([{ name: '1', order: 0, encodedUrl: 'abc' }]));
     component.ngOnInit();
     fixture.detectChanges();
-    tick(100);
+
     expect(component.item.children[0]).toEqual({
       icon: '',
       title: '1',
@@ -94,7 +118,19 @@ describe('SaveSearchSidenavComponent', () => {
       url: 'search?q=abc',
       id: 'search1'
     });
-  }));
+  });
+
+  it('should update title when language changes', () => {
+    spyOnProperty(savedSearchesService, 'savedSearches$', 'get').and.returnValue(of([{ name: '1', order: 0, encodedUrl: 'abc' }]));
+    translationServiceMock.instant.and.returnValue('Translated Title (1)');
+
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    langChangeEmitter.emit({ lang: 'de', translations: {} });
+
+    expect(component.item.title).toBe('Translated Title (1)');
+  });
 
   describe('onActionClicked', () => {
     beforeEach(() => {

projects/aca-content/src/lib/components/search/search-save/sidenav/save-search-sidenav.component.ts

@@ -24,11 +24,10 @@
 
 import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { SavedSearch } from '@alfresco/adf-content-services';
-import { TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
+import { TranslationService } from '@alfresco/adf-core';
 import { NavBarLinkRef } from '@alfresco/adf-extensions';
 import { ExpandMenuComponent } from '../../../sidenav/components/expand-menu.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { delay } from 'rxjs/operators';
 import { SavedSearchesContextService } from '../../../../services/saved-searches-context.service';
 
 @Component({
@@ -47,7 +46,6 @@ export class SaveSearchSidenavComponent implements OnInit {
 
   private readonly manageSearchesId = 'manage-saved-searches';
   private readonly destroyRef = inject(DestroyRef);
-  private readonly userPreferenceService = inject(UserPreferencesService);
 
   ngOnInit() {
     this.savedSearchesService.init();
@@ -56,14 +54,11 @@ export class SaveSearchSidenavComponent implements OnInit {
       this.savedSearchCount = savedSearches.length;
       this.savedSearches = savedSearches;
     });
-    this.userPreferenceService
-      .select(UserPreferenceValues.Locale)
-      .pipe(takeUntilDestroyed(this.destroyRef), delay(10))
-      .subscribe(() => {
-        if (this.item) {
-          this.item.title = this.translationService.instant('APP.BROWSE.SEARCH.SAVE_SEARCH.NAVBAR.TITLE', { number: this.savedSearchCount });
-        }
-      });
+    this.translationService.translate.onLangChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      if (this.item) {
+        this.item.title = this.translationService.instant('APP.BROWSE.SEARCH.SAVE_SEARCH.NAVBAR.TITLE', { number: this.savedSearchCount });
+      }
+    });
   }
 
   onActionClicked(selectedLinkRef: NavBarLinkRef): void {