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

extensions/ql-vscode/package.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/src/stories/Overview.mdx

@@ -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/common/Alert.stories.tsx

@@ -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/model-editor/LibraryRow.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/MethodRow.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/results/AlertTable.stories.tsx

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

extensions/ql-vscode/src/stories/vscode-theme-dark.css

@@ -18,6 +18,7 @@
   --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
   --vscode-icon-foreground: #c5c5c5;
   --vscode-focusBorder: #007fd4;
+  --vscode-contrastActiveBorder: #f38518;
   --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
   --vscode-textLink-foreground: #3794ff;
   --vscode-textLink-activeForeground: #3794ff;

extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css

@@ -19,6 +19,7 @@
   --vscode-descriptionForeground: #8b949e;
   --vscode-icon-foreground: #8b949e;
   --vscode-focusBorder: #1f6feb;
+  --vscode-contrastActiveBorder: #f38518;
   --vscode-textSeparator-foreground: #21262d;
   --vscode-textLink-foreground: #58a6ff;
   --vscode-textLink-activeForeground: #58a6ff;

extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css

@@ -19,6 +19,7 @@
   --vscode-descriptionForeground: #57606a;
   --vscode-icon-foreground: #57606a;
   --vscode-focusBorder: #0969da;
+  --vscode-contrastActiveBorder: #f38518;
   --vscode-textSeparator-foreground: #d8dee4;
   --vscode-textLink-foreground: #0969da;
   --vscode-textLink-activeForeground: #0969da;

extensions/ql-vscode/src/stories/vscode-theme-light.css

@@ -18,6 +18,7 @@
   --vscode-descriptionForeground: #717171;
   --vscode-icon-foreground: #424242;
   --vscode-focusBorder: #0090f1;
+  --vscode-contrastActiveBorder: #0f4a85;
   --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
   --vscode-textLink-foreground: #006ab1;
   --vscode-textLink-activeForeground: #006ab1;