From db0339b228ce0b5b60ad66dcd27befb4d9ae3d95 Mon Sep 17 00:00:00 2001
From: Prathmesh Vhatkar <psv2522@gmail.com>
Date: Tue, 28 Jan 2025 20:15:52 +0530
Subject: [PATCH 1/2] fix: Use Dropdown instead of select in settings for more
 ui consistency

---
 .../components/settings/ApiConfigManager.tsx  | 32 +++++++----------
 .../src/components/settings/SettingsView.tsx  | 34 +++++++++----------
 2 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx
index 0a60f60..907043f 100644
--- a/webview-ui/src/components/settings/ApiConfigManager.tsx
+++ b/webview-ui/src/components/settings/ApiConfigManager.tsx
@@ -1,6 +1,8 @@
 import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { memo, useEffect, useRef, useState } from "react"
 import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
+import { Dropdown } from "vscrui"
+import type { DropdownOption } from "vscrui"
 
 interface ApiConfigManagerProps {
 	currentApiConfigName?: string
@@ -133,28 +135,20 @@ const ApiConfigManager = ({
 				) : (
 					<>
 						<div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
-							<select
+							<Dropdown
 								id="config-profile"
 								value={currentApiConfigName}
-								onChange={(e) => onSelectConfig(e.target.value)}
+								onChange={(value: unknown) => {
+									onSelectConfig((value as DropdownOption).value)
+								}}
 								style={{
-									flexGrow: 1,
-									padding: "4px 8px",
-									paddingRight: "24px",
-									backgroundColor: "var(--vscode-dropdown-background)",
-									color: "var(--vscode-dropdown-foreground)",
-									border: "1px solid var(--vscode-dropdown-border)",
-									borderRadius: "2px",
-									height: "28px",
-									cursor: "pointer",
-									outline: "none",
-								}}>
-								{listApiConfigMeta?.map((config) => (
-									<option key={config.name} value={config.name}>
-										{config.name}
-									</option>
-								))}
-							</select>
+									minWidth: 130,
+								}}
+								options={listApiConfigMeta.map((config) => ({
+									value: config.name,
+									label: config.name,
+								}))}
+							/>
 							<VSCodeButton
 								appearance="icon"
 								onClick={handleAdd}
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 12b97f7..d7c0c03 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -5,6 +5,8 @@ import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
 import ApiConfigManager from "./ApiConfigManager"
+import { Dropdown } from "vscrui"
+import type { DropdownOption } from "vscrui"
 
 type SettingsViewProps = {
 	onDone: () => void
@@ -444,23 +446,21 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Browser Settings</h3>
 					<div style={{ marginBottom: 15 }}>
 						<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport size</label>
-						<select
-							value={browserViewportSize}
-							onChange={(e) => setBrowserViewportSize(e.target.value)}
-							style={{
-								width: "100%",
-								padding: "4px 8px",
-								backgroundColor: "var(--vscode-input-background)",
-								color: "var(--vscode-input-foreground)",
-								border: "1px solid var(--vscode-input-border)",
-								borderRadius: "2px",
-								height: "28px",
-							}}>
-							<option value="1280x800">Large Desktop (1280x800)</option>
-							<option value="900x600">Small Desktop (900x600)</option>
-							<option value="768x1024">Tablet (768x1024)</option>
-							<option value="360x640">Mobile (360x640)</option>
-						</select>
+						<div className="dropdown-container">
+							<Dropdown
+								value={browserViewportSize}
+								onChange={(value: unknown) => {
+									setBrowserViewportSize((value as DropdownOption).value)
+								}}
+								style={{ width: "100%" }}
+								options={[
+									{ value: "1280x800", label: "Large Desktop (1280x800)" },
+									{ value: "900x600", label: "Small Desktop (900x600)" },
+									{ value: "768x1024", label: "Tablet (768x1024)" },
+									{ value: "360x640", label: "Mobile (360x640)" },
+								]}
+							/>
+						</div>
 						<p
 							style={{
 								fontSize: "12px",

From 7e38e50d79f6f34ca3c5308659b3412bb0aade12 Mon Sep 17 00:00:00 2001
From: Prathmesh Vhatkar <psv2522@gmail.com>
Date: Wed, 29 Jan 2025 09:14:16 +0530
Subject: [PATCH 2/2] fix: Mock dropdown in tests correctly

---
 .../src/components/settings/ApiConfigManager.tsx   |  1 +
 .../settings/__tests__/ApiConfigManager.test.tsx   | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx
index 907043f..8bbd588 100644
--- a/webview-ui/src/components/settings/ApiConfigManager.tsx
+++ b/webview-ui/src/components/settings/ApiConfigManager.tsx
@@ -144,6 +144,7 @@ const ApiConfigManager = ({
 								style={{
 									minWidth: 130,
 								}}
+								role="combobox"
 								options={listApiConfigMeta.map((config) => ({
 									value: config.name,
 									label: config.name,
diff --git a/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx b/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx
index 784d443..ec076dd 100644
--- a/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx
+++ b/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx
@@ -19,6 +19,20 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
 	),
 }))
 
+jest.mock("vscrui", () => ({
+	Dropdown: ({ id, value, onChange, options, role }: any) => (
+		<div data-testid={`mock-dropdown-${id}`}>
+			<select value={value} onChange={(e) => onChange({ value: e.target.value })} data-testid={id} role={role}>
+				{options.map((opt: any) => (
+					<option key={opt.value} value={opt.value}>
+						{opt.label}
+					</option>
+				))}
+			</select>
+		</div>
+	),
+}))
+
 describe("ApiConfigManager", () => {
 	const mockOnSelectConfig = jest.fn()
 	const mockOnDeleteConfig = jest.fn()