refactor(ui): extract MaxRequestsInput component

Chris Hasson · Chris Hasson · commit 0b0bccd61e76 · 2025-07-11T10:49:22.000-07:00
The `MaxRequestsInput` component was extracted from `AutoApproveMenu.tsx` into its own file (`MaxRequestsInput.tsx`) to improve reusability and maintainability. This component is now used in both `AutoApproveMenu.tsx` and `AutoApproveSettings.tsx` to manage the auto-approve API request limit.

Previously this option was only available in the Chat Approval popup menu
diff --git a/.changeset/tangy-pugs-yawn.md b/.changeset/tangy-pugs-yawn.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": minor
+---
+
+Add 'max requests' section to the Auto-Approve Settings page
diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx
@@ -1,11 +1,12 @@
 import { useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
-import { VSCodeCheckbox, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
+import { MaxRequestsInput } from "../settings/MaxRequestsInput"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties
@@ -209,42 +210,13 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 
 					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
 
-					{/* Auto-approve API request count limit input row inspired by Cline */}
-					<div
-						style={{
-							display: "flex",
-							alignItems: "center",
-							gap: "8px",
-							marginTop: "10px",
-							marginBottom: "8px",
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						<span style={{ flexShrink: 1, minWidth: 0 }}>
-							<Trans i18nKey="settings:autoApprove.apiRequestLimit.title" />:
-						</span>
-						<VSCodeTextField
-							placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
-							value={(allowedMaxRequests ?? Infinity) === Infinity ? "" : allowedMaxRequests?.toString()}
-							onInput={(e) => {
-								const input = e.target as HTMLInputElement
-								// Remove any non-numeric characters
-								input.value = input.value.replace(/[^0-9]/g, "")
-								const value = parseInt(input.value)
-								const parsedValue = !isNaN(value) && value > 0 ? value : undefined
-								setAllowedMaxRequests(parsedValue)
-								vscode.postMessage({ type: "allowedMaxRequests", value: parsedValue })
-							}}
-							style={{ flex: 1 }}
-						/>
-					</div>
-					<div
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							fontSize: "12px",
-							marginBottom: "10px",
-						}}>
-						<Trans i18nKey="settings:autoApprove.apiRequestLimit.description" />
-					</div>
+					{/* kilocode_change start */}
+					<MaxRequestsInput
+						allowedMaxRequests={allowedMaxRequests ?? undefined}
+						onValueChange={(value) => setAllowedMaxRequests(value)}
+						variant="menu"
+					/>
+					{/* kilocode_change end */}
 				</div>
 			)}
 		</div>
diff --git a/webview-ui/src/components/settings/AutoApproveSettings.tsx b/webview-ui/src/components/settings/AutoApproveSettings.tsx
@@ -10,6 +10,7 @@ import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
 import { AutoApproveToggle } from "./AutoApproveToggle"
+import { MaxRequestsInput } from "./MaxRequestsInput" // kilocode_change
 
 type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	alwaysAllowReadOnly?: boolean
@@ -28,6 +29,7 @@ type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	alwaysAllowFollowupQuestions?: boolean
 	followupAutoApproveTimeoutMs?: number
 	allowedCommands?: string[]
+	allowedMaxRequests?: number | undefined // kilocode_change
 	showAutoApproveMenu?: boolean // kilocode_change
 	setCachedStateField: SetCachedStateField<
 		| "alwaysAllowReadOnly"
@@ -46,6 +48,7 @@ type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 		| "alwaysAllowFollowupQuestions"
 		| "followupAutoApproveTimeoutMs"
 		| "allowedCommands"
+		| "allowedMaxRequests" // kilocode_change
 		| "showAutoApproveMenu" // kilocode_change
 	>
 }
