SF-3271 Prevent Save & Sync of draft sources when offline (#3148)

Author: kylebuss

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

@@ -179,9 +179,14 @@ <h3>{{ t("overview_source") }} {{ parentheses(sourceLanguageDisplayName) }}</h3>
   ></app-language-codes-confirmation>
 
   <div class="component-footer">
+    @if (!appOnline) {
+      <mat-error id="offline-message">
+        {{ t("offline_message") }}
+      </mat-error>
+    }
     <div class="page-actions">
       <button mat-button (click)="cancel()"><mat-icon>close</mat-icon>{{ t("cancel") }}</button>
-      <button mat-flat-button color="primary" (click)="save()">
+      <button id="save_button" mat-flat-button color="primary" (click)="save()" [disabled]="!appOnline">
         <mat-icon>check</mat-icon>{{ t("save_and_sync") }}
       </button>
     </div>

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

@@ -172,6 +172,13 @@ strong {
   background: var(--sf-draft-source-active-blank-background);
 }
 
+#offline-message {
+  display: flex;
+  justify-self: flex-end;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+}
+
 .page-actions {
   display: flex;
   gap: 0.5em;

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

@@ -13,6 +13,9 @@ import { AuthService } from 'xforge-common/auth.service';
 import { createTestFeatureFlag, FeatureFlagService } from 'xforge-common/feature-flags/feature-flag.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { NoticeService } from 'xforge-common/notice.service';
+import { OnlineStatusService } from 'xforge-common/online-status.service';
+import { TestOnlineStatusModule } from 'xforge-common/test-online-status.module';
+import { TestOnlineStatusService } from 'xforge-common/test-online-status.service';
 import { TestRealtimeModule } from 'xforge-common/test-realtime.module';
 import { TestRealtimeService } from 'xforge-common/test-realtime.service';
 import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
@@ -52,7 +55,12 @@ const mockedAuthService = mock(AuthService);
 
 describe('DraftSourcesComponent', () => {
   configureTestingModule(() => ({
-    imports: [TestRealtimeModule.forRoot(SF_TYPE_REGISTRY), NoopAnimationsModule, TestTranslocoModule],
+    imports: [
+      TestOnlineStatusModule.forRoot(),
+      TestRealtimeModule.forRoot(SF_TYPE_REGISTRY),
+      NoopAnimationsModule,
+      TestTranslocoModule
+    ],
     declarations: [],
     providers: [
       { provide: ParatextService, useMock: mockedParatextService },
@@ -63,7 +71,8 @@ describe('DraftSourcesComponent', () => {
       { provide: DraftSourcesService, useMock: mockedDraftSourcesService },
       { provide: SFUserProjectsService, useMock: mockedSFUserProjectsService },
       { provide: FeatureFlagService, useMock: mockedFeatureFlagService },
-      { provide: AuthService, useMock: mockedAuthService }
+      { provide: AuthService, useMock: mockedAuthService },
+      { provide: OnlineStatusService, useClass: TestOnlineStatusService }
     ]
   }));
 
@@ -382,6 +391,32 @@ describe('DraftSourcesComponent', () => {
         alternateTrainingSourceParatextId: 'unset'
       });
     });
+
+    it('should disable save and sync button and display offline message when offline', fakeAsync(() => {
+      const env = new TestEnvironment();
+      env.testOnlineStatusService.setIsOnline(false);
+      env.fixture.detectChanges();
+      tick();
+
+      const offlineMessage: DebugElement = env.fixture.debugElement.query(By.css('#offline-message'));
+      expect(offlineMessage).not.toBeNull();
+
+      const saveButton: DebugElement = env.fixture.debugElement.query(By.css('#save_button'));
+      expect(saveButton.attributes.disabled).toBe('true');
+    }));
+
+    it('should enable save & sync button and not display offline message when online', fakeAsync(() => {
+      const env = new TestEnvironment();
+      env.testOnlineStatusService.setIsOnline(true);
+      env.fixture.detectChanges();
+      tick();
+
+      const offlineMessage: DebugElement = env.fixture.debugElement.query(By.css('#offline-message'));
+      expect(offlineMessage).toBeNull();
+
+      const saveButton: DebugElement = env.fixture.debugElement.query(By.css('#save_button'));
+      expect(saveButton.attributes.disabled).toBeUndefined();
+    }));
   });
 });
 
