SF-3772 Prevent duplicate onboarding requests

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/onboarding-request-detail/onboarding-request-detail.component.ts

@@ -34,8 +34,8 @@ import { NoticeComponent } from '../../shared/notice/notice.component';
 import { projectLabel } from '../../shared/utils';
 import { normalizeLanguageCodeToISO639_3 } from '../../translate/draft-generation/draft-utils';
 import {
-  DraftingSignupFormData,
   OnboardingRequest,
+  OnboardingRequestFormData,
   OnboardingRequestResolutionKey,
   OnboardingRequestResolutionMetadata,
   OnboardingRequestService
@@ -236,7 +236,7 @@ export class OnboardingRequestDetailComponent extends DataLoadingComponent imple
 
   getStatus = this.onboardingRequestService.getStatus;
 
-  get formData(): DraftingSignupFormData {
+  get formData(): OnboardingRequestFormData {
     return this.request!.submission.formData;
   }
 

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

@@ -174,7 +174,7 @@ export class DraftGenerationComponent extends DataLoadingComponent implements On
     protected readonly i18n: I18nService,
     private readonly onlineStatusService: OnlineStatusService,
     private readonly preTranslationSignupUrlService: PreTranslationSignupUrlService,
-    private readonly draftingSignupService: OnboardingRequestService,
+    private readonly onboardingRequestService: OnboardingRequestService,
     protected readonly noticeService: NoticeService,
     protected readonly urlService: ExternalUrlService,
     protected readonly featureFlags: FeatureFlagService,
@@ -290,7 +290,7 @@ export class DraftGenerationComponent extends DataLoadingComponent implements On
         // Check if user has already submitted a signup for this project
         if (this.activatedProject.projectId != null) {
           try {
-            this.onboardingRequest = await this.draftingSignupService.getOpenOnboardingRequest(
+            this.onboardingRequest = await this.onboardingRequestService.getOpenOnboardingRequest(
               this.activatedProject.projectId
             );
           } catch {

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

@@ -16,6 +16,7 @@ import { User } from 'realtime-server/lib/esm/common/models/user';
 import { DevOnlyComponent } from 'src/app/shared/dev-only/dev-only.component';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { DataLoadingComponent } from 'xforge-common/data-loading-component';
+import { DialogService } from 'xforge-common/dialog.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { NoticeService } from 'xforge-common/notice.service';
 import { UserService } from 'xforge-common/user.service';
@@ -27,11 +28,11 @@ import { ProjectSelectComponent } from '../../../project-select/project-select.c
 import { BookMultiSelectComponent } from '../../../shared/book-multi-select/book-multi-select.component';
 import { JsonViewerComponent } from '../../../shared/json-viewer/json-viewer.component';
 import { compareProjectsForSorting, projectLabel } from '../../../shared/utils';
-import { DraftingSignupFormData, OnboardingRequestService } from '../onboarding-request.service';
+import { OnboardingRequestFormData, OnboardingRequestService } from '../onboarding-request.service';
 
 export const DRAFT_SIGNUP_RESPONSE_DAYS = { min: 1, max: 3 } as const;
 
-type DraftOnboardingFormUiState = 'editing' | 'submitting' | 'submitted';
+type OnboardingFormUiState = 'editing' | 'submitting' | 'submitted';
 
 /**
  * Component for the in-app draft signup form.
@@ -124,7 +125,7 @@ export class DraftOnboardingFormComponent extends DataLoadingComponent implement
 
   submittedData?: any;
 
-  uiState: DraftOnboardingFormUiState = 'editing';
+  uiState: OnboardingFormUiState = 'editing';
 
   readonly responseDays = DRAFT_SIGNUP_RESPONSE_DAYS;
 
@@ -133,8 +134,9 @@ export class DraftOnboardingFormComponent extends DataLoadingComponent implement
     private readonly activatedProject: ActivatedProjectService,
     private readonly userService: UserService,
     private readonly paratextService: ParatextService,
-    private readonly draftingSignupService: OnboardingRequestService,
+    private readonly onboardingRequestService: OnboardingRequestService,
     protected readonly noticeService: NoticeService,
+    protected readonly dialogService: DialogService,
     private readonly destroyRef: DestroyRef,
     private readonly cd: ChangeDetectorRef,
     private readonly i18n: I18nService
@@ -207,18 +209,23 @@ export class DraftOnboardingFormComponent extends DataLoadingComponent implement
 
   async onSubmit(): Promise<void> {
     const projectId = this.activatedProject.projectId;
-    if (projectId == null || this.uiState === 'submitting') {
-      return;
-    }
+    if (projectId == null || this.uiState === 'submitting') return;
+
+    if (await this.checkAndWarnIfAlreadySubmitted()) return;
+
+    // Handle race condition when submit is double clicked and the second click happens before the form state is updated
+    // to 'submitting'. The type of this.uiState has to be widened after TS narrowed it to `"editing" | "submitted"`
+    // due to the check at the beginning of the function.
+    if ((this.uiState as OnboardingFormUiState) === 'submitting') return;
 
     if (this.signupForm.valid === true) {
       this.uiState = 'submitting';
       this.cd.markForCheck();
 
-      const formData: DraftingSignupFormData = this.signupForm.getRawValue() as DraftingSignupFormData;
+      const formData = this.signupForm.getRawValue() as OnboardingRequestFormData;
 
       try {
-        const requestId = await this.draftingSignupService.submitOnboardingRequest(projectId, formData);
+        const requestId = await this.onboardingRequestService.submitOnboardingRequest(projectId, formData);
 
         // For testing purposes, store and display the submitted data
         this.submittedData = { requestId, projectId, formData };
@@ -313,6 +320,26 @@ export class DraftOnboardingFormComponent extends DataLoadingComponent implement
     }
   }
 
+  /**
+   * If a request has already been submitted:
+   * - Informs user with a message dialog
+   * - Redirects to drafting page when user closes dialog
+   * - Resolves to true
+   *
+   * Otherwise, resolves to false
+   */
+  private async checkAndWarnIfAlreadySubmitted(): Promise<boolean> {
+    if (this.activatedProject.projectId == null) return false;
+
+    if ((await this.onboardingRequestService.getOpenOnboardingRequest(this.activatedProject.projectId)) == null) {
+      return false;
+    } else {
+      await this.dialogService.message('draft_sources.request_already_submitted', undefined, true);
+      this.cancel();
+      return true;
+    }
+  }
+
   private async loadProjectsAndResources(): Promise<void> {
     try {
       const [projects, resources] = await Promise.all([

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

@@ -10,7 +10,7 @@ export interface OnboardingRequestComment {
   dateCreated: string;
 }
 
-export interface DraftingSignupFormData {
+export interface OnboardingRequestFormData {
   name: string;
   email: string;
   organization: string;
@@ -43,7 +43,7 @@ export interface OnboardingRequest {
     projectId: string;
     userId: string;
     timestamp: string;
-    formData: DraftingSignupFormData;
+    formData: OnboardingRequestFormData;
   };
   assigneeId: string;
   status: OnboardingRequestStatusOption;
@@ -104,7 +104,7 @@ export class OnboardingRequestService {
   }
 
   /** Submits a new signup request. */
-  async submitOnboardingRequest(projectId: string, formData: DraftingSignupFormData): Promise<string> {
+  async submitOnboardingRequest(projectId: string, formData: OnboardingRequestFormData): Promise<string> {
     return (await this.onlineInvoke<string>('submitOnboardingRequest', { projectId, formData }))!;
   }
 

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

@@ -403,6 +403,7 @@
     "select_project_to_translate": "Select the project to translate.",
     "some_projects_use_back_translation": "Some projects get better results by adding a back translation as another reference.",
     "source_side_language_codes_differ": "All source and reference projects must be in the same language. Please select different source or reference projects.",
+    "request_already_submitted": "A request to activate drafting on this project has already been submitted. Please wait for a response from the team.",
     "state_connecting": "Connecting",
     "state_sync_failed": "There was an error syncing",
     "state_sync_successful": "Sync successful",