The focus issues on the Devices page; The scroll display issue on the Devices page

modules/ui/src/app/components/list-layout/list-layout.component.html

@@ -43,37 +43,40 @@
           </div></mat-toolbar-row
         >
       </mat-toolbar>
-      <section class="entity-list">
-        <div
-          *ngIf="isOpenEntityForm() && !initialEntity()"
-          class="fake-list-item">
-          <mat-icon svgIcon="draft" class="profile-draft-icon"></mat-icon>
-          {{
-            title() === LayoutType.Device ? 'New device' : 'New risk profile'
-          }}
-        </div>
-        <ng-container *ngFor="let entity of filtered(); index as i">
-          <app-list-item
-            [entity]="entity"
-            [actions]="getActions(entity)"
-            [isDisabled]="entityDisabled()"
-            [tooltipMessage]="entityTooltip()"
-            (menuItemClicked)="onMenuItemClick($event, entity, i)">
-            <ng-container
-              *ngTemplateOutlet="
-                itemTemplate()!;
-                context: {
-                  entity: entity,
-                }
-              "></ng-container>
-          </app-list-item>
-        </ng-container>
-      </section>
+      <div class="entity-list-container">
+        <section class="entity-list">
+          <div
+            *ngIf="isOpenEntityForm() && !initialEntity()"
+            class="fake-list-item">
+            <mat-icon svgIcon="draft" class="profile-draft-icon"></mat-icon>
+            {{
+              title() === LayoutType.Device ? 'New device' : 'New risk profile'
+            }}
+          </div>
+          <ng-container *ngFor="let entity of filtered(); index as i">
+            <app-list-item
+              [entity]="entity"
+              [actions]="getActions(entity)"
+              [isDisabled]="entityDisabled()"
+              [tooltipMessage]="entityTooltip()"
+              (menuItemClicked)="onMenuItemClick($event, entity, i)">
+              <ng-container
+                *ngTemplateOutlet="
+                  itemTemplate()!;
+                  context: {
+                    entity: entity,
+                  }
+                "></ng-container>
+            </app-list-item>
+          </ng-container>
+        </section>
+      </div>
     </mat-drawer>
     <mat-drawer-content>
       <section class="content" *ngIf="content()">
-        <ng-container *ngTemplateOutlet="content()!"></ng-container></section
-    ></mat-drawer-content>
+        <ng-container *ngTemplateOutlet="content()!"></ng-container>
+      </section>
+    </mat-drawer-content>
   </mat-drawer-container>
 </ng-container>
 <ng-template #empty>

modules/ui/src/app/components/list-layout/list-layout.component.scss

@@ -110,6 +110,10 @@
   outline: none;
 }
 
+.entity-list-container {
+  overflow-y: auto;
+}
+
 .entity-list {
   display: grid;
   grid-template-columns: 1fr;
@@ -141,3 +145,9 @@
   font-size: 16px;
   letter-spacing: 0;
 }
+
+::ng-deep .mat-drawer-inner-container {
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+}

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

@@ -181,8 +181,9 @@ export class DevicesComponent
   }
 
   save(device: Device, initialDevice: Device | null) {
-    this.updateDevice(device, initialDevice, () => {
+    this.updateDevice(device, initialDevice, (index: number) => {
       this.devicesStore.selectDevice(device);
+      this.focusDevice(index);
     });
   }
 
@@ -197,7 +198,7 @@ export class DevicesComponent
   private updateDevice(
     device: Device,
     initialDevice: Device | null = null,
-    callback: () => void
+    callback: (idx: number) => void
   ) {
     if (initialDevice) {
       this.devicesStore.editDevice({
@@ -269,6 +270,7 @@ export class DevicesComponent
     dialogRef?.beforeClosed().subscribe(close => {
       if (close) {
         this.isOpenDeviceForm = false;
+        this.devicesStore.selectDevice(null);
         this.focusSelectedButton();
       }
     });
@@ -299,9 +301,21 @@ export class DevicesComponent
     }
   }
 
+  private focusDevice(index: number) {
+    this.changeDetectorRef.detectChanges();
+    const device = this.element.nativeElement.querySelectorAll(
+      'app-device-item .button-edit'
+    )[index];
+    device?.focus();
+  }
+
   private focusAddButton(): void {
-    const addButton =
+    let addButton =
       this.element.nativeElement.querySelector('.add-entity-button');
+    if (!addButton) {
+      addButton =
+        this.element.nativeElement.querySelector('.device-add-button');
+    }
     addButton?.focus();
   }
 }

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

@@ -99,37 +99,41 @@ export class DevicesStore extends ComponentStore<DevicesComponentState> {
     );
   });
 
-  saveDevice = this.effect<{ device: Device; onSuccess: () => void }>(
-    trigger$ => {
-      return trigger$.pipe(
-        exhaustMap(({ device, onSuccess }) => {
-          return this.testRunService.saveDevice(device).pipe(
-            withLatestFrom(this.devices$),
-            tap(([added, devices]) => {
-              if (added) {
-                this.addDevice(device, devices);
-                onSuccess();
-              }
-            })
-          );
-        })
-      );
-    }
-  );
+  saveDevice = this.effect<{
+    device: Device;
+    onSuccess: (idx: number) => void;
+  }>(trigger$ => {
+    return trigger$.pipe(
+      exhaustMap(({ device, onSuccess }) => {
+        return this.testRunService.saveDevice(device).pipe(
+          withLatestFrom(this.devices$),
+          tap(([added, devices]) => {
+            if (added) {
+              this.addDevice(device, devices);
+              onSuccess(devices.length);
+            }
+          })
+        );
+      })
+    );
+  });
 
   editDevice = this.effect<{
     device: Device;
     mac_addr: string;
-    onSuccess: () => void;
+    onSuccess: (idx: number) => void;
   }>(trigger$ => {
     return trigger$.pipe(
       exhaustMap(({ device, mac_addr, onSuccess }) => {
         return this.testRunService.editDevice(device, mac_addr).pipe(
           withLatestFrom(this.devices$),
           tap(([edited, devices]) => {
             if (edited) {
+              const idx = devices.findIndex(
+                item => device.mac_addr === item.mac_addr
+              );
               this.updateDevice(device, mac_addr, devices);
-              onSuccess();
+              onSuccess(idx);
             }
           })
         );