Fixes AB#535: tooltip on storage picker keyboard navigation

src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { RouterTestingModule } from "@angular/router/testing";
+import { MaterialModule } from "@batch-flask/core";
 import { I18nTestingModule } from "@batch-flask/core/testing";
 import { ElectronTestingModule } from "@batch-flask/electron/testing";
 import { BreadcrumbService } from "@batch-flask/ui/breadcrumbs";
@@ -51,7 +52,7 @@ describe("AutoStorageAccountPickerComponent", () => {
         };
         TestBed.configureTestingModule({
             imports: [RouterTestingModule, FormsModule, TableTestingModule,
-                ElectronTestingModule, I18nTestingModule],
+                ElectronTestingModule, I18nTestingModule, MaterialModule],
             declarations: [
                 AutoStorageAccountPickerComponent,
                 LoadingMockComponent, TestComponent,

src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.component.ts

@@ -1,5 +1,7 @@
-import { Component, Input, OnInit, forwardRef } from "@angular/core";
+import { Component, Input, OnInit, forwardRef, ViewChild } from "@angular/core";
 import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { MatTooltip } from "@angular/material/tooltip";
+import { ListSelection } from "@batch-flask/core";
 import { LoadingStatus } from "@batch-flask/ui/loading";
 import { ArmBatchAccount, StorageAccount } from "app/models";
 import { StorageAccountService } from "app/services";
@@ -18,12 +20,15 @@ import "./auto-storage-account-picker.scss";
 export class AutoStorageAccountPickerComponent implements OnInit, ControlValueAccessor {
     public noSelectionKey = "-1";
 
+    @ViewChild("classicTooltip") public classicTooltip: MatTooltip;
     @Input() public account: ArmBatchAccount;
 
     public preferedAccounts: List<StorageAccount> = List([]);
     public otherAccounts: List<StorageAccount> = List([]);
+    public classicAccounts: Set<string> = new Set();
     public loadingStatus = LoadingStatus.Loading;
     public pickedStorageAccountId: string;
+    public selectedStorageAccounts: Set<string> = new Set();
     public pickedName: string;
 
     private _propagateChange: (value: string) => void;
@@ -81,15 +86,46 @@ export class AutoStorageAccountPickerComponent implements OnInit, ControlValueAc
     private _processStorageAccounts(storageAccounts: List<StorageAccount>) {
         const prefered = [];
         const others = [];
-        storageAccounts.forEach((account) => {
+        storageAccounts.forEach((account, i) => {
+            account.isClassic = i % 2 === 0;
             if (account.location.toLowerCase() === this.account.location.toLowerCase()) {
                 prefered.push(account);
             } else {
                 others.push(account);
             }
+            if (account.isClassic) {
+                this.classicAccounts.add(account.id.toLowerCase());
+            }
         });
 
         this.preferedAccounts = List(prefered);
         this.otherAccounts = List(others);
     }
+
+    /* Show classic tooltip when navigating with keyboard. The "Tab" key is also
+     * when navigating into or out of the component.
+     *
+     * Note also that they keyboard event is fired AFTER the selection has been
+     * updated so we can safely assume the selection is correct.
+     *
+     * TODO: A more robust solution at the SelectionList component might
+     * triangulate both keyboard and selection events and allow sub-components
+     * to define a custom handler.
+     */
+    onKeydown(event: KeyboardEvent) {
+        this.classicTooltip.hide();
+        if (event.key === "ArrowDown" || event.key === "ArrowUp" ||
+            event.key === "Tab") {
+            if (this.selectedStorageAccounts.size === 1) {
+                const id = this.selectedStorageAccounts.values().next().value;
+                if (this.classicAccounts.has(id)) {
+                    this.classicTooltip.show();
+                }
+            }
+        }
+    }
+
+    setStorageAccountSelection(selection: ListSelection) {
+        this.selectedStorageAccounts = selection.keys;
+    }
 }

src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.html

@@ -33,7 +33,11 @@ <h3>
     <bl-table
         [data]="accounts"
         [activeItem]="pickedStorageAccountId"
-        (activeItemChange)="pickStorageAccount($event)">
+        (keydown)="onKeydown($event)"
+        (activeItemChange)="pickStorageAccount($event)"
+        (blur)="classicTooltip.hide()"
+        (mousemove)="classicTooltip.hide()"
+        (selectionChange)="setStorageAccountSelection($event)">
         <bl-column [sortable]="true" name="name">
             <div *blHeadCellDef>
                 {{'auto-storage-account-picker.fields.name' | i18n}}
@@ -48,7 +52,11 @@ <h3>
         </bl-column>
         <bl-column [sortable]="false" name="isClassic">
             <div *blCellDef="let account">
-                <span class="classic-warning" [matTooltip]="'auto-storage-account-picker.warnings.classic-incompatible' | i18n" *ngIf="account.isClassic">
+                <span class="classic-warning"
+                    [matTooltip]="'auto-storage-account-picker.warnings.classic-incompatible' | i18n"
+                    *ngIf="account.isClassic"
+                    #classicTooltip="matTooltip"
+                >
                     <span class="fa fa-warning"></span> {{'auto-storage-account-picker.fields.classic' | i18n}}
                 </span>
             </div>