SF-3917 Add a link to Low Draft Quality banner

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-builds.component.html

@@ -105,10 +105,7 @@
                   <mat-icon class="problem-badge" [matTooltip]="problemsBadgeTooltip(row)">warning</mat-icon>
                 }
               </div>
-              <app-display-confidence
-                [lowConfidence]="hasLowConfidence(row)"
-                [showText]="false"
-              ></app-display-confidence>
+              <app-display-confidence [showIcon]="hasLowConfidence(row)"></app-display-confidence>
             </div>
           </td>
         </ng-container>
@@ -594,10 +591,7 @@
                                       {{ "canon.book_names." + getBookId(bookConfidence) | transloco }}
                                     </span>
                                     <span class="detail-value">
-                                      <app-display-confidence
-                                        [lowConfidence]="true"
-                                        [showText]="true"
-                                      ></app-display-confidence>
+                                      <app-display-confidence [showIconAndText]="true"></app-display-confidence>
                                     </span>
                                   </div>
                                 }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/build-confidences/display-confidence.component.html

@@ -1,12 +1,32 @@
 <ng-container *transloco="let t; read: 'draft_confidence'">
-  @if (lowConfidence) {
-    @if (showText) {
-      <div class="confidence red">
-        <mat-icon [matTooltip]="t('low_confidence')">warning</mat-icon>
-        <span>{{ t("low_confidence") }}</span>
-      </div>
-    } @else {
-      <mat-icon [matTooltip]="t('low_confidence')" class="red">warning</mat-icon>
+  @if (showNotice) {
+    @if (booksWithLowConfidence === 1) {
+      <app-notice type="error">
+        <transloco
+          key="draft_confidence.low_confidence_book"
+          [params]="{
+            book: bookNameWithLowConfidence ?? t('one_book'),
+            learnMoreLink: urlService.improvingDraftQuality
+          }"
+        ></transloco>
+      </app-notice>
+    } @else if (booksWithLowConfidence > 1) {
+      <app-notice type="error">
+        <transloco
+          key="draft_confidence.low_confidence_books"
+          [params]="{
+            number: booksWithLowConfidence,
+            learnMoreLink: urlService.improvingDraftQuality
+          }"
+        ></transloco>
+      </app-notice>
     }
+  } @else if (showIconAndText) {
+    <div class="confidence red">
+      <mat-icon [matTooltip]="t('low_confidence')">warning</mat-icon>
+      <span>{{ t("low_confidence") }}</span>
+    </div>
+  } @else if (showIcon) {
+    <mat-icon [matTooltip]="t('low_confidence')" class="red">warning</mat-icon>
   }
 </ng-container>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/build-confidences/display-confidence.component.spec.ts

