Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ui] General keyboard navigation in the UI #12831

Closed
wants to merge 35 commits into from

Conversation

philrenaud
Copy link
Contributor

@philrenaud philrenaud commented Apr 29, 2022

Resolves #12762

A general Keyboard / Keynav service for the Nomad UI

  • This allows Nomad users to navigate and operate their UI by use of keyboard alone and provides powerful defaults to move around:
    • absolute routes (such as g j to go to jobs index),
    • relative routes (such as shift + right-arrow to move to the next subnav section), and
    • dynamic routes (such as shift + 03 to go to the third link in a given list)
  • Creates a new global modal, accessible by pressing ? anyplace in the app
  • Gives users the choice to enable/disable shortcuts, or more advanced, to rebind individual commands to the pattern of their choosing.

Implementation and extension

  • Establishes a keyboard service that emits a consumable buffer array and matchedCommand object
  • Listens for keystrokes in any non-input elements
  • On each keystroke, if the buffer matches a pattern/sequence in keyboard.keyCommands, that command's action is run. These actions can be any function, and are commonly router.transitionTo() objects.
  • Uses Tether to place hints on-screen for when the user holds Shift
  • Shortcuts can be added by use of modifier (such as the Go to ACLs link), or by use of component-level, conditional helper keyboard-commands (for example, how we conditionally add the escape key to Evaluations modal)
  • Buffer clears after 0.75sec or when a successful keyboard command is executed

Side-effects

  • In order to facilitate a u shortcut to "Go up a level" from nested routes, reworked many otherwise-inline subnavs into their own components, such as the plugin subnav
  • In order to work around an Ember Router bug around LinkTos with query properties when deeply nested, invoked the classic linkTo component sparingly

Showing the keyboard modal (user pressed "?"):
image

Showing hints active (user holding "Shift"):
image

@github-actions
Copy link

github-actions bot commented Apr 29, 2022

Ember Asset Size action

As of 36cc240

Files that got Bigger 🚨:

File raw gzip
nomad-ui.js +31.3 kB +6.46 kB
vendor.js +14.2 kB +3.71 kB
nomad-ui.css +1.88 kB +469 B

Files that stayed the same size 🤷‍:

File raw gzip
vendor.css 0 B 0 B

@github-actions
Copy link

github-actions bot commented May 6, 2022

Ember Test Audit comparison

main 36cc240 change
passes 1380 1397 +17
failures 2 0 -2
flaky 0 0 0
duration 000ms 10m 24s 837ms +10m 24s 837ms

@github-actions
Copy link

github-actions bot commented May 6, 2022

Ember Test Audit flaky tests

Ember Test Audit detected these flaky tests on main:

  • Acceptance | job dispatch: required meta fields are properly indicated

Ember Test Audit detected these flaky tests on 51bd7c1:

  • Acceptance | exec: the command can be customised

@github-actions
Copy link

Ember Test Audit flaky tests

Ember Test Audit detected these flaky tests on e8a754d:

  • Integration | Component | task log: When the client is inaccessible, the server is accessible, and stderr is pressed before the client timeout occurs, the no connection error is not shown

@github-actions
Copy link

Ember Test Audit flaky tests

Ember Test Audit detected these flaky tests on 79c6483:

  • Integration | Utility | exec-socket-xterm-adapter: stderr frames are ignored

philrenaud and others added 19 commits August 3, 2022 11:27
* Experimental feature: shortcut visual hints

* Long way around to a custom modifier for keyboard shortcuts

* dynamic table and list iterative shortcuts

* Progress with regular old tether

* Delogging

* Table Keynav tether fix, server and client navs, and fix to shiftless on modified arrow keys
* Multiple tables init

* URL-bind enumerable keyboard commands and add to more taskRow and allocationRows

* Type safety and lint fixes

* Consolidated push to keyCommands

* Default value when removing keyCommands

* Remove the URL-based removal method and perform a recompute on any add
…nsive moves (#13761)

* Remove ember math helpers

* Test fixes for jobparts/body

* Kill an unneeded integration helper test

* delog

* Trying if disabling percy lets this finish

* Okay so its not percy; try parallelism in circle

* Percyless yet again

* Trying a different angle to not have percy

* Upgrade percy to 1.6.1
* 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
* Replace ArrowLeft etc. with an ascii arrow

* non-mutative helper cleanup
* click-outside and shortcuts enabled/disabled toggle

* Trap focus when modal open

* Enabled/disabled saved to localStorage

* Autofocus edit button on variable index

* Modal overflow styles

* Functional rebind

* Saving rebinds to localStorage for all majors

* Started on defaultCommandBindings

* Modal header style and cancel rebind on escape

* keyboardable keybindings w buttons instead of spans

* recording and defaultvalues

* Enter short-circuits rebind

* Only some commands are rebindable, and dont show dupes

* No unused get import

* More visually distinct header on modal

* Disallowed keys for rebind, showing buffer as you type, and moving dedupe to modal logic
* Acceptance tests for keyboard modal

* a11y audit fix and localStorage clear

* Bind/rebind/localStorage tests

* Keyboard tests for dynamic nav and tables

* Rebinder and assert expectation

* Second percy snapshot showing hints no longer relevant
…-groups page would fail to route / hit undefined.shouldSuperCede errors
@philrenaud
Copy link
Contributor Author

Closing; was split into #14138 and #14165

@github-actions
Copy link

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

UI: general keyboard navigation
2 participants