diff --git a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.html b/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.html deleted file mode 100644 index 0614dfc28..000000000 --- a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.html +++ /dev/null @@ -1,38 +0,0 @@ - -{{ data.title }} -

- {{ data.content }} -

- - - - - diff --git a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.scss b/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.scss deleted file mode 100644 index 7d4e8ee6b..000000000 --- a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.scss +++ /dev/null @@ -1,46 +0,0 @@ -/** - * 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. - */ -@use 'colors'; -@use 'mixins'; - -::ng-deep :root { - --mat-dialog-container-max-width: 570px; -} - -:host { - @include mixins.dialog; - padding: 24px 16px 8px 24px; - gap: 10px; -} - -.modal-title { - color: colors.$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: colors.$grey-800; -} - -.modal-actions { - padding: 0; - min-height: 30px; -} diff --git a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.spec.ts b/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.spec.ts deleted file mode 100644 index d7cd5abb6..000000000 --- a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.spec.ts +++ /dev/null @@ -1,100 +0,0 @@ -/** - * 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; - 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(); - }); -}); diff --git a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts b/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts deleted file mode 100644 index 77a6e179b..000000000 --- a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** - * 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', - - imports: [MatDialogModule, MatButtonModule], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ShutdownAppModalComponent extends EscapableDialogComponent { - override dialogRef: MatDialogRef; - data = inject(MAT_DIALOG_DATA); - - constructor() { - const dialogRef = - inject>(MatDialogRef); - - super(); - this.dialogRef = dialogRef; - } - - confirm() { - this.dialogRef.close(true); - } - - cancel() { - this.dialogRef.close(); - } -} diff --git a/modules/ui/src/app/components/shutdown-app/shutdown-app.component.spec.ts b/modules/ui/src/app/components/shutdown-app/shutdown-app.component.spec.ts index 522234f5e..f2bba357b 100644 --- a/modules/ui/src/app/components/shutdown-app/shutdown-app.component.spec.ts +++ b/modules/ui/src/app/components/shutdown-app/shutdown-app.component.spec.ts @@ -25,9 +25,9 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { TestRunService } from '../../services/test-run.service'; import SpyObj = jasmine.SpyObj; import { of } from 'rxjs'; -import { ShutdownAppModalComponent } from '../shutdown-app-modal/shutdown-app-modal.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { WINDOW } from '../../providers/window.provider'; +import { SimpleDialogComponent } from '../simple-dialog/simple-dialog.component'; describe('ShutdownAppComponent', () => { let component: ShutdownAppComponent; @@ -71,7 +71,7 @@ describe('ShutdownAppComponent', () => { mockService.shutdownTestrun.and.returnValue(of(false)); spyOn(component.dialog, 'open').and.returnValue({ afterClosed: () => of(true), - } as MatDialogRef); + } as MatDialogRef); tick(); component.openShutdownModal(); @@ -83,7 +83,7 @@ describe('ShutdownAppComponent', () => { mockService.shutdownTestrun.and.returnValue(of(true)); spyOn(component.dialog, 'open').and.returnValue({ afterClosed: () => of(true), - } as MatDialogRef); + } as MatDialogRef); tick(); component.openShutdownModal(); diff --git a/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts b/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts index cc0da31f3..131576b1f 100644 --- a/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts +++ b/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts @@ -24,11 +24,11 @@ import { CommonModule } from '@angular/common'; import { MatButtonModule } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatDialog } from '@angular/material/dialog'; -import { ShutdownAppModalComponent } from '../shutdown-app-modal/shutdown-app-modal.component'; import { Subject, takeUntil } from 'rxjs'; import { TestRunService } from '../../services/test-run.service'; import { WINDOW } from '../../providers/window.provider'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { SimpleDialogComponent } from '../simple-dialog/simple-dialog.component'; @Component({ selector: 'app-shutdown-app', @@ -47,16 +47,19 @@ export class ShutdownAppComponent implements OnDestroy { private destroy$: Subject = new Subject(); openShutdownModal() { - const dialogRef = this.dialog.open(ShutdownAppModalComponent, { + const dialogRef = this.dialog.open(SimpleDialogComponent, { ariaLabel: 'Shutdown Testrun', data: { - title: 'Shutdown Testrun', - content: 'Do you want to stop Testrun?', + icon: 'power_settings_new', + title: 'Shutdown Testrun?', + content: + 'Testrun will shutdown and all testing processes will be stopped.', + confirmName: 'Stop Server & Quit', }, autoFocus: true, hasBackdrop: true, disableClose: true, - panelClass: 'shutdown-app-dialog', + panelClass: ['simple-dialog', 'shutdown-app-dialog'], }); dialogRef diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index 4d086dfdc..ece43227a 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -143,6 +143,7 @@ body { } } +.shutdown-app-dialog app-simple-dialog, .delete-dialog app-simple-dialog, .discard-dialog app-simple-dialog { --mat-dialog-container-max-width: 329px;