From 6dd0466bd3eae5a230789d70737af3a1d7881614 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 22 Jul 2022 10:51:06 -0400
Subject: [PATCH 1/6] Acceptance tests for keyboard modal

---
 .../components/keyboard-shortcuts-modal.hbs   |  2 +-
 ui/tests/acceptance/keyboard-test.js          | 83 +++++++++++++++++++
 ui/tests/pages/layout.js                      |  5 ++
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 ui/tests/acceptance/keyboard-test.js

diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
index 8ddadf295118..5128aeef3287 100644
--- a/ui/app/components/keyboard-shortcuts-modal.hbs
+++ b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -42,7 +42,7 @@
     <footer>
       <strong>Keyboard shortcuts {{#if this.keyboard.enabled}}enabled{{else}}disabled{{/if}}</strong>
       <Toggle
-        data-test-cpu-toggle
+        data-test-enable-shortcuts-toggle
         @isActive={{this.keyboard.enabled}}
         @onToggle={{this.toggleListener}}
         title="{{if this.keyboard.enabled "enable" "disable"}} keyboard shortcuts"
diff --git a/ui/tests/acceptance/keyboard-test.js b/ui/tests/acceptance/keyboard-test.js
new file mode 100644
index 000000000000..6a91b2205423
--- /dev/null
+++ b/ui/tests/acceptance/keyboard-test.js
@@ -0,0 +1,83 @@
+// @ts-check
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { click, currentURL, visit, triggerEvent } from '@ember/test-helpers';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import Layout from 'nomad-ui/tests/pages/layout';
+import percySnapshot from '@percy/ember';
+
+module('Acceptance | keyboard', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  module('modal', function () {
+    test('Opening and closing shortcuts modal with key commands', async function (assert) {
+      await visit('/');
+      assert.notOk(Layout.keyboard.modalShown);
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+      await percySnapshot(assert);
+      await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
+      assert.notOk(Layout.keyboard.modalShown);
+    });
+
+    test('closing shortcuts modal by clicking dismiss', async function (assert) {
+      await visit('/');
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+      assert.dom('button.dismiss').isFocused();
+      await click('button.dismiss');
+      assert.notOk(Layout.keyboard.modalShown);
+    });
+
+    test('closing shortcuts modal by clicking outside', async function (assert) {
+      await visit('/');
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+      await click('.page-layout');
+      assert.notOk(Layout.keyboard.modalShown);
+    });
+  });
+
+  module('Enable/Disable', function () {
+    test('Shortcuts work by default and stops working when disabled', async function (assert) {
+      await visit('/');
+
+      triggerEvent('.page-layout', 'keydown', { key: 'g' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'c' });
+      assert.equal(
+        currentURL(),
+        `/clients`,
+        'end up on the clients page after typing g c'
+      );
+      assert.notOk(Layout.keyboard.modalShown);
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+      assert.dom('[data-test-enable-shortcuts-toggle]').hasClass('is-active');
+      await click('[data-test-enable-shortcuts-toggle]');
+      assert
+        .dom('[data-test-enable-shortcuts-toggle]')
+        .doesNotHaveClass('is-active');
+      await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
+      assert.notOk(Layout.keyboard.modalShown);
+      triggerEvent('.page-layout', 'keydown', { key: 'g' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'j' });
+      assert.equal(
+        currentURL(),
+        `/clients`,
+        'typing g j did not bring you back to the jobs page, since shortcuts are disabled'
+      );
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      await click('[data-test-enable-shortcuts-toggle]');
+      assert.dom('[data-test-enable-shortcuts-toggle]').hasClass('is-active');
+      await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
+      triggerEvent('.page-layout', 'keydown', { key: 'g' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'j' });
+      assert.equal(
+        currentURL(),
+        `/jobs`,
+        'typing g j brings me to the jobs page after re-enabling shortcuts'
+      );
+    });
+  });
+});
diff --git a/ui/tests/pages/layout.js b/ui/tests/pages/layout.js
index f52368c58de8..c947fbc325a8 100644
--- a/ui/tests/pages/layout.js
+++ b/ui/tests/pages/layout.js
@@ -107,4 +107,9 @@ export default create({
     isDanger: hasClass('is-danger', '[data-test-inline-error]'),
     isWarning: hasClass('is-warning', '[data-test-inline-error]'),
   },
+
+  keyboard: {
+    modalShown: isPresent('.keyboard-shortcuts'),
+    hintsShown: isPresent('[data-shortcut]'),
+  },
 });

