[Enhancement]: Add Vi Key Bindings

[RilDev]

Hi there, thank you very much for this UI, it makes Docker very easy to use!

Would it be possible to add J and K to go up and down in the lists? Like it we could either press UP / DOWN or J / K to navigate without leaving the home row (like in Vim).

Thank you very much!

[lirantal]

Hi @RilDev, thanks for suggesting this. I think it makes a lot of sense, just need to check that the key bindings are indeed free for use :-)

Will take a look later on the weekend. In the meanwhile, if you wanted to take a look at the code and propose a pull request, I'd be happy to help you get that merged.

[RilDev]

Challenge accepted! Thanks for the offer!

[RilDev]

@lirantal So to what I understand, the up / down arrow binding is managed by blessed-contrib. Am I right? If yes, I'll have to familiarize myself with this library this week-end!

I also went through widgets files and k / j look like they are indeed free.

[lirantal]

Sounds like you're on the right track.

To specifically add the key bindings, you'd either going to need to add them to https://github.com/lirantal/dockly/blob/main/src/screen.js#L188-L213 for a sort of general key binding. This is though where we also need to define the requirements well - do you intend to have j/k supported through out all widgets? the help screen, the container list, the logs, etc? I would think so, and if it is indeed it then instead of adding the j/k binding to each widget, we should indeed look at adding it to the screen.js file I referenced and on the event of key presses for them we should move up or down (hopefully there's a clearly documented event to trigger for that from blessed).

Hope this helps 🤗

[RilDev]

Yes it does help! Thanks!

[RilDev]

Challenge failed :(

To what I saw, there is no clear documentation for rebinding the arrow keys in the blessed library. And the furthest I could go was to this file https://github.com/chjj/blessed/blob/master/lib/keys.js... but I don't have the skills / understanding needed to modify it and implement it in dockly.

Sorry about that!

[lirantal]

No worries at all and this is amazing you tried it! I'll try to put some time in the next couple of weeks to work on it too and as I make progress I'll update you so you can make the relevant changes.

[RilDev]

Thanks @lirantal, I would be interested to see how you implement this feature!

[lirantal]

@RilDev Ok, had a bit of time to tinker with this issue this morning

So, firsly, the base list widget that we use in dockly from the blessed library actually already supports a vi-type key binding. See from the README docs:

This means that all the needed code change is to update the instantiation code for all list type widgets to support that option. You do it as follows:

diff --git a/src/widgetsTemplates/list.widget.template.js b/src/widgetsTemplates/list.widget.template.js
index da39b7c..532b525 100644
--- a/src/widgetsTemplates/list.widget.template.js
+++ b/src/widgetsTemplates/list.widget.template.js
@@ -88,6 +88,7 @@ class myWidget extends baseWidget(EventEmitter) {
       mouse: true,
       data: null,
       tags: true,
+      vi: true,
       interactive: true,
       border: 'line',
       hover: {

Simple enough, right? :-)

Go ahead and test that locally, and then feel free to raise a new pull request detailing the change and I'll happily merge it and release a new dockly version.

[RilDev]

Thank you @lirantal! I'll be experimenting with it and prepare a nice pull request as soon as possible!

[RilDev]

Alright, so I was able to test the vi: true key. It works well and doesn't deactivate the arrow keys, which is very convenient. However, it doesn't work (yet) in the (m)enu. So I'll be looking into it further!

[github-actions[bot]]

:tada: This issue has been resolved in version 3.23.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: