Discussing a UI solution for multiroot/monorepo workspaces

[EcksDy]

Following the discussion on the implementation of supporting multiroot workspaces, I have understood that the current UI solution (button + quick pick) will not suffice to handle multiroot/monorepo workspaces (referred to as m.workspaces from now on).

This realization led me to explore what other options VSCode provides for extensions. I have come up with a sidebar panel that displays a file tree-like structure, showing which presets are selected for which sub-roots.

📁 a-root/
└── ⚙️ **local.env**
📁 b-root/
├── ⚙️ local.env
└── ⚙️ **staging.env**
📁 c-root/
├── ⚙️ local.env
├── ⚙️ **staging.env**
└── ⚙️ prod.env

When the extension detects an m.workspace, clicking the button in the status bar or running the .ENV Switcher: Select preset command will open this sidebar panel.

• The preset names are irrelevant, this is only for demonstration purposes.
• The asterisked presets are the currently selected presets per project and will be distinctly highlighted.
• Clicking on another preset will switch the sub-root target file to that preset.
• A toggle button at the top, when enabled will try to switch to the selected preset in all sub-roots.

For example, if the toggle is enabled, and I click on any of the local.env entries, all sub-roots will try to switch to a preset named local.env. Will not change a sub-root target content if a preset with the same name wasn't found.

This issue doesn't deal with the implementation of m.workspaces, although it will be affected by and influence the chosen solution.

I'll leave this issue pinned to try and gather input, which is very welcome.

[natefabian18]

I do like this solution as it makes it much clearer as to the state of each project under the workspace. I honestly cant think of a better solution so it gets a +1 from me.

[EcksDy]

Impressions from trying the built in TreeView API(#45):

• Seems to be aimed primarily at file structures
• Support of different needs is limited
• Cannot toggle the top row icons - no workaround
• Cannot highlight tree items - can workaround with icons/text
• Icons are very limited
• package.json having to register:
  • views
  • menus
  • commands
  • references and relations between those are unclear
• Quick to set up and use

As much as I wanted to compromise I don't think this will provide the experience I'd like to have when using the extension.

I'll be trying a WebView next to see how that works. Luckily doing the UI should be the easy part.

[EcksDy]

Impressions from trying the webviews API(#46):

• Harder to set up
• Communication from webview to the extension is via event messaging
• Working with raw html/css/js for simplicity
• All UI requirements are feasible
• A lot nicer on the eyes
• Can use color variables that will align the view to user selected theme
• Needs more work to make it usable

For the lack of other contenders, we've got a winner!

[EcksDy]

Progress update

Done

• I'm happy with the setup, although I see lots of room for improvement
• All the basic functionality is done

TODO

• Implement multi switching
• Implement locking
• Implement preset preview (optional)
• Implement loader (optional)

Delibirations

• Decide if I want to keep multi switching logic in the webview or in the extension
  Leaning towards keeping it in the webview as it's seems like UI responsibility
• Feel like I should leave this on simmer and switch(pun intended) my focus onto the config parser and logic with all the prerequisites
• Some time in the far future replace the webview code with svelte for a nicer developer experience
• Locking a project is an idea for the multi switching logic, to prevent some projects from being multi switched by mistake. Should locking also prevent single preset switch? If I click on a non selected preset in a locked project, should that switch or should the lock prevent it?

How it looks with some dummy data and dummy events:

[natefabian18]

• 2 cents. Like the way it is looking to be.

Deliberations input

• Sounds like it would be simpler to keep the multi switching logic in the web view.
• +1 on focusing on a solid config
• +1 on svelte
• I would say locking a project is a hard. The extension will not switch that projects env no matter the condition. Just feels confusing otherwise. (Make it a config maybe??)

[EcksDy]

Released 0.5.3 pre-release version.
It's a preview of the UI and some m.workspace capabilities, it's not optimized and there are probably lots of edge cases. I expect the configuration of each workspace to be straight up broken, hence the pre-release.