SF-3192 Fix book names on the Auto Draft page on UI language changes (#3364)

Author: pmachapman

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-preview-books/draft-preview-books.component.html

@@ -1,12 +1,12 @@
 <ng-container *transloco="let t; read: 'draft_preview_books'">
-  @for (book of booksWithDrafts$ | async; track book.bookNumber) {
+  @for (book of booksWithDrafts$ | async; track book.bookId) {
     <mat-button-toggle-group
       class="draft-book-option"
       [disabled]="book.chaptersWithDrafts.length === 0"
       (change)="$event.source.checked = false"
     >
       <mat-button-toggle class="book-name" (click)="navigate(book)">
-        {{ bookNumberToName(book.bookNumber) }}
+        {{ "canon.book_names." + book.bookId | transloco }}
       </mat-button-toggle>
       <mat-button-toggle class="book-more" [mat-menu-trigger-for]="menu">
         <mat-icon>more_vert</mat-icon>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-preview-books/draft-preview-books.component.spec.ts

@@ -13,7 +13,6 @@ import { anything, capture, instance, mock, verify, when } from 'ts-mockito';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { DialogService } from 'xforge-common/dialog.service';
 import { ErrorReportingService } from 'xforge-common/error-reporting.service';
-import { I18nService } from 'xforge-common/i18n.service';
 import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
 import { UserService } from 'xforge-common/user.service';
 import { SFProjectProfileDoc } from '../../../core/models/sf-project-profile-doc';
@@ -27,7 +26,6 @@ import { BookWithDraft, DraftPreviewBooksComponent } from './draft-preview-books
 
 const mockedActivatedProjectService = mock(ActivatedProjectService);
 const mockedProjectService = mock(SFProjectService);
-const mockedI18nService = mock(I18nService);
 const mockedUserService = mock(UserService);
 const mockedDraftHandlingService = mock(DraftHandlingService);
 const mockedDialogService = mock(DialogService);
@@ -43,7 +41,6 @@ describe('DraftPreviewBooks', () => {
     providers: [
       { provide: ActivatedProjectService, useMock: mockedActivatedProjectService },
       { provide: SFProjectService, useMock: mockedProjectService },
-      { provide: I18nService, useMock: mockedI18nService },
       { provide: UserService, useMock: mockedUserService },
       { provide: DraftHandlingService, useMock: mockedDraftHandlingService },
       { provide: DialogService, useMock: mockedDialogService },
@@ -371,15 +368,14 @@ class TestEnvironment {
   } as SFProjectProfileDoc;
 
   booksWithDrafts: BookWithDraft[] = [
-    { bookNumber: 1, canEdit: true, chaptersWithDrafts: [1, 2, 3], draftApplied: false },
-    { bookNumber: 2, canEdit: true, chaptersWithDrafts: [1], draftApplied: false },
-    { bookNumber: 3, canEdit: false, chaptersWithDrafts: [1, 2], draftApplied: false }
+    { bookNumber: 1, bookId: 'GEN', canEdit: true, chaptersWithDrafts: [1, 2, 3], draftApplied: false },
+    { bookNumber: 2, bookId: 'EXO', canEdit: true, chaptersWithDrafts: [1], draftApplied: false },
+    { bookNumber: 3, bookId: 'LEV', canEdit: false, chaptersWithDrafts: [1, 2], draftApplied: false }
   ];
 
   constructor(build: BuildDto | undefined = undefined) {
     when(mockedActivatedProjectService.changes$).thenReturn(of(this.mockProjectDoc));
     when(mockedActivatedProjectService.projectDoc).thenReturn(this.mockProjectDoc);
-    when(mockedI18nService.localizeBook(1)).thenReturn('Genesis');
     when(
       mockedDraftHandlingService.getAndApplyDraftAsync(anything(), anything(), anything(), anything())
     ).thenResolve();

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-preview-books/draft-preview-books.component.ts

@@ -11,7 +11,6 @@ import { BehaviorSubject, firstValueFrom, map, Observable, tap } from 'rxjs';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { DialogService } from 'xforge-common/dialog.service';
 import { ErrorReportingService } from 'xforge-common/error-reporting.service';
-import { I18nService } from 'xforge-common/i18n.service';
 import { UICommonModule } from 'xforge-common/ui-common.module';
 import { UserService } from 'xforge-common/user.service';
 import { filterNullish } from 'xforge-common/util/rxjs-util';
@@ -34,6 +33,7 @@ import { DraftHandlingService } from '../draft-handling.service';
 
 export interface BookWithDraft {
   bookNumber: number;
+  bookId: string;
   canEdit: boolean;
   chaptersWithDrafts: number[];
   draftApplied: boolean;
@@ -61,6 +61,7 @@ export class DraftPreviewBooksComponent {
         draftBooks = projectDoc.data.texts
           .map(text => ({
             bookNumber: text.bookNum,
+            bookId: Canon.bookNumberToId(text.bookNum),
             canEdit: text.permissions[this.userService.currentUserId] === TextInfoPermission.Write,
             chaptersWithDrafts: text.chapters.filter(chapter => chapter.hasDraft).map(chapter => chapter.number),
             draftApplied: text.chapters.filter(chapter => chapter.hasDraft).every(chapter => chapter.draftApplied)
@@ -75,6 +76,7 @@ export class DraftPreviewBooksComponent {
             const text: TextInfo | undefined = projectDoc.data?.texts.find(t => t.bookNum === bookNum);
             return {
               bookNumber: bookNum,
+              bookId: Canon.bookNumberToId(bookNum),
               canEdit: text?.permissions?.[this.userService.currentUserId] === TextInfoPermission.Write,
               chaptersWithDrafts: text?.chapters?.map(ch => ch.number) ?? [],
               draftApplied: text?.chapters?.filter(ch => ch.hasDraft).every(ch => ch.draftApplied) ?? false
@@ -101,7 +103,6 @@ export class DraftPreviewBooksComponent {
   constructor(
     private readonly activatedProjectService: ActivatedProjectService,
     private readonly projectService: SFProjectService,
-    private readonly i18n: I18nService,
     private readonly userService: UserService,
     private readonly draftHandlingService: DraftHandlingService,
     private readonly dialogService: DialogService,
@@ -114,22 +115,8 @@ export class DraftPreviewBooksComponent {
     return this.chaptersApplied.length;
   }
 
-  linkForBookAndChapter(bookNumber: number, chapterNumber: number): string[] {
-    return [
-      '/projects',
-      this.activatedProjectService.projectId!,
-      'translate',
-      this.bookNumberToBookId(bookNumber),
-      chapterNumber.toString()
-    ];
-  }
-
-  bookNumberToBookId(bookNumber: number): string {
-    return Canon.bookNumberToId(bookNumber);
-  }
-
-  bookNumberToName(bookNumber: number): string {
-    return this.i18n.localizeBook(bookNumber);
+  linkForBookAndChapter(bookId: string, chapterNumber: number): string[] {
+    return ['/projects', this.activatedProjectService.projectId!, 'translate', bookId, chapterNumber.toString()];
   }
 
   async chooseProjectToAddDraft(bookWithDraft: BookWithDraft, paratextId?: string): Promise<void> {
@@ -197,7 +184,7 @@ export class DraftPreviewBooksComponent {
   }
 
   navigate(book: BookWithDraft): void {
-    this.router.navigate(this.linkForBookAndChapter(book.bookNumber, book.chaptersWithDrafts[0]), {
+    this.router.navigate(this.linkForBookAndChapter(book.bookId, book.chaptersWithDrafts[0]), {
       queryParams: { 'draft-active': true, 'draft-timestamp': this.build?.additionalInfo?.dateGenerated }
     });
   }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/editor-draft/editor-draft.component.html

@@ -3,7 +3,7 @@
     <mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
   } @else if (draftCheckState === "draft-empty") {
     <app-notice icon="info" type="primary" mode="outline">
-      {{ "editor_draft_tab.no_draft_notice" | transloco: { bookChapterName } }}
+      {{ "editor_draft_tab.no_draft_notice" | transloco: { bookChapterName: this.getLocalizedBookChapter() } }}
       <p>{{ "editor_draft_tab.click_book_to_preview" | transloco }}</p>
       <app-draft-preview-books></app-draft-preview-books>
     </app-notice>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/editor-draft/editor-draft.component.spec.ts

@@ -471,7 +471,7 @@ describe('EditorDraftComponent', () => {
     });
 
     it('should return a localized book and chapter if both are not null', () => {
-      when(mockI18nService.localizeBook(1)).thenReturn('Localized Book');
+      when(mockI18nService.localizeBookChapter(1, 1)).thenReturn('Localized Book 1');
       component.bookNum = 1;
       component.chapter = 1;
       expect(component['getLocalizedBookChapter']()).toEqual('Localized Book 1');

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/editor-draft/editor-draft.component.ts

@@ -58,7 +58,6 @@ export class EditorDraftComponent implements AfterViewInit, OnChanges {
   draftCheckState: 'draft-unknown' | 'draft-present' | 'draft-legacy' | 'draft-empty' = 'draft-unknown';
   draftRevisions: Revision[] = [];
   selectedRevision: Revision | undefined;
-  bookChapterName = '';
   generateDraftUrl?: string;
   targetProject?: SFProjectProfile;
   textDocId?: TextDocId;
@@ -268,7 +267,6 @@ export class EditorDraftComponent implements AfterViewInit, OnChanges {
 
   private setInitialState(): void {
     this.draftCheckState = 'draft-unknown';
-    this.bookChapterName = this.getLocalizedBookChapter();
     this.isDraftReady = false;
     this.isDraftApplied = false;
     this.userAppliedDraft = false;
@@ -313,12 +311,12 @@ export class EditorDraftComponent implements AfterViewInit, OnChanges {
     return hasContent ?? false;
   }
 
-  private getLocalizedBookChapter(): string {
+  protected getLocalizedBookChapter(): string {
     if (this.bookNum == null || this.chapter == null) {
       return '';
     }
 
-    return this.i18n.localizeBook(this.bookNum) + ' ' + this.chapter;
+    return this.i18n.localizeBookChapter(this.bookNum, this.chapter);
   }
 
   private getTargetOps(): Observable<DeltaOperation[]> {