SF-3742 Prompt user to select formatting options before generating draft

Author: Nateowami

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

@@ -227,7 +227,7 @@ <h1>
             @if (!isDraftInProgress(draftJob) && !hasAnyCompletedBuild) {
               <section class="action-button-strip">
                 @if (isSourcesConfigurationComplete) {
-                  <button mat-flat-button color="primary" (click)="generateDraft()">
+                  <button mat-flat-button color="primary" (click)="generateDraftClicked()">
                     <mat-icon>auto_awesome</mat-icon>
                     {{ t("generate_draft_button") }}
                   </button>
@@ -358,7 +358,7 @@ <h3>{{ t("draft_finishing_header") }}</h3>
                         @if (hasDraftBooksAvailable) {
                           <app-draft-download-button [build]="lastCompletedBuild" />
                           @if (featureFlags.usfmFormat.enabled) {
-                            <button mat-button [routerLink]="['format']">
+                            <button mat-button [routerLink]="draftOptionsService.formattingOptionsPath">
                               <mat-icon>settings</mat-icon>
                               {{ t("format_draft") }}
                             </button>
@@ -395,7 +395,7 @@ <h3>{{ t("draft_finishing_header") }}</h3>
           mat-flat-button
           color="primary"
           type="button"
-          (click)="generateDraft({ withConfirm: !featureFlags.newDraftHistory.enabled })"
+          (click)="generateDraftClicked({ withConfirm: !featureFlags.newDraftHistory.enabled })"
         >
           <mat-icon>add</mat-icon> {{ t("generate_new_draft") }}
         </button>

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

@@ -58,6 +58,7 @@ import {
 import { DraftGenerationService } from './draft-generation.service';
 import { DraftHistoryListComponent } from './draft-history-list/draft-history-list.component';
 import { DraftInformationComponent } from './draft-information/draft-information.component';
+import { DraftOptionsService } from './draft-options.service';
 import { DraftPreviewBooksComponent } from './draft-preview-books/draft-preview-books.component';
 import { DRAFT_SIGNUP_RESPONSE_DAYS } from './draft-signup-form/draft-onboarding-form.component';
 import { DraftSource } from './draft-source';
@@ -176,6 +177,7 @@ export class DraftGenerationComponent extends DataLoadingComponent implements On
     protected readonly noticeService: NoticeService,
     protected readonly urlService: ExternalUrlService,
     protected readonly featureFlags: FeatureFlagService,
+    protected readonly draftOptionsService: DraftOptionsService,
     private readonly projectService: SFProjectService,
     private destroyRef: DestroyRef
   ) {
@@ -332,7 +334,30 @@ export class DraftGenerationComponent extends DataLoadingComponent implements On
     });
   }
 
-  async generateDraft({ withConfirm = false } = {}): Promise<void> {
+  get formattingOptionsRequired(): boolean {
+    return (
+      this.draftOptionsService.areFormattingOptionsSupportedForBuild(this.lastCompletedBuild) &&
+      !this.draftOptionsService.areFormattingOptionsSelected()
+    );
+  }
+
+  async generateDraftClicked({ withConfirm = false } = {}): Promise<void> {
+    if (this.formattingOptionsRequired) {
+      const dialogRef = this.dialogService.openGenericDialog({
+        title: this.i18n.translate('draft_generation.choose_formatting_options'),
+        message: this.i18n.translate('draft_generation.choose_formatting_options_before_new_draft'),
+        options: [
+          {
+            value: true,
+            label: this.i18n.translate('draft_generation.formatting_options'),
+            highlight: true,
+            icon: 'build'
+          }
+        ]
+      });
+      if (await dialogRef.result) await this.router.navigate(this.draftOptionsService.formattingOptionsPath);
+      return;
+    }
     if (withConfirm) {
       const isConfirmed: boolean | undefined = await this.dialogService.openGenericDialog({
         title: this.i18n.translate('draft_generation.dialog_confirm_draft_regeneration_title'),

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

@@ -26,7 +26,7 @@
             {{ t("select_formatting_options") }}
           </p>
           <div class="formatting-options-container">
-            <button matButton="filled" class="format-usfm" [routerLink]="['format']">
+            <button matButton="filled" class="format-usfm" [routerLink]="draftOptionsService.formattingOptionsPath">
               <mat-icon>build</mat-icon>
               <span class="hide-lt-lg">{{ t("formatting_options") }}</span>
               <span class="hide-gt-lg">{{ t("formatting") }}</span>
@@ -56,7 +56,7 @@
               </button>
               <app-draft-download-button matButton="outlined" [build]="entry" />
               @if (formattingOptionsSupported && isLatestBuild) {
-                <button matButton class="format-usfm" [routerLink]="['format']">
+                <button matButton class="format-usfm" [routerLink]="draftOptionsService.formattingOptionsPath">
                   <mat-icon>build</mat-icon> {{ t("formatting_options") }}
                 </button>
               }

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

@@ -338,7 +338,7 @@ export class DraftHistoryEntryComponent {
     private readonly trainingDataService: TrainingDataService,
     private readonly activatedProjectService: ActivatedProjectService,
     readonly featureFlags: FeatureFlagService,
-    private readonly draftOptionsService: DraftOptionsService,
+    protected readonly draftOptionsService: DraftOptionsService,
     private readonly permissionsService: PermissionsService,
     private readonly destroyRef: DestroyRef,
     private readonly dialog: MatDialog

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-options.service.ts

@@ -36,4 +36,8 @@ export class DraftOptionsService {
       ? new Date(entry.additionalInfo.dateFinished) > FORMATTING_OPTIONS_SUPPORTED_DATE
       : false;
   }
+
+  get formattingOptionsPath(): string[] {
+    return ['projects', this.activatedProjectService.projectId!, 'draft-generation', 'format'];
+  }
 }

src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/non_checking_en.json

@@ -169,6 +169,9 @@
     "successfully_applied_all_chapters": "Successfully applied all chapters to {{ bookName }}"
   },
   "draft_generation": {
+    "choose_formatting_options": "Choose formatting options to continue",
+    "choose_formatting_options_before_new_draft": "Before you can create a new draft, you need to choose formatting options.",
+    "formatting_options": "Formatting options",
     "back_translation_requirement": "Back translation drafts can only be generated into the roughly 200 [link:supportedLanguagesUrl]supported languages[/link].",
     "cancel_generation_button": "Cancel",
     "configure_sources": "Configure sources",
@@ -299,7 +302,7 @@
     "options_for_paragraph_breaks_and_quotation_marks": "Options for paragraph breaks and quotation marks to make editing easier",
     "requested_at": "Requested {{ requestedAtTime }}.",
     "requested_by": "Requested by {{ requestedByUserName }} at {{ requestedAtTime }}.",
-    "select_formatting_options": "The draft has been created, and there are new formatting options to select. You will only need to do this once, but you can change them whenever you wish.",
+    "select_formatting_options": "The draft has been created. Choose formatting options to continue.",
     "show_model_training_configuration": "Show model training configuration",
     "training_books": "Training books",
     "training_data_files_used": "The following data files were used to train the model.",

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/generic-dialog/generic-dialog.component.html

@@ -8,10 +8,18 @@ <h2 mat-dialog-title>{{ title }}</h2>
   @for (option of options; track option.label) {
     @if (option.highlight) {
       <button mat-flat-button color="primary" [mat-dialog-close]="option.value">
+        @if (option.icon != null) {
+          <mat-icon>{{ option.icon }}</mat-icon>
+        }
         {{ option.label | async }}
       </button>
     } @else {
-      <button mat-button [mat-dialog-close]="option.value">{{ option.label | async }}</button>
+      <button mat-button [mat-dialog-close]="option.value">
+        @if (option.icon != null) {
+          <mat-icon>{{ option.icon }}</mat-icon>
+        }
+        {{ option.label | async }}
+      </button>
     }
   }
 </div>

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/generic-dialog/generic-dialog.component.ts

@@ -1,16 +1,17 @@
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { AsyncPipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
   MatDialogActions,
-  MatDialogClose
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
 } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
 import { Observable } from 'rxjs';
-import { CdkScrollable } from '@angular/cdk/scrolling';
-import { MatButton } from '@angular/material/button';
-import { AsyncPipe } from '@angular/common';
 
 export interface GenericDialogOptions<T> {
   title?: Observable<string>;
@@ -19,6 +20,7 @@ export interface GenericDialogOptions<T> {
     label: Observable<string>;
     value: T;
     highlight?: boolean;
+    icon?: string;
   }[];
 }
 
@@ -33,7 +35,16 @@ export interface GenericDialogRef<T> {
 @Component({
   selector: 'app-generic-dialog',
   templateUrl: './generic-dialog.component.html',
-  imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose, AsyncPipe]
+  imports: [
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose,
+    AsyncPipe,
+    MatIcon
+  ]
 })
 export class GenericDialogComponent<T> {
   constructor(@Inject(MAT_DIALOG_DATA) private readonly data: GenericDialogOptions<T>) {}
@@ -46,11 +57,7 @@ export class GenericDialogComponent<T> {
     return this.data.message;
   }
 
-  get options(): {
-    label: Observable<string>;
-    value: T;
-    highlight?: boolean | undefined;
-  }[] {
+  get options(): GenericDialogOptions<T>['options'] {
     return this.data.options;
   }
 }