feat(sqllab): Add keyboard shortcut helper

[justinpark]

SUMMARY

This commit adds keyboard shortcut helper button to display keyboard shortcut list.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

after--keyboard-shortcut.mov

TESTING INSTRUCTIONS

Go to SQL Lab and click shortcut button

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[justinpark]

@kasiazjc could you help the design review?

[eschutho]

@justinpark This is really cool!

[eschutho]

/testenv up

[github-actions]

@eschutho Ephemeral environment spinning up at http://34.216.203.161:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[yousoph]

Not sure if this is due to this PR or not, but when I first go to SQL Lab on the ephemeral, the tabs don't load:

After refreshing it works fine... 🤔

[kasiazjc]

@justinpark thank you for working on this, definitely a needed feature! I have a few suggestions:

• I would switch the columns on action and shortcut - it is easier to scan the text and look for keywords that way, and we do not have to worry about truncation if there are more than 2 shortcuts

• I changed shortcut fontsize to 12px - 14px seemed to be overly cluttering the modal

• I think this feature is not needed to be available at all times - people will probably quickly learn shortcuts and only open the modal to refresh the memory, so I would suggest moving it to the "..." dropdown with autocomplete, as this bar has a bunch of buttons already

What do you think?

[justinpark]

• I would switch the columns on action and shortcut - it is easier to scan the text and look for keywords that way, and we do not have to worry about truncation if there are more than 2 shortcuts

* I changed shortcut fontsize to 12px - 14px seemed to be overly cluttering the modal * I think this feature is not needed to be available at all times - people will probably quickly learn shortcuts and only open the modal to refresh the memory, so I would suggest moving it to the "..." dropdown with autocomplete, as this bar has a bunch of buttons already

What do you think?

@kasiazjc Thanks for the suggestion! I made the layout change and menu location as you suggested.

[justinpark]

Not sure if this is due to this PR or not, but when I first go to SQL Lab on the ephemeral, the tabs don't load:

I don't find the issue.
I believe that's caused by the previous ephemeral cache.
Please re-create ephemeral test environment and test again if you concern about it.

[kasiazjc]

• I would switch the columns on action and shortcut - it is easier to scan the text and look for keywords that way, and we do not have to worry about truncation if there are more than 2 shortcuts

* I changed shortcut fontsize to 12px - 14px seemed to be overly cluttering the modal * I think this feature is not needed to be available at all times - people will probably quickly learn shortcuts and only open the modal to refresh the memory, so I would suggest moving it to the "..." dropdown with autocomplete, as this bar has a bunch of buttons already What do you think?

@kasiazjc Thanks for the suggestion! I made the layout change and menu location as you suggested.

Thank you for the quick changes, this looks great!

[kasiazjc]

design LGTM

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.