Add deep links to settings sections (#2355)

mrubens · web-flow · commit 393688c58411 · 2025-04-06T14:31:14.000-04:00
diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
@@ -46,22 +46,28 @@ const App = () => {
 	const settingsRef = useRef<SettingsViewRef>(null)
 
 	const switchTab = useCallback((newTab: Tab) => {
+		setCurrentSection(undefined)
+
 		if (settingsRef.current?.checkUnsaveChanges) {
 			settingsRef.current.checkUnsaveChanges(() => setTab(newTab))
 		} else {
 			setTab(newTab)
 		}
 	}, [])
 
+	const [currentSection, setCurrentSection] = useState<string | undefined>(undefined)
+
 	const onMessage = useCallback(
 		(e: MessageEvent) => {
 			const message: ExtensionMessage = e.data
 
 			if (message.type === "action" && message.action) {
 				const newTab = tabsByMessageAction[message.action]
+				const section = message.values?.section as string | undefined
 
 				if (newTab) {
 					switchTab(newTab)
+					setCurrentSection(section)
 				}
 			}
 
@@ -104,7 +110,9 @@ const App = () => {
 			{tab === "prompts" && <PromptsView onDone={() => switchTab("chat")} />}
 			{tab === "mcp" && <McpView onDone={() => switchTab("chat")} />}
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
-			{tab === "settings" && <SettingsView ref={settingsRef} onDone={() => setTab("chat")} />}
+			{tab === "settings" && (
+				<SettingsView ref={settingsRef} onDone={() => switchTab("chat")} targetSection={currentSection} />
+			)}
 			<ChatView
 				isHidden={tab !== "chat"}
 				showAnnouncement={showAnnouncement}
diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx
@@ -161,7 +161,11 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 	}, [alwaysApproveResubmit, setAlwaysApproveResubmit])
 
 	const handleOpenSettings = useCallback(() => {
-		window.postMessage({ type: "action", action: "settingsButtonClicked" })
+		window.postMessage({
+			type: "action",
+			action: "settingsButtonClicked",
+			values: { section: "autoApprove" },
+		})
 	}, [])
 
 	// Map action IDs to their specific handlers
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -1028,7 +1028,11 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								]}
 								onChange={(value) => {
 									if (value === "settingsButtonClicked") {
-										vscode.postMessage({ type: "loadApiConfiguration", text: value })
+										vscode.postMessage({
+											type: "loadApiConfiguration",
+											text: value,
+											values: { section: "providers" },
+										})
 									} else {
 										vscode.postMessage({ type: "loadApiConfigurationById", text: value })
 									}
diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
@@ -32,7 +32,7 @@ import { getAllModes } from "../../../../src/shared/modes"
 import TelemetryBanner from "../common/TelemetryBanner"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import removeMd from "remove-markdown"
-
+import { Trans } from "react-i18next"
 interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
@@ -1006,17 +1006,28 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			<div className="flex items-center p-3 my-3 bg-vscode-inputValidation-warningBackground border border-vscode-inputValidation-warningBorder rounded">
 				<span className="codicon codicon-loading codicon-modifier-spin mr-2" />
 				<span className="text-vscode-foreground">
-					Still initializing checkpoint... If this takes too long, you can{" "}
-					<VSCodeLink
-						href="#"
-						onClick={(e) => {
-							e.preventDefault()
-							window.postMessage({ type: "action", action: "settingsButtonClicked" }, "*")
+					<Trans
+						i18nKey="chat:checkpoint.initializingWarning"
+						components={{
+							settingsLink: (
+								<VSCodeLink
+									href="#"
+									onClick={(e) => {
+										e.preventDefault()
+										window.postMessage(
+											{
+												type: "action",
+												action: "settingsButtonClicked",
+												values: { section: "checkpoints" },
+											},
+											"*",
+										)
+									}}
+									className="inline px-0.5"
+								/>
+							),
 						}}
-						className="inline px-0.5">
-						disable checkpoints in settings
-					</VSCodeLink>{" "}
-					and restart your task.
+					/>
 				</span>
 			</div>
 		),
diff --git a/webview-ui/src/components/common/TelemetryBanner.tsx b/webview-ui/src/components/common/TelemetryBanner.tsx
@@ -40,7 +40,11 @@ const TelemetryBanner = () => {
 	}
 
 	const handleOpenSettings = () => {
-		window.postMessage({ type: "action", action: "settingsButtonClicked" })
+		window.postMessage({
+			type: "action",
+			action: "settingsButtonClicked",
+			values: { section: "advanced" }, // Link directly to advanced settings with telemetry controls
+		})
 	}
 
 	return (
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
@@ -78,9 +78,10 @@ type SectionName = (typeof sectionNames)[number]
 
 type SettingsViewProps = {
 	onDone: () => void
+	targetSection?: string
 }
 
-const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone }, ref) => {
+const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, targetSection }, ref) => {
 	const { t } = useAppTranslation()
 
 	const extensionState = useExtensionState()
@@ -316,6 +317,17 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 
 	const scrollToSection = (ref: React.RefObject<HTMLDivElement>) => ref.current?.scrollIntoView()
 
+	// Scroll to target section when specified
+	useEffect(() => {
+		if (targetSection) {
+			const sectionObj = sections.find((section) => section.id === targetSection)
+			if (sectionObj && sectionObj.ref.current) {
+				// Use setTimeout to ensure the scroll happens after render
+				setTimeout(() => scrollToSection(sectionObj.ref), 500)
+			}
+		}
+	}, [targetSection, sections])
+
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center gap-2">
diff --git a/webview-ui/src/i18n/locales/ca/chat.json b/webview-ui/src/i18n/locales/ca/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Punt de control inicial",
 		"regular": "Punt de control",
+		"initializingWarning": "Encara s'està inicialitzant el punt de control... Si això triga massa, pots desactivar els punts de control a la <settingsLink>configuració</settingsLink> i reiniciar la teva tasca.",
 		"menu": {
 			"viewDiff": "Veure diferències",
 			"restore": "Restaurar punt de control",
diff --git a/webview-ui/src/i18n/locales/de/chat.json b/webview-ui/src/i18n/locales/de/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Initialer Checkpoint",
 		"regular": "Checkpoint",
+		"initializingWarning": "Checkpoint wird noch initialisiert... Falls dies zu lange dauert, kannst du Checkpoints in den <settingsLink>Einstellungen</settingsLink> deaktivieren und deine Aufgabe neu starten.",
 		"menu": {
 			"viewDiff": "Unterschiede anzeigen",
 			"restore": "Checkpoint wiederherstellen",
diff --git a/webview-ui/src/i18n/locales/en/chat.json b/webview-ui/src/i18n/locales/en/chat.json
@@ -92,6 +92,7 @@
 	"checkpoint": {
 		"initial": "Initial Checkpoint",
 		"regular": "Checkpoint",
+		"initializingWarning": "Still initializing checkpoint... If this takes too long, you can disable checkpoints in <settingsLink>settings</settingsLink> and restart your task.",
 		"menu": {
 			"viewDiff": "View Diff",
 			"restore": "Restore Checkpoint",
diff --git a/webview-ui/src/i18n/locales/es/chat.json b/webview-ui/src/i18n/locales/es/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Punto de control inicial",
 		"regular": "Punto de control",
+		"initializingWarning": "Todavía inicializando el punto de control... Si esto tarda demasiado, puedes desactivar los puntos de control en la <settingsLink>configuración</settingsLink> y reiniciar tu tarea.",
 		"menu": {
 			"viewDiff": "Ver diferencias",
 			"restore": "Restaurar punto de control",
diff --git a/webview-ui/src/i18n/locales/fr/chat.json b/webview-ui/src/i18n/locales/fr/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Point de contrôle initial",
 		"regular": "Point de contrôle",
+		"initializingWarning": "Initialisation du point de contrôle en cours... Si cela prend trop de temps, tu peux désactiver les points de contrôle dans les <settingsLink>paramètres</settingsLink> et redémarrer ta tâche.",
 		"menu": {
 			"viewDiff": "Voir les différences",
 			"restore": "Restaurer le point de contrôle",
diff --git a/webview-ui/src/i18n/locales/hi/chat.json b/webview-ui/src/i18n/locales/hi/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "प्रारंभिक चेकपॉइंट",
 		"regular": "चेकपॉइंट",
+		"initializingWarning": "चेकपॉइंट अभी भी आरंभ हो रहा है... अगर यह बहुत समय ले रहा है, तो आप <settingsLink>सेटिंग्स</settingsLink> में चेकपॉइंट को अक्षम कर सकते हैं और अपने कार्य को पुनः आरंभ कर सकते हैं।",
 		"menu": {
 			"viewDiff": "अंतर देखें",
 			"restore": "चेकपॉइंट पुनर्स्थापित करें",
diff --git a/webview-ui/src/i18n/locales/it/chat.json b/webview-ui/src/i18n/locales/it/chat.json
@@ -97,6 +97,7 @@
 	"checkpoint": {
 		"initial": "Checkpoint iniziale",
 		"regular": "Checkpoint",
+		"initializingWarning": "Inizializzazione del checkpoint in corso... Se questa operazione richiede troppo tempo, puoi disattivare i checkpoint nelle <settingsLink>impostazioni</settingsLink> e riavviare l'attività.",
 		"menu": {
 			"viewDiff": "Visualizza differenze",
 			"restore": "Ripristina checkpoint",
diff --git a/webview-ui/src/i18n/locales/ja/chat.json b/webview-ui/src/i18n/locales/ja/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "初期チェックポイント",
 		"regular": "チェックポイント",
+		"initializingWarning": "チェックポイントの初期化中... 時間がかかりすぎる場合は、<settingsLink>設定</settingsLink>でチェックポイントを無効にしてタスクを再開できます。",
 		"menu": {
 			"viewDiff": "差分を表示",
 			"restore": "チェックポイントを復元",
diff --git a/webview-ui/src/i18n/locales/ko/chat.json b/webview-ui/src/i18n/locales/ko/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "초기 체크포인트",
 		"regular": "체크포인트",
+		"initializingWarning": "체크포인트 초기화 중... 시간이 너무 오래 걸리면 <settingsLink>설정</settingsLink>에서 체크포인트를 비활성화하고 작업을 다시 시작할 수 있습니다.",
 		"menu": {
 			"viewDiff": "차이점 보기",
 			"restore": "체크포인트 복원",
diff --git a/webview-ui/src/i18n/locales/pl/chat.json b/webview-ui/src/i18n/locales/pl/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Początkowy punkt kontrolny",
 		"regular": "Punkt kontrolny",
+		"initializingWarning": "Trwa inicjalizacja punktu kontrolnego... Jeśli to trwa zbyt długo, możesz wyłączyć punkty kontrolne w <settingsLink>ustawieniach</settingsLink> i uruchomić zadanie ponownie.",
 		"menu": {
 			"viewDiff": "Zobacz różnice",
 			"restore": "Przywróć punkt kontrolny",
diff --git a/webview-ui/src/i18n/locales/pt-BR/chat.json b/webview-ui/src/i18n/locales/pt-BR/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Ponto de verificação inicial",
 		"regular": "Ponto de verificação",
+		"initializingWarning": "Ainda inicializando ponto de verificação... Se isso demorar muito, você pode desativar os pontos de verificação nas <settingsLink>configurações</settingsLink> e reiniciar sua tarefa.",
 		"menu": {
 			"viewDiff": "Ver diferenças",
 			"restore": "Restaurar ponto de verificação",
diff --git a/webview-ui/src/i18n/locales/tr/chat.json b/webview-ui/src/i18n/locales/tr/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "İlk Kontrol Noktası",
 		"regular": "Kontrol Noktası",
+		"initializingWarning": "Kontrol noktası hala başlatılıyor... Bu çok uzun sürerse, <settingsLink>ayarlar</settingsLink> bölümünden kontrol noktalarını devre dışı bırakabilir ve görevinizi yeniden başlatabilirsiniz.",
 		"menu": {
 			"viewDiff": "Farkları Görüntüle",
 			"restore": "Kontrol Noktasını Geri Yükle",
diff --git a/webview-ui/src/i18n/locales/vi/chat.json b/webview-ui/src/i18n/locales/vi/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "Điểm kiểm tra ban đầu",
 		"regular": "Điểm kiểm tra",
+		"initializingWarning": "Đang khởi tạo điểm kiểm tra... Nếu quá trình này mất quá nhiều thời gian, bạn có thể vô hiệu hóa điểm kiểm tra trong <settingsLink>cài đặt</settingsLink> và khởi động lại tác vụ của bạn.",
 		"menu": {
 			"viewDiff": "Xem khác biệt",
 			"restore": "Khôi phục điểm kiểm tra",
diff --git a/webview-ui/src/i18n/locales/zh-CN/chat.json b/webview-ui/src/i18n/locales/zh-CN/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "初始检查点",
 		"regular": "检查点",
+		"initializingWarning": "正在初始化检查点...如果耗时过长，你可以在<settingsLink>设置</settingsLink>中禁用检查点并重新启动任务。",
 		"menu": {
 			"viewDiff": "查看差异",
 			"restore": "恢复检查点",
diff --git a/webview-ui/src/i18n/locales/zh-TW/chat.json b/webview-ui/src/i18n/locales/zh-TW/chat.json
@@ -94,6 +94,7 @@
 	"checkpoint": {
 		"initial": "初始檢查點",
 		"regular": "檢查點",
+		"initializingWarning": "正在初始化檢查點...如果耗時過長，你可以在<settingsLink>設定</settingsLink>中停用檢查點並重新啟動任務。",
 		"menu": {
 			"viewDiff": "檢視差異",
 			"restore": "還原檢查點",

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,11 @@ const TelemetryBanner = () => {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`const handleOpenSettings = () => {`
`43`		`- window.postMessage({ type: "action", action: "settingsButtonClicked" })`
	`43`	`+ window.postMessage({`
	`44`	`+ type: "action",`
	`45`	`+ action: "settingsButtonClicked",`
	`46`	`+ values: { section: "advanced" }, // Link directly to advanced settings with telemetry controls`
	`47`	`+ })`
`44`	`48`	`}`
`45`	`49`
`46`	`50`	`return (`