@@ -10,42 +10,79 @@ describe('DisplayConfidenceComponent', () => {
   }));
 
   it('low confidence with icon and text', () => {
-    const env = new TestEnvironment(true, true);
+    const env = new TestEnvironment(false, true, false);
     expect(env.icon).not.toBeNull();
     expect(env.text).not.toBeNull();
+    expect(env.notice).toBeNull();
   });
 
   it('low confidence icon only', () => {
-    const env = new TestEnvironment(true, false);
+    const env = new TestEnvironment(true, false, false);
     expect(env.icon).not.toBeNull();
     expect(env.text).toBeNull();
+    expect(env.notice).toBeNull();
   });
 
   it('not low confidence', () => {
-    const env = new TestEnvironment(false, true);
+    const env = new TestEnvironment(false, false, false);
     expect(env.icon).toBeNull();
     expect(env.text).toBeNull();
+    expect(env.notice).toBeNull();
+  });
+
+  it('low confidence notice one book with name', () => {
+    const env = new TestEnvironment(false, false, true, 1, 'Genesis');
+    expect(env.icon).toBeNull();
+    expect(env.text).toBeNull();
+    expect(env.notice).not.toBeNull();
+  });
+
+  it('low confidence notice one book', () => {
+    const env = new TestEnvironment(false, false, true, 1);
+    expect(env.icon).toBeNull();
+    expect(env.text).toBeNull();
+    expect(env.notice).not.toBeNull();
+  });
+
+  it('low confidence notice multiple books', () => {
+    const env = new TestEnvironment(false, false, true, 2);
+    expect(env.icon).toBeNull();
+    expect(env.text).toBeNull();
+    expect(env.notice).not.toBeNull();
   });
 
   /** Provides helpers for constructing test data for DisplayConfidenceComponent tests. */
   class TestEnvironment {
     readonly component: DisplayConfidenceComponent;
     readonly fixture: ComponentFixture<DisplayConfidenceComponent>;
 
-    constructor(lowConfidence: boolean, showText: boolean) {
+    constructor(
+      showIcon: boolean,
+      showIconAndText: boolean,
+      showNotice: boolean,
+      booksWithLowConfidence: number = 0,
+      bookNameWithLowConfidence: string | undefined = undefined
+    ) {
       this.fixture = TestBed.createComponent(DisplayConfidenceComponent);
       this.component = this.fixture.componentInstance;
-      this.component.lowConfidence = lowConfidence;
-      this.component.showText = showText;
+      this.component.showIcon = showIcon;
+      this.component.showIconAndText = showIconAndText;
+      this.component.showNotice = showNotice;
+      this.component.booksWithLowConfidence = booksWithLowConfidence;
+      this.component.bookNameWithLowConfidence = bookNameWithLowConfidence;
       this.fixture.detectChanges();
     }
 
     get icon(): DebugElement {
       return this.fixture.debugElement.query(By.css('mat-icon'));
     }
 
+    get notice(): DebugElement {
+      return this.fixture.debugElement.query(By.css('app-notice'));
+    }
+
     get text(): DebugElement {
-      return this.fixture.debugElement.query(By.css('span'));
+      return this.fixture.debugElement.query(By.css('.red span'));
     }
   }
 });

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/build-confidences/display-confidence.component.ts

@@ -2,17 +2,24 @@ import { Component, Input } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoMarkupModule } from 'ngx-transloco-markup';
+import { ExternalUrlService } from 'xforge-common/external-url.service';
+import { NoticeComponent } from '../../../shared/notice/notice.component';
 
 @Component({
   selector: 'app-display-confidence',
   templateUrl: './display-confidence.component.html',
   styleUrl: './display-confidence.component.scss',
-  imports: [MatIcon, MatTooltip, TranslocoModule]
+  imports: [MatIcon, MatTooltip, NoticeComponent, TranslocoModule, TranslocoMarkupModule]
 })
 /**
  * Displays the confidence value in an human-friendly format.
  */
 export class DisplayConfidenceComponent {
-  @Input() showText: boolean | undefined;
-  @Input() lowConfidence: boolean | undefined;
+  constructor(protected readonly urlService: ExternalUrlService) {}
+  @Input() bookNameWithLowConfidence: string | undefined;
+  @Input() booksWithLowConfidence: number = 0;
+  @Input() showIcon: boolean | undefined;
+  @Input() showIconAndText: boolean | undefined;
+  @Input() showNotice: boolean | undefined;
 }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/build-confidences/display-confidence.stories.ts

@@ -1,22 +1,40 @@
-import { Meta, StoryObj } from '@storybook/angular';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { defaultTranslocoMarkupTranspilers } from 'ngx-transloco-markup';
 import { DisplayConfidenceComponent } from './display-confidence.component';
 
 const meta: Meta<DisplayConfidenceComponent> = {
   title: 'Draft/Display Confidence Label',
-  component: DisplayConfidenceComponent
+  component: DisplayConfidenceComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [defaultTranslocoMarkupTranspilers()]
+    })
+  ]
 };
 export default meta;
 
 type Story = StoryObj<DisplayConfidenceComponent>;
 
 export const NotLowConfidence: Story = {
-  args: { lowConfidence: false, showText: true }
+  args: { showIcon: false, showIconAndText: false }
 };
 
 export const LowConfidenceWithIconAndText: Story = {
-  args: { lowConfidence: true, showText: true }
+  args: { showIcon: false, showIconAndText: true }
 };
 
 export const LowConfidenceIconOnly: Story = {
-  args: { lowConfidence: true, showText: false }
+  args: { showIcon: true, showIconAndText: false }
+};
+
+export const NoticeOneBookWithName: Story = {
+  args: { showNotice: true, bookNameWithLowConfidence: 'Genesis', booksWithLowConfidence: 1 }
+};
+
+export const NoticeOneBook: Story = {
+  args: { showNotice: true, booksWithLowConfidence: 1 }
+};
+
+export const NoticeMultipleBooks: Story = {
+  args: { showNotice: true, booksWithLowConfidence: 2 }
 };

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

