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

Backport of [ui] general keyboard navigation: 1.3.4 release (#14138) #14201

Merged
merged 3 commits into from
Aug 22, 2022

Conversation

philrenaud
Copy link
Contributor

(Port of #12831 for pre-1.4 release)

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

* Initialized keyboard service

Neat but funky: dynamic subnav traversal

👻

generalized traverseSubnav method

Shift as special modifier key

Nice little demo panel

Keyboard shortcuts keycard

Some animation styles on keyboard shortcuts

Handle situations where a link is deeply nested from its parent menu item

Keyboard service cleanup

helper-based initializer and teardown for new contextual commands

Keyboard shortcuts modal component added and demo-ghost removed

Removed j and k from subnav traversal

Register and unregister methods for subnav plus new subnavs for volumes and volume

register main nav method

Generalizing the register nav method

12762 table keynav (#12975)

* 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

Go to Optimize keyboard link and storage key changed to g r

parameterized jobs keyboard nav

Dynamic numeric keynav for multiple tables (#13482)

* 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

Get tests passing in Keynav: remove math helpers and a few other defensive 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

[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

Replace ArrowLeft etc. with an ascii arrow (#13776)

* Replace ArrowLeft etc. with an ascii arrow

* non-mutative helper cleanup

Keyboard Nav: let users rebind their shortcuts (#13781)

* 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

willDestroy hook to prevent tests from doubling/tripling up addEventListener on kb events

remove unused tests

Keyboard Navigation acceptance tests (#13893)

* 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

Weird issue where linktos with query props specifically from the task-groups page would fail to route / hit undefined.shouldSuperCede errors

Adds the concept of exclusivity to a keycommand, removing peers that also share its label

Lintfix

Changelog and PR feedback

Changelog and PR feedback

Fix to rebinding in firefox by blurring the now-disabled button on rebind (#14053)

* Secure Variables shortcuts removed

* Variable index route autofocus removed

* Updated changelog entry

* Updated changelog entry

* Keynav docs (#14148)

* Section added to the API Docs UI page

* Added a note about disabling

* Prev and Next order

* Remove dev log and unneeded comments
@philrenaud philrenaud requested a review from lgfa29 August 19, 2022 20:49
@philrenaud philrenaud self-assigned this Aug 19, 2022
@philrenaud philrenaud changed the title [ui] general keyboard navigation: 1.3.4 release (#14138) Backport of [ui] general keyboard navigation: 1.3.4 release (#14138) Aug 19, 2022
@github-actions
Copy link

github-actions bot commented Aug 19, 2022

Ember Asset Size action

As of 6d68fe1

Files that got Bigger 🚨:

File raw gzip
nomad-ui.js +28.6 kB +6.31 kB
vendor.js +14.2 kB +3.88 kB
nomad-ui.css +1.94 kB +450 B

Files that stayed the same size 🤷‍:

File raw gzip
vendor.css 0 B 0 B

@github-actions
Copy link

github-actions bot commented Aug 19, 2022

Ember Test Audit comparison

release/1.3.x 6d68fe1 change
passes 1286 1301 +15
failures 2 0 -2
flaky 0 0 0
duration 000ms 9m 28s 638ms +9m 28s 638ms

@philrenaud philrenaud merged commit 4f760da into release/1.3.x Aug 22, 2022
@philrenaud philrenaud deleted the backport-14138-1.3.x branch August 22, 2022 00:43
@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 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants