SF-3054 Warn user when saving a note without content

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

@@ -67,10 +67,13 @@ <h1 mat-dialog-title class="dialog-icon-title">
         }
       </div>
       @if (canInsertNote) {
-        <mat-form-field class="full-width" appearance="outline">
-          <mat-label>{{ t("your_comment") }}</mat-label>
-          <textarea matInput [(ngModel)]="currentNoteContent"></textarea>
-        </mat-form-field>
+        <form [formGroup]="noteDialogForm">
+          <mat-form-field class="full-width" appearance="outline">
+            <mat-label>{{ t("your_comment") }}</mat-label>
+            <textarea matInput formControlName="comment"></textarea>
+            <mat-error>{{ t("required") }}</mat-error>
+          </mat-form-field>
+        </form>
       }
     </mat-dialog-content>
     <mat-dialog-actions align="end">

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/note-dialog/note-dialog.component.scss

@@ -122,8 +122,8 @@ h1 {
 }
 
 .save-options {
-  background-color: variables.$sf_grey;
-  color: white;
+  background-color: variables.$sf_grey !important;
+  color: white !important;
   ::ng-deep .mat-button-toggle-label-content {
     line-height: 36px;
   }

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

@@ -350,8 +350,8 @@ describe('NoteDialogComponent', () => {
     env = new TestEnvironment({ verseRef: new VerseRef('MAT 1:1') });
     expect(env.noteInputElement).toBeTruthy();
     env.submit();
+    expect(env.noteInputElement).toBeTruthy();
     verify(mockedProjectService.createNoteThread(anything(), anything())).never();
-    expect(env.dialogResult).toBeFalsy();
   }));
 
   it('does not show text area for users without write permissions', fakeAsync(() => {

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

@@ -1,4 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { translate } from '@ngneat/transloco';
 import { VerseRef } from '@sillsdev/scripture';
@@ -65,9 +66,9 @@ interface NoteDisplayInfo {
 })
 export class NoteDialogComponent implements OnInit {
   showSegmentText: boolean = false;
-  currentNoteContent: string = '';
   notesToDisplay: NoteDisplayInfo[] = [];
-  saveOption: 'save' | 'resolve' = 'save';
+  _saveOption: 'save' | 'resolve' = 'save';
+  noteDialogForm: FormGroup = new FormGroup({ comment: new FormControl('', Validators.required) });
 
   private biblicalTermDoc?: BiblicalTermDoc;
   private isAssignedToOtherUser: boolean = false;
@@ -197,6 +198,24 @@ export class NoteDialogComponent implements OnInit {
     );
   }
 
+  set saveOption(option: 'save' | 'resolve') {
+    if (option === 'resolve') {
+      this.noteDialogForm.controls.comment.clearValidators();
+    } else {
+      this.noteDialogForm.controls.comment.setValidators(Validators.required);
+    }
+    this.noteDialogForm.updateValueAndValidity();
+    this._saveOption = option;
+  }
+
+  get saveOption(): 'save' | 'resolve' {
+    return this._saveOption;
+  }
+
+  get currentNoteContent(): string {
+    return this.noteDialogForm.controls.comment.value ?? '';
+  }
+
   private get defaultNoteTagId(): number | undefined {
     return this.projectProfileDoc?.data?.translateConfig.defaultNoteTagId;
   }
@@ -233,7 +252,7 @@ export class NoteDialogComponent implements OnInit {
 
   editNote(note: Note): void {
     this.noteIdBeingEdited = note.dataId;
-    this.currentNoteContent = XmlUtils.decodeFromXml(note.content ?? '');
+    this.noteDialogForm.controls.comment.setValue(XmlUtils.decodeFromXml(note.content ?? ''));
     this.notesToDisplay.pop();
   }
 
@@ -311,12 +330,13 @@ export class NoteDialogComponent implements OnInit {
   }
 
   submit(): void {
-    if (this.saveOption === 'resolve') {
+    if (this._saveOption === 'resolve') {
       return this.resolve();
     }
 
-    if (this.currentNoteContent.trim().length === 0) {
-      return this.close();
+    if (!this.noteDialogForm.valid) {
+      this.noteDialogForm.markAllAsTouched();
+      return;
     }
 
     this.dialogRef.close({

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

@@ -377,6 +377,7 @@
     "paratext_user": "Assigned to a Paratext user",
     "permanently_delete_note": "Permanently delete this comment?",
     "reattached": "(Re-attached)",
+    "required": "Required",
     "resolve": "Save and resolve",
     "save": "Save",
     "show_changes": "Show changes",