SF-3558 Update draft generation UI on language change (#3474)

Author: pmachapman

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-history-list/draft-history-entry/draft-history-entry.component.html

@@ -7,7 +7,7 @@
     >
       <mat-expansion-panel-header [collapsedHeight]="'auto'" [expandedHeight]="'auto'">
         <mat-panel-title>
-          <span class="title">{{ scriptureRange }}</span>
+          <span class="title">{{ i18n.formatAndLocalizeScriptureRange(scriptureRange) }}</span>
           <span class="subtitle">
             {{ translationSource }}
             {{ t("finished_at", { finishedAtTime: formatDate(entry.additionalInfo?.dateFinished) }) }}
@@ -110,7 +110,9 @@
               <table mat-table [dataSource]="trainingConfiguration">
                 <ng-container matColumnDef="scriptureRange">
                   <th mat-header-cell *matHeaderCellDef>{{ t("training_books") }}</th>
-                  <td mat-cell *matCellDef="let element">{{ element.scriptureRange }}</td>
+                  <td mat-cell *matCellDef="let element" class="scriptureRange">
+                    {{ i18n.formatAndLocalizeScriptureRange(element.scriptureRange) }}
+                  </td>
                 </ng-container>
                 <ng-container matColumnDef="source">
                   <th mat-header-cell *matHeaderCellDef>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-history-list/draft-history-entry/draft-history-entry.component.spec.ts

@@ -116,7 +116,8 @@ describe('DraftHistoryEntryComponent', () => {
       tick();
       fixture.detectChanges();
 
-      expect(component.scriptureRange).toEqual('Genesis');
+      expect(component.scriptureRange).toEqual('GEN');
+      expect(fixture.nativeElement.querySelector('.title').innerText).toBe('Genesis');
       expect(component.translationSource).toEqual('src \u2022');
       expect(component.buildRequestedByUserName).toBe(user);
       expect(component.buildRequestedAtDate).toBe(date);
@@ -129,13 +130,14 @@ describe('DraftHistoryEntryComponent', () => {
       expect(component.targetLanguage).toBe('en');
       expect(component.trainingConfiguration).toEqual([
         {
-          scriptureRange: 'Exodus',
+          scriptureRange: 'EXO',
           source: 'src',
           target: 'tar'
         }
       ]);
       expect(component.trainingDataFiles).toEqual(Array.from(trainingDataFiles.values()));
       expect(component.trainingConfigurationOpen).toBe(false);
+      expect(fixture.nativeElement.querySelector('.scriptureRange')).toBeNull();
       expect(fixture.nativeElement.querySelector('.requested-label')).not.toBeNull();
     }));
 
@@ -171,7 +173,8 @@ describe('DraftHistoryEntryComponent', () => {
       tick();
       fixture.detectChanges();
 
-      expect(component.scriptureRange).toEqual('Genesis');
+      expect(component.scriptureRange).toEqual('GEN');
+      expect(fixture.nativeElement.querySelector('.title').innerText).toBe('Genesis');
       expect(component.draftIsAvailable).toBe(true);
       expect(fixture.nativeElement.querySelector('.format-usfm')).not.toBeNull();
     }));
@@ -204,7 +207,8 @@ describe('DraftHistoryEntryComponent', () => {
       tick();
       fixture.detectChanges();
 
-      expect(component.scriptureRange).toEqual('Genesis');
+      expect(component.scriptureRange).toEqual('GEN');
+      expect(fixture.nativeElement.querySelector('.title').innerText).toBe('Genesis');
       expect(component.translationSource).toEqual('');
       expect(component.buildRequestedByUserName).toBeUndefined();
       expect(component.buildRequestedAtDate).toBe('');
@@ -217,12 +221,13 @@ describe('DraftHistoryEntryComponent', () => {
       expect(component.targetLanguage).toBe('');
       expect(component.trainingConfiguration).toEqual([
         {
-          scriptureRange: 'Exodus',
+          scriptureRange: 'EXO',
           source: 'Unknown',
           target: 'Unknown'
         }
       ]);
       expect(component.trainingConfigurationOpen).toBe(true);
+      expect(fixture.nativeElement.querySelector('.scriptureRange').innerText).toBe('Exodus');
     }));
 
     it('should handle builds with additional info referencing a deleted user', fakeAsync(() => {
@@ -252,7 +257,8 @@ describe('DraftHistoryEntryComponent', () => {
       tick();
       fixture.detectChanges();
 
-      expect(component.scriptureRange).toEqual('Genesis');
+      expect(component.scriptureRange).toEqual('GEN');
+      expect(fixture.nativeElement.querySelector('.title').innerText).toBe('Genesis');
       expect(component.buildRequestedByUserName).toBeUndefined();
       expect(component.buildRequestedAtDate).toBe('formatted-date');
       expect(component.draftIsAvailable).toBe(true);

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-history-list/draft-history-entry/draft-history-entry.component.ts

@@ -71,7 +71,7 @@ export class DraftHistoryEntryComponent {
     // Get the user who requested the build
     this._buildRequestedByUserName = undefined;
     if (this._entry?.additionalInfo?.requestedByUserId != null) {
-      this.userService.getProfile(this._entry.additionalInfo.requestedByUserId).then(user => {
+      void this.userService.getProfile(this._entry.additionalInfo.requestedByUserId).then(user => {
         if (user.data != null) {
           this._buildRequestedByUserName = user.data.displayName;
         }
@@ -85,7 +85,7 @@ export class DraftHistoryEntryComponent {
 
     // Get the books used in the training configuration
     const trainingScriptureRanges = this._entry?.additionalInfo?.trainingScriptureRanges ?? [];
-    Promise.all(
+    void Promise.all(
       trainingScriptureRanges.map(async r => {
         // The engine ID is the target project ID
         let target: SFProjectProfileDoc | undefined = undefined;
@@ -104,7 +104,7 @@ export class DraftHistoryEntryComponent {
 
         // Return the data for this training range
         return {
-          scriptureRange: this.i18n.formatAndLocalizeScriptureRange(r.scriptureRange),
+          scriptureRange: r.scriptureRange,
           source: source?.data?.shortName ?? this.i18n.translateStatic('draft_history_entry.draft_unknown'),
           target: target?.data?.shortName ?? this.i18n.translateStatic('draft_history_entry.draft_unknown')
         } as TrainingConfigurationRow;
@@ -121,11 +121,9 @@ export class DraftHistoryEntryComponent {
 
     // Get the translation scripture range and project (usually one, but in the future will be multiple)
     const translationScriptureRanges = this._entry?.additionalInfo?.translationScriptureRanges ?? [];
-    this._scriptureRange = this.i18n.formatAndLocalizeScriptureRange(
-      translationScriptureRanges.map(item => item.scriptureRange).join(';')
-    );
+    this._scriptureRange = translationScriptureRanges.map(item => item.scriptureRange).join(';');
     this._translationSources = [];
-    Promise.all(
+    void Promise.all(
       translationScriptureRanges.map(async r => {
         const source =
           r.projectId === '' || r.projectId === value?.engine?.id
@@ -139,7 +137,7 @@ export class DraftHistoryEntryComponent {
     const trainingDataFiles: string[] = this._entry?.additionalInfo?.trainingDataFileIds ?? [];
     if (this.activatedProjectService.projectId != null && trainingDataFiles.length > 0) {
       this.dataFileQuery?.dispose();
-      this.trainingDataService
+      void this.trainingDataService
         .queryTrainingDataAsync(this.activatedProjectService.projectId, this.destroyRef)
         .then(query => {
           this.dataFileQuery = query;