fix: handle undefined state for Gemini URL context and grounding checkboxes

- Changed checkbox checked prop from !!value to value === true
- This ensures undefined values are properly handled as unchecked
- Fixes Save button not activating on first toggle for new installs
- Applied fix to both Gemini and Vertex components
- Added tests for undefined state handling

Fixes #8245

Author: roomote

webview-ui/src/components/settings/providers/Gemini.tsx

@@ -79,7 +79,7 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, fromWelcome
 						<Checkbox
 							className="mt-6"
 							data-testid="checkbox-url-context"
-							checked={!!apiConfiguration.enableUrlContext}
+							checked={apiConfiguration.enableUrlContext === true}
 							onChange={(checked: boolean) => setApiConfigurationField("enableUrlContext", checked)}>
 							{t("settings:providers.geminiParameters.urlContext.title")}
 						</Checkbox>
@@ -89,7 +89,7 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, fromWelcome
 
 						<Checkbox
 							data-testid="checkbox-grounding-search"
-							checked={!!apiConfiguration.enableGrounding}
+							checked={apiConfiguration.enableGrounding === true}
 							onChange={(checked: boolean) => setApiConfigurationField("enableGrounding", checked)}>
 							{t("settings:providers.geminiParameters.groundingSearch.title")}
 						</Checkbox>

webview-ui/src/components/settings/providers/Vertex.tsx

@@ -98,7 +98,7 @@ export const Vertex = ({ apiConfiguration, setApiConfigurationField, fromWelcome
 				<div className="mt-6">
 					<Checkbox
 						data-testid="checkbox-url-context"
-						checked={!!apiConfiguration.enableUrlContext}
+						checked={apiConfiguration.enableUrlContext === true}
 						onChange={(checked: boolean) => setApiConfigurationField("enableUrlContext", checked)}>
 						{t("settings:providers.geminiParameters.urlContext.title")}
 					</Checkbox>
@@ -108,7 +108,7 @@ export const Vertex = ({ apiConfiguration, setApiConfigurationField, fromWelcome
 
 					<Checkbox
 						data-testid="checkbox-grounding-search"
-						checked={!!apiConfiguration.enableGrounding}
+						checked={apiConfiguration.enableGrounding === true}
 						onChange={(checked: boolean) => setApiConfigurationField("enableGrounding", checked)}>
 						{t("settings:providers.geminiParameters.groundingSearch.title")}
 					</Checkbox>

webview-ui/src/components/settings/providers/__tests__/Gemini.spec.tsx

@@ -56,6 +56,20 @@ describe("Gemini", () => {
 			expect(checkbox.checked).toBe(false)
 		})
 
+		it("should render URL context checkbox unchecked when enableUrlContext is undefined", () => {
+			const apiConfiguration: ProviderSettings = {
+				geminiApiKey: "",
+				// enableUrlContext is undefined
+			}
+			render(
+				<Gemini apiConfiguration={apiConfiguration} setApiConfigurationField={mockSetApiConfigurationField} />,
+			)
+
+			const urlContextCheckbox = screen.getByTestId("checkbox-url-context")
+			const checkbox = urlContextCheckbox.querySelector("input[type='checkbox']") as HTMLInputElement
+			expect(checkbox.checked).toBe(false)
+		})
+
 		it("should render URL context checkbox checked when enableUrlContext is true", () => {
 			const apiConfiguration = { ...defaultApiConfiguration, enableUrlContext: true }
 			render(
@@ -83,6 +97,24 @@ describe("Gemini", () => {
 
 			expect(mockSetApiConfigurationField).toHaveBeenCalledWith("enableUrlContext", true)
 		})
+
+		it("should call setApiConfigurationField when toggled from undefined state", async () => {
+			const user = userEvent.setup()
+			const apiConfiguration: ProviderSettings = {
+				geminiApiKey: "",
+				// enableUrlContext is undefined
+			}
+			render(
+				<Gemini apiConfiguration={apiConfiguration} setApiConfigurationField={mockSetApiConfigurationField} />,
+			)
+
+			const urlContextCheckbox = screen.getByTestId("checkbox-url-context")
+			const checkbox = urlContextCheckbox.querySelector("input[type='checkbox']") as HTMLInputElement
+
+			await user.click(checkbox)
+
+			expect(mockSetApiConfigurationField).toHaveBeenCalledWith("enableUrlContext", true)
+		})
 	})
 
 	describe("Grounding with Google Search Checkbox", () => {
@@ -99,6 +131,20 @@ describe("Gemini", () => {
 			expect(checkbox.checked).toBe(false)
 		})
 
+		it("should render grounding search checkbox unchecked when enableGrounding is undefined", () => {
+			const apiConfiguration: ProviderSettings = {
+				geminiApiKey: "",
+				// enableGrounding is undefined
+			}
+			render(
+				<Gemini apiConfiguration={apiConfiguration} setApiConfigurationField={mockSetApiConfigurationField} />,
+			)
+
+			const groundingCheckbox = screen.getByTestId("checkbox-grounding-search")
+			const checkbox = groundingCheckbox.querySelector("input[type='checkbox']") as HTMLInputElement
+			expect(checkbox.checked).toBe(false)
+		})
+
 		it("should render grounding search checkbox checked when enableGrounding is true", () => {
 			const apiConfiguration = { ...defaultApiConfiguration, enableGrounding: true }
 			render(
@@ -126,6 +172,24 @@ describe("Gemini", () => {
 
 			expect(mockSetApiConfigurationField).toHaveBeenCalledWith("enableGrounding", true)
 		})
+
+		it("should call setApiConfigurationField when toggled from undefined state", async () => {
+			const user = userEvent.setup()
+			const apiConfiguration: ProviderSettings = {
+				geminiApiKey: "",
+				// enableGrounding is undefined
+			}
+			render(
+				<Gemini apiConfiguration={apiConfiguration} setApiConfigurationField={mockSetApiConfigurationField} />,
+			)
+
+			const groundingCheckbox = screen.getByTestId("checkbox-grounding-search")
+			const checkbox = groundingCheckbox.querySelector("input[type='checkbox']") as HTMLInputElement
+
+			await user.click(checkbox)
+
+			expect(mockSetApiConfigurationField).toHaveBeenCalledWith("enableGrounding", true)
+		})
 	})
 
 	describe("fromWelcomeView prop", () => {