Merge pull request #853 from RooVetGit/add_profile_modal

Better UX for adding new API config profiles

Author: mrubens

.changeset/dirty-coins-exist.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Improve the user experience for adding a new configuration profile

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

@@ -3,6 +3,7 @@ import { memo, useEffect, useRef, useState } from "react"
 import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
 import { Dropdown } from "vscrui"
 import type { DropdownOption } from "vscrui"
+import { Dialog, DialogContent } from "../ui/dialog"
 
 interface ApiConfigManagerProps {
 	currentApiConfigName?: string
@@ -21,55 +22,113 @@ const ApiConfigManager = ({
 	onRenameConfig,
 	onUpsertConfig,
 }: ApiConfigManagerProps) => {
-	const [editState, setEditState] = useState<"new" | "rename" | null>(null)
+	const [isRenaming, setIsRenaming] = useState(false)
+	const [isCreating, setIsCreating] = useState(false)
 	const [inputValue, setInputValue] = useState("")
-	const inputRef = useRef<HTMLInputElement>()
+	const [newProfileName, setNewProfileName] = useState("")
+	const [error, setError] = useState<string | null>(null)
+	const inputRef = useRef<any>(null)
+	const newProfileInputRef = useRef<any>(null)
 
-	// Focus input when entering edit mode
+	const validateName = (name: string, isNewProfile: boolean): string | null => {
+		const trimmed = name.trim()
+		if (!trimmed) return "Name cannot be empty"
+
+		const nameExists = listApiConfigMeta?.some((config) => config.name.toLowerCase() === trimmed.toLowerCase())
+
+		// For new profiles, any existing name is invalid
+		if (isNewProfile && nameExists) {
+			return "A profile with this name already exists"
+		}
+
+		// For rename, only block if trying to rename to a different existing profile
+		if (!isNewProfile && nameExists && trimmed.toLowerCase() !== currentApiConfigName?.toLowerCase()) {
+			return "A profile with this name already exists"
+		}
+
+		return null
+	}
+
+	const resetCreateState = () => {
+		setIsCreating(false)
+		setNewProfileName("")
+		setError(null)
+	}
+
+	const resetRenameState = () => {
+		setIsRenaming(false)
+		setInputValue("")
+		setError(null)
+	}
+
+	// Focus input when entering rename mode
 	useEffect(() => {
-		if (editState) {
-			setTimeout(() => inputRef.current?.focus(), 0)
+		if (isRenaming) {
+			const timeoutId = setTimeout(() => inputRef.current?.focus(), 0)
+			return () => clearTimeout(timeoutId)
 		}
-	}, [editState])
+	}, [isRenaming])
 
-	// Reset edit state when current profile changes
+	// Focus input when opening new dialog
 	useEffect(() => {
-		setEditState(null)
-		setInputValue("")
+		if (isCreating) {
+			const timeoutId = setTimeout(() => newProfileInputRef.current?.focus(), 0)
+			return () => clearTimeout(timeoutId)
+		}
+	}, [isCreating])
+
+	// Reset state when current profile changes
+	useEffect(() => {
+		resetCreateState()
+		resetRenameState()
 	}, [currentApiConfigName])
 
 	const handleAdd = () => {
-		const newConfigName = currentApiConfigName + " (copy)"
-		onUpsertConfig(newConfigName)
+		resetCreateState()
+		setIsCreating(true)
 	}
 
 	const handleStartRename = () => {
-		setEditState("rename")
+		setIsRenaming(true)
 		setInputValue(currentApiConfigName || "")
+		setError(null)
 	}
 
 	const handleCancel = () => {
-		setEditState(null)
-		setInputValue("")
+		resetRenameState()
 	}
 
 	const handleSave = () => {
 		const trimmedValue = inputValue.trim()
-		if (!trimmedValue) return
+		const error = validateName(trimmedValue, false)
 
-		if (editState === "new") {
-			onUpsertConfig(trimmedValue)
-		} else if (editState === "rename" && currentApiConfigName) {
+		if (error) {
+			setError(error)
+			return
+		}
+
+		if (isRenaming && currentApiConfigName) {
 			if (currentApiConfigName === trimmedValue) {
-				setEditState(null)
-				setInputValue("")
+				resetRenameState()
 				return
 			}
 			onRenameConfig(currentApiConfigName, trimmedValue)
 		}
 
-		setEditState(null)
-		setInputValue("")
+		resetRenameState()
+	}
+
+	const handleNewProfileSave = () => {
+		const trimmedValue = newProfileName.trim()
+		const error = validateName(trimmedValue, true)
+
+		if (error) {
+			setError(error)
+			return
+		}
+
+		onUpsertConfig(trimmedValue)
+		resetCreateState()
 	}
 
 	const handleDelete = () => {
@@ -93,49 +152,63 @@ const ApiConfigManager = ({
 					<span style={{ fontWeight: "500" }}>Configuration Profile</span>
 				</label>
 
-				{editState ? (
-					<div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
-						<VSCodeTextField
-							ref={inputRef as any}
-							value={inputValue}
-							onInput={(e: any) => setInputValue(e.target.value)}
-							placeholder={editState === "new" ? "Enter profile name" : "Enter new name"}
-							style={{ flexGrow: 1 }}
-							onKeyDown={(e: any) => {
-								if (e.key === "Enter" && inputValue.trim()) {
-									handleSave()
-								} else if (e.key === "Escape") {
-									handleCancel()
-								}
-							}}
-						/>
-						<VSCodeButton
-							appearance="icon"
-							disabled={!inputValue.trim()}
-							onClick={handleSave}
-							title="Save"
-							style={{
-								padding: 0,
-								margin: 0,
-								height: "28px",
-								width: "28px",
-								minWidth: "28px",
-							}}>
-							<span className="codicon codicon-check" />
-						</VSCodeButton>
-						<VSCodeButton
-							appearance="icon"
-							onClick={handleCancel}
-							title="Cancel"
-							style={{
-								padding: 0,
-								margin: 0,
-								height: "28px",
-								width: "28px",
-								minWidth: "28px",
-							}}>
-							<span className="codicon codicon-close" />
-						</VSCodeButton>
+				{isRenaming ? (
+					<div
+						data-testid="rename-form"
+						style={{ display: "flex", gap: "4px", alignItems: "center", flexDirection: "column" }}>
+						<div style={{ display: "flex", gap: "4px", alignItems: "center", width: "100%" }}>
+							<VSCodeTextField
+								ref={inputRef}
+								value={inputValue}
+								onInput={(e: unknown) => {
+									const target = e as { target: { value: string } }
+									setInputValue(target.target.value)
+									setError(null)
+								}}
+								placeholder="Enter new name"
+								style={{ flexGrow: 1 }}
+								onKeyDown={(e: unknown) => {
+									const event = e as { key: string }
+									if (event.key === "Enter" && inputValue.trim()) {
+										handleSave()
+									} else if (event.key === "Escape") {
+										handleCancel()
+									}
+								}}
+							/>
+							<VSCodeButton
+								appearance="icon"
+								disabled={!inputValue.trim()}
+								onClick={handleSave}
+								title="Save"
+								style={{
+									padding: 0,
+									margin: 0,
+									height: "28px",
+									width: "28px",
+									minWidth: "28px",
+								}}>
+								<span className="codicon codicon-check" />
+							</VSCodeButton>
+							<VSCodeButton
+								appearance="icon"
+								onClick={handleCancel}
+								title="Cancel"
+								style={{
+									padding: 0,
+									margin: 0,
+									height: "28px",
+									width: "28px",
+									minWidth: "28px",
+								}}>
+								<span className="codicon codicon-close" />
+							</VSCodeButton>
+						</div>
+						{error && (
+							<p className="text-red-500 text-sm mt-2" data-testid="error-message">
+								{error}
+							</p>
+						)}
 					</div>
 				) : (
 					<>
@@ -211,6 +284,63 @@ const ApiConfigManager = ({
 						</p>
 					</>
 				)}
+
+				<Dialog
+					open={isCreating}
+					onOpenChange={(open: boolean) => {
+						if (open) {
+							setIsCreating(true)
+							setNewProfileName("")
+							setError(null)
+						} else {
+							resetCreateState()
+						}
+					}}
+					aria-labelledby="new-profile-title">
+					<DialogContent className="p-4 max-w-sm">
+						<h2 id="new-profile-title" className="text-lg font-semibold mb-4">
+							New Configuration Profile
+						</h2>
+						<button className="absolute right-4 top-4" aria-label="Close dialog" onClick={resetCreateState}>
+							<span className="codicon codicon-close" />
+						</button>
+						<VSCodeTextField
+							ref={newProfileInputRef}
+							value={newProfileName}
+							onInput={(e: unknown) => {
+								const target = e as { target: { value: string } }
+								setNewProfileName(target.target.value)
+								setError(null)
+							}}
+							placeholder="Enter profile name"
+							style={{ width: "100%" }}
+							onKeyDown={(e: unknown) => {
+								const event = e as { key: string }
+								if (event.key === "Enter" && newProfileName.trim()) {
+									handleNewProfileSave()
+								} else if (event.key === "Escape") {
+									resetCreateState()
+								}
+							}}
+						/>
+						{error && (
+							<p className="text-red-500 text-sm mt-2" data-testid="error-message">
+								{error}
+							</p>
+						)}
+						<div className="flex justify-end gap-2 mt-4">
+							<VSCodeButton appearance="secondary" onClick={resetCreateState}>
+								Cancel
+							</VSCodeButton>
+							<VSCodeButton
+								appearance="primary"
+								disabled={!newProfileName.trim()}
+								onClick={handleNewProfileSave}>
+								Create Profile
+							</VSCodeButton>
+						</div>
+					</DialogContent>
+				</Dialog>
 			</div>
 		</div>
 	)