333725552: (feat) ability to shutdown testrun

modules/ui/src/app/app.component.html

@@ -87,6 +87,9 @@ <h1 class="main-heading">Testrun</h1>
         (click)="openGeneralSettings(true)">
         <mat-icon>tune</mat-icon>
       </button>
+      <app-shutdown-app
+        [disable]="testrunInProgress((systemStatus$ | async)?.status)">
+      </app-shutdown-app>
     </mat-toolbar>
     <div class="app-content-main" role="main" id="main">
       <ng-container *ngIf="settingMissedError$ | async as error">

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

@@ -143,6 +143,7 @@ describe('AppComponent', () => {
         AppComponent,
         FakeGeneralSettingsComponent,
         FakeSpinnerComponent,
+        FakeShutdownAppComponent,
         FakeVersionComponent,
       ],
     });
@@ -657,6 +658,14 @@ class FakeGeneralSettingsComponent {
 })
 class FakeSpinnerComponent {}
 
+@Component({
+  selector: 'app-shutdown-app',
+  template: '<div></div>',
+})
+class FakeShutdownAppComponent {
+  @Input() disable!: boolean;
+}
+
 @Component({
   selector: 'app-version',
   template: '<div></div>',

modules/ui/src/app/app.component.ts

@@ -178,4 +178,12 @@ export class AppComponent implements OnInit {
   consentShown() {
     this.appStore.setContent();
   }
+
+  testrunInProgress(status?: string): boolean {
+    return (
+      status === StatusOfTestrun.InProgress ||
+      status === StatusOfTestrun.WaitingForDevice ||
+      status === StatusOfTestrun.Monitoring
+    );
+  }
 }

modules/ui/src/app/app.module.ts

@@ -44,6 +44,8 @@ import { EffectsModule } from '@ngrx/effects';
 import { AppEffects } from './store/effects';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { SettingsDropdownComponent } from './pages/settings/components/settings-dropdown/settings-dropdown.component';
+import { ShutdownAppComponent } from './components/shutdown-app/shutdown-app.component';
+import { WindowProvider } from './providers/window.provider';
 
 @NgModule({
   declarations: [AppComponent, GeneralSettingsComponent],
@@ -71,8 +73,10 @@ import { SettingsDropdownComponent } from './pages/settings/components/settings-
     EffectsModule.forRoot([AppEffects]),
     CdkTrapFocus,
     SettingsDropdownComponent,
+    ShutdownAppComponent,
   ],
   providers: [
+    WindowProvider,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: ErrorInterceptor,

modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.html

@@ -0,0 +1,38 @@
+<!--
+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.
+-->
+<span class="modal-title">{{ data.title }}</span>
+<p class="modal-content">
+  {{ data.content }}
+</p>
+
+<mat-dialog-actions align="end" class="modal-actions">
+  <button
+    (click)="cancel()"
+    class="cancel-button"
+    color="primary"
+    mat-button
+    type="button">
+    Cancel
+  </button>
+  <button
+    (click)="confirm()"
+    class="confirm-button"
+    color="primary"
+    mat-button
+    type="button">
+    Stop Server & Quit
+  </button>
+</mat-dialog-actions>

modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.scss

@@ -0,0 +1,44 @@
+/**
+ * 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';
+
+:host {
+  display: grid;
+  overflow: hidden;
+  width: 570px;
+  box-sizing: border-box;
+  padding: 24px 16px 8px 24px;
+  gap: 10px;
+}
+
+.modal-title {
+  color: $grey-900;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.modal-content {
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+  color: $grey-800;
+}
+
+.modal-actions {
+  padding: 0;
+  min-height: 30px;
+}

modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.spec.ts

@@ -0,0 +1,100 @@
+/**
+ * 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 { ShutdownAppModalComponent } from './shutdown-app-modal.component';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { of } from 'rxjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ShutdownAppModalComponent', () => {
+  let component: ShutdownAppModalComponent;
+  let fixture: ComponentFixture<ShutdownAppModalComponent>;
+  let compiled: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ShutdownAppModalComponent,
+        MatDialogModule,
+        MatButtonModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [
+        {
+          provide: MatDialogRef,
+          useValue: {
+            keydownEvents: () => of(new KeyboardEvent('keydown', { code: '' })),
+            close: () => ({}),
+          },
+        },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ShutdownAppModalComponent);
+    component = fixture.componentInstance;
+    component.data = {
+      title: 'title',
+      content: 'content',
+    };
+    compiled = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should has title and content', () => {
+    const title = compiled.querySelector('.modal-title') as HTMLElement;
+    const content = compiled.querySelector('.modal-content') as HTMLElement;
+
+    expect(title.innerHTML.trim()).toEqual('title');
+    expect(content.innerHTML.trim()).toEqual('content');
+  });
+
+  it('should close dialog on click "cancel" button', () => {
+    const closeSpy = spyOn(component.dialogRef, 'close');
+    const closeButton = compiled.querySelector(
+      '.cancel-button'
+    ) as HTMLButtonElement;
+
+    closeButton.click();
+
+    expect(closeSpy).toHaveBeenCalledWith();
+
+    closeSpy.calls.reset();
+  });
+
+  it('should close dialog with true on click "confirm" button', () => {
+    const closeSpy = spyOn(component.dialogRef, 'close');
+    const confirmButton = compiled.querySelector(
+      '.confirm-button'
+    ) as HTMLButtonElement;
+
+    confirmButton.click();
+
+    expect(closeSpy).toHaveBeenCalledWith(true);
+
+    closeSpy.calls.reset();
+  });
+});

modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.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 { EscapableDialogComponent } from '../escapable-dialog/escapable-dialog.component';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+
+interface DialogData {
+  title?: string;
+  content?: string;
+}
+
+@Component({
+  selector: 'app-shutdown-app-modal',
+  templateUrl: './shutdown-app-modal.component.html',
+  styleUrl: './shutdown-app-modal.component.scss',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShutdownAppModalComponent extends EscapableDialogComponent {
+  constructor(
+    public override dialogRef: MatDialogRef<ShutdownAppModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData
+  ) {
+    super(dialogRef);
+  }
+
+  confirm() {
+    this.dialogRef.close(true);
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+}

modules/ui/src/app/components/shutdown-app/shutdown-app.component.html

@@ -0,0 +1,23 @@
+<!--
+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.
+-->
+<button
+  class="shutdown-button"
+  mat-icon-button
+  aria-label="Shutdown Testrun"
+  [disabled]="disable"
+  (click)="openShutdownModal()">
+  <mat-icon>power_settings_new</mat-icon>
+</button>

modules/ui/src/app/components/shutdown-app/shutdown-app.component.scss

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+:host {
+  ::ng-deep.mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
+    border-radius: inherit;
+  }
+}
+.shutdown-button {
+  border-radius: 20px;
+  padding: 0;
+  box-sizing: border-box;
+  height: 34px;
+  margin: 11px 2px 11px 0;
+  line-height: 50%;
+}