Use the Webview UI Toolkit for Visual Studio Code for webview UI

[daviddossett]

Proposal

Hi all! 👋

As of today, some of the webview UI (some examples pictured below) in the Teams Toolkit extension appears to users as visually and functionally distant from the native VS Code UI itself.

Now that the Webview UI Toolkit for Visual Studio Code has been released, I think some of the webviews in the extension could benefit from swapping out their custom components for those provided by the toolkit. Specifically, buttons, links, and tags as a starting point. There may be other views I haven't come across yet.

You can view the components in a Storybook environment here.

References

While we don't currently provide the cards themselves in the Webview UI Toolkit, the tags and buttons could be replaced in this view:

Here, while it probably makes sense to adopt the new getting started API from VS Code itself, these views could also use buttons and links to at minimum solve the issues surrounding behavior, theming, and more in the near term:

cc @jaeyonglee8687 @hawkticehurst @misolori

[ghost]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[jaeyonglee8687]

Following on this topic, and ideally, we adapt the VSCode Getting started API to replace our own webview. Rather than changing it incrementally, it would make sense to change the quickstart to the given API at once when we update the content of it.

[jaeyonglee8687]

@1openwindow @HuihuiWu-Microsoft

[HuihuiWu-Microsoft]

@jaeyonglee8687 @1openwindow For the getting started page, let's adapt the VSCode Getting started API later. For the sample gallery page, I can replace the buttons and tags with Webview UI Toolkit first.

[HuihuiWu-Microsoft]

Currently VSC webview UI toolkit doesn't support React, there's already a pr raised https://github.com/microsoft/vscode-webview-ui-toolkit/pull/300. Will update once supported

[jaeyonglee8687]

@daviddossett @hawkticehurst @misolori please check Huihui's previous comment that the toolkit doesn't support React, and this is something critical blocking us to implement. Do you have any plan to support React in the toolkit?

[hawkticehurst]

@jaeyonglee8687 @HuihuiWu-Microsoft Yes, we are currently working on it right now!

We currently have an in-progress PR that will expose/publish a set of toolkit React components that can be easily imported and used in React-based webview extensions.

We are also working on a sample extension that will demonstrate the usage of these components and generally how to configure a React-based webview extension (although I expect this latter part will be less important to all of you).

In both, cases we're almost done with this work but are just waiting on an upstream issue to be resolved that is blocking us.

So with all that said, we hope to have this work finished and published by early January since the holidays are coming up and myself and others will be OOF for a few weeks.

[jaeyonglee8687]

Thank you for the clarification! We will follow up this topic and apply when applicable.

---