@@ -67,6 +70,7 @@ export const AutoApproveSettings = ({
 	alwaysAllowFollowupQuestions,
 	followupAutoApproveTimeoutMs = 60000,
 	allowedCommands,
+	allowedMaxRequests, // kilocode_change
 	showAutoApproveMenu, // kilocode_change
 	setCachedStateField,
 	...props
@@ -123,6 +127,14 @@ export const AutoApproveSettings = ({
 					alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
 					onToggle={(key, value) => setCachedStateField(key, value)}
 				/>
+				{/* kilocode_change start */}
+				<MaxRequestsInput
+					allowedMaxRequests={allowedMaxRequests}
+					onValueChange={(value) => setCachedStateField("allowedMaxRequests", value)}
+					variant="settings"
+					testId="max-requests-input"
+				/>
+				{/* kilocode_change end */}
 
 				{/* ADDITIONAL SETTINGS */}
 
diff --git a/webview-ui/src/components/settings/MaxRequestsInput.tsx b/webview-ui/src/components/settings/MaxRequestsInput.tsx
@@ -0,0 +1,95 @@
+// kilocode_change - new file
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { Trans, useTranslation } from "react-i18next"
+import { vscode } from "@/utils/vscode"
+
+interface MaxRequestsInputProps {
+	allowedMaxRequests?: number | undefined
+	onValueChange: (value: number | undefined) => void
+	variant?: "menu" | "settings"
+	className?: string
+	style?: React.CSSProperties
+	testId?: string
+}
+
+export function MaxRequestsInput({
+	allowedMaxRequests,
+	onValueChange,
+	variant = "settings",
+	className,
+	style,
+	testId,
+}: MaxRequestsInputProps) {
+	const { t } = useTranslation()
+
+	const handleInput = (e: any) => {
+		const input = e.target as HTMLInputElement
+		input.value = input.value.replace(/[^0-9]/g, "")
+		const value = parseInt(input.value)
+		const parsedValue = !isNaN(value) && value > 0 ? value : undefined
+		onValueChange(parsedValue)
+		vscode.postMessage({ type: "allowedMaxRequests", value: parsedValue })
+	}
+
+	const inputValue = (allowedMaxRequests ?? Infinity) === Infinity ? "" : allowedMaxRequests?.toString()
+
+	if (variant === "menu") {
+		return (
+			<>
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						marginTop: "10px",
+						marginBottom: "8px",
+						color: "var(--vscode-descriptionForeground)",
+						...style,
+					}}
+					className={className}>
+					<span style={{ flexShrink: 1, minWidth: 0 }}>
+						<Trans i18nKey="settings:autoApprove.apiRequestLimit.title" />:
+					</span>
+					<VSCodeTextField
+						placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
+						value={inputValue}
+						onInput={handleInput}
+						style={{ flex: 1 }}
+						data-testid={testId}
+					/>
+				</div>
+				<div
+					style={{
+						color: "var(--vscode-descriptionForeground)",
+						fontSize: "12px",
+						marginBottom: "10px",
+					}}>
+					<Trans i18nKey="settings:autoApprove.apiRequestLimit.description" />
+				</div>
+			</>
+		)
+	}
+
+	return (
+		<div
+			className={`flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background ${className || ""}`}
+			style={style}>
+			<div className="flex items-center gap-4 font-bold">
+				<span className="codicon codicon-pulse" />
+				<div>{t("settings:autoApprove.apiRequestLimit.title")}</div>
+			</div>
+			<div className="flex items-center gap-2">
+				<VSCodeTextField
+					placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
+					value={inputValue}
+					onInput={handleInput}
+					style={{ flex: 1, maxWidth: "200px" }}
+					data-testid={testId || "max-requests-input"}
+				/>
+			</div>
+			<div className="text-vscode-descriptionForeground text-sm">
+				{t("settings:autoApprove.apiRequestLimit.description")}
+			</div>
+		</div>
+	)
+}
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
@@ -700,6 +700,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 							alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
 							followupAutoApproveTimeoutMs={followupAutoApproveTimeoutMs}
 							allowedCommands={allowedCommands}
+							allowedMaxRequests={allowedMaxRequests ?? undefined}
 							setCachedStateField={setCachedStateField}
 						/>
 					)}
