SF-3649 Add UI to filter projects with custom serval config (#3577)

Author: RaymondLuong3

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

@@ -3,6 +3,9 @@
     <mat-label>Filter projects...</mat-label>
     <input matInput (keyup)="updateSearchTerm($event.target)" id="project-filter" />
   </mat-form-field>
+  <mat-checkbox [(ngModel)]="showProjectsWithCustomServalConfig" (change)="updateServalConfigFilter()">
+    Projects with custom Serval Configuration only
+  </mat-checkbox>
 </div>
 @if (!isLoading) {
   @if (length > 0) {

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-projects.component.scss

@@ -12,3 +12,9 @@ mat-form-field {
   gap: 4px;
   white-space: nowrap;
 }
+
+.projects-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-projects.component.spec.ts

@@ -1,7 +1,10 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { DebugElement, getDebugNode } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
@@ -91,6 +94,23 @@ describe('ServalProjectsComponent', () => {
     expect(env.rows.length).toEqual(1);
   }));
 
+  it('should filter projects with custom serval config set', fakeAsync(async () => {
+    const env = new TestEnvironment();
+    env.setupProjectData();
+    env.fixture.detectChanges();
+    tick();
+    env.fixture.detectChanges();
+
+    expect(env.rows.length).toEqual(3);
+    // Toggle the checkbox to filter projects with servalConfig
+    await env.toggleServalConfigFilter();
+    // Only project01 has servalConfig set, so only 1 row should be displayed
+    expect(env.rows.length).toEqual(1);
+
+    await env.toggleServalConfigFilter();
+    expect(env.rows.length).toEqual(3);
+  }));
+
   it('should page', fakeAsync(() => {
     const env = new TestEnvironment();
     env.setupProjectData();
@@ -116,6 +136,7 @@ class TestProjectDoc extends ProjectDoc {
 class TestEnvironment {
   readonly component: ServalProjectsComponent;
   readonly fixture: ComponentFixture<ServalProjectsComponent>;
+  readonly loader: HarnessLoader;
 
   private readonly realtimeService: TestRealtimeService = TestBed.inject<TestRealtimeService>(TestRealtimeService);
 
@@ -139,6 +160,7 @@ class TestEnvironment {
 
     this.fixture = TestBed.createComponent(ServalProjectsComponent);
     this.component = this.fixture.componentInstance;
+    this.loader = TestbedHarnessEnvironment.loader(this.fixture);
   }
 
   get table(): DebugElement {
@@ -181,6 +203,14 @@ class TestEnvironment {
     this.fixture.detectChanges();
   }
 
+  async toggleServalConfigFilter(): Promise<void> {
+    const checkbox = await this.loader.getHarness(MatCheckboxHarness);
+    await checkbox.toggle();
+    this.fixture.detectChanges();
+    tick();
+    this.fixture.detectChanges();
+  }
+
   setupProjectData(): void {
     this.realtimeService.addSnapshots<SFProject>(TestProjectDoc.COLLECTION, [
       {
@@ -204,7 +234,8 @@ class TestEnvironment {
                   name: 'Project 04',
                   shortName: 'P4'
                 }
-              ]
+              ],
+              servalConfig: '{ "custom": "value" }'
             },
             preTranslate: true,
             source: {

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-projects.component.ts

@@ -1,5 +1,7 @@
 import { Component, DestroyRef, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
@@ -83,13 +85,15 @@ class Row {
   templateUrl: './serval-projects.component.html',
   styleUrls: ['./serval-projects.component.scss'],
   imports: [
+    FormsModule,
     MatButton,
     MatTable,
     MatColumnDef,
     MatHeaderCell,
     MatHeaderCellDef,
     MatCell,
     MatCellDef,
+    MatCheckbox,
     MatHeaderRow,
     MatHeaderRowDef,
     MatIcon,
@@ -109,6 +113,7 @@ export class ServalProjectsComponent extends DataLoadingComponent implements OnI
   length: number = 0;
   pageIndex: number = 0;
   pageSize: number = 50;
+  showProjectsWithCustomServalConfig: boolean = false;
 
   private projectDocs?: Readonly<SFProjectProfileDoc[]>;
 
@@ -160,6 +165,11 @@ export class ServalProjectsComponent extends DataLoadingComponent implements OnI
     this.queryParameters$.next(this.getQueryParameters());
   }
 
+  updateServalConfigFilter(): void {
+    this.pageIndex = 0;
+    this.queryParameters$.next(this.getQueryParameters());
+  }
+
   viewDraftJobs(projectId: string): void {
     void this.router.navigate(['/serval-administration'], {
       queryParams: {
@@ -182,12 +192,19 @@ export class ServalProjectsComponent extends DataLoadingComponent implements OnI
   }
 
   private getQueryParameters(): QueryParameters {
-    return {
+    const params: QueryParameters = {
       // Do not return resources
       [obj<SFProject>().pathStr(q => q.resourceConfig)]: null,
       $sort: { [obj<Project>().pathStr(p => p.name)]: 1 },
       $skip: this.pageIndex * this.pageSize,
       $limit: this.pageSize
     };
+
+    // Filter for projects with servalConfig set
+    if (this.showProjectsWithCustomServalConfig) {
+      params[obj<SFProject>().pathStr(q => q.translateConfig.draftConfig?.servalConfig)] = { $ne: null };
+    }
+
+    return params;
   }
 }

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

@@ -318,6 +318,11 @@ <h2>{{ t("summary_notifications") }}</h2>
             </div>
           </mat-card>
         }
+        @if (isCustomConfigSet) {
+          <app-notice icon="info" type="info">
+            {{ t("custom_configurations_apply") }}
+          </app-notice>
+        }
 
         <div class="button-strip">
           <button mat-stroked-button matStepperPrevious>

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

@@ -1318,7 +1318,8 @@ describe('DraftGenerationStepsComponent', () => {
               { projectId: 'source1', scriptureRange: 'LEV;NUM;DEU;JOS' },
               { projectId: 'source2', scriptureRange: 'DEU;JOS;1SA' }
             ],
-            lastSelectedTranslationScriptureRanges: [{ projectId: 'draftingSource', scriptureRange: 'GEN;EXO' }]
+            lastSelectedTranslationScriptureRanges: [{ projectId: 'draftingSource', scriptureRange: 'GEN;EXO' }],
+            servalConfig: '{ "custom": "value" }'
           }
         }
       })
@@ -1357,6 +1358,10 @@ describe('DraftGenerationStepsComponent', () => {
       expect(trainingGroups[1].ranges[0]).toEqual('Deuteronomy');
       expect(trainingGroups[1].ranges[1]).toEqual('1 Samuel');
     });
+
+    it('sets the custom serval config flag', () => {
+      expect(component['isCustomConfigSet']).toEqual(true);
+    });
   });
 
   describe('pending updates', () => {

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

@@ -159,6 +159,7 @@ export class DraftGenerationStepsComponent implements OnInit {
   protected trainingSources: DraftSource[] = [];
   protected trainingTargets: DraftSource[] = [];
   protected trainingDataFiles: Readonly<TrainingData>[] = [];
+  protected isCustomConfigSet = false;
 
   private trainingDataQuery?: RealtimeQuery<TrainingDataDoc>;
   private trainingDataQuerySubscription?: Subscription;
@@ -289,6 +290,7 @@ export class DraftGenerationStepsComponent implements OnInit {
             // See if there is an existing training scripture range
             const draftConfig: DraftConfig | undefined =
               this.activatedProject.projectDoc?.data?.translateConfig.draftConfig;
+            this.isCustomConfigSet = draftConfig?.servalConfig != null;
             const hasPreviousTrainingRange: boolean =
               (draftConfig?.lastSelectedTrainingScriptureRanges ?? []).length > 0;
 

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

@@ -242,6 +242,7 @@
     "configure_advanced_settings_header": "Advanced",
     "configure_advanced_settings_title": "Advanced settings",
     "confirm_codes_correct_to_continue": "Please confirm the language codes are correct before continuing",
+    "custom_configurations_apply": "Custom draft configurations have been applied by an administrator.",
     "email_me": "Email me at {{ email }} when the draft is finished.",
     "fast_training_warning": "Enabling this will save time but greatly reduce accuracy.",
     "fast_training": "Enable Fast Training",