Adds delete device button

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html

@@ -287,6 +287,14 @@ <h3 class="device-qualification-form-summary-info-title">
         </section>
       </section>
       <div class="device-qualification-form-actions">
+        <button
+          *ngIf="!data.isCreate"
+          (click)="delete()"
+          class="delete-button"
+          mat-flat-button
+          type="button">
+          Delete
+        </button>
         <button
           mat-button
           color="primary"

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss

@@ -57,11 +57,6 @@ $form-height: 993px;
   white-space: nowrap;
 }
 
-.delete-button {
-  color: $primary;
-  margin-right: auto;
-}
-
 .hidden {
   display: none;
 }
@@ -206,8 +201,19 @@ $form-height: 993px;
   }
 }
 
+.delete-button {
+  color: $primary;
+  float: left;
+}
+
 .device-qualification-form-actions {
+  width: $device-item-width;
   text-align: center;
+  padding: 0 24px;
+  justify-self: center;
+  &:has(.delete-button) {
+    text-align: right;
+  }
   .close-button {
     padding: 0 16px;
   }

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts

@@ -257,6 +257,10 @@ export class DeviceQualificationFromComponent
     });
   }
 
+  delete(): void {
+    this.dialogRef.close({ action: FormAction.Delete } as FormResponse);
+  }
+
   closeForm(): void {
     const device1 = this.data.initialDevice;
     const device2 = this.createDeviceFromForm();

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

@@ -22,7 +22,7 @@ import {
 import { of } from 'rxjs';
 import { Device } from '../../model/device';
 
-import { DevicesComponent } from './devices.component';
+import { DevicesComponent, FormAction } from './devices.component';
 import { DevicesModule } from './devices.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialogRef } from '@angular/material/dialog';
@@ -58,6 +58,7 @@ describe('DevicesComponent', () => {
       'selectDevice',
       'setStatus',
       'getTestModules',
+      'deleteDevice',
     ]);
 
     await TestBed.configureTestingModule({
@@ -258,6 +259,63 @@ describe('DevicesComponent', () => {
     });
   });
 
+  it('should delete device if dialog closes with object, action delete and selected device', () => {
+    spyOn(component.dialog, 'open').and.returnValue({
+      afterClosed: () =>
+        of({
+          device,
+          action: FormAction.Delete,
+        }),
+    } as MatDialogRef<typeof DeviceQualificationFromComponent>);
+
+    component.openDialog([device], MOCK_TEST_MODULES, device);
+
+    expect(mockDevicesStore.deleteDevice).toHaveBeenCalled();
+  });
+
+  describe('delete device dialog', () => {
+    beforeEach(() => {
+      component.viewModel$ = of({
+        devices: [device, device, device],
+        selectedDevice: device,
+        deviceInProgress: null,
+        testModules: [],
+      });
+      fixture.detectChanges();
+    });
+
+    it('should delete device when dialog return true', () => {
+      spyOn(component.dialog, 'open').and.returnValue({
+        afterClosed: () => of(true),
+      } as MatDialogRef<typeof SimpleDialogComponent>);
+
+      component.openDeleteDialog([device], MOCK_TEST_MODULES, device);
+
+      const args = mockDevicesStore.deleteDevice.calls.argsFor(0);
+      // @ts-expect-error config is in object
+      expect(args[0].device).toEqual(device);
+      expect(mockDevicesStore.deleteDevice).toHaveBeenCalled();
+    });
+
+    it('should open device dialog when dialog return null', () => {
+      const openDeviceDialogSpy = spyOn(component, 'openDialog');
+      spyOn(component.dialog, 'open').and.returnValue({
+        afterClosed: () => of(null),
+      } as MatDialogRef<typeof SimpleDialogComponent>);
+
+      component.openDeleteDialog([device], MOCK_TEST_MODULES, device);
+
+      expect(openDeviceDialogSpy).toHaveBeenCalledWith(
+        [device],
+        MOCK_TEST_MODULES,
+        device,
+        undefined,
+        false,
+        0
+      );
+    });
+  });
+
   describe('#openStartTestrun', () => {
     it('should open initiate test run modal', fakeAsync(() => {
       const openSpy = spyOn(component.dialog, 'open').and.returnValue({

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

@@ -170,6 +170,10 @@ export class DevicesComponent implements OnInit, OnDestroy {
               this.focusManagerService.focusFirstElementInContainer();
             });
         }
+        if (response.action === FormAction.Delete && initialDevice) {
+          this.devicesStore.selectDevice(initialDevice);
+          this.openDeleteDialog(devices, testModules, initialDevice);
+        }
       });
   }
 
@@ -211,6 +215,54 @@ export class DevicesComponent implements OnInit, OnDestroy {
       });
   }
 
+  openDeleteDialog(
+    devices: Device[],
+    testModules: TestModule[],
+    initialDevice: Device,
+    device?: Device,
+    isEditDevice = false,
+    index = 0
+  ) {
+    const dialogRef = this.dialog.open(SimpleDialogComponent, {
+      ariaLabel: 'Delete device',
+      data: {
+        title: 'Delete device?',
+        content: `You are about to delete ${
+          initialDevice.manufacturer + ' ' + initialDevice.model
+        }. Are you sure?`,
+        device: device,
+      },
+      autoFocus: true,
+      hasBackdrop: true,
+      disableClose: true,
+      panelClass: 'simple-dialog',
+    });
+    dialogRef
+      ?.afterClosed()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(deleteDevice => {
+        if (deleteDevice) {
+          this.devicesStore.deleteDevice({
+            device: initialDevice,
+            onDelete: () => {
+              this.focusNextButton();
+              this.devicesStore.selectDevice(null);
+            },
+          });
+        } else {
+          this.openDialog(
+            devices,
+            testModules,
+            initialDevice,
+            device,
+            isEditDevice,
+            index
+          );
+          this.devicesStore.selectDevice(null);
+        }
+      });
+  }
+
   private focusNextButton() {
     // Try to focus next device item, if exist
     const next = this.element.nativeElement.querySelector(