Swap to vscode toolkit for Draft

[OliverMKing]

Description

Swaps the UI to use VS-code toolkit UI to look more integrated and be more accessible.

Features:

• UI following official vs-code guidelines
• Theming integration
• Error message if field isn't filled out (new feature)
• Bugfix for form submission (new feature)
• Hides fields that aren't needed (new feature)
• Hides "console output" until it actually shows something (bug fix)

Old UI

New UI

Hides fields that don't do anything for docker option.

Shows missing fields

Theming support

Type of change

Please delete options that are not relevant.

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested manually with all scenarios

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

[Tatsinnit]

💡 Please note build is failing because @vscode/webview-ui-toolkit probably has deep dependency on @microsoft/fast-react-wrapper@0.1.48 which intern needs react package hence error: react@>=16.9.0, required by @microsoft/fast-react-wrapper@0.1.48

https://www.npmjs.com/package/react/v/16.9.0

Only interesting thing is that npm install should have done that, so not sure what happened, might be good to verify that it is something missed dependency within the parent package.

webpack 5.73.0 compiled successfully in 19174 ms
Error: Command failed: npm list --production --parseable --depth=99999 --loglevel=error
npm ERR! peer dep missing: react@>=16.9.0, required by @microsoft/fast-react-wrapper@0.1.48

Error: Process completed with exit code 1.

[karenychen]

@OliverMKing Great job on the UI work! I was wondering if we plan to include the UI changes for the other draft commands in this PR?

[OliverMKing]

@OliverMKing Great job on the UI work! I was wondering if we plan to include the UI changes for the other draft commands in this PR?

Probably not on this PR but I think we should wait until they are done until we create a new release.

[OliverMKing]

💡 Please note build is failing because @vscode/webview-ui-toolkit probably has deep dependency on @microsoft/fast-react-wrapper@0.1.48 which intern needs react package hence error: react@>=16.9.0, required by @microsoft/fast-react-wrapper@0.1.48

https://www.npmjs.com/package/react/v/16.9.0

Only interesting thing is that npm install should have done that, so not sure what happened, might be good to verify that it is something missed dependency within the parent package.

webpack 5.73.0 compiled successfully in 19174 ms
Error: Command failed: npm list --production --parseable --depth=99999 --loglevel=error
npm ERR! peer dep missing: react@>=16.9.0, required by @microsoft/fast-react-wrapper@0.1.48

Error: Process completed with exit code 1.

https://github.com/microsoft/vscode-webview-ui-toolkit/issues/386 Interesting related issue

[karenychen]

Tested the UI to be working correctly on my machine ✅ For the deployment only option, the UI prompts the user to specify the language field but i believe that is only needed for dockerfile creation. Since we are hiding unnecessary fields could we also hide the language selector when it is deployment only?

[OliverMKing]

Tested the UI to be working correctly on my machine ✅ For the deployment only option, the UI prompts the user to specify the language field but i believe that is only needed for dockerfile creation. Since we are hiding unnecessary fields could we also hide the language selector when it is deployment only?

Updated with that 😄.

[OliverMKing]

This PR will break the CSS of the other scenarios right now.

The goal should be full parity with whatever UX option we choose so if we decide to stick with an upgraded webview scenario like this we will migrate them all to this which fixes that issue. Going to hold off on merging for now until we make a decision around the UX approach we want to go with.

[OliverMKing]

There is parity missing with this, need windows vs Mac test as well, thanks.

@Tatsinnit did you find something different between mac and windows? There shouldn't be any differences. Not sure what this comment means.

[Tatsinnit]

There is parity missing with this, need windows vs Mac test as well, thanks.

@Tatsinnit did you find something different between mac and windows? There shouldn't be any differences. Not sure what this comment means.

Cool, so I think internally we discussed @OliverMKing, also @sabbour did mentioned windows UI broken and here is from my windows machine. Hope this helps. Thanks.

[OliverMKing]

Going to close this for now. Seems like we are going in a different direction.