337012359: (feat) add snackBar with wait or stop testrun

modules/ui/src/app/components/snack-bar/snack-bar.component.html

@@ -0,0 +1,39 @@
+<!--
+Copyright 2023 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="snack-bar-container">
+  <div matSnackBarLabel class="snack-bar-label">
+    <p>The Waiting for Device stage is taking more than one minute.</p>
+    <p>
+      Please check device connection or stop and update system configuration.
+    </p>
+  </div>
+  <span matSnackBarActions class="snack-bar-actions">
+    <button
+      mat-button
+      matSnackBarAction
+      class="action-btn stop"
+      (click)="stop()">
+      STOP AND TROUBLESHOOT
+    </button>
+    <button
+      mat-button
+      matSnackBarAction
+      class="action-btn wait"
+      (click)="wait()">
+      OK
+    </button>
+  </span>
+</div>

modules/ui/src/app/components/snack-bar/snack-bar.component.scss

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import '../../../theming/colors';
+
+.snack-bar-container {
+  display: flex;
+
+  .snack-bar-label p {
+    margin: 0;
+  }
+
+  .snack-bar-actions button.action-btn {
+    color: $blue-300;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+  }
+}

modules/ui/src/app/components/snack-bar/snack-bar.component.spec.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnackBarComponent } from './snack-bar.component';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { AppState } from '../../store/state';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
+import { setIsOpenWaitSnackBar, setIsStopTestrun } from '../../store/actions';
+
+describe('SnackBarComponent', () => {
+  let component: SnackBarComponent;
+  let fixture: ComponentFixture<SnackBarComponent>;
+  let compiled: HTMLElement;
+  let store: MockStore<AppState>;
+
+  const MatSnackBarRefMock = {
+    open: () => ({}),
+    dismiss: () => ({}),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnackBarComponent],
+      providers: [
+        { provide: MatSnackBarRef, useValue: MatSnackBarRefMock },
+        provideMockStore({}),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnackBarComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(MockStore);
+    compiled = fixture.nativeElement as HTMLElement;
+    spyOn(store, 'dispatch').and.callFake(() => {});
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should dispatch setIsStopTestrun action', () => {
+    const actionBtnStop = compiled.querySelector(
+      '.action-btn.stop'
+    ) as HTMLButtonElement;
+
+    actionBtnStop.click();
+
+    expect(store.dispatch).toHaveBeenCalledWith(
+      setIsStopTestrun({ isStopTestrun: true })
+    );
+  });
+
+  it('should dispatch setIsOpenWaitSnackBar action', () => {
+    const actionBtnWait = compiled.querySelector(
+      '.action-btn.wait'
+    ) as HTMLButtonElement;
+
+    actionBtnWait.click();
+
+    expect(store.dispatch).toHaveBeenCalledWith(
+      setIsOpenWaitSnackBar({ isOpenWaitSnackBar: false })
+    );
+  });
+});

modules/ui/src/app/components/snack-bar/snack-bar.component.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MatSnackBarAction,
+  MatSnackBarActions,
+  MatSnackBarLabel,
+  MatSnackBarRef,
+} from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/state';
+import { setIsOpenWaitSnackBar, setIsStopTestrun } from '../../store/actions';
+
+@Component({
+  selector: 'app-snack-bar',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatSnackBarLabel,
+    MatSnackBarActions,
+    MatSnackBarAction,
+  ],
+  templateUrl: './snack-bar.component.html',
+  styleUrl: './snack-bar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SnackBarComponent {
+  snackBarRef = inject(MatSnackBarRef);
+  constructor(private store: Store<AppState>) {}
+
+  wait(): void {
+    this.snackBarRef.dismiss();
+    this.store.dispatch(setIsOpenWaitSnackBar({ isOpenWaitSnackBar: false }));
+  }
+
+  stop(): void {
+    this.store.dispatch(setIsStopTestrun({ isStopTestrun: true }));
+  }
+}

modules/ui/src/app/pages/certificates/certificates.component.spec.ts

@@ -18,6 +18,7 @@ import {
   fakeAsync,
   flush,
   TestBed,
+  tick,
 } from '@angular/core/testing';
 
 import { CertificatesComponent } from './certificates.component';
@@ -30,13 +31,17 @@ import { of } from 'rxjs';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DeleteFormComponent } from '../../components/delete-form/delete-form.component';
 import { TestRunService } from '../../services/test-run.service';
