Dynamic numeric keynav for multiple tables

ui/app/modifiers/keyboard-shortcut.js

@@ -1,44 +1,31 @@
 import { inject as service } from '@ember/service';
 import Modifier from 'ember-modifier';
 import { registerDestructor } from '@ember/destroyable';
-import { assert } from '@ember/debug';
 
 export default class KeyboardShortcutModifier extends Modifier {
   @service keyboard;
+  @service router;
 
-  /**
-   * For Dynamic/iterative keyboard shortcuts, our patterns look like "Shift+0" by default
-   * Do a couple things to make them more human-friendly:
-   * 1. Make them 1-based, instead of 0-based
-   * 2. Prefix numbers 1-9 with "0" to make it so "Shift+10" doesn't trigger "Shift+1" then "0", etc.
-   * ^--- stops being a good solution with 100+ row lists/tables, but a better UX than waiting for shift key-up otherwise
-   *
-   * @param {string[]} pattern
-   */
-  cleanPattern(pattern) {
-    let patternNumber = pattern.length === 1 && pattern[0].match(/\d+/g);
-    if (!patternNumber) {
-      return pattern;
-    } else {
-      patternNumber = +patternNumber[0]; // regex'd string[0] to num
-      patternNumber = patternNumber + 1; // first item should be Shift+1, not Shift+0
-      assert(
-        'Dynamic keyboard shortcuts only work up to 99 digits',
-        patternNumber < 100
-      );
-      pattern = [`Shift+${('0' + patternNumber).slice(-2)}`]; // Shift+01, not Shift+1
+  modify(
+    element,
+    _positional,
+    {
+      label,
+      pattern = '',
+      action = () => {},
+      menuLevel = false,
+      enumerated = false,
     }
-    return pattern;
-  }
-
-  modify(element, [eventName], { label, pattern, action, menuLevel = false }) {
+  ) {
     let commands = [
       {
         label,
         action,
-        pattern: this.cleanPattern(pattern),
+        pattern,
         element,
         menuLevel,
+        enumerated,
+        url: this.router.currentURL,
       },
     ];
     this.keyboard.addCommands(commands);

ui/app/services/keyboard.js

@@ -8,6 +8,8 @@ import EmberRouter from '@ember/routing/router';
 import { schedule } from '@ember/runloop';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { assert } from '@ember/debug';
+import { isDestroying, isDestroyed } from '@ember/destroyable';
 
 const DEBOUNCE_MS = 750;
 
@@ -146,9 +148,49 @@ export default class KeyboardService extends Service {
     },
   ];
 
+  /**
+   * For Dynamic/iterative keyboard shortcuts, our patterns look like "Shift+0" by default
+   * Do a couple things to make them more human-friendly:
+   * 1. Make them 1-based, instead of 0-based
+   * 2. Prefix numbers 1-9 with "0" to make it so "Shift+10" doesn't trigger "Shift+1" then "0", etc.
+   * ^--- stops being a good solution with 100+ row lists/tables, but a better UX than waiting for shift key-up otherwise
+   *
+   * @param {string[]} pattern
+   */
+  cleanPattern(pattern) {
+    let patternNumber = pattern.length === 1 && pattern[0].match(/\d+/g);
+    if (!patternNumber) {
+      return pattern;
+    } else {
+      patternNumber = +patternNumber[0]; // regex'd string[0] to num
+      patternNumber = patternNumber + 1; // first item should be Shift+1, not Shift+0
+      assert(
+        'Dynamic keyboard shortcuts only work up to 99 digits',
+        patternNumber < 100
+      );
+      pattern = [`Shift+${('0' + patternNumber).slice(-2)}`]; // Shift+01, not Shift+1
+    }
+    return pattern;
+  }
+
   addCommands(commands) {
-    // Filter out those commands that don't have a label (they're only being added for at-a-glance hinting/highlights)
-    this.keyCommands.pushObjects(commands);
+    commands.forEach((command) => {
+      if (command.enumerated) {
+        // Ember's registerDestructor on destroyables fires AFTER a page load, meaning our enumerated array will be full of both old and new commands.
+        // Filter not only by enumerated, but also make sure we're only counting by those commands with our new command's URL.
+        // Without this second filterBy, moving from tabled-page to tabled-page will start your new commands at a number greater than 01.
+        command.pattern = this.cleanPattern([
+          `${
+            this.keyCommands
+              .filterBy('enumerated')
+              .filter((c) => c.url === command.url).length
+          }`,
+        ]);
+        this.keyCommands.pushObjects(commands);
+      } else {
+        this.keyCommands.pushObjects(commands);
+      }
+    });
   }
 
   removeCommands(commands) {

ui/app/templates/allocations/allocation/index.hbs

@@ -184,6 +184,10 @@
           </t.head>
           <t.body as |row|>
             <TaskRow
+              {{keyboard-shortcut 
+                enumerated=true
+                action=(action "taskClick" row.model.allocation row.model)
+              }}
               @data-test-task-row={{row.model.name}}
               @task={{row.model}}
               @onClick={{action "taskClick" row.model.allocation row.model}}

ui/app/templates/clients/client/index.hbs

@@ -546,6 +546,10 @@
             </t.head>
             <t.body as |row|>
               <AllocationRow
+                {{keyboard-shortcut 
+                  enumerated=true
+                  action=(action "gotoAllocation" row.model)
+                }}
                 @allocation={{row.model}}
                 @context="node"
                 @onClick={{action "gotoAllocation" row.model}}

ui/app/templates/clients/index.hbs

@@ -81,13 +81,13 @@
             <th># Volumes</th>
             <th># Allocs</th>
           </t.head>
-          <t.body as |row iter|>
+          <t.body as |row|>
             <ClientNodeRow
               data-test-client-node-row
               @node={{row.model}}
               @onClick={{action "gotoNode" row.model}}
               {{keyboard-shortcut 
-                pattern=(array (concat "Shift+" iter))
+                enumerated=true
                 action=(action "gotoNode" row.model)
               }}
             />

ui/app/templates/components/job-page/parts/children.hbs

@@ -65,8 +65,8 @@
             Summary
           </th>
         </t.head>
-        <t.body @key="model.id" as |row iter|>
-          <JobRow data-test-job-row @job={{row.model}} @context="child" @iter={{iter}} />
+        <t.body @key="model.id" as |row|>
+          <JobRow data-test-job-row @job={{row.model}} @context="child" />
         </t.body>
       </ListTable>
       <div class="table-foot">

ui/app/templates/components/job-page/parts/recent-allocations.hbs

@@ -52,6 +52,10 @@
             @allocation={{row.model}}
             @context="job"
             @onClick={{action "gotoAllocation" row.model}}
+            {{keyboard-shortcut
+              enumerated=true
+              action=(action "gotoAllocation" row.model)
+            }}
           />
         </t.body>
       </ListTable>

ui/app/templates/components/job-page/parts/task-groups.hbs

@@ -36,6 +36,10 @@
           @data-test-task-group={{row.model.name}}
           @taskGroup={{row.model}}
           @onClick={{fn this.gotoTaskGroup row.model}}
+          {{keyboard-shortcut 
+            enumerated=true
+            action=(fn this.gotoTaskGroup row.model)
+          }}
         />
       </t.body>
     </ListTable>

ui/app/templates/components/job-row.hbs

@@ -1,6 +1,6 @@
 <td data-test-job-name
   {{keyboard-shortcut 
-    pattern=(array (concat "Shift+" @iter))
+    enumerated=true
     action=(action "gotoJob" @job)
   }}
 >

ui/app/templates/components/server-agent-row.hbs

@@ -1,6 +1,6 @@
 <td data-test-server-name
   {{keyboard-shortcut 
-    pattern=(array (concat "Shift+" @iter))
+    enumerated=true
     action=(action this.goToAgent)
   }}
 ><LinkTo @route="servers.server" @model={{this.agent.id}} class="is-primary">{{this.agent.name}}</LinkTo></td>

ui/app/templates/csi/volumes/index.hbs

@@ -67,15 +67,15 @@
             # Allocs
           </th>
         </t.head>
-        <t.body @key="model.name" as |row iter|>
+        <t.body @key="model.name" as |row|>
           <tr
             class="is-interactive"
             data-test-volume-row
             {{on "click" (action "gotoVolume" row.model)}}
           >
             <td data-test-volume-name
               {{keyboard-shortcut 
-                pattern=(array (concat "Shift+" iter))
+                enumerated=true
                 action=(action "gotoVolume" row.model)
               }}
             >

ui/app/templates/csi/volumes/volume.hbs

@@ -52,6 +52,10 @@
           </t.head>
           <t.body as |row|>
             <AllocationRow
+              {{keyboard-shortcut 
+                enumerated=true
+                action=(action "gotoAllocation" row.model)
+              }}
               @data-test-write-allocation={{row.model.id}}
               @allocation={{row.model}}
               @context="volume"
@@ -90,6 +94,10 @@
           </t.head>
           <t.body as |row|>
             <AllocationRow
+              {{keyboard-shortcut 
+                enumerated=true
+                action=(action "gotoAllocation" row.model)
+              }}
               @data-test-read-allocation={{row.model.id}}
               @allocation={{row.model}}
               @context="volume"

ui/app/templates/evaluations/index.hbs

@@ -67,7 +67,7 @@
             Placement Failures
           </th>
         </t.head>
-        <t.body as |row iter|>
+        <t.body as |row|>
           <tr
             data-test-evaluation="{{row.model.shortId}}"
             style="cursor: pointer;"
@@ -78,7 +78,7 @@
           >
             <td data-test-id
                 {{keyboard-shortcut 
-                  pattern=(array (concat "Shift+" iter))
+                  enumerated=true
                   action=(fn this.handleEvaluationClick row.model)
                 }}
             >

ui/app/templates/jobs/index.hbs

@@ -147,8 +147,8 @@
             Summary
           </th>
         </t.head>
-        <t.body @key="model.id" as |row iter|>
-          <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} @iter={{iter}} />
+        <t.body @key="model.id" as |row|>
+          <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} />
         </t.body>
       </ListTable>
       <div class="table-foot">

ui/app/templates/jobs/job/allocations.hbs

@@ -62,6 +62,10 @@
           </t.head>
           <t.body as |row|>
             <AllocationRow
+              {{keyboard-shortcut 
+                enumerated=true
+                action=(action "gotoAllocation" row.model)
+              }}
               @data-test-allocation={{row.model.id}}
               @allocation={{row.model}}
               @context="job"

ui/app/templates/jobs/job/task-group.hbs

@@ -192,6 +192,10 @@
             </t.head>
             <t.body @key="model.id" as |row|>
               <AllocationRow
+                {{keyboard-shortcut 
+                  enumerated=true
+                  action=(action "gotoAllocation" row.model)
+                }}
                 @data-test-allocation={{row.model.id}}
                 @allocation={{row.model}}
                 @context="taskGroup"

ui/app/templates/servers/index.hbs

@@ -21,8 +21,8 @@
           <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
           <t.sort-by @prop="version">Version</t.sort-by>
         </t.head>
-        <t.body as |row iter|>
-          <ServerAgentRow data-test-server-agent-row @agent={{row.model}} @iter={{iter}} />
+        <t.body as |row|>
+          <ServerAgentRow data-test-server-agent-row @agent={{row.model}} />
         </t.body>
       </ListTable>
       <div class="table-foot">