@@ -15,10 +15,7 @@
         </mat-panel-title>
         <mat-panel-description>
           <span class="status" [ngClass]="getStatus(entry.state).color">
-            <app-display-confidence
-              [lowConfidence]="hasLowConfidence(entry)"
-              [showText]="true"
-            ></app-display-confidence>
+            <app-display-confidence [showIconAndText]="hasLowConfidence(entry)"></app-display-confidence>
             <mat-icon class="status-icon">{{ getStatus(entry.state).icons }}</mat-icon>
             {{ t(getStatus(entry.state).text) }}
           </span>
@@ -38,17 +35,11 @@
           </div>
         } @else {
           @if (draftIsAvailable) {
-            @if (hasLowConfidence(entry)) {
-              @if (booksWithLowConfidence(entry) > 1) {
-                <app-notice type="error" data-test-id="low-confidence-books">{{
-                  t("low_confidence_books", { number: booksWithLowConfidence(entry) })
-                }}</app-notice>
-              } @else {
-                <app-notice type="error" data-test-id="low-confidence-book">{{
-                  t("low_confidence_book", { book: lowConfidenceBookName(entry) })
-                }}</app-notice>
-              }
-            }
+            <app-display-confidence
+              [bookNameWithLowConfidence]="lowConfidenceBookName(entry)"
+              [booksWithLowConfidence]="booksWithLowConfidence(entry)"
+              [showNotice]="true"
+            ></app-display-confidence>
             <p>{{ t("click_book_to_preview_draft") }}</p>
             <p class="book-buttons">
               <app-draft-preview-books [build]="entry" />

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

@@ -534,8 +534,8 @@ describe('DraftHistoryEntryComponent', () => {
       tick();
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.querySelector('[data-test-id="low-confidence-book"]')).not.toBeNull();
-      expect(fixture.nativeElement.querySelector('[data-test-id="low-confidence-books"]')).toBeNull();
+      expect(component.booksWithLowConfidence(entry)).toBe(1);
+      expect(fixture.nativeElement.querySelector('app-display-confidence')).not.toBeNull();
     }));
 
     it('should show the multiple book low confidence warning if more than one book has low confidence', fakeAsync(() => {
@@ -565,8 +565,8 @@ describe('DraftHistoryEntryComponent', () => {
       tick();
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.querySelector('[data-test-id="low-confidence-book"]')).toBeNull();
-      expect(fixture.nativeElement.querySelector('[data-test-id="low-confidence-books"]')).not.toBeNull();
+      expect(component.booksWithLowConfidence(entry)).toBe(2);
+      expect(fixture.nativeElement.querySelector('app-display-confidence')).not.toBeNull();
     }));
   });
 

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

@@ -34,7 +34,6 @@ import { PermissionsService } from '../../../../core/permissions.service';
 import { SFProjectService } from '../../../../core/sf-project.service';
 import { BuildDto, ServalDiagnosticCode } from '../../../../machine-api/build-dto';
 import { BuildStates } from '../../../../machine-api/build-states';
-import { NoticeComponent } from '../../../../shared/notice/notice.component';
 import { trainingSourceRangesWithTargetDetail, VerboseScriptureRange } from '../../../../shared/scripture-range';
 import { formatScriptureRangeWithChapters } from '../../../../shared/scripture-range-display';
 import { RIGHT_TO_LEFT_MARK } from '../../../../shared/verse-utils';
@@ -97,7 +96,6 @@ interface SourceInfo {
     MatHeaderRowDef,
     MatRow,
     MatRowDef,
-    NoticeComponent,
     RouterLink,
     TranslocoModule,
     TranslocoMarkupModule
@@ -378,22 +376,22 @@ export class DraftHistoryEntryComponent {
     });
   }
 