+import { NotificationService } from '../../services/notification.service';
 
 describe('CertificatesComponent', () => {
   let component: CertificatesComponent;
   let mockLiveAnnouncer: SpyObj<LiveAnnouncer>;
   let mockService: SpyObj<TestRunService>;
   let fixture: ComponentFixture<CertificatesComponent>;
 
+  const notificationServiceMock: jasmine.SpyObj<NotificationService> =
+    jasmine.createSpyObj(['notify']);
+
   beforeEach(async () => {
     mockService = jasmine.createSpyObj([
       'fetchCertificates',
@@ -53,6 +58,7 @@ describe('CertificatesComponent', () => {
       providers: [
         { provide: LiveAnnouncer, useValue: mockLiveAnnouncer },
         { provide: TestRunService, useValue: mockService },
+        { provide: NotificationService, useValue: notificationServiceMock },
       ],
     }).compileComponents();
 
@@ -119,8 +125,10 @@ describe('CertificatesComponent', () => {
         const openSpy = spyOn(component.dialog, 'open').and.returnValue({
           afterClosed: () => of(true),
         } as MatDialogRef<typeof DeleteFormComponent>);
+        tick();
 
         component.deleteCertificate(certificate.name);
+        tick();
 
         expect(openSpy).toHaveBeenCalledWith(DeleteFormComponent, {
           ariaLabel: 'Delete certificate',

modules/ui/src/app/pages/testrun/progress.component.spec.ts

@@ -49,12 +49,15 @@ import {
   selectDevices,
   selectHasDevices,
   selectIsOpenStartTestrun,
+  selectIsOpenWaitSnackBar,
+  selectIsStopTestrun,
   selectIsTestrunStarted,
   selectSystemStatus,
 } from '../../store/selectors';
 import { TestrunStore } from './testrun.store';
 import { setTestrunStatus } from '../../store/actions';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NotificationService } from '../../services/notification.service';
 
 describe('ProgressComponent', () => {
   let component: ProgressComponent;
@@ -77,6 +80,13 @@ describe('ProgressComponent', () => {
     ['setLoading', 'getLoading']
   );
 
+  const notificationServiceMock: jasmine.SpyObj<NotificationService> =
+    jasmine.createSpyObj('NotificationService', [
+      'dismissWithTimout',
+      'dismissSnackBar',
+      'openSnackBar',
+    ]);
+
   const stateServiceMock: jasmine.SpyObj<FocusManagerService> =
     jasmine.createSpyObj('stateServiceMock', ['focusFirstElementInContainer']);
 
@@ -97,6 +107,7 @@ describe('ProgressComponent', () => {
           { provide: TestRunService, useValue: testRunServiceMock },
           { provide: FocusManagerService, useValue: stateServiceMock },
           { provide: LoaderService, useValue: loaderServiceMock },
+          { provide: NotificationService, useValue: notificationServiceMock },
           {
             provide: MatDialogRef,
             useValue: {},
@@ -106,6 +117,8 @@ describe('ProgressComponent', () => {
               { selector: selectHasDevices, value: false },
               { selector: selectIsOpenStartTestrun, value: false },
               { selector: selectIsTestrunStarted, value: false },
+              { selector: selectIsOpenWaitSnackBar, value: false },
+              { selector: selectIsStopTestrun, value: false },
               {
                 selector: selectSystemStatus,
                 value: MOCK_PROGRESS_DATA_IN_PROGRESS,
@@ -225,6 +238,7 @@ describe('ProgressComponent', () => {
           { provide: TestRunService, useValue: testRunServiceMock },
           { provide: FocusManagerService, useValue: stateServiceMock },
           { provide: LoaderService, useValue: loaderServiceMock },
+          { provide: NotificationService, useValue: notificationServiceMock },
           {
             provide: MatDialogRef,
             useValue: {},
@@ -233,6 +247,8 @@ describe('ProgressComponent', () => {
             selectors: [
               { selector: selectHasDevices, value: false },
               { selector: selectDevices, value: [] },
+              { selector: selectIsOpenWaitSnackBar, value: false },
+              { selector: selectIsStopTestrun, value: false },
             ],
           }),
         ],

modules/ui/src/app/pages/testrun/progress.component.ts

@@ -34,6 +34,7 @@ import { FocusManagerService } from '../../services/focus-manager.service';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
 import { TestrunStore } from './testrun.store';
 import { TestRunService } from '../../services/test-run.service';
+import { NotificationService } from '../../services/notification.service';
 
 @Component({
   selector: 'app-progress',
@@ -53,6 +54,7 @@ export class ProgressComponent implements OnInit, OnDestroy {
 
   constructor(
     private readonly testRunService: TestRunService,
+    private readonly notificationService: NotificationService,
     public dialog: MatDialog,
     private readonly focusManagerService: FocusManagerService,
     public testrunStore: TestrunStore
@@ -70,6 +72,15 @@ export class ProgressComponent implements OnInit, OnDestroy {
           this.openTestRunModal();
         }
       });
+
+    this.testrunStore.isStopTestrun$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(isStop => {
+        if (isStop) {
+          this.stopTestrun();
+          this.notificationService.dismissSnackBar();
+        }
+      });
   }
 
   isTestrunInProgress(status?: string) {
@@ -125,6 +136,7 @@ export class ProgressComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this.notificationService.dismissSnackBar();
     this.destroy$.next(true);
     this.destroy$.unsubscribe();
     this.testrunStore.destroyInterval();