@@ -390,6 +425,9 @@ class TestEnvironment {
   readonly fixture: ComponentFixture<DraftSourcesComponent>;
   readonly realtimeService: TestRealtimeService;
   readonly activatedProjectDoc: WithData<SFProjectDoc>;
+  readonly testOnlineStatusService: TestOnlineStatusService = TestBed.inject(
+    OnlineStatusService
+  ) as TestOnlineStatusService;
 
   constructor() {
     const userSFProjectsAndResourcesCount: number = 6;

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRippleModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Router } from '@angular/router';
@@ -16,6 +17,7 @@ import { FeatureFlagService } from 'xforge-common/feature-flags/feature-flag.ser
 import { I18nKeyForComponent, I18nService } from 'xforge-common/i18n.service';
 import { ElementState } from 'xforge-common/models/element-state';
 import { NoticeService } from 'xforge-common/notice.service';
+import { OnlineStatusService } from 'xforge-common/online-status.service';
 import { SFUserProjectsService } from 'xforge-common/user-projects.service';
 import { quietTakeUntilDestroyed } from 'xforge-common/util/rxjs-util';
 import { XForgeCommonModule } from 'xforge-common/xforge-common.module';
@@ -45,6 +47,7 @@ export interface ProjectStatus {
   standalone: true,
   imports: [
     MatButtonModule,
+    MatFormFieldModule,
     MatIconModule,
     XForgeCommonModule,
     MatRippleModule,
@@ -98,6 +101,7 @@ export class DraftSourcesComponent extends DataLoadingComponent {
     private readonly userProjectsService: SFUserProjectsService,
     private readonly router: Router,
     private readonly featureFlags: FeatureFlagService,
+    private readonly onlineStatus: OnlineStatusService,
     readonly i18n: I18nService,
     noticeService: NoticeService
   ) {
@@ -132,6 +136,10 @@ export class DraftSourcesComponent extends DataLoadingComponent {
     this.loadProjects();
   }
 
+  get appOnline(): boolean {
+    return this.onlineStatus.isOnline;
+  }
+
   get loading(): boolean {
     return !this.isLoaded;
   }

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

@@ -11,6 +11,7 @@ import { ActivatedProjectService } from 'xforge-common/activated-project.service
 import { AuthService } from 'xforge-common/auth.service';
 import { DialogService } from 'xforge-common/dialog.service';
 import { createTestFeatureFlag, FeatureFlagService } from 'xforge-common/feature-flags/feature-flag.service';
+import { OnlineStatusService } from 'xforge-common/online-status.service';
 import { SFUserProjectsService } from 'xforge-common/user-projects.service';
 import { ParatextProject } from '../../../core/models/paratext-project';
 import { SFProjectProfileDoc } from '../../../core/models/sf-project-profile-doc';
@@ -26,6 +27,7 @@ const mockedUserProjectsService = mock(SFUserProjectsService);
 const mockedRouter = mock(Router);
 const mockedFeatureFlags = mock(FeatureFlagService);
 const mockedAuthService = mock(AuthService);
+const mockedOnlineStatusService = mock(OnlineStatusService);
 
 const blankProjectDoc = { id: 'project1', data: createTestProjectProfile() } as SFProjectProfileDoc;
 
@@ -78,6 +80,15 @@ function setUpMocks(args: DraftSourcesComponentStoryState): void {
   when(mockedFeatureFlags.allowAdditionalTrainingSource).thenReturn(createTestFeatureFlag(args.mixedSource));
   when(mockedAuthService.currentUserId).thenReturn('user1');
 
+  when(mockedOnlineStatusService.onlineStatus$).thenReturn(of(args.online));
+  when(mockedOnlineStatusService.isOnline).thenReturn(args.online);
+  when(mockedOnlineStatusService.online).thenReturn(
+    new Promise(resolve => {
+      if (args.online) resolve();
+      // Else, never resolve.
+    })
+  );
+
   const languageCodes = ['en', 'fr', 'es', 'pt', 'de', 'ru', 'zh', 'ar', 'hi', 'bn'];
 
   function languageName(code: string): string {
@@ -120,11 +131,13 @@ function setUpMocks(args: DraftSourcesComponentStoryState): void {
 interface DraftSourcesComponentStoryState {
   project: SFProjectProfileDoc;
   mixedSource: boolean;
+  online: boolean;
 }
 
 const defaultArgs: DraftSourcesComponentStoryState = {
   project: blankProjectDoc,
-  mixedSource: true
+  mixedSource: true,
+  online: true
 };
 
 export default {
@@ -143,6 +156,7 @@ export default {
         { provide: Router, useValue: instance(mockedRouter) },
         { provide: FeatureFlagService, useValue: instance(mockedFeatureFlags) },
         { provide: AuthService, useValue: instance(mockedAuthService) },
+        { provide: OnlineStatusService, useValue: instance(mockedOnlineStatusService) },
         defaultTranslocoMarkupTranspilers()
       ]
     })
@@ -435,3 +449,22 @@ export const CanHandleBackTranslationProjectsWithUnknownLanguage: Story = {
     await userEvent.click(await canvas.findByRole('checkbox'));
   }
 };
+
+// See SF-3271
+export const CannotSaveAndSyncWhenOffline: Story = {
+  args: {
+    project: blankProjectDoc,
+    mixedSource: true,
+    online: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const offlineMessage = canvasElement.querySelector('mat-error')?.textContent ?? '';
+    // Offline message is displayed
+    expect(offlineMessage).toContain(
+      'You are offline. Please connect to the internet to save and sync your draft sources.'
+    );
+    // Save button is disabled
+    expect(canvas.getByRole('button', { name: /Save & sync/ })).toBeDisabled();
+  }
+};

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

@@ -284,6 +284,7 @@
     "language_code": "Language code: ",
     "leave_and_discard": "Leave & discard changes",
     "next": "Next",
+    "offline_message": "You are offline. Please connect to the internet to save and sync your draft sources.",
     "overview_reference": "Reference",
     "overview_source": "Source",
     "overview_translated_project": "Translated project",