diff --git a/webview-ui/src/components/settings/__tests__/MaxRequestsInput.spec.tsx b/webview-ui/src/components/settings/__tests__/MaxRequestsInput.spec.tsx
@@ -0,0 +1,83 @@
+// kilocode_change - new file
+import { render, screen, fireEvent } from "@testing-library/react"
+import { vi } from "vitest"
+import { MaxRequestsInput } from "../MaxRequestsInput"
+
+vi.mock("@/utils/vscode", () => ({
+	vscode: { postMessage: vi.fn() },
+}))
+
+const translations: Record<string, string> = {
+	"settings:autoApprove.apiRequestLimit.title": "Max API Requests",
+	"settings:autoApprove.apiRequestLimit.unlimited": "Unlimited",
+	"settings:autoApprove.apiRequestLimit.description": "Limit the number of API requests",
+}
+vi.mock("react-i18next", () => ({
+	useTranslation: () => ({
+		t: (key: string) => translations[key] || key,
+	}),
+	Trans: ({ i18nKey }: { i18nKey: string; children?: React.ReactNode }) => (
+		<span>{translations[i18nKey] || i18nKey}</span>
+	),
+}))
+
+describe("MaxRequestsInput", () => {
+	const mockOnValueChange = vi.fn()
+
+	it("renders with settings variant by default", () => {
+		render(<MaxRequestsInput allowedMaxRequests={10} onValueChange={mockOnValueChange} />)
+
+		expect(screen.getByText("Max API Requests")).toBeInTheDocument()
+		expect(screen.getByText("Limit the number of API requests")).toBeInTheDocument()
+		expect(screen.getByDisplayValue("10")).toBeInTheDocument()
+	})
+
+	it("renders with menu variant styling", () => {
+		render(<MaxRequestsInput allowedMaxRequests={5} onValueChange={mockOnValueChange} variant="menu" />)
+
+		expect(screen.getByText("Max API Requests")).toBeInTheDocument()
+		expect(screen.getByText("Limit the number of API requests")).toBeInTheDocument()
+		expect(screen.getByDisplayValue("5")).toBeInTheDocument()
+	})
+
+	it("shows empty input when allowedMaxRequests is undefined", () => {
+		render(<MaxRequestsInput allowedMaxRequests={undefined} onValueChange={mockOnValueChange} />)
+
+		const input = screen.getByPlaceholderText("Unlimited")
+		expect(input).toHaveValue("")
+	})
+
+	it("shows empty input when allowedMaxRequests is Infinity", () => {
+		render(<MaxRequestsInput allowedMaxRequests={Infinity} onValueChange={mockOnValueChange} />)
+
+		const input = screen.getByPlaceholderText("Unlimited")
+		expect(input).toHaveValue("")
+	})
+
+	it("filters non-numeric input and calls onValueChange", () => {
+		render(<MaxRequestsInput allowedMaxRequests={undefined} onValueChange={mockOnValueChange} />)
+
+		const input = screen.getByPlaceholderText("Unlimited")
+		fireEvent.input(input, { target: { value: "abc123def" } })
+
+		expect(mockOnValueChange).toHaveBeenCalledWith(123)
+	})
+
+	it("calls onValueChange with undefined for invalid input", () => {
+		render(<MaxRequestsInput allowedMaxRequests={undefined} onValueChange={mockOnValueChange} />)
+
+		const input = screen.getByPlaceholderText("Unlimited")
+		fireEvent.input(input, { target: { value: "abc" } })
+
+		expect(mockOnValueChange).toHaveBeenCalledWith(undefined)
+	})
+
+	it("calls onValueChange with undefined for zero input", () => {
+		render(<MaxRequestsInput allowedMaxRequests={undefined} onValueChange={mockOnValueChange} />)
+
+		const input = screen.getByPlaceholderText("Unlimited")
+		fireEvent.input(input, { target: { value: "0" } })
+
+		expect(mockOnValueChange).toHaveBeenCalledWith(undefined)
+	})
+})

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"kilo-code": minor
 +---
++
 +Add 'max requests' section to the Auto-Approve Settings page