fix: prevent dirty state on initial mount in ImageGenerationSettings (#7495)

Author: daniel-lxs

webview-ui/src/components/settings/ImageGenerationSettings.tsx

@@ -36,14 +36,32 @@ export const ImageGenerationSettings = ({
 		imageGenerationSettings.selectedModel || IMAGE_GENERATION_MODELS[0].value,
 	)
 
-	// Update parent state when local state changes
+	// Update local state when apiConfiguration changes (e.g., when switching profiles)
 	useEffect(() => {
+		setOpenRouterApiKey(imageGenerationSettings.openRouterApiKey || "")
+		setSelectedModel(imageGenerationSettings.selectedModel || IMAGE_GENERATION_MODELS[0].value)
+	}, [imageGenerationSettings.openRouterApiKey, imageGenerationSettings.selectedModel])
+
+	// Helper function to update settings
+	const updateSettings = (newApiKey: string, newModel: string) => {
 		const newSettings = {
-			openRouterApiKey,
-			selectedModel,
+			openRouterApiKey: newApiKey,
+			selectedModel: newModel,
 		}
-		setApiConfigurationField("openRouterImageGenerationSettings", newSettings)
-	}, [openRouterApiKey, selectedModel, setApiConfigurationField])
+		setApiConfigurationField("openRouterImageGenerationSettings", newSettings, true)
+	}
+
+	// Handle API key changes
+	const handleApiKeyChange = (value: string) => {
+		setOpenRouterApiKey(value)
+		updateSettings(value, selectedModel)
+	}
+
+	// Handle model selection changes
+	const handleModelChange = (value: string) => {
+		setSelectedModel(value)
+		updateSettings(openRouterApiKey, value)
+	}
 
 	return (
 		<div className="space-y-4">
@@ -67,7 +85,7 @@ export const ImageGenerationSettings = ({
 						</label>
 						<VSCodeTextField
 							value={openRouterApiKey}
-							onInput={(e: any) => setOpenRouterApiKey(e.target.value)}
+							onInput={(e: any) => handleApiKeyChange(e.target.value)}
 							placeholder={t("settings:experimental.IMAGE_GENERATION.openRouterApiKeyPlaceholder")}
 							className="w-full"
 							type="password"
@@ -91,7 +109,7 @@ export const ImageGenerationSettings = ({
 						</label>
 						<VSCodeDropdown
 							value={selectedModel}
-							onChange={(e: any) => setSelectedModel(e.target.value)}
+							onChange={(e: any) => handleModelChange(e.target.value)}
 							className="w-full">
 							{IMAGE_GENERATION_MODELS.map((model) => (
 								<VSCodeOption key={model.value} value={model.value} className="py-2 px-3">

webview-ui/src/components/settings/__tests__/ImageGenerationSettings.spec.tsx

@@ -1,6 +1,7 @@
 import { render, fireEvent } from "@testing-library/react"
-
+import { vi } from "vitest"
 import { ImageGenerationSettings } from "../ImageGenerationSettings"
+import type { ProviderSettings } from "@roo-code/types"
 
 // Mock the translation context
 vi.mock("@/i18n/TranslationContext", () => ({
@@ -10,49 +11,45 @@ vi.mock("@/i18n/TranslationContext", () => ({
 }))
 
 describe("ImageGenerationSettings", () => {
-	const mockSetOpenRouterImageApiKey = vi.fn()
-	const mockSetImageGenerationSelectedModel = vi.fn()
+	const mockSetApiConfigurationField = vi.fn()
 	const mockOnChange = vi.fn()
 
 	const defaultProps = {
 		enabled: false,
 		onChange: mockOnChange,
-		openRouterImageApiKey: undefined,
-		openRouterImageGenerationSelectedModel: undefined,
-		setOpenRouterImageApiKey: mockSetOpenRouterImageApiKey,
-		setImageGenerationSelectedModel: mockSetImageGenerationSelectedModel,
+		apiConfiguration: {} as ProviderSettings,
+		setApiConfigurationField: mockSetApiConfigurationField,
 	}
 
 	beforeEach(() => {
 		vi.clearAllMocks()
 	})
 
 	describe("Initial Mount Behavior", () => {
-		it("should not call setter functions on initial mount with empty configuration", () => {
+		it("should not call setApiConfigurationField on initial mount with empty configuration", () => {
 			render(<ImageGenerationSettings {...defaultProps} />)
 
-			// Should NOT call setter functions on initial mount to prevent dirty state
-			expect(mockSetOpenRouterImageApiKey).not.toHaveBeenCalled()
-			expect(mockSetImageGenerationSelectedModel).not.toHaveBeenCalled()
+			// Should NOT call setApiConfigurationField on initial mount to prevent dirty state
+			expect(mockSetApiConfigurationField).not.toHaveBeenCalled()
 		})
 
-		it("should not call setter functions on initial mount with existing configuration", () => {
-			render(
-				<ImageGenerationSettings
-					{...defaultProps}
-					openRouterImageApiKey="existing-key"
-					openRouterImageGenerationSelectedModel="google/gemini-2.5-flash-image-preview:free"
-				/>,
-			)
+		it("should not call setApiConfigurationField on initial mount with existing configuration", () => {
+			const apiConfiguration = {
+				openRouterImageGenerationSettings: {
+					openRouterApiKey: "existing-key",
+					selectedModel: "google/gemini-2.5-flash-image-preview:free",
+				},
+			} as ProviderSettings
 
-			// Should NOT call setter functions on initial mount to prevent dirty state
-			expect(mockSetOpenRouterImageApiKey).not.toHaveBeenCalled()
-			expect(mockSetImageGenerationSelectedModel).not.toHaveBeenCalled()
+			render(<ImageGenerationSettings {...defaultProps} apiConfiguration={apiConfiguration} />)
+
+			// Should NOT call setApiConfigurationField on initial mount to prevent dirty state
+			expect(mockSetApiConfigurationField).not.toHaveBeenCalled()
 		})
 	})
 
 	describe("User Interaction Behavior", () => {
-		it("should call setimageGenerationSettings when user changes API key", async () => {
+		it("should call setApiConfigurationField when user changes API key", async () => {
 			const { getByPlaceholderText } = render(<ImageGenerationSettings {...defaultProps} enabled={true} />)
 
 			const apiKeyInput = getByPlaceholderText(
@@ -62,8 +59,15 @@ describe("ImageGenerationSettings", () => {
 			// Simulate user typing
 			fireEvent.input(apiKeyInput, { target: { value: "new-api-key" } })
 
-			// Should call setimageGenerationSettings
-			expect(defaultProps.setOpenRouterImageApiKey).toHaveBeenCalledWith("new-api-key")
+			// Should call setApiConfigurationField with isUserAction=true
+			expect(mockSetApiConfigurationField).toHaveBeenCalledWith(
+				"openRouterImageGenerationSettings",
+				{
+					openRouterApiKey: "new-api-key",
+					selectedModel: "google/gemini-2.5-flash-image-preview",
+				},
+				true, // This should be true for user actions
+			)
 		})
 
 		// Note: Testing VSCode dropdown components is complex due to their custom nature