[ui] Keyboard shortcuts to switch regions (#17169)

* Regions keynav

* Dont show if you only have a single region (global by default)

.changelog/17169.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: adds keyboard nav for switching between regions by pressing "r 1", "r 2", etc.
+```

ui/app/components/region-switcher.js

@@ -24,4 +24,17 @@ export default class RegionSwitcher extends Component {
       queryParams: { region },
     });
   }
+
+  get keyCommands() {
+    if (this.sortedRegions.length <= 1) {
+      return [];
+    }
+    return this.sortedRegions.map((region, iter) => {
+      return {
+        label: `Switch to ${region} region`,
+        pattern: ['r', `${iter + 1}`],
+        action: () => this.gotoRegion(region),
+      };
+    });
+  }
 }

ui/app/templates/components/region-switcher.hbs

@@ -3,6 +3,8 @@
   SPDX-License-Identifier: MPL-2.0
 ~}}
 
+{{keyboard-commands this.keyCommands}}
+
 {{#if this.system.shouldShowRegions}}
   <span data-test-region-switcher-parent>
     <PowerSelect

ui/tests/acceptance/keyboard-test.js

@@ -361,5 +361,41 @@ module('Acceptance | keyboard', function (hooks) {
         'Shift+ArrowRight takes you to the first tab in the loop'
       );
     });
+
+    test('Region switching', async function (assert) {
+      ['Detroit', 'Halifax', 'Phoenix', 'Toronto', 'Windsor'].forEach((id) => {
+        server.create('region', { id });
+      });
+
+      await visit('/jobs');
+
+      // Regions are in the keynav modal
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      await triggerEvent('.page-layout', 'keydown', { key: '?' });
+      assert.ok(Layout.keyboard.modalShown);
+      assert
+        .dom('[data-test-command-label="Switch to Detroit region"]')
+        .exists('First created region is in the modal');
+
+      assert
+        .dom('[data-test-command-label="Switch to Windsor region"]')
+        .exists('Last created region is in the modal');
+
+      // Triggers a region switch to Halifax
+      triggerEvent('.page-layout', 'keydown', { key: 'r' });
+      await triggerEvent('.page-layout', 'keydown', { key: '2' });
+      assert.ok(
+        currentURL().includes('region=Halifax'),
+        'r 2 command takes you to the second region'
+      );
+
+      // Triggers a region switch to Phoenix
+      triggerEvent('.page-layout', 'keydown', { key: 'r' });
+      await triggerEvent('.page-layout', 'keydown', { key: '3' });
+      assert.ok(
+        currentURL().includes('region=Phoenix'),
+        'r 3 command takes you to the third region'
+      );
+    });
   });
 });