Merge pull request #3986 from github/tuan-nguen/replace-vscode-webview

Remove the use of `@vscode/webview-ui-toolkit`

Author: tuan-nguen

extensions/ql-vscode/package-lock.json

@@ -1972,10 +1972,10 @@
     "@octokit/plugin-retry": "^7.2.0",
     "@octokit/plugin-throttling": "^9.6.0",
     "@octokit/rest": "^21.1.1",
+    "@vscode-elements/react-elements": "^0.9.0",
     "@vscode/codicons": "^0.0.36",
     "@vscode/debugadapter": "^1.59.0",
     "@vscode/debugprotocol": "^1.68.0",
-    "@vscode/webview-ui-toolkit": "^1.0.1",
     "ajv": "^8.11.0",
     "chokidar": "^3.6.0",
     "d3": "^7.9.0",

extensions/ql-vscode/package.json

@@ -1,7 +1,5 @@
 import { Canvas, Meta, Story } from '@storybook/blocks';
 
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
-
 import iframeImage from './images/update-css-variables-iframe.png';
 import stylesImage from './images/update-css-variables-styles.png';
 import bodyImage from './images/update-css-variables-body.png';

extensions/ql-vscode/src/stories/Overview.mdx

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from "@vscode-elements/react-elements";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { Alert } from "../../view/common";
@@ -84,8 +84,8 @@ ErrorWithButtons.args = {
     "Request to https://api.github.com/repos/octodemo/Hello-World/code-scanning/codeql/queries failed. Try running this query again.",
   actions: (
     <>
-      <VSCodeButton appearance="secondary">View actions logs</VSCodeButton>
-      <VSCodeButton>Retry</VSCodeButton>
+      <VscodeButton secondary>View actions logs</VscodeButton>
+      <VscodeButton>Retry</VscodeButton>
     </>
   ),
 };

extensions/ql-vscode/src/stories/common/Alert.stories.tsx

@@ -220,6 +220,7 @@ LibraryRow.args = {
     ],
   },
   modifiedSignatures: new Set(["org.sql2o.Sql2o#Sql2o(String)"]),
+  selectedSignatures: new Set(["org.sql2o.Sql2o#Sql2o(String)"]),
   viewState: createMockModelEditorViewState({
     showGenerateButton: true,
   }),

extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx

@@ -112,6 +112,7 @@ Source.args = {
   modeledMethods: [{ ...modeledMethod, type: "source" }],
   methodCanBeModeled: true,
   viewState,
+  onChange: () => {},
 };
 
 export const Sink = Template.bind({});
@@ -120,6 +121,7 @@ Sink.args = {
   modeledMethods: [{ ...modeledMethod, type: "sink" }],
   methodCanBeModeled: true,
   viewState,
+  onChange: () => {},
 };
 
 export const Summary = Template.bind({});
@@ -136,6 +138,7 @@ Neutral.args = {
   modeledMethods: [{ ...modeledMethod, type: "neutral" }],
   methodCanBeModeled: true,
   viewState,
+  onChange: () => {},
 };
 
 export const AlreadyModeled = Template.bind({});
@@ -155,6 +158,7 @@ MultipleModelings.args = {
   ],
   methodCanBeModeled: true,
   viewState,
+  onChange: () => {},
 };
 
 export const ValidationError = Template.bind({});
@@ -166,6 +170,7 @@ ValidationError.args = {
   ],
   methodCanBeModeled: true,
   viewState,
+  onChange: () => {},
 };
 
 export const MultipleValidationErrors = Template.bind({});
@@ -180,4 +185,5 @@ MultipleValidationErrors.args = {
   ],
   methodCanBeModeled: true,
   viewState,
+  onChange: () => {},
 };

extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx

@@ -431,4 +431,7 @@ WithCodeFlows.args = {
       showRawResults={() => action("show-raw-results")}
     />
   ),
+  userSettings: {
+    shouldShowProvenance: true,
+  },
 };

extensions/ql-vscode/src/stories/results/AlertTable.stories.tsx

@@ -0,0 +1 @@
+declare module "*.module.css";

extensions/ql-vscode/src/stories/types.d.ts

@@ -0,0 +1,56 @@
+/* Styles have been copied from https://vscode-elements.github.io/elements-lite/components/action-button/configurator/ */
+.actionButton {
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 5px;
+  color: var(--vscode-foreground);
+  display: inline-flex;
+  cursor: pointer;
+  padding: 0;
+  user-select: none;
+}
+
+.actionButton:disabled {
+  color: var(--vscode-disabledForeground);
+  cursor: default;
+  pointer-events: none;
+}
+
+.actionButton :global(.codicon),
+.actionButton svg {
+  color: var(--vscode-icon-foreground);
+  display: block;
+  padding: 2px;
+}
+
+.actionButton svg {
+  box-sizing: content-box;
+  height: 16px;
+  width: 16px;
+}
+
+.actionButton:disabled :global(.codicon),
+.actionButton:disabled svg {
+  color: var(--vscode-disabledForeground);
+}
+
+.actionButton:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+  outline: 1px dotted var(--vscode-contrastActiveBorder, transparent);
+  outline-offset: -1px;
+}
+
+.actionButton:active {
+  background-color: var(--vscode-toolbar-activeBackground);
+}
+
+.actionButton:focus {
+  outline: none;
+}
+
+.actionButton:focus-visible {
+  border-color: var(--vscode-focusBorder);
+}

extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css

@@ -0,0 +1,9 @@
+import styles from "./ActionButton.module.css";
+
+// This is needed because vscode-elements/elements does not implement
+// the same styles for icon buttons as vscode/webview-ui-toolkit
+export const ActionButton = (props: React.ComponentProps<"button">) => (
+  <button type="button" {...props} className={styles.actionButton}>
+    {props.children}
+  </button>
+);