From: Hawk Ticehurst @.> Sent: Friday, December 10, 2021 3:47:44 AM To: OfficeDev/TeamsFx @.> Cc: Jaeyong Lee @.>; Mention @.> Subject: Re: [OfficeDev/TeamsFx] Use the Webview UI Toolkit for Visual Studio Code for webview UI (Issue #2661)

@jaeyonglee8687https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjaeyonglee8687&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760698982331%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=%2BHDVxCzWFum5kotiFz1o8n7fe8%2FzzQ81qymnZto4DVA%3D&reserved=0 @HuihuiWu-Microsofthttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FHuihuiWu-Microsoft&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760698982331%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=LP4aLJru528mFbJpu1cDHNqbDc6xzIorRxPL95eUk%2Bo%3D&reserved=0 Yes, we are currently working on it right now!

We currently have an in-progress PRhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fvscode-webview-ui-toolkit%2Fpull%2F300&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760698982331%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=BObzVJN87NiuRek%2BElmi08vstOWBS7yReOVW%2FO16uew%3D&reserved=0 that will expose/publish a set of toolkit React components that can be easily imported and used in React-based webview extensions.

We are also working on a sample extensionhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fvscode-webview-ui-toolkit-samples%2Fpull%2F41&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760698982331%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=hLqLWXM4PqYFFnJlg0CLN2pIFKqMX7P4Qesym2BeLuo%3D&reserved=0 that will demonstrate the usage of these components and generally how to configure a React-based webview extension (although I expect this latter part will be less important to all of you).

In both, cases we're almost done with this work but are just waiting on an upstream issuehttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Ffast%2Fissues%2F5387&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760698982331%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=z7fuJRXeiBJRGAfdRcCiNk3kKDXcgG79hTeSpru43i4%3D&reserved=0 to be resolved that is blocking us.

So with all that said, we hope to have this work finished and published by early January since the holidays are coming up and myself and others will be OOF for a few weeks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2FTeamsFx%2Fissues%2F2661%23issuecomment-990180586&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760699032326%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=FEgPSg9Z38acOLrf7uje%2F9sOBWkSxtY0gmyTWha1rEQ%3D&reserved=0, or unsubscribehttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAU4RJYKRI2UAKTCOQ44CQH3UQEBWBANCNFSM5GHY356Q&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760699032326%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=PNDdpuTdsPezhcLyplhKleMXOsTqUuIMaH4VLASFRiE%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760699032326%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=8PDeHSIom2NMy6erGHSBWWH3IR3KDil%2B1AF6PDytHYs%3D&reserved=0 or Androidhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7Cjaeyonglee%40microsoft.com%7C3a60a90b6f504f524ecb08d9bb4cc536%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637746760699032326%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=429qCYmOJWHvmax%2B90TwLOjhljvt1m9a79ioc7m7sFM%3D&reserved=0.

[HuihuiWu-Microsoft]

Hi @hawkticehurst, I see the blocking issue you mentioned has been closed. The PR which will support React framework is still in progress. From the comments in the PR, I guess you're working on the typescript issue. Is it possible to estimate how long it will takes before getting this ready? Since we're going to improve the experience of sample gallery, we'd like to include the webview UI toolkit in the work if the time is ok or maybe we can do the enhancement first and update later when React support is ready.

[hawkticehurst]

Hey @HuihuiWu-Microsoft, yes the blocking issue has been closed now, so we're good to go on that front! Also, with that work finished, support for React is technically complete now!

This PR simply represents an effort to make the process of using/importing React-based toolkit components easier for extension authors but does not represent a blocker on being able to use the toolkit in React itself.

This comment provides a summary of how you can use the toolkit in React if you really want to get started on the sample gallery experience (and then once the PR I mentioned above is finished it should be pretty simple to switch over). In fact, this comment is basically what the PR contains, so it's literally just a case of us doing the work of wrapping toolkit components instead of you doing the work––but again doesn't represent an actual issue with being able to use the toolkit in React.

Also, the typescript issue is the result of an issue that lives two repos upstream from the toolkit, so I don't have a lot of insights into how long it will take for that problem to be fixed.

However, this shouldn't actually be a problem for your extension because, as far as I can tell, it looks like you're using TypeScript v4.2.4 and the problem mentioned in the FAST issue only applies to repos using any TS version greater than v4.3.5. Also even if you're extension did move to a more recent version of TS there is a stop-gap solution for fixing the problem.

I hope that all makes sense and helps clear things up a bit. If you have any other questions I'd be more than happy to answer them!

[HuihuiWu-Microsoft]

Hi @hawkticehurst , thanks for your quick reply and that's much clear. So I'll need to wrap the used React component in our project using fast-react-wrapper and maybe update later once the wrapping is done in webview ui toolkit layer. I think that works for us. I'll have a try with the quick guide and let you know if any problems. Thanks!

[hawkticehurst]

Of course! Happy it was helpful.

Also, yes that is correct, you can manually wrap web components now and then update them later when we finish our PR.

Finally, sounds great, please do let us know if you run into any issues!

[HuihuiWu-Microsoft]

For our existing sample gallery design, I've adapted vscode Webview UI toolkit in this pr. In later sample gallery enhancement, I'll also leverage the toolkit for existing controls.

[daviddossett]

Great to hear @HuihuiWu-Microsoft! Do let us know if you have any feedback along the way 🙏

[hawkticehurst]

+1 to what @daviddossett said!

[hawkticehurst]

@HuihuiWu-Microsoft Hey! Just wanted to give a heads up that as of v0.9.0 we finally shipped the React components if you would like to use them.

You should be able to remove the file that wraps components (and uninstall the fast-react-wrapper package) and instead replace it with import statements along these lines and it should just work:

import { VSCodeButton, VSCodeDropdown } from '@vscode/webview-ui-toolkit/react';

Let me know if you have any questions!

[HuihuiWu-Microsoft]

Thanks @hawkticehurst! Good news to hear. I'll try latest version and cleanup the codes to import the React components directly. Will let you know if I meet any problem.

[hawkticehurst]

Sounds great!

[adashen]

close as solved