[ui] Keyboard nav: "u" key to go up a level (#13754)

* U to go up a level

* Mislabelled my conditional

* Custom lint ignore rule

* Custom lint ignore rule, this time with commas

* Since we're getting rid of ember math helpers elsewhere, do the math ourselves here

ui/.template-lintrc.js

@@ -12,4 +12,7 @@ module.exports = {
     },
     'no-implicit-this': { allow: ['keyboard-commands'] },
   },
+  ignore: [
+    'app/components/breadcrumbs/*', // using {{(modifier)}} syntax
+  ],
 };

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,16 @@
 {{! template-lint-disable no-unknown-arguments-for-builtin-components }}
-<li data-test-breadcrumb-default>
+<li data-test-breadcrumb-default
+  {{(modifier
+    this.keyboardShortcut
+    label="Go up a level"
+    pattern=(array "u")
+    menuLevel=true
+    action=(action this.traverseUpALevel @crumb.args)
+  )}}
+>
   <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 keyboardShortcut() {
+    return this.args.isOneCrumbUp() ? KeyboardShortcutModifier : null;
+  }
+}

ui/app/components/breadcrumbs/job.hbs

@@ -26,7 +26,15 @@
         </LinkTo>
       </li>
     {{/if}}
-    <li>
+    <li
+      {{(modifier
+        this.keyboardShortcut
+        label="Go up a level"
+        pattern=(array "u")
+        menuLevel=true
+        action=(action this.traverseUpALevel (array "jobs.job" this.job.idWithNamespace))
+      )}}
+    >
       <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/templates/components/app-breadcrumbs.hbs

@@ -1,7 +1,7 @@
 <Breadcrumbs as |breadcrumbs|>
-  {{#each breadcrumbs as |crumb|}}
+  {{#each breadcrumbs as |crumb iter|}}
     {{#let crumb.args.crumb as |c|}}
-      {{component (concat "breadcrumbs/" (or c.type "default")) crumb=c}}
+      {{component (concat "breadcrumbs/" (or c.type "default")) crumb=c isOneCrumbUp=(action this.isOneCrumbUp iter breadcrumbs.length)}}
     {{/let}}
   {{/each}}
 </Breadcrumbs>