Initial implementation of quick-switcher (keyboard-driven navigation)

[alexbrand]

Initial implementation of a quick-switcher / keyboard-driven navigation.

I created a new component that is attached to the root of the application. The component leverages the Clarity modal functionality.

To open the quick-switcher, hit the k key. Once open, you can use the input field to filter the list of potential destinations. You can use the arrow keys to go up and down in the list. Once you are set on a destination, hit Enter to navigate there. You may also use the mouse to select an item from the list.

Demo:

Fixes #413

[alexbrand]

Looks like the frontend build is failing. Going to review the build logs and address any issues.

[alexbrand]

Fixed the lint errors, minus one:

ERROR: /go/src/github.com/vmware-tanzu/octant/web/src/app/components/quick-switcher/quick-switcher.component.ts[90, 18]: non-arrow functions are forbidden

I need help with focusing the input once the Modal pops up. I am not sure how to do that in an Angular-native manner. Link to code in PR: https://github.com/vmware-tanzu/octant/pull/434/files#diff-cdf196737b682f9089d6e6506bfcebb2R88-R92

[wwitzel3]

Oh, it just wants you to use () => {} instead of function () {}

[alexbrand]

Aaaah okay! I am still wondering if there is a better way to focus on the input. Ideally, I should be able to get an event or something that indicates the modal has opened. I couldn’t find how to do that though.

[bryanl]

I like where this going. Is k the right invoking key? I'd like to throw some other contenders in the ring:

O for object
/ Because that's what vim does

Some other things to think about:

• how would users discover this feature?
• Could we reuse this modal idiom for other features? Perhaps a way to kickstart a process for creating objects?

[alexbrand]

I don't have strong opinions on k being the invoking key. I initially went with it because that's what I use for kubectl on the command line.

I like the alternatives you propose @bryanl. Here is another one:

• g for "Go" (github uses this: g + n goes to notifications for example).

I love the idea of using /, but I would use it to search the contents of a page.

The way I envision this:

• k + pods + enter takes me to the pods page
• / focuses on a search / filter bar
• nginx to filter pods by name = nginx

re: feature discovery - I am not sure. I just reviewed Slack, Gmail and GitHub and none seem to have anything in the UI for discovering keyboard shortcuts. One thing they do have in common is that they all use ? or cmd + ? to bring up a help menu that explains the keyboard shortcuts thought.

[alexbrand]

Hey all, anything I can do to move this forward?

[GuessWhoSamFoo]

TSLint wants this to be setTimout(() => {

EDIT: Also looking into passing an event here

[alexbrand]

I think it would be great to use some kind of event instead of relying on setTimeout. I just couldn't figure it out. Would love some help here.

[GuessWhoSamFoo]

@alexbrand Also can you add QuickSwitcherComponent to the declarations in app.component.spec.ts?

[alexbrand]

All set @GuessWhoSamFoo 👍

[GuessWhoSamFoo]

Two small changes then lgtm

1. For e2e testing, https://github.com/vmware-tanzu/octant/blob/master/web/cypress/integration/deployment.spec.js#L22 should be replaced with cy.contains('span[class="ng-value-label ng-star-inserted"]', result.stdout); because there are now two focus elements possible (one on the namespace dropdown and the other from quick switcher)

2. Linter comma

ERROR: /go/src/github.com/vmware-tanzu/octant/web/src/app/app.component.spec.ts[52, 31]: Insert `,`

[GuessWhoSamFoo]

Thanks again @alexbrand !