Replace VSCodeDropdown and VSCodeOption

Author: tuan-nguen

extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx

@@ -1,6 +1,9 @@
 import type { ChangeEvent, SetStateAction } from "react";
 import { useCallback } from "react";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import {
+  VscodeOption,
+  VscodeSingleSelect,
+} from "@vscode-elements/react-elements";
 
 import type { CodeFlow } from "../../../variant-analysis/shared/analysis-result";
 
@@ -35,12 +38,12 @@ export const CodeFlowsDropdown = ({
     .toString();
 
   return (
-    <VSCodeDropdown value={value} onChange={handleChange}>
+    <VscodeSingleSelect value={value} onChange={handleChange}>
       {codeFlows.map((codeFlow, index) => (
-        <VSCodeOption key={index} value={index.toString()}>
+        <VscodeOption key={index} value={index.toString()}>
           {getCodeFlowName(codeFlow)}
-        </VSCodeOption>
+        </VscodeOption>
       ))}
-    </VSCodeDropdown>
+    </VscodeSingleSelect>
   );
 };

extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx

@@ -1,10 +1,13 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import {
+  VscodeOption,
+  VscodeSingleSelect,
+} from "@vscode-elements/react-elements";
 import { SortKey } from "../../model-editor/shared/model-alerts-filter-sort";
 import { Codicon } from "../common";
 
-const Dropdown = styled(VSCodeDropdown)`
+const Dropdown = styled(VscodeSingleSelect)`
   width: 100%;
 `;
 
@@ -28,10 +31,10 @@ export const ModelAlertsSort = ({ value, onChange, className }: Props) => {
   return (
     <Dropdown value={value} onInput={handleInput} className={className}>
       <Codicon name="sort-precedence" label="Sort..." slot="indicator" />
-      <VSCodeOption value={SortKey.Alphabetically}>Alphabetically</VSCodeOption>
-      <VSCodeOption value={SortKey.NumberOfResults}>
+      <VscodeOption value={SortKey.Alphabetically}>Alphabetically</VscodeOption>
+      <VscodeOption value={SortKey.NumberOfResults}>
         Number of results
-      </VSCodeOption>
+      </VscodeOption>
     </Dropdown>
   );
 };

extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx

@@ -1,10 +1,13 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import {
+  VscodeOption,
+  VscodeSingleSelect,
+} from "@vscode-elements/react-elements";
 import { Codicon } from "../common";
 import { FilterKey } from "../../variant-analysis/shared/variant-analysis-filter-sort";
 
-const Dropdown = styled(VSCodeDropdown)`
+const Dropdown = styled(VscodeSingleSelect)`
   width: 100%;
 `;
 
@@ -28,8 +31,8 @@ export const RepositoriesFilter = ({ value, onChange, className }: Props) => {
   return (
     <Dropdown value={value} onInput={handleInput} className={className}>
       <Codicon name="list-filter" label="Filter..." slot="indicator" />
-      <VSCodeOption value={FilterKey.All}>All</VSCodeOption>
-      <VSCodeOption value={FilterKey.WithResults}>With results</VSCodeOption>
+      <VscodeOption value={FilterKey.All}>All</VscodeOption>
+      <VscodeOption value={FilterKey.WithResults}>With results</VscodeOption>
     </Dropdown>
   );
 };

extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx

@@ -1,10 +1,13 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import {
+  VscodeOption,
+  VscodeSingleSelect,
+} from "@vscode-elements/react-elements";
 import { Codicon } from "../common";
 import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
 
-const Dropdown = styled(VSCodeDropdown)`
+const Dropdown = styled(VscodeSingleSelect)`
   width: 100%;
 `;
 
@@ -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}>
         {ResultFormat.Alerts}
-      </VSCodeOption>
-      <VSCodeOption value={ResultFormat.RawResults}>
+      </VscodeOption>
+      <VscodeOption value={ResultFormat.RawResults}>
         {ResultFormat.RawResults}
-      </VSCodeOption>
+      </VscodeOption>
     </Dropdown>
   );
 };

extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx

@@ -1,10 +1,13 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
-import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import {
+  VscodeOption,
+  VscodeSingleSelect,
+} from "@vscode-elements/react-elements";
 import { SortKey } from "../../variant-analysis/shared/variant-analysis-filter-sort";
 import { Codicon } from "../common";
 
-const Dropdown = styled(VSCodeDropdown)`
+const Dropdown = styled(VscodeSingleSelect)`
   width: 100%;
 `;
 
@@ -28,11 +31,11 @@ export const RepositoriesSort = ({ value, onChange, className }: Props) => {
   return (
     <Dropdown value={value} onInput={handleInput} className={className}>
       <Codicon name="sort-precedence" label="Sort..." slot="indicator" />
-      <VSCodeOption value={SortKey.Alphabetically}>Alphabetically</VSCodeOption>
-      <VSCodeOption value={SortKey.NumberOfResults}>
+      <VscodeOption value={SortKey.Alphabetically}>Alphabetically</VscodeOption>
+      <VscodeOption value={SortKey.NumberOfResults}>
         Number of results
-      </VSCodeOption>
-      <VSCodeOption value={SortKey.Popularity}>Popularity</VSCodeOption>
+      </VscodeOption>
+      <VscodeOption value={SortKey.Popularity}>Popularity</VscodeOption>
     </Dropdown>
   );
 };