From 363ba3683d73689dcb4f54cbae2031d686cf850f Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Thu, 5 Sep 2024 13:36:10 +0000
Subject: [PATCH] Focus selected item on save

---
 .../app/pages/devices/devices.component.html  |  5 +-
 .../pages/devices/devices.component.spec.ts   | 27 ++++++---
 .../app/pages/devices/devices.component.ts    | 59 +++++++++++--------
 3 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/modules/ui/src/app/pages/devices/devices.component.html b/modules/ui/src/app/pages/devices/devices.component.html
index 50cb640f2..f6567b49e 100644
--- a/modules/ui/src/app/pages/devices/devices.component.html
+++ b/modules/ui/src/app/pages/devices/devices.component.html
@@ -20,16 +20,15 @@ <h2 class="title" tabindex="-1">Devices</h2>
       <ng-container *ngTemplateOutlet="addDeviceButton"></ng-container>
     </mat-toolbar>
     <div class="device-repository-content">
-      <ng-container *ngFor="let device of vm.devices">
+      <ng-container *ngFor="let device of vm.devices; index as i">
         <app-device-item
           (itemClicked)="
-            openDialog(vm.devices, vm.testModules, $event, $event, true)
+            openDialog(vm.devices, vm.testModules, $event, $event, true, 0, i)
           "
           (startTestrunClicked)="
             openStartTestrun($event, vm.devices, vm.testModules)
           "
           [deviceView]="DeviceView.WithActions"
-          [class.device-item-selected]="device === vm.selectedDevice"
           [device]="device"
           [disabled]="
             device?.mac_addr === vm.deviceInProgress?.mac_addr
diff --git a/modules/ui/src/app/pages/devices/devices.component.spec.ts b/modules/ui/src/app/pages/devices/devices.component.spec.ts
index c7bc533b7..f85a5df4e 100644
--- a/modules/ui/src/app/pages/devices/devices.component.spec.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.spec.ts
@@ -137,12 +137,6 @@ describe('DevicesComponent', () => {
       expect(item.length).toEqual(3);
     }));
 
