[Canvas] Refactor keyboard shortcut handlers

[cqliu1]

We've run into a few issues where shortcuts have been disabled accidentally and other issues surrounding the keyboard shortcut handlers where key events have been swallowed.

We currently use the Shortcut component from the react-shortcuts package to handle shortcuts. Some of these are rendered conditionally based on the current app state. There are multiple instances of the Shortcut components across the app that should handle different types of shortcuts, i.e. element shortcuts vs expression editor shortcuts, but I've noticed there's some overlap in some of the handlers where the same shortcuts are being handled different in two places.

We should audit the handlers and potentially reorganize the namespaces for the keymap and introduce global apps. We also need to double check that the correct props are being passed into each component per concern so the handlers don't clash and fire when they're not support to.

I think it'd also be beneficial to refactor the handlers and place them in a centralized location where we can see all of the shortcuts at once. This should help with making sure changes are applied to the shortcuts consistently, so we don't accidentally miss one of the shortcuts handlers.

TODOs:

• reorganize shortcuts and introduce a GLOBAL namespace for shortcuts that should always be available regardless of the current app state, like refresh or toggle fullscreen mode
• move all <Shortcut /> instances into a single component (is this actually something we want to do?)
• audit props to make sure the handlers are behaving correctly and now swallowing up other key event handlers

Shortcut handler locations:

• kibana/x-pack/legacy/plugins/canvas/public/components/expression/expression.js

  Line 30 in 396edb9

  <Shortcuts

• kibana/x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.js

  Line 41 in 396edb9

  <Shortcuts

• https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.js#L131

• kibana/x-pack/legacy/plugins/canvas/public/components/workpad_shortcuts/workpad_shortcuts.tsx

  Line 118 in 396edb9

  <Shortcuts

• kibana/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.js

  Line 126 in 396edb9

  <Shortcuts

Shortcut Availability

	Read only mode	Fullscreen	Edit mode without selection	Element(s) selected	Expression editor	Notes
Element controls
Cut ⌘ X	N	N	N	Y	Y
Copy ⌘ C	N	N	N	Y	Y
Paste ⌘ V	N	N	Y	Y	Y
Clone ⌘ D	N	N	N	Y	Y
Delete DEL or BACKSPACE	N	N	N	Y	Y
Bring to front ⌘ ↑	N	N	N	Y	Y
Bring forward ⌘ SHIFT ↑	N	N	N	Y	Y
Send backward ⌘ ↓	N	N	N	Y	Y
Send to back ⌘ SHIFT ↓	N	N	N	Y	Y
Group G	N	N	N	Y	Y
Ungroup U	N	N	N	Y	Y
Shift up by 10px ↑	N	N	N	Y	Y
Shift down by 10px ↓	N	N	N	Y	Y
Shift left by 10px ←	N	N	N	Y	Y
Shift right by 10px →	N	N	N	Y	Y
Shift up by 1px SHIFT ↑	N	N	N	Y	Y
Shift down by 1px SHIFT ↓	N	N	N	Y	Y
Shift left by 1px SHIFT ←	N	N	N	Y	Y
Shift right by 1px SHIFT →	N	N	N	Y	Y
Expression controls
Run whole expression ⌘ ENTER	N	N	N	N	Y
Editor controls
Resize from center ⌥ DRAG	N	N	N	Y	Y	Only for documentation. Handled by the layout engine, not react-shortcuts. Move this to element controls?
Move, resize, and rotate without snapping ⌘ DRAG	N	N	N	Y	Y	Only for documentation. Handled by the layout engine, not react-shortcuts. Move this to element controls?
Select multiple elements SHIFT CLICK	N	N	Y	Y	Y	Only for documentation. Handled by the layout engine, not react-shortcuts
Select element below ⌘ CLICK	N	N	Y	Y	Y	Only for documentation. Handled by the layout engine, not react-shortcuts
Undo last action ⌘ Z	N	N	Y	Y	Y	Do we want to be able to undo/redo in fullscreen mode? I'm leaning towards no
Redo last action ⌘ SHIFT Z	N	N	Y	Y	Y
Show grid ⌥ G	N	N	Y	Y	Y
Toggle edit mode ⌥ E	Y	N	Y	Y	Y	Do we want to be able to change toggle edit/read mode while in fullscreen mode? I'm also leaning towards no here
Zoom in ⌘ ⌥ +	Y	N	Y	Y	Y
Zoom out ⌘ ⌥ -	Y	N	Y	Y	Y
Reset zoom to 100% ⌘ ⌥ [	Y	N	Y	Y	Y
Go to previous page ⌥ [	Y	Y	Y	Y	Y	Note: different shortcuts are available in edit vs fullscreen
Go to next page ⌥ ]	Y	Y	Y	Y	Y	Note: different shortcuts are available in edit vs fullscreen
Refresh workpad ⌥ R	Y	Y	Y	Y	Y
Presentation controls
Enter presentation mode ⌥ F or ⌥ P	Y	Y	Y	Y	Y	We may need to add this to the editor namespace
Exit presentation mode ESC	N	Y	N	N	N	This could be global, it's just only useful when you're already in fullscreen mode
Go to previous page ⌥ [ or BACKSPACE or ←	Y	Y	Y	Y	Y	Note: different shortcuts are available in edit vs fullscreen
Go to next page ⌥ ] or SPACE or →	Y	Y	Y	Y	Y	Note: different shortcuts are available in edit vs fullscreen
Refresh workpad ⌥ R	Y	Y	Y	Y	Y
Toggle page cycling P	Y	Y	Y	Y	Y

[elasticmachine]

Pinging @elastic/kibana-canvas

[ThomThomson]

Closing this for the time being as we are currently unable to prioritize canvas UX issues. We can reopen this if our priorities change.