Adding Module Creation

[miketalley]

Description

Allows a module to be created within the extension UI

Access Points

Right clicking in the file menu now has "Create new module" menu option

A folder/subfolder can also be right clicked to nest the module

Flow/Demo

https://www.loom.com/share/21432166d01043ac85ea07342260e0e6

Validation

• Adds .module to folder names that are provided without it.
• Checks if the module folder already exists when entering a folder name. If it exists, incrementally tries filenames in the format <folderName><incrementedNumber>.module.
  • For example if I try to create a folder Foo and there is already a Foo.module folder, the created folder name will be Foo1.module.

Notes

Utilizes the explorer.newFolder command (code ref link). The handler code can be found here.

/cc @anthmatic @TanyaScales @jsines

[bmatto]

During the flow - does the are the module question prompts one after another ... i.e. the user answers, hits enter, answers another, hits enter? I ask because I wonder if it would be better/possible to have all of those in a single form?

[miketalley]

During the flow - does the are the module question prompts one after another ... i.e. the user answers, hits enter, answers another, hits enter? I ask because I wonder if it would be better/possible to have all of those in a single form?

Yes, the questions are one after another. We could alternatively use a webview, but VSCode's UX Guidelines for Webviews suggests not using a webView for a wizard, that is why I opted for using a QuickPick experience.

[bmatto]

Interesting, I read through the various UX APIs that VSCode is exposing. My inclination is that the picker is tough because the user can't go back in the flow. A form with all the fields allows the user to jump around and see all their values before they submit. While I appreciate the "don't use webview for a wizard" ... I'm not sure this is a wizard though, more of a webform. It's not really a setting either.

[TanyaScales]

I have conflicting opinions about either direction -- I'm wondering if we can do something lower touch than this even and cut the form initially altogether to get an even more expedited module creation. In that we'd effectively cut the form and populate the module directory with a blank label and host_template_types. And once the create new module menu item is selected, we drop their cursor to name the directory (like native file creation) at that time.

The developer can do into the file structure at that time to adjust those values. We could even do a placeholder value for the label initially for all new modules, just to have something there.

This leaves a gap in parity from the CLI to the extension -- but I also think there is probably more to be done on this front thinking about the way we want users to give us information in the UI since this is only one of many creation commands that we are going to be working on. There are bound to be various lengths of questions/forms, different data types, etc. We should try to think about all those instances ahead of time to make sure we have all our use cases in sight before choosing a path here.

[anthmatic]

+1 for narrowing the scope here and skipping the wizard.

And once the create new module menu item is selected, we drop their cursor to name the directory (like native file creation) at that time.

this would be slick and native feeling if we could do it

We could even do a placeholder value for the label initially for all new modules, just to have something there.

We could probably leverage snippets for these. So each new file would get prepopulated with a snippet that has placeholders for all of the common stuff. Snippets have a bunch of autocomplete magic (types and enums and stuff). This extension does something similar: https://github.com/Gruntfuggly/auto-snippet

[jsines]

Not sure what's causing the folder to remain after the rename. Otherwise everything looks good!

Docs for FileWillCreateEvent say "To make modifications to the workspace before the files are created, call the waitUntil-function with a thenable that resolves to a workspace edit."

Could it be that the applyEdit in

vscode.workspace.applyEdit(edit).then(() => {
  copySampleModuleFilesToFolder(uniqueModulePath);
  resolve(edit);
});

is redundant and causing problems? It seems to work fine if the folder is named with .module so I'd guess the issue is somewhere within that try block

[miketalley]

Not sure what's causing the folder to remain after the rename. Otherwise everything looks good!

Docs for FileWillCreateEvent say "To make modifications to the workspace before the files are created, call the waitUntil-function with a thenable that resolves to a workspace edit."

Could it be that the applyEdit in

vscode.workspace.applyEdit(edit).then(() => {
  copySampleModuleFilesToFolder(uniqueModulePath);
  resolve(edit);
});

is redundant and causing problems? It seems to work fine if the folder is named with .module so I'm sure the issue is somewhere within that try block

If I disable the applyEdit call, the folder will simply get created, there is no rename done and the sample files do not get populated. I'm noticing that the applyEdit seems to return false, I'm looking into if this means that it failed somewhere. 👀

[anthmatic]

I'm seeing this failure

Error: Unable to move/copy '/Users/apizzurro/Projects/cms-theme-boilerplate/src/modules/ahhh' because target '/Users/apizzurro/Projects/cms-theme-boilerplate/src/modules/ahhh.module' already exists at destination.