Issue #SB-25231 fix: Disable sync telemetry button in offline mode

src/app/client/src/app/app.component.spec.ts

@@ -21,7 +21,7 @@ import { animate, AnimationBuilder, AnimationMetadata, AnimationPlayer, style }
 import { configureTestSuite } from '@sunbird/test-util';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { UtilService } from '@sunbird/shared';
+import { UtilService, ConnectionService } from '@sunbird/shared';
 
 class RouterStub {
   public navigationEnd = new NavigationEnd(0, '/explore', '/explore');
@@ -53,6 +53,15 @@ describe('AppComponent', () => {
   let userService;
   let timerCallback;
   let resourceService;
+  const resourceMockData = {
+    messages: {
+      fmsg: { m0097: 'Something went wrong' },
+      stmsg: { desktop: { onlineStatus: 'You are online' } },
+      emsg: { desktop: { onlineStatus: 'You are offline' } }
+    },
+    initialize: () => ({}),
+    languageSelected$: of({ value: 'en', dir: 'ltr' })
+  };
   configureTestSuite();
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -67,8 +76,9 @@ describe('AppComponent', () => {
         { provide: ElementRef, useValue: new MockElementRef() },
         ToasterService, TenantService, CacheService, AnimationBuilder,
         UserService, ConfigService, LearnerService, BrowserCacheTtlService,
-        PermissionService, ResourceService, CoursesService, OrgDetailsService, ProfileService,
-        TelemetryService, { provide: TELEMETRY_PROVIDER, useValue: EkTelemetry }, SearchService, ContentService],
+        PermissionService, CoursesService, OrgDetailsService, ProfileService,
+        TelemetryService, { provide: TELEMETRY_PROVIDER, useValue: EkTelemetry }, SearchService, ContentService,
+        { provide: ResourceService, useValue: resourceMockData }],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
@@ -472,4 +482,22 @@ const maockOrgDetails = { result: { response: { content: [{hashTagId: '1235654',
     expect(component.closeFrameworkPopup).toHaveBeenCalled();
     expect(component.checkLocationStatus).toHaveBeenCalled();
   });
+  it('should call notifyNetworkChange', () => {
+    const connectionService = TestBed.get(ConnectionService);
+    const toasterService = TestBed.get(ToasterService);
+    spyOn(toasterService, 'info');
+    spyOn(connectionService, 'monitor').and.returnValue(of(true));
+    component.notifyNetworkChange();
+    expect(toasterService.info).toHaveBeenCalledWith('You are online');
+  });
+
+  it('should navigate to my download page if network is not available', () => {
+    const connectionService = TestBed.get(ConnectionService);
+    const router = TestBed.get(Router);
+    const toasterService = TestBed.get(ToasterService);
+    spyOn(toasterService, 'info');
+    spyOn(connectionService, 'monitor').and.returnValue(of(false));
+    component.notifyNetworkChange();
+    expect(router.navigate).toHaveBeenCalledWith(['mydownloads'], {queryParams: { selectedTab: 'mydownloads' }});
+  });
 });

src/app/client/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { environment } from '@sunbird/environment';
 import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { TelemetryService, ITelemetryContext } from '@sunbird/telemetry';
 import {
-  UtilService, ResourceService, ToasterService, IUserData, IUserProfile,
+  UtilService, ResourceService, ToasterService, IUserData, IUserProfile, ConnectionService,
   NavigationHelperService, ConfigService, BrowserCacheTtlService, LayoutService
 } from '@sunbird/shared';
 import { Component, HostListener, OnInit, ViewChild, Inject, OnDestroy, ChangeDetectorRef, ElementRef, Renderer2, NgZone } from '@angular/core';
@@ -13,7 +13,7 @@ import {
 import * as _ from 'lodash-es';
 import { ProfileService } from '@sunbird/profile';
 import { Observable, of, throwError, combineLatest, BehaviorSubject, forkJoin, zip, Subject } from 'rxjs';
-import { first, filter, mergeMap, tap, map, skipWhile, startWith, takeUntil } from 'rxjs/operators';
+import { first, filter, mergeMap, tap, map, skipWhile, startWith, takeUntil, debounceTime } from 'rxjs/operators';
 import { CacheService } from 'ng2-cache-service';
 import { DOCUMENT } from '@angular/common';
 import { image } from '../assets/images/tara-bot-icon';
@@ -129,7 +129,8 @@ export class AppComponent implements OnInit, OnDestroy {
     public formService: FormService, private programsService: ProgramsService,
     @Inject(DOCUMENT) private _document: any, public sessionExpiryInterceptor: SessionExpiryInterceptor,
     public changeDetectorRef: ChangeDetectorRef, public layoutService: LayoutService,
-    public generaliseLabelService: GeneraliseLabelService, private renderer: Renderer2, private zone: NgZone) {
+    public generaliseLabelService: GeneraliseLabelService, private renderer: Renderer2, private zone: NgZone,
+    private connectionService: ConnectionService) {
     this.instance = (<HTMLInputElement>document.getElementById('instance'))
       ? (<HTMLInputElement>document.getElementById('instance')).value : 'sunbird';
     const layoutType = localStorage.getItem('layoutType') || '';
@@ -217,6 +218,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.isDesktopApp = this.utilService.isDesktopApp;
     if (this.isDesktopApp) {
       this._document.body.classList.add('desktop-app');
+      this.notifyNetworkChange();
     }
     this.checkFullScreenView();
     this.layoutService.switchableLayout().pipe(takeUntil(this.unsubscribe$)).subscribe(layoutConfig => {
@@ -909,4 +911,13 @@ export class AppComponent implements OnInit, OnDestroy {
   setLocalTheme(value: string) {
     document.documentElement.setAttribute('data-theme', value);
   }
+  notifyNetworkChange() {
+    this.connectionService.monitor().pipe(debounceTime(5000)).subscribe((status: boolean) => {
+      const message = status ? _.get(this.resourceService, 'messages.stmsg.desktop.onlineStatus') : _.get(this.resourceService, 'messages.emsg.desktop.offlineStatus');
+      this.toasterService.info(message);
+      if (!status && this.router.url.indexOf('mydownloads') <= 0) {
+        this.router.navigate(['mydownloads'], { queryParams: { selectedTab: 'mydownloads' } });
+      }
+    });
+  }
 }

src/app/client/src/app/modules/public/module/offline/components/telemetry/telemetry.component.html

@@ -20,7 +20,7 @@
         </div>
         <div class="d-flex flex-w-wrap px-16">
           <div>
-            <button type="button" [class.sb-btn-disabled]="disableSync" class="sb-btn sb-btn-primary sb-btn-normal my-8" [disabled]="disableSync" (click)="syncTelemetry()" appOnlineOnly>
+            <button type="button" class="sb-btn sb-btn-primary sb-btn-normal my-8" [ngClass]="disableSync || !isConnected ? 'sb-btn-disabled pointer-events-disabled': ''" [disabled]="disableSync || !isConnected"  (click)="syncTelemetry()">
               {{resourceService?.frmelmnts?.lbl?.desktop?.syncTelemetry}}   ({{telemetryInfo?.totalSize | filesize}})</button>
               <dl class="my-0 profile-description">
                   <dd class="multiline-list-value profile-description-title" *ngIf="showSyncStatus">

src/app/client/src/app/modules/shared/services/connection-service/connection.service.spec.ts

@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-
 import { ConnectionService } from './connection.service';
 import { of as observableOf, of } from 'rxjs';
 import { ToasterService, ResourceService, UtilService } from '@sunbird/shared';
@@ -18,7 +17,7 @@ describe('ConnectionService', () => {
     }
   };
   beforeEach(() => TestBed.configureTestingModule({
-    providers: [ToasterService, { provide: ResourceService, useValue: resourceMockData },
+    providers: [{ provide: ResourceService, useValue: resourceMockData },
       { provide: Router, useClass: RouterStub }, UtilService]
   }));
 
@@ -50,26 +49,4 @@ describe('ConnectionService', () => {
       expect(data).toBe(true);
     });
   });
-
-  it('should call notifyNetworkChange', () => {
-    const service: ConnectionService = TestBed.get(ConnectionService);
-    const toasterService = TestBed.get(ToasterService);
-    const utilService = TestBed.get(UtilService);
-    utilService._isDesktopApp = true;
-    spyOn(toasterService, 'info');
-    service['connectionMonitor'] = of(true);
-    service.notifyNetworkChange();
-    expect(toasterService.info).toHaveBeenCalledWith('You are online');
-  });
-
-  it('should navigate to my download page if network is not available', () => {
-    const service: ConnectionService = TestBed.get(ConnectionService);
-    const router = TestBed.get(Router);
-    const toasterService = TestBed.get(ToasterService);
-    spyOn(toasterService, 'info');
-    service['connectionMonitor'] = of(false);
-    service.notifyNetworkChange();
-    expect(router.navigate).toHaveBeenCalledWith(['mydownloads'], {queryParams: { selectedTab: 'mydownloads' }});
-  });
-
 });

src/app/client/src/app/modules/shared/services/connection-service/connection.service.ts

@@ -1,10 +1,7 @@
 import { Injectable } from '@angular/core';
-import { ResourceService } from '../../services/resource/resource.service';
-import { ToasterService } from '../../services/toaster/toaster.service';
 import { UtilService } from '../../services/util/util.service';
 import * as _ from 'lodash-es';
 import { Observable } from 'rxjs';
-import { debounceTime, throttleTime } from 'rxjs/operators';
 import { Router } from '@angular/router';
 
 @Injectable({
@@ -14,8 +11,7 @@ export class ConnectionService {
 
   private connectionMonitor: Observable<boolean>;
 
-  constructor(private toastService: ToasterService, private resourceService: ResourceService,
-    public router: Router, public utilService: UtilService) {
+  constructor(public router: Router, public utilService: UtilService) {
     this.connectionMonitor = new Observable((observer) => {
       observer.next(navigator.onLine);
       window.addEventListener('offline', (e) => {
@@ -25,19 +21,6 @@ export class ConnectionService {
         observer.next(true);
       });
     });
-    if(this.utilService.isDesktopApp) {
-      this.notifyNetworkChange();
-    }
-  }
-
-  notifyNetworkChange() {
-    this.connectionMonitor.pipe(debounceTime(5000), throttleTime(5000)).subscribe((status: boolean) => {
-      const message = status ? _.get(this.resourceService, 'messages.stmsg.desktop.onlineStatus') : _.get(this.resourceService, 'messages.emsg.desktop.offlineStatus');
-      this.toastService.info(message);
-      if (!status && this.router.url.indexOf('mydownloads') <= 0) {
-        this.router.navigate(['mydownloads'], { queryParams: { selectedTab: 'mydownloads' } });
-      }
-    });
   }
 
   monitor(): Observable<boolean> {