Remove the use of @vscode/webview-ui-toolkit
#3986
Conversation
…uan-nguen/replace-vscode-webview
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx
Fixed
Show fixed
Hide fixed
extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx
Fixed
Show fixed
Hide fixed
There was a problem hiding this comment.
Thanks for making these changes and making the new components where necessary. From a code perspective everything looks fine. I haven't had time to look at the tests yet.
For the visual changes, I've taken some before/after screenshots we can hopefully use for comparison. There are quite a few changes, and some are fine as I guess these new components just have a slightly different style, but some I think we might want to address to stick to the intended designs.
Variant analysis page
Before:
After:
Changes I can see are:
- Clickable text isn't blue anymore. Maybe this is an acceptable change but my inclination is we probably want to keep it blue.
- Icons in the dropdowns + search bar have gone. Is it possible to keep these?
- Padding for the "copy repository list" + "export results" buttons has changed a minuscule amount but it's still fine.
- Padding for the dropdowns + search bar has decreased quite a bit. It's still readable but maybe not as aesthetically pleasing as it was before.
- The ">" at the start of each results row has more padding. It's not bad but it's also not necessary so might be worth reclaiming that horizontal space if we can.
Model editor
Before:
After:
Changes I can see are:
- Clickable text isn't blue anymore. Same as the variant analysis page.
- Button size / padding has changed a tiny bit, but it's fine. Same as the variant analysis page.
- The horizontal divider is perhaps a bit chunky now.
- The numbers in the badges (e.g. just before the "view" button) aren't as centered as they used to be. The centering wasn't actually perfect before either, but I think it's become more off.
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export const Badge = (props: any) => ( |
There was a problem hiding this comment.
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |
| export const Badge = (props: any) => ( | |
| export const Badge = (props: React.ComponentProps<typeof VscodeBadge>) => ( |
This might work. It still just resolves to the any type but at least there's no linting error.
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export const ActionButton = (props: any) => ( |
There was a problem hiding this comment.
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |
| export const ActionButton = (props: any) => ( | |
| export const ActionButton = (props: React.ComponentProps<"button">) => ( |
Could use React.ComponentProps here too and this time is does resolve to the right type for me.
| @@ -32,12 +35,12 @@ export const RepositoriesResultFormat = ({ | |||
| return ( | |||
| <Dropdown value={value} onInput={handleInput} className={className}> | |||
| <Codicon name="table" label="Result format..." slot="indicator" /> | |||
| <VSCodeOption value={ResultFormat.Alerts}> | |||
| <VscodeOption value={ResultFormat.Alerts}> | |||
There was a problem hiding this comment.
Hmm, these dropdowns don't seem to be working quite right. This one and RepositoriesFilter and RepositoriesSort aren't having an effect when I use them, and they seem to get reset back after a while (maybe the next react render from an unrelated state update).
I've tried to get a video of it happening:
recording.mov
I have a fixed the icons and the padding for the search bar but the dropdown, which is based on One possible solution is to create our own |
This removes the use of
@vscode/webview-ui-toolkitand replaces it with@vscode-elements/react-elements. The PR could not broken down to smaller PRs because importing both libraries breaks the view tests. Both libraries register similarly named components (e.g.vscode-button) which have conflicting implementations and that causes an error when tests are run.I have created a new component
ActionButtonwhich aims to copy the styles that@vscode/webview-ui-toolkitforVSCodeButtonwhenappearance="icon". I did this because the new library renders the background even when it's an icon button.I have also added a new component
Badgewhich appliesvariant="counter"by default which applies a border-radius to the badge.I have also replaced
getBy*queries withfindBy*in view tests becausegetBy*doesn't seem to load elements with all their attributes; however,findBy*selects elements only when all the attributes have been loaded.