[ui] General keyboard navigation in the UI

.changelog/12831.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add general keyboard navigation to the Nomad UI
+```

ui/.template-lintrc.js

@@ -7,6 +7,12 @@ module.exports = {
     'no-action': 'off',
     'no-invalid-interactive': 'off',
     'no-inline-styles': 'off',
-    'no-curly-component-invocation': { allow: ['format-volume-name'] },
+    'no-curly-component-invocation': {
+      allow: ['format-volume-name', 'keyboard-commands'],
+    },
+    'no-implicit-this': { allow: ['keyboard-commands'] },
   },
+  ignore: [
+    'app/components/breadcrumbs/*', // using {{(modifier)}} syntax
+  ],
 };

ui/app/components/allocation-subnav.js

@@ -8,6 +8,7 @@ import classic from 'ember-classic-decorator';
 @tagName('')
 export default class AllocationSubnav extends Component {
   @service router;
+  @service keyboard;
 
   @equal('router.currentRouteName', 'allocations.allocation.fs')
   fsIsActive;

ui/app/components/app-breadcrumbs.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class AppBreadcrumbsComponent extends Component {
+  isOneCrumbUp(iter = 0, totalNum = 0) {
+    return iter === totalNum - 2;
+  }
+}

ui/app/components/breadcrumbs/default.hbs

@@ -1,9 +1,17 @@
 {{! template-lint-disable no-unknown-arguments-for-builtin-components }}
-<li data-test-breadcrumb-default>
+<li data-test-breadcrumb-default
+  {{(modifier
+    this.maybeKeyboardShortcut
+    label="Go up a level"
+    pattern=(array "u")
+    menuLevel=true
+    action=(action this.traverseUpALevel @crumb.args)
+    exclusive=true
+  )}}
+>
   <LinkTo
     @params={{@crumb.args}}
-    data-test-breadcrumb={{@crumb.args.firstObject}}
-  >
+    data-test-breadcrumb={{@crumb.args.firstObject}}>
     {{#if @crumb.title}}
       <dl>
         <dt>

ui/app/components/breadcrumbs/default.js

@@ -0,0 +1,18 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import KeyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
+import { inject as service } from '@ember/service';
+
+export default class BreadcrumbsTemplate extends Component {
+  @service router;
+
+  @action
+  traverseUpALevel(args) {
+    const [path, ...rest] = args;
+    this.router.transitionTo(path, ...rest);
+  }
+
+  get maybeKeyboardShortcut() {
+    return this.args.isOneCrumbUp() ? KeyboardShortcutModifier : null;
+  }
+}

ui/app/components/breadcrumbs/job.hbs

@@ -26,7 +26,16 @@
         </LinkTo>
       </li>
     {{/if}}
-    <li>
+    <li
+      {{(modifier
+        this.maybeKeyboardShortcut
+        label="Go up a level"
+        pattern=(array "u")
+        menuLevel=true
+        action=(action this.traverseUpALevel (array "jobs.job" this.job.idWithNamespace))
+        exclusive=true
+      )}}
+    >
       <LinkTo
         @route="jobs.job.index"
         @model={{this.job}}

ui/app/components/breadcrumbs/job.js

@@ -1,8 +1,8 @@
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
-import Component from '@glimmer/component';
+import BreadcrumbsTemplate from './default';
 
-export default class BreadcrumbsJob extends Component {
+export default class BreadcrumbsJob extends BreadcrumbsTemplate {
   get job() {
     return this.args.crumb.job;
   }

ui/app/components/client-subnav.js

@@ -1,5 +1,8 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { inject as service } from '@ember/service';
 
 @tagName('')
-export default class ClientSubnav extends Component {}
+export default class ClientSubnav extends Component {
+  @service keyboard;
+}

ui/app/components/evaluation-sidebar/detail.hbs

@@ -1,4 +1,7 @@
 {{#let this.currentEvalDetail as |evaluation|}}
+  {{#if this.isSideBarOpen}}
+    {{keyboard-commands this.keyCommands}}
+  {{/if}}
   <Portal @target="eval-detail-portal">
     <div
       data-test-eval-detail

ui/app/components/evaluation-sidebar/detail.js

@@ -75,4 +75,12 @@ export default class Detail extends Component {
   closeSidebar() {
     return this.statechart.send('MODAL_CLOSE');
   }
+
+  keyCommands = [
+    {
+      label: 'Close Evaluations Sidebar',
+      pattern: ['Escape'],
+      action: () => this.closeSidebar(),
+    },
+  ];
 }

ui/app/components/gutter-menu.js

@@ -7,6 +7,7 @@ import classic from 'ember-classic-decorator';
 export default class GutterMenu extends Component {
   @service system;
   @service router;
+  @service keyboard;
 
   @computed('system.namespaces.@each.name')
   get sortedNamespaces() {
@@ -37,6 +38,11 @@ export default class GutterMenu extends Component {
 
   onHamburgerClick() {}
 
+  // Seemingly redundant, but serves to ensure the action is passed to the keyboard service correctly
+  transitionTo(destination) {
+    return this.router.transitionTo(destination);
+  }
+
   gotoJobsForNamespace(namespace) {
     if (!namespace || !namespace.get('id')) return;
 

ui/app/components/job-subnav.js

@@ -3,6 +3,7 @@ import Component from '@glimmer/component';
 
 export default class JobSubnav extends Component {
   @service can;
+  @service keyboard;
 
   get shouldRenderClientsTab() {
     const { job } = this.args;

ui/app/components/keyboard-shortcuts-modal.hbs

@@ -0,0 +1,70 @@
+{{#if this.keyboard.shortcutsVisible}}
+  {{keyboard-commands (array this.escapeCommand)}}
+  <div class="keyboard-shortcuts"
+      {{on-click-outside
+        (toggle "keyboard.shortcutsVisible" this)
+      }}
+  >
+    <header>
+      <button
+        {{autofocus}}
+        class="button is-borderless dismiss"
+        type="button"
+        {{on "click" (toggle "keyboard.shortcutsVisible" this)}}
+        aria-label="Dismiss"
+      >
+        {{x-icon "cancel"}}
+      </button>
+      <h2>Keyboard Shortcuts</h2>
+      <p>Click a key pattern to re-bind it to a shortcut of your choosing.</p>
+    </header>
+    <ul class="commands-list">
+      {{#each this.commands as |command|}}
+        <li data-test-command-label={{command.label}}>
+          <strong>{{command.label}}</strong>
+            <span class="keys">
+              {{#if command.recording}}
+                <span class="recording">Recording; ESC to cancel.</span>
+              {{else}}
+                {{#if command.custom}}
+                  <button type="button" class="reset-to-default" {{on "click" (action this.keyboard.resetCommandToDefault command)}}>reset to default</button>
+                {{/if}}
+              {{/if}}
+
+              <button data-test-rebinder disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}>
+                {{#each command.pattern as |key|}}
+                  <span>{{clean-keycommand key}}</span>
+                {{/each}}
+              </button>
+            </span>
+        </li>
+      {{/each}}
+    </ul>
+    <footer>
+      <strong>Keyboard shortcuts {{#if this.keyboard.enabled}}enabled{{else}}disabled{{/if}}</strong>
+      <Toggle
+        data-test-enable-shortcuts-toggle
+        @isActive={{this.keyboard.enabled}}
+        @onToggle={{this.toggleListener}}
+        title="{{if this.keyboard.enabled "enable" "disable"}} keyboard shortcuts"
+      />
+    </footer>
+  </div>
+{{/if}}
+
+{{#if (and this.keyboard.enabled this.keyboard.displayHints)}}
+  {{#each this.hints as |hint|}}
+    <span
+      {{did-insert (fn this.tetherToElement hint.element hint)}}
+      {{will-destroy (fn this.untetherFromElement hint)}}
+      data-test-keyboard-hint
+      data-shortcut={{hint.pattern}}
+      class="{{if hint.menuLevel "menu-level"}}"
+      aria-hidden="true"
+    >
+      {{#each hint.pattern as |key|}}
+        <span>{{key}}</span>
+      {{/each}}
+    </span>
+  {{/each}}
+{{/if}}

ui/app/components/keyboard-shortcuts-modal.js

@@ -0,0 +1,70 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+import { action } from '@ember/object';
+import Tether from 'tether';
+
+export default class KeyboardShortcutsModalComponent extends Component {
+  @service keyboard;
+  @service config;
+
+  escapeCommand = {
+    label: 'Hide Keyboard Shortcuts',
+    pattern: ['Escape'],
+    action: () => {
+      this.keyboard.shortcutsVisible = false;
+    },
+  };
+
+  /**
+   * commands: filter keyCommands to those that have an action and a label,
+   * to distinguish between those that are just visual hints of existing commands
+   */
+  @computed('keyboard.keyCommands.[]')
+  get commands() {
+    return this.keyboard.keyCommands.reduce((memo, c) => {
+      if (c.label && c.action && !memo.find((m) => m.label === c.label)) {
+        memo.push(c);
+      }
+      return memo;
+    }, []);
+  }
+
+  /**
+   * hints: filter keyCommands to those that have an element property,
+   * and then compute a position on screen to place the hint.
+   */
+  @computed('keyboard.{keyCommands.length,displayHints}')
+  get hints() {
+    if (this.keyboard.displayHints) {
+      return this.keyboard.keyCommands.filter((c) => c.element);
+    } else {
+      return [];
+    }
+  }
+
+  @action
+  tetherToElement(element, hint, self) {
+    if (!this.config.isTest) {
+      let binder = new Tether({
+        element: self,
+        target: element,
+        attachment: 'top left',
+        targetAttachment: 'top left',
+        targetModifier: 'visible',
+      });
+      hint.binder = binder;
+    }
+  }
+
+  @action
+  untetherFromElement(hint) {
+    if (!this.config.isTest) {
+      hint.binder.destroy();
+    }
+  }
+
+  @action toggleListener() {
+    this.keyboard.enabled = !this.keyboard.enabled;
+  }
+}

ui/app/components/plugin-subnav.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class PluginSubnavComponent extends Component {
+  @service keyboard;
+}

ui/app/components/safe-link-to.js

@@ -0,0 +1,9 @@
+import { LinkComponent } from '@ember/legacy-built-in-components';
+import classic from 'ember-classic-decorator';
+
+// Necessary for programmatic routing away pages with <LinkTo>s that contain @query properties.
+// (There's an issue with query param calculations in the new component that uses the router service)
+// https://github.com/emberjs/ember.js/issues/20051
+
+@classic
+export default class SafeLinkToComponent extends LinkComponent {}

ui/app/components/server-agent-row.js

@@ -41,9 +41,13 @@ export default class ServerAgentRow extends Component {
     return currentURL.replace(/%40/g, '@') === targetURL.replace(/%40/g, '@');
   }
 
-  click() {
+  goToAgent() {
     const transition = () =>
       this.router.transitionTo('servers.server', this.agent);
     lazyClick([transition, event]);
   }
+
+  click() {
+    this.goToAgent();
+  }
 }

ui/app/components/server-subnav.js

@@ -1,5 +1,8 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { inject as service } from '@ember/service';
 
 @tagName('')
-export default class ServerSubnav extends Component {}
+export default class ServerSubnav extends Component {
+  @service keyboard;
+}

ui/app/components/storage-subnav.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class StorageSubnavComponent extends Component {
+  @service keyboard;
+}

ui/app/components/task-subnav.js

@@ -8,6 +8,7 @@ import classic from 'ember-classic-decorator';
 @tagName('')
 export default class TaskSubnav extends Component {
   @service router;
+  @service keyboard;
 
   @equal('router.currentRouteName', 'allocations.allocation.task.fs')
   fsIsActive;

ui/app/components/variable-paths.hbs

@@ -13,7 +13,12 @@
   <tbody>
     {{#each this.folders as |folder|}}
       <tr data-test-folder-row {{on "click" (fn this.handleFolderClick folder.data.absolutePath)}}>
-        <td colspan="3">
+        <td colspan="3"
+          {{keyboard-shortcut 
+            enumerated=true
+            action=(fn this.handleFolderClick folder.data.absolutePath)
+          }}
+        >
           <span>
             <FlightIcon @name="folder" />
             <LinkTo @route="variables.path" @model={{folder.data.absolutePath}} @query={{hash namespace="*"}}>
@@ -26,7 +31,12 @@
 
     {{#each this.files as |file|}}
       <tr data-test-file-row {{on "click" (fn this.handleFileClick file.absoluteFilePath)}}>
-        <td>
+        <td
+          {{keyboard-shortcut 
+            enumerated=true
+            action=(fn this.handleFileClick file.absoluteFilePath)
+          }}
+        >
           <FlightIcon @name="file-text" />
           <LinkTo
             @route="variables.variable"