-  protected hasLowConfidence(build: BuildDto): boolean {
-    return hasLowConfidence(build);
+  booksWithLowConfidence(build: BuildDto): number {
+    return build?.executionData?.diagnostics?.filter(d => d.code === ServalDiagnosticCode.LowConfidence).length ?? 0;
   }
 
-  protected booksWithLowConfidence(build: BuildDto): number {
-    return build?.executionData?.diagnostics?.filter(d => d.code === ServalDiagnosticCode.LowConfidence).length ?? 0;
+  protected hasLowConfidence(build: BuildDto): boolean {
+    return hasLowConfidence(build);
   }
 
-  protected lowConfidenceBookName(build: BuildDto): string {
+  protected lowConfidenceBookName(build: BuildDto): string | undefined {
     const bookId: string | undefined = build?.executionData?.diagnostics?.find(
       d => d.code === ServalDiagnosticCode.LowConfidence
     )?.data?.bookId;
     if (bookId != null) {
       return this.i18n.localizeBook(bookId);
     } else {
-      return this.i18n.translateStatic('draft_history_entry.one_book');
+      return undefined;
     }
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-import-wizard/draft-import-wizard.component.html

@@ -63,9 +63,11 @@ <h1>{{ t("select_project") }}</h1>
           }}</app-notice>
         }
         @if (draftHasLowConfidence && !(needsConnection || showBookSelection)) {
-          <app-notice type="error" data-test-id="low-confidence-warning">
-            {{ t("low_confidence_book", { book: bookNameWithLowConfidence }) }}
-          </app-notice>
+          <app-display-confidence
+            [showNotice]="true"
+            [bookNameWithLowConfidence]="bookNameWithLowConfidence"
+            [booksWithLowConfidence]="1"
+          ></app-display-confidence>
         }
       </form>
 
@@ -170,9 +172,11 @@ <h1>{{ t("connected_to_project") }}</h1>
             }
           }
           @if (draftHasLowConfidence && !showBookSelection) {
-            <app-notice type="error" data-test-id="low-confidence-warning">
-              {{ t("low_confidence_book", { book: bookNameWithLowConfidence }) }}
-            </app-notice>
+            <app-display-confidence
+              [showNotice]="true"
+              [bookNameWithLowConfidence]="bookNameWithLowConfidence"
+              [booksWithLowConfidence]="1"
+            ></app-display-confidence>
           }
           <div class="button-strip">
             <button matButton="outlined" matStepperPrevious [disabled]="isImporting">
@@ -209,15 +213,11 @@ <h1>{{ t("confirm_books_to_import") }}</h1>
           }
         </div>
 
-        @if (selectedBooksWithLowConfidence === 1) {
-          <app-notice type="error" data-test-id="low-confidence-warning">
-            {{ t("low_confidence_book", { book: bookNameWithLowConfidence }) }}
-          </app-notice>
-        } @else if (selectedBooksWithLowConfidence > 1) {
-          <app-notice type="error" data-test-id="low-confidence-warning">
-            {{ t("low_confidence_books", { number: selectedBooksWithLowConfidence }) }}
-          </app-notice>
-        }
+        <app-display-confidence
+          [showNotice]="selectedBooksWithLowConfidence > 0"
+          [bookNameWithLowConfidence]="bookNameWithLowConfidence"
+          [booksWithLowConfidence]="selectedBooksWithLowConfidence"
+        ></app-display-confidence>
 
         <div class="button-strip">
           <button matButton="outlined" matStepperPrevious [disabled]="isConnecting || isImporting">

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-import-wizard/draft-import-wizard.component.ts

@@ -43,6 +43,7 @@ import { NoticeComponent } from '../../../shared/notice/notice.component';
 import { ChapterSet, VerboseScriptureRange } from '../../../shared/scripture-range';
 import { booksFromScriptureRange, projectLabel } from '../../../shared/utils';
 import { SyncProgressComponent } from '../../../sync/sync-progress/sync-progress.component';
+import { DisplayConfidenceComponent } from '../build-confidences/display-confidence.component';
 import { DraftNotificationService } from '../draft-notification.service';
 import { hasLowConfidence } from '../draft-utils';
 
@@ -120,6 +121,7 @@ export enum DraftApplyStatus {
     MatStepperPrevious,
     TranslocoModule,
     TranslocoMarkupComponent,
+    DisplayConfidenceComponent,
     NoticeComponent,
     ProjectSelectComponent,
     SyncProgressComponent