From 528f8b434c5d78722e474c36601b45f0ab7f8369 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 22 Jul 2022 11:19:35 -0400
Subject: [PATCH 2/6] a11y audit fix and localStorage clear

---
 ui/app/components/keyboard-shortcuts-modal.hbs | 1 +
 ui/tests/acceptance/keyboard-test.js           | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
index 5128aeef3287..0ab26fae7f1e 100644
--- a/ui/app/components/keyboard-shortcuts-modal.hbs
+++ b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -11,6 +11,7 @@
         class="button is-borderless dismiss"
         type="button"
         {{on "click" (toggle "keyboard.shortcutsVisible" this)}}
+        aria-label="Dismiss"
       >
         {{x-icon "cancel"}}
       </button>
diff --git a/ui/tests/acceptance/keyboard-test.js b/ui/tests/acceptance/keyboard-test.js
index 6a91b2205423..6fae3a24a225 100644
--- a/ui/tests/acceptance/keyboard-test.js
+++ b/ui/tests/acceptance/keyboard-test.js
@@ -5,18 +5,24 @@ import { click, currentURL, visit, triggerEvent } from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import Layout from 'nomad-ui/tests/pages/layout';
 import percySnapshot from '@percy/ember';
+import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Acceptance | keyboard', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  hooks.beforeEach(function () {
+    window.localStorage.clear();
+  });
 
   module('modal', function () {
     test('Opening and closing shortcuts modal with key commands', async function (assert) {
+      assert.expect(4);
       await visit('/');
       assert.notOk(Layout.keyboard.modalShown);
       await triggerEvent('.page-layout', 'keydown', { key: '?' });
       assert.ok(Layout.keyboard.modalShown);
       await percySnapshot(assert);
+      await a11yAudit(assert);
       await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
       assert.notOk(Layout.keyboard.modalShown);
     });

From 844fa528b23328a6f0638cf9dcdd12574ef9c262 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 22 Jul 2022 14:02:50 -0400
Subject: [PATCH 3/6] Bind/rebind/localStorage tests

---
 .../components/keyboard-shortcuts-modal.hbs   |   4 +-
 ui/tests/acceptance/keyboard-test.js          | 129 +++++++++++++++++-
 2 files changed, 126 insertions(+), 7 deletions(-)

diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
index 0ab26fae7f1e..f00fe6494927 100644
--- a/ui/app/components/keyboard-shortcuts-modal.hbs
+++ b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -20,7 +20,7 @@
     </header>
     <ul class="commands-list">
       {{#each this.commands as |command|}}
-        <li>
+        <li data-test-command-label={{command.label}}>
           <strong>{{command.label}}</strong>
             <span class="keys">
               {{#if command.recording}}
@@ -31,7 +31,7 @@
                 {{/if}}
               {{/if}}
 
-              <button disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}>
+              <button class="re-bind" 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}}
diff --git a/ui/tests/acceptance/keyboard-test.js b/ui/tests/acceptance/keyboard-test.js
index 6fae3a24a225..33d4f1843a2a 100644
--- a/ui/tests/acceptance/keyboard-test.js
+++ b/ui/tests/acceptance/keyboard-test.js
@@ -1,7 +1,13 @@
 // @ts-check
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-import { click, currentURL, visit, triggerEvent } from '@ember/test-helpers';
+import {
+  click,
+  currentURL,
+  visit,
+  triggerEvent,
+  findAll,
+} from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import Layout from 'nomad-ui/tests/pages/layout';
 import percySnapshot from '@percy/ember';
@@ -10,9 +16,6 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 module('Acceptance | keyboard', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
-  hooks.beforeEach(function () {
-    window.localStorage.clear();
-  });
 
   module('modal', function () {
     test('Opening and closing shortcuts modal with key commands', async function (assert) {
@@ -45,7 +48,11 @@ module('Acceptance | keyboard', function (hooks) {
     });
   });
 
-  module('Enable/Disable', function () {
+  module('Enable/Disable', function (enableDisableHooks) {
+    enableDisableHooks.beforeEach(function () {
+      window.localStorage.clear();
+    });
+
     test('Shortcuts work by default and stops working when disabled', async function (assert) {
       await visit('/');
 
@@ -86,4 +93,116 @@ module('Acceptance | keyboard', function (hooks) {
       );
     });
   });
+
+  module('Local storage bind/rebind', function (rebindHooks) {
+    rebindHooks.beforeEach(function () {
+      window.localStorage.clear();
+    });
+
+    test('You can rebind shortcuts', async function (assert) {
+      await visit('/');
+
+      triggerEvent('.page-layout', 'keydown', { key: 'g' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'c' });
+      assert.equal(
+        currentURL(),
+        `/clients`,
+        'end up on the clients page after typing g c'
+      );
+
+      triggerEvent('.page-layout', 'keydown', { key: 'g' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'j' });
+      assert.equal(
+        currentURL(),
+        `/jobs`,
+        'end up on the clients page after typing g j'
+      );
+
+      assert.notOk(Layout.keyboard.modalShown);
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+
+      await click('[data-test-command-label="Go to Clients"] button.re-bind');
+
+      triggerEvent('.page-layout', 'keydown', { key: 'r' });
+      triggerEvent('.page-layout', 'keydown', { key: 'o' });
+      triggerEvent('.page-layout', 'keydown', { key: 'f' });
+      triggerEvent('.page-layout', 'keydown', { key: 'l' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'Enter' });
+      assert
+        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .hasText('r o f l');
+
+      assert.equal(
+        currentURL(),
+        `/jobs`,
+        'typing g c does not do anything, since I re-bound the shortcut'
+      );
+
+      triggerEvent('.page-layout', 'keydown', { key: 'r' });
+      triggerEvent('.page-layout', 'keydown', { key: 'o' });
+      triggerEvent('.page-layout', 'keydown', { key: 'f' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'l' });
+
+      assert.equal(
+        currentURL(),
+        `/clients`,
+        'typing the newly bound shortcut brings me to clients'
+      );
+
+      await click('[data-test-command-label="Go to Clients"] button.re-bind');
+
+      triggerEvent('.page-layout', 'keydown', { key: 'n' });
+      triggerEvent('.page-layout', 'keydown', { key: 'o' });
+      triggerEvent('.page-layout', 'keydown', { key: 'p' });
+      triggerEvent('.page-layout', 'keydown', { key: 'e' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
+      assert
+        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .hasText(
+          'r o f l',
+          'text unchanged when I hit escape during recording'
+        );
+
+      await click(
+        '[data-test-command-label="Go to Clients"] button.reset-to-default'
+      );
+      assert
+        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .hasText('g c', 'Resetting to default rebinds the shortcut');
+    });
+
+    test('Rebound shortcuts persist from localStorage', async function (assert) {
+      window.localStorage.setItem(
+        'keyboard.command.Go to Clients',
+        JSON.stringify(['b', 'o', 'o', 'p'])
+      );
+      await visit('/');
+
+      triggerEvent('.page-layout', 'keydown', { key: 'g' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'c' });
+      assert.equal(
+        currentURL(),
+        `/jobs`,
+        'After a refresh with a localStorage-found binding, a default key binding doesnt do anything'
+      );
+
+      triggerEvent('.page-layout', 'keydown', { key: 'b' });
+      triggerEvent('.page-layout', 'keydown', { key: 'o' });
+      triggerEvent('.page-layout', 'keydown', { key: 'o' });
+      await triggerEvent('.page-layout', 'keydown', { key: 'p' });
+      assert.equal(
+        currentURL(),
+        `/clients`,
+        'end up on the clients page after typing the localstorage-bound shortcut'
+      );
+
+      assert.notOk(Layout.keyboard.modalShown);
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+      assert
+        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .hasText('b o o p');
+    });
+  });
 });

From 547e0e9bda0a3e2f93d872fb350fdc508437120f Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 22 Jul 2022 16:37:34 -0400
Subject: [PATCH 4/6] Keyboard tests for dynamic nav and tables

---
 .../components/keyboard-shortcuts-modal.hbs   |   5 +-
 ui/app/components/keyboard-shortcuts-modal.js |  30 ++--
 ui/tests/acceptance/keyboard-test.js          | 132 ++++++++++++++++++
 ui/tests/pages/layout.js                      |   1 -
 4 files changed, 154 insertions(+), 14 deletions(-)

diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
index f00fe6494927..d03c39fc6322 100644
--- a/ui/app/components/keyboard-shortcuts-modal.hbs
+++ b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -55,8 +55,9 @@
 {{#if (and this.keyboard.enabled this.keyboard.displayHints)}}
   {{#each this.hints as |hint|}}
     <span
-      {{did-insert this.tetherToElement element=hint.element hint=hint}}
-      {{will-destroy this.untetherFromElement element=hint.element hint=hint}}
+      {{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"
diff --git a/ui/app/components/keyboard-shortcuts-modal.js b/ui/app/components/keyboard-shortcuts-modal.js
index 913aece4f6be..117a8a66872f 100644
--- a/ui/app/components/keyboard-shortcuts-modal.js
+++ b/ui/app/components/keyboard-shortcuts-modal.js
@@ -6,6 +6,7 @@ import Tether from 'tether';
 
 export default class KeyboardShortcutsModalComponent extends Component {
   @service keyboard;
+  @service config;
 
   escapeCommand = {
     label: 'Hide Keyboard Shortcuts',
@@ -42,18 +43,25 @@ export default class KeyboardShortcutsModalComponent extends Component {
     }
   }
 
-  tetherToElement(self, _, { element, hint }) {
-    let binder = new Tether({
-      element: self,
-      target: element,
-      attachment: 'top left',
-      targetAttachment: 'top left',
-      targetModifier: 'visible',
-    });
-    hint.binder = binder;
+  @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;
+    }
   }
-  untetherFromElement(self, _, { hint }) {
-    hint.binder.destroy();
+
+  @action
+  untetherFromElement(hint) {
+    if (!this.config.isTest) {
+      hint.binder.destroy();
+    }
   }
 
   @action toggleListener() {
diff --git a/ui/tests/acceptance/keyboard-test.js b/ui/tests/acceptance/keyboard-test.js
index 33d4f1843a2a..6e1fb143f92d 100644
--- a/ui/tests/acceptance/keyboard-test.js
+++ b/ui/tests/acceptance/keyboard-test.js
@@ -6,6 +6,7 @@ import {
   currentURL,
   visit,
   triggerEvent,
+  triggerKeyEvent,
   findAll,
 } from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
@@ -205,4 +206,135 @@ module('Acceptance | keyboard', function (hooks) {
         .hasText('b o o p');
     });
   });
+
+  module('Hints', function () {
+    test('Hints show up on shift', async function (assert) {
+      await visit('/');
+
+      await triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
+      assert.equal(
+        document.querySelectorAll('[data-test-keyboard-hint]').length,
+        7,
+        'Shows 7 hints by default'
+      );
+      await triggerEvent('.page-layout', 'keyup', { key: 'Shift' });
+
+      assert.equal(
+        document.querySelectorAll('[data-test-keyboard-hint]').length,
+        0,
+        'Hints disappear when you release Shift'
+      );
+    });
+  });
+
+  module('Dynamic Nav', function (dynamicHooks) {
+    dynamicHooks.beforeEach(async function () {
+      server.create('node');
+    });
+    test('Dynamic Table Nav', async function (assert) {
+      server.createList('job', 3, { createRecommendations: true });
+      await visit('/jobs');
+
+      await triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
+      assert.equal(
+        document.querySelectorAll('[data-shortcut="Shift+01"]').length,
+        1,
+        'First job gets a shortcut hint'
+      );
+      assert.equal(
+        document.querySelectorAll('[data-shortcut="Shift+02"]').length,
+        1,
+        'Second job gets a shortcut hint'
+      );
+      assert.equal(
+        document.querySelectorAll('[data-shortcut="Shift+03"]').length,
+        1,
+        'Third job gets a shortcut hint'
+      );
+      await percySnapshot(assert);
+
+      triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
+      triggerEvent('.page-layout', 'keydown', { key: '0' });
+      await triggerEvent('.page-layout', 'keydown', { key: '1' });
+
+      const clickedJob = server.db.jobs.sortBy('modifyIndex').reverse()[0].id;
+      assert.equal(
+        currentURL(),
+        `/jobs/${clickedJob}@default`,
+        'Shift+01 takes you to the first job'
+      );
+    });
+    test('Multi-Table Nav', async function (assert) {
+      server.createList('job', 3, { createRecommendations: true });
+      await visit(
+        `/jobs/${server.db.jobs.sortBy('modifyIndex').reverse()[0].id}@default`
+      );
+      const numberOfGroups = findAll('.task-group-row').length;
+      const numberOfAllocs = findAll('.allocation-row').length;
+
+      await triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
+      [...Array(numberOfGroups + numberOfAllocs)].forEach((_, iter) => {
+        assert.equal(
+          document.querySelectorAll(`[data-shortcut="Shift+0${iter + 1}"]`)
+            .length,
+          1,
+          `Dynamic item #${iter + 1} gets a shortcut hint`
+        );
+      });
+      await triggerEvent('.page-layout', 'keyup', { key: 'Shift' });
+    });
+
+    test('Dynamic nav arrows and looping', async function (assert) {
+      server.createList('job', 3, { createAllocations: true, type: 'system' });
+      const jobID = server.db.jobs.sortBy('modifyIndex').reverse()[0].id;
+      await visit(`/jobs/${jobID}@default`);
+
+      await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
+        shiftKey: true,
+      });
+      assert.equal(
+        currentURL(),
+        `/jobs/${jobID}@default/definition`,
+        'Shift+ArrowRight takes you to the next tab (Definition)'
+      );
+
+      await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
+        shiftKey: true,
+      });
+      assert.equal(
+        currentURL(),
+        `/jobs/${jobID}@default/versions`,
+        'Shift+ArrowRight takes you to the next tab (Version)'
+      );
+
+      await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
+        shiftKey: true,
+      });
+      assert.equal(
+        currentURL(),
+        `/jobs/${jobID}@default/allocations`,
+        'Shift+ArrowRight takes you to the next tab (Allocations)'
+      );
+
+      await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
+        shiftKey: true,
+      });
+      assert.equal(
+        currentURL(),
+        `/jobs/${jobID}@default/evaluations`,
+        'Shift+ArrowRight takes you to the next tab (Evaluations)'
+      );
+
+      await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
+        shiftKey: true,
+      });
+      assert.equal(
+        currentURL(),
+        `/jobs/${jobID}@default`,
+        'Shift+ArrowRight takes you to the first tab in the loop'
+      );
+
+      // await this.pauseTest();
+    });
+  });
 });
diff --git a/ui/tests/pages/layout.js b/ui/tests/pages/layout.js
index c947fbc325a8..7d5cd60f11a8 100644
--- a/ui/tests/pages/layout.js
+++ b/ui/tests/pages/layout.js
@@ -110,6 +110,5 @@ export default create({
 
   keyboard: {
     modalShown: isPresent('.keyboard-shortcuts'),
-    hintsShown: isPresent('[data-shortcut]'),
   },
 });

From 28d8d255d575208c6ef64d57eab144cbfd175ae0 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 22 Jul 2022 16:42:25 -0400
Subject: [PATCH 5/6] Rebinder and assert expectation

---
 .../components/keyboard-shortcuts-modal.hbs   |  2 +-
 ui/tests/acceptance/keyboard-test.js          | 27 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
index d03c39fc6322..47c233d04ba3 100644
--- a/ui/app/components/keyboard-shortcuts-modal.hbs
+++ b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -31,7 +31,7 @@
                 {{/if}}
               {{/if}}
 
-              <button class="re-bind" disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}>
+              <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}}
diff --git a/ui/tests/acceptance/keyboard-test.js b/ui/tests/acceptance/keyboard-test.js
index 6e1fb143f92d..927c9b8b1c70 100644
--- a/ui/tests/acceptance/keyboard-test.js
+++ b/ui/tests/acceptance/keyboard-test.js
@@ -1,4 +1,4 @@
-// @ts-check
+/* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import {
@@ -123,7 +123,9 @@ module('Acceptance | keyboard', function (hooks) {
       await triggerEvent('.page-layout', 'keydown', { key: '?' });
       assert.ok(Layout.keyboard.modalShown);
 
-      await click('[data-test-command-label="Go to Clients"] button.re-bind');
+      await click(
+        '[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
+      );
 
       triggerEvent('.page-layout', 'keydown', { key: 'r' });
       triggerEvent('.page-layout', 'keydown', { key: 'o' });
@@ -131,7 +133,9 @@ module('Acceptance | keyboard', function (hooks) {
       triggerEvent('.page-layout', 'keydown', { key: 'l' });
       await triggerEvent('.page-layout', 'keydown', { key: 'Enter' });
       assert
-        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .dom(
+          '[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
+        )
         .hasText('r o f l');
 
       assert.equal(
@@ -151,7 +155,9 @@ module('Acceptance | keyboard', function (hooks) {
         'typing the newly bound shortcut brings me to clients'
       );
 
-      await click('[data-test-command-label="Go to Clients"] button.re-bind');
+      await click(
+        '[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
+      );
 
       triggerEvent('.page-layout', 'keydown', { key: 'n' });
       triggerEvent('.page-layout', 'keydown', { key: 'o' });
@@ -159,7 +165,9 @@ module('Acceptance | keyboard', function (hooks) {
       triggerEvent('.page-layout', 'keydown', { key: 'e' });
       await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
       assert
-        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .dom(
+          '[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
+        )
         .hasText(
           'r o f l',
           'text unchanged when I hit escape during recording'
@@ -169,7 +177,9 @@ module('Acceptance | keyboard', function (hooks) {
         '[data-test-command-label="Go to Clients"] button.reset-to-default'
       );
       assert
-        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .dom(
+          '[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
+        )
         .hasText('g c', 'Resetting to default rebinds the shortcut');
     });
 
@@ -202,7 +212,9 @@ module('Acceptance | keyboard', function (hooks) {
       await triggerEvent('.page-layout', 'keydown', { key: '?' });
       assert.ok(Layout.keyboard.modalShown);
       assert
-        .dom('[data-test-command-label="Go to Clients"] button.re-bind')
+        .dom(
+          '[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
+        )
         .hasText('b o o p');
     });
   });
@@ -232,6 +244,7 @@ module('Acceptance | keyboard', function (hooks) {
       server.create('node');
     });
     test('Dynamic Table Nav', async function (assert) {
+      assert.expect(4);
       server.createList('job', 3, { createRecommendations: true });
       await visit('/jobs');
 

From 6ae8f9a83b1c694a31acb3121a901df1e3c45beb Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Fri, 22 Jul 2022 16:57:39 -0400
Subject: [PATCH 6/6] Second percy snapshot showing hints no longer relevant

---
 ui/tests/acceptance/keyboard-test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/tests/acceptance/keyboard-test.js b/ui/tests/acceptance/keyboard-test.js
index 927c9b8b1c70..b2dfcf0f52f5 100644
--- a/ui/tests/acceptance/keyboard-test.js
+++ b/ui/tests/acceptance/keyboard-test.js
@@ -264,7 +264,6 @@ module('Acceptance | keyboard', function (hooks) {
         1,
         'Third job gets a shortcut hint'
       );
-      await percySnapshot(assert);
 
       triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
       triggerEvent('.page-layout', 'keydown', { key: '0' });