diff --git a/.changelog/17169.txt b/.changelog/17169.txt new file mode 100644 index 000000000..a80067136 --- /dev/null +++ b/.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. +``` diff --git a/ui/app/components/region-switcher.js b/ui/app/components/region-switcher.js index d29aa4ef5..fa0ed446c 100644 --- a/ui/app/components/region-switcher.js +++ b/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), + }; + }); + } } diff --git a/ui/app/templates/components/region-switcher.hbs b/ui/app/templates/components/region-switcher.hbs index 47e8e4af2..4ec86b1d0 100644 --- a/ui/app/templates/components/region-switcher.hbs +++ b/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}} { + 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' + ); + }); }); });