-    it('should add device-item-selected class for selected device', fakeAsync(() => {
-      const item = compiled.querySelector('app-device-item');
-
-      expect(item?.classList.contains('device-item-selected')).toBeTrue();
-    }));
-
     it('should open device dialog on "add device button" click', () => {
       const openSpy = spyOn(component.dialog, 'open').and.returnValue({
         afterClosed: () => of(true),
@@ -289,7 +283,15 @@ describe('DevicesComponent', () => {
         afterClosed: () => of(true),
       } as MatDialogRef<typeof SimpleDialogComponent>);
 
-      component.openDeleteDialog([device], MOCK_TEST_MODULES, device, device);
+      component.openDeleteDialog(
+        [device],
+        MOCK_TEST_MODULES,
+        device,
+        device,
+        false,
+        0,
+        0
+      );
 
       const args = mockDevicesStore.deleteDevice.calls.argsFor(0);
       // @ts-expect-error config is in object
@@ -303,7 +305,15 @@ describe('DevicesComponent', () => {
         afterClosed: () => of(null),
       } as MatDialogRef<typeof SimpleDialogComponent>);
 
-      component.openDeleteDialog([device], MOCK_TEST_MODULES, device, device);
+      component.openDeleteDialog(
+        [device],
+        MOCK_TEST_MODULES,
+        device,
+        device,
+        false,
+        0,
+        0
+      );
 
       expect(openDeviceDialogSpy).toHaveBeenCalledWith(
         [device],
@@ -311,6 +321,7 @@ describe('DevicesComponent', () => {
         device,
         device,
         false,
+        0,
         0
       );
     });
diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts
index 1411ced7a..2011e5f79 100644
--- a/modules/ui/src/app/pages/devices/devices.component.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.ts
@@ -122,7 +122,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
     initialDevice?: Device,
     selectedDevice?: Device,
     isEditDevice = false,
-    index = 0
+    index = 0,
+    deviceIndex?: number
   ): void {
     const dialogRef = this.dialog.open(DeviceQualificationFromComponent, {
       ariaLabel: isEditDevice ? 'Edit device' : 'Create Device',
@@ -145,7 +146,6 @@ export class DevicesComponent implements OnInit, OnDestroy {
       ?.afterClosed()
       .pipe(takeUntil(this.destroy$))
       .subscribe((response: FormResponse) => {
-        this.devicesStore.selectDevice(null);
         if (!response) {
           this.devicesStore.setIsOpenAddDevice(false);
           return;
@@ -157,21 +157,21 @@ export class DevicesComponent implements OnInit, OnDestroy {
             initialDevice,
             response.device,
             isEditDevice,
-            response.index
+            response.index,
+            deviceIndex
           );
-        } else if (
-          response.action === FormAction.Save &&
-          response.device &&
-          !selectedDevice
-        ) {
+        } else if (response.action === FormAction.Save && response.device) {
           timer(10)
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
-              this.focusManagerService.focusFirstElementInContainer();
+              if (!initialDevice) {
+                this.focusManagerService.focusFirstElementInContainer();
+              } else if (deviceIndex !== undefined) {
+                this.focusSelectedButton(deviceIndex);
+              }
             });
         }
         if (response.action === FormAction.Delete && initialDevice) {
-          this.devicesStore.selectDevice(initialDevice);
           if (response.device) {
             this.openDeleteDialog(
               devices,
@@ -179,7 +179,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
               initialDevice,
               response.device,
               isEditDevice,
-              response.index
+              response.index,
+              deviceIndex!
             );
           }
         }
@@ -192,7 +193,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
     initialDevice?: Device,
     device?: Device,
     isEditDevice = false,
-    index = 0
+    index = 0,
+    deviceIndex?: number
   ) {
     const dialogRef = this.dialog.open(SimpleDialogComponent, {
       ariaLabel: 'Close the Device menu',
@@ -219,7 +221,10 @@ export class DevicesComponent implements OnInit, OnDestroy {
             isEditDevice,
             index
           );
-          this.devicesStore.selectDevice(null);
+        } else if (deviceIndex !== undefined) {
+          this.focusSelectedButton(deviceIndex);
+        } else {
+          this.focusManagerService.focusFirstElementInContainer();
         }
       });
   }
@@ -230,7 +235,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
     initialDevice: Device,
     device: Device,
     isEditDevice = false,
-    index = 0
+    index = 0,
+    deviceIndex: number
   ) {
     const dialogRef = this.dialog.open(SimpleDialogComponent, {
       ariaLabel: 'Delete device',
@@ -254,8 +260,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
           this.devicesStore.deleteDevice({
             device: initialDevice,
             onDelete: () => {
-              this.focusNextButton();
-              this.devicesStore.selectDevice(null);
+              this.focusNextButton(deviceIndex);
             },
           });
         } else {
@@ -265,22 +270,30 @@ export class DevicesComponent implements OnInit, OnDestroy {
             initialDevice,
             device,
             isEditDevice,
-            index
+            index,
+            deviceIndex
           );
-          this.devicesStore.selectDevice(null);
         }
       });
   }
 
-  private focusNextButton() {
+  private focusSelectedButton(index: number) {
+    const selected = this.element.nativeElement.querySelectorAll(
+      'app-device-item .button-edit'
+    )[index];
+    if (selected) {
+      selected.focus();
+    }
+  }
+  private focusNextButton(index: number) {
+    this.changeDetectorRef.detectChanges();
     // Try to focus next device item, if exist
-    const next = this.element.nativeElement.querySelector(
-      '.device-item-selected + app-device-item button'
-    );
+    const next = this.element.nativeElement.querySelectorAll(
+      'app-device-item .button-edit'
+    )[index];
     if (next) {
       next.focus();
     } else {
-      this.changeDetectorRef.detectChanges();
       // If next device item doest not exist, add device button should be focused
       const addButton =
         this.element.nativeElement.querySelector('.device-add-button');