MES-9118 Prevent search when offline

src/app/pages/rekey-search/rekey-search.html

@@ -8,6 +8,8 @@
 </ion-header>
 
 <ion-content>
+  <offline-banner [isOffline]="pageState.isOffline$ | async"></offline-banner>
+
   <div class="search-inputs">
     <tabs>
       <tab [tabTitle]="'Rekey search'" id="tab-search-rekey">
@@ -63,7 +65,7 @@
           </ion-row>
           <ion-row class="ion-padding-top">
             <ion-button
-              [disabled]="(pageState.isLoading$ | async)"
+              [disabled]="(pageState.isLoading$ | async) || (pageState.isOffline$ | async)"
               class="mes-primary-button search-tests"
               id="rekey-search-search-tests-btn"
               (click)="searchTests()"

src/app/pages/rekey-search/rekey-search.ts

@@ -21,12 +21,14 @@ import {
   getRekeySearchError,
 } from '@pages/rekey-search/rekey-search.selector';
 import { OrientationMonitorProvider } from '@providers/orientation-monitor/orientation-monitor.provider';
+import { NetworkStateProvider } from '@providers/network-state/network-state';
 
 interface RekeySearchPageState {
   isLoading$: Observable<boolean>;
   hasSearched$: Observable<boolean>;
   bookedTestSlot$: Observable<TestSlot>;
   rekeySearchErr$: Observable<RekeySearchError | HttpErrorResponse>;
+  isOffline$: Observable<boolean>;
 }
 
 @Component({
@@ -44,6 +46,7 @@ export class RekeySearchPage extends BasePageComponent implements OnInit {
 
   constructor(
     public orientationMonitorProvider: OrientationMonitorProvider,
+    private networkStateProvider: NetworkStateProvider,
     injector: Injector,
   ) {
     super(injector);
@@ -67,6 +70,7 @@ export class RekeySearchPage extends BasePageComponent implements OnInit {
       rekeySearchErr$: rekeySearch$.pipe(
         map(getRekeySearchError),
       ),
+      isOffline$: this.networkStateProvider.isOffline$,
     };
   }
 

src/app/pages/test-results-search/__tests__/test-results-search.spec.ts

@@ -25,6 +25,8 @@ import { TestCentre } from '@dvsa/mes-journal-schema';
 import { TestResultsSearchPage } from '../test-results-search';
 import { TestResultsSearchComponentsModule } from '../components/test-results-search-components.module';
 import { HttpStatusCode } from '@angular/common/http';
+import { NetworkStateProvider } from '@providers/network-state/network-state';
+import { NetworkStateProviderMock } from '@providers/network-state/__mocks__/network-state.mock';
 
 enum SearchBy {
   DriverNumber = 'driverNumber',
@@ -76,6 +78,10 @@ describe('TestResultsSearchPage', () => {
           provide: AppComponent,
           useClass: MockAppComponent,
         },
+        {
+          provide: NetworkStateProvider,
+          useClass: NetworkStateProviderMock,
+        }
       ],
     });
 

src/app/pages/test-results-search/components/advanced-search/advanced-search.html

@@ -221,7 +221,7 @@
   <ion-row>
     <ion-button
       (click)="searchTests()"
-      [disabled]="!!showSpinner"
+      [disabled]="!!showSpinner || isOffline"
       class="mes-primary-button search-tests"
       id="advanced-search-button"
     >

src/app/pages/test-results-search/components/advanced-search/advanced-search.ts

@@ -27,6 +27,9 @@ export class AdvancedSearchComponent {
   @Input()
   testCentres: TestCentre[] = [];
 
+  @Input()
+  isOffline: boolean;
+
   @Output()
   onSearchTests = new EventEmitter<AdvancedSearchParams>();
 

src/app/pages/test-results-search/test-results-search.html

@@ -8,6 +8,8 @@
 </ion-header>
 
 <ion-content forceOverscroll="false">
+  <offline-banner [isOffline]="pageState.isOffline$ | async"></offline-banner>
+
   <div class="search-inputs">
     <tabs>
       <tab [tabTitle]="'Candidate details'" id="tab-search-candidate-details">
@@ -80,7 +82,7 @@
           <ion-row class="ion-padding-top">
             <ion-button
               id="test-result-search-button"
-              [attr.disabled]="showSearchSpinner ? 'true' : isEmpty(candidateInfo)"
+              [attr.disabled]="showSearchSpinner || (pageState.isOffline$ | async) ? 'true' : isEmpty(candidateInfo)"
               class="mes-primary-button search-tests"
               (click)="searchTests()"
             >
@@ -99,6 +101,7 @@
           [testCentres]="pageState.activeTestCentres$ | async"
           (onSearchTests)="advancedSearch($event)"
           [showSpinner]="showAdvancedSearchSpinner"
+          [isOffline]="pageState.isOffline$ | async"
         >
         </advanced-search>
       </tab>

src/app/pages/test-results-search/test-results-search.ts

@@ -11,6 +11,7 @@
 import { LogType } from '@shared/models/log.model';
 import { MesError } from '@shared/models/mes-error.model';
 import { AppConfigProvider } from '@providers/app-config/app-config';
+import { NetworkStateProvider } from '@providers/network-state/network-state';
 import { SearchProvider } from '@providers/search/search';
 import { AdvancedSearchParams } from '@providers/search/search.models';
 import { ExaminerRole } from '@providers/app-config/constants/examiner-role.constants';
@@ -35,6 +36,7 @@
 
 interface TestResultPageState {
   activeTestCentres$: Observable<JournalTestCentre[]>;
+  isOffline$: Observable<boolean>;
 }
 
 @Component({
@@ -61,6 +63,7 @@
     public searchProvider: SearchProvider,
     private appConfig: AppConfigProvider,
     private accessibilityService: AccessibilityService,
+    private networkStateProvider: NetworkStateProvider,
     injector: Injector,
   ) {
     super(injector);
@@ -73,6 +76,7 @@
         map(getTestCentres),
         map(getActiveTestCentres),
       ),
+      isOffline$: this.networkStateProvider.isOffline$,
     };
     this.merged$ = merge(
       this.pageState.activeTestCentres$,
@@ -201,7 +205,7 @@
             await this.showError(err);
             this.hasSearched = false;
           }
           console.log('ERROR', JSON.stringify(err));
           return of();
         }),
       )