From 71f8405b2d58bf862b971ea98f25b8228f856298 Mon Sep 17 00:00:00 2001
From: hc-github-team-nomad-core
 <82989552+hc-github-team-nomad-core@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:25:51 -0500
Subject: [PATCH] backport of commit 30a9b6eda74e515135dbebb600b362da6d637cb1
 (#18256)

Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com>
---
 .changelog/18210.txt                          |  3 +++
 ui/.template-lintrc.js                        |  1 +
 .../components/list-pagination/list-pager.js  | 24 ++++++++++++++++++-
 .../components/list-pagination/list-pager.hbs |  6 +++++
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changelog/18210.txt

diff --git a/.changelog/18210.txt b/.changelog/18210.txt
new file mode 100644
index 000000000..f8c9c37b9
--- /dev/null
+++ b/.changelog/18210.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: adds keyboard commands for pagination on lists using [[ and ]]
+```
diff --git a/ui/.template-lintrc.js b/ui/.template-lintrc.js
index 906c66efe..43b6d52f5 100644
--- a/ui/.template-lintrc.js
+++ b/ui/.template-lintrc.js
@@ -19,5 +19,6 @@ module.exports = {
   },
   ignore: [
     'app/components/breadcrumbs/*', // using {{(modifier)}} syntax
+    'app/templates/components/list-pagination/list-pager', // using {{(modifier)}} syntax
   ],
 };
diff --git a/ui/app/components/list-pagination/list-pager.js b/ui/app/components/list-pagination/list-pager.js
index 087d1e6db..05cedf443 100644
--- a/ui/app/components/list-pagination/list-pager.js
+++ b/ui/app/components/list-pagination/list-pager.js
@@ -6,7 +6,29 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import KeyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
 
 @classic
 @tagName('')
-export default class ListPager extends Component {}
+export default class ListPager extends Component {
+  @service router;
+
+  // Even though we don't currently use "first" / "last" pagination in the app,
+  // the option is there at a component level, so let's make sure that we
+  // only append keyNav to the "next" and "prev" links.
+  // We use this to make the modifier conditional, per https://v5.chriskrycho.com/journal/conditional-modifiers-and-helpers-in-emberjs/
+  get includeKeyboardNav() {
+    return this.label === 'Next page' || this.label === 'Previous page'
+      ? KeyboardShortcutModifier
+      : null;
+  }
+
+  @action
+  gotoRoute() {
+    this.router.transitionTo(this.router.currentRouteName, {
+      queryParams: { page: this.page },
+    });
+  }
+}
diff --git a/ui/app/templates/components/list-pagination/list-pager.hbs b/ui/app/templates/components/list-pagination/list-pager.hbs
index 0a2775465..0b137cb3a 100644
--- a/ui/app/templates/components/list-pagination/list-pager.hbs
+++ b/ui/app/templates/components/list-pagination/list-pager.hbs
@@ -9,6 +9,12 @@
     class={{this.class}}
     data-test-pager={{this.test}}
     aria-label={{this.label}}
+    {{(modifier
+      this.includeKeyboardNav
+      label=(if (eq this.label 'Next page') 'Next Page' 'Previous Page')
+      action=(action "gotoRoute")
+      pattern=(if (eq this.label 'Next page') (array "]" "]") (array "[" "["))
+    )}}
   >
     {{yield}}
   </LinkTo>