Skip to content

Commit 39a0752

Browse files
mrubensmrubens
committed
Clean up the auto-approve UI
1 parent 836371c commit 39a0752

File tree

7 files changed

+93
-102
lines changed

7 files changed

+93
-102
lines changed

‎webview-ui/src/components/chat/AutoApproveMenu.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { vscode } from "@src/utils/vscode"
66
import { useExtensionState } from "@src/context/ExtensionStateContext"
77
import { useAppTranslation } from "@src/i18n/TranslationContext"
88
import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
9-
import { MaxLimitInputs } from "../settings/MaxLimitInputs"
109
import { StandardTooltip } from "@src/components/ui"
1110
import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
1211
import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
@@ -22,8 +21,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
2221
autoApprovalEnabled,
2322
setAutoApprovalEnabled,
2423
alwaysApproveResubmit,
25-
allowedMaxRequests,
26-
allowedMaxCost,
2724
setAlwaysAllowReadOnly,
2825
setAlwaysAllowWrite,
2926
setAlwaysAllowExecute,
@@ -34,8 +31,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
3431
setAlwaysApproveResubmit,
3532
setAlwaysAllowFollowupQuestions,
3633
setAlwaysAllowUpdateTodoList,
37-
setAllowedMaxRequests,
38-
setAllowedMaxCost,
3934
} = useExtensionState()
4035

4136
const { t } = useAppTranslation()
@@ -245,13 +240,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
245240
</div>
246241

247242
<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
248-
249-
<MaxLimitInputs
250-
allowedMaxRequests={allowedMaxRequests ?? undefined}
251-
allowedMaxCost={allowedMaxCost ?? undefined}
252-
onMaxRequestsChange={(value) => setAllowedMaxRequests(value)}
253-
onMaxCostChange={(value) => setAllowedMaxCost(value)}
254-
/>
255243
</div>
256244
)}
257245
</div>

‎webview-ui/src/components/settings/AutoApproveSettings.tsx‎

Lines changed: 57 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HTMLAttributes, useState } from "react"
2-
import { X } from "lucide-react"
2+
import { X, CheckCheck } from "lucide-react"
33

44
import { useAppTranslation } from "@/i18n/TranslationContext"
55
import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
@@ -114,57 +114,68 @@ export const AutoApproveSettings = ({
114114

115115
return (
116116
<div {...props}>
117-
<SectionHeader description={t("settings:autoApprove.description")}>
117+
<SectionHeader>
118118
<div className="flex items-center gap-2">
119-
{!hasEnabledOptions ? (
120-
<StandardTooltip content={t("settings:autoApprove.selectOptionsFirst")}>
121-
<VSCodeCheckbox
122-
checked={effectiveAutoApprovalEnabled}
123-
disabled={!hasEnabledOptions}
124-
aria-label={t("settings:autoApprove.disabledAriaLabel")}
125-
onChange={() => {
126-
// Do nothing when no options are enabled
127-
return
128-
}}
129-
/>
130-
</StandardTooltip>
131-
) : (
132-
<VSCodeCheckbox
133-
checked={effectiveAutoApprovalEnabled}
134-
disabled={!hasEnabledOptions}
135-
aria-label={t("settings:autoApprove.toggleAriaLabel")}
136-
onChange={() => {
137-
const newValue = !(autoApprovalEnabled ?? false)
138-
setAutoApprovalEnabled(newValue)
139-
vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
140-
}}
141-
/>
142-
)}
143-
<span className="codicon codicon-check w-4" />
119+
<CheckCheck className="w-4 h-4" />
144120
<div>{t("settings:sections.autoApprove")}</div>
145121
</div>
146122
</SectionHeader>
147123

148124
<Section>
149-
<AutoApproveToggle
150-
alwaysAllowReadOnly={alwaysAllowReadOnly}
151-
alwaysAllowWrite={alwaysAllowWrite}
152-
alwaysAllowBrowser={alwaysAllowBrowser}
153-
alwaysApproveResubmit={alwaysApproveResubmit}
154-
alwaysAllowMcp={alwaysAllowMcp}
155-
alwaysAllowModeSwitch={alwaysAllowModeSwitch}
156-
alwaysAllowSubtasks={alwaysAllowSubtasks}
157-
alwaysAllowExecute={alwaysAllowExecute}
158-
alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
159-
alwaysAllowUpdateTodoList={alwaysAllowUpdateTodoList}
160-
onToggle={(key, value) => setCachedStateField(key, value)}
161-
/>
162-
<MaxLimitInputs
163-
allowedMaxRequests={allowedMaxRequests}
164-
allowedMaxCost={allowedMaxCost}
165-
onMaxRequestsChange={(value) => setCachedStateField("allowedMaxRequests", value)}
166-
onMaxCostChange={(value) => setCachedStateField("allowedMaxCost", value)}
167-
/>
125+
<div className="space-y-4">
126+
<div>
127+
{!hasEnabledOptions ? (
128+
<StandardTooltip content={t("settings:autoApprove.selectOptionsFirst")}>
129+
<VSCodeCheckbox
130+
checked={effectiveAutoApprovalEnabled}
131+
disabled={!hasEnabledOptions}
132+
aria-label={t("settings:autoApprove.disabledAriaLabel")}
133+
onChange={() => {
134+
// Do nothing when no options are enabled
135+
return
136+
}}>
137+
<span className="font-medium">Auto-Approve Enabled</span>
138+
</VSCodeCheckbox>
139+
</StandardTooltip>
140+
) : (
141+
<VSCodeCheckbox
142+
checked={effectiveAutoApprovalEnabled}
143+
disabled={!hasEnabledOptions}
144+
aria-label={t("settings:autoApprove.toggleAriaLabel")}
145+
onChange={() => {
146+
const newValue = !(autoApprovalEnabled ?? false)
147+
setAutoApprovalEnabled(newValue)
148+
vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
149+
}}>
150+
<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
151+
</VSCodeCheckbox>
152+
)}
153+
<div className="text-vscode-descriptionForeground text-sm mt-1">
154+
{t("settings:autoApprove.description")}
155+
</div>
156+
</div>
157+
158+
<AutoApproveToggle
159+
alwaysAllowReadOnly={alwaysAllowReadOnly}
160+
alwaysAllowWrite={alwaysAllowWrite}
161+
alwaysAllowBrowser={alwaysAllowBrowser}
162+
alwaysApproveResubmit={alwaysApproveResubmit}
163+
alwaysAllowMcp={alwaysAllowMcp}
164+
alwaysAllowModeSwitch={alwaysAllowModeSwitch}
165+
alwaysAllowSubtasks={alwaysAllowSubtasks}
166+
alwaysAllowExecute={alwaysAllowExecute}
167+
alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
168+
alwaysAllowUpdateTodoList={alwaysAllowUpdateTodoList}
169+
onToggle={(key, value) => setCachedStateField(key, value)}
170+
/>
171+
172+
<MaxLimitInputs
173+
allowedMaxRequests={allowedMaxRequests}
174+
allowedMaxCost={allowedMaxCost}
175+
onMaxRequestsChange={(value) => setCachedStateField("allowedMaxRequests", value)}
176+
onMaxCostChange={(value) => setCachedStateField("allowedMaxCost", value)}
177+
/>
178+
</div>
168179

169180
{/* ADDITIONAL SETTINGS */}
170181

‎webview-ui/src/components/settings/AutoApproveToggle.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,7 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
109109
const { t } = useAppTranslation()
110110

111111
return (
112-
<div
113-
className={cn(
114-
"flex flex-row flex-wrap justify-center gap-2 max-w-[600px] mx-auto my-2 ",
115-
"[@media(min-width:600px)]:gap-4",
116-
"[@media(min-width:800px)]:max-w-[900px]",
117-
"[@media(min-width:1200px)]:max-w-[1800px]",
118-
)}>
112+
<div className={cn("flex flex-row flex-wrap gap-2 py-2")}>
119113
{Object.values(autoApproveSettingsConfig).map(({ key, descriptionKey, labelKey, icon, testId }) => (
120114
<StandardTooltip key={key} content={t(descriptionKey || "")}>
121115
<Button
@@ -124,11 +118,12 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
124118
aria-label={t(labelKey)}
125119
aria-pressed={!!props[key]}
126120
data-testid={testId}
127-
className={cn(" aspect-square h-[80px]", !props[key] && "opacity-50")}>
128-
<span className={cn("flex flex-col items-center gap-1")}>
129-
<span className={`codicon codicon-${icon}`} />
130-
<span className="text-sm text-center">{t(labelKey)}</span>
131-
</span>
121+
className={cn(
122+
"h-7 px-2 rounded-md flex items-center gap-1.5 text-xs whitespace-nowrap",
123+
!props[key] && "opacity-50",
124+
)}>
125+
<span className={`codicon codicon-${icon} text-sm`} />
126+
<span>{t(labelKey)}</span>
132127
</Button>
133128
</StandardTooltip>
134129
))}

‎webview-ui/src/components/settings/MaxCostInput.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,20 @@ export function MaxCostInput({ allowedMaxCost, onValueChange }: MaxCostInputProp
2020
)
2121

2222
return (
23-
<div className="flex flex-col gap-3 pl-3 flex-auto">
24-
<div className="flex items-center gap-4 font-bold">
23+
<>
24+
<label className="flex items-center gap-2 text-sm font-medium whitespace-nowrap">
2525
<span className="codicon codicon-credit-card" />
26-
<div>{t("settings:autoApprove.apiCostLimit.title")}</div>
27-
</div>
28-
<div className="flex items-center">
29-
<FormattedTextField
30-
value={allowedMaxCost}
31-
onValueChange={handleValueChange}
32-
formatter={unlimitedDecimalFormatter}
33-
placeholder={t("settings:autoApprove.apiCostLimit.unlimited")}
34-
style={{ flex: 1, maxWidth: "200px" }}
35-
data-testid="max-cost-input"
36-
leftNodes={[<span key="dollar">$</span>]}
37-
/>
38-
</div>
39-
</div>
26+
{t("settings:autoApprove.apiCostLimit.title")}:
27+
</label>
28+
<FormattedTextField
29+
value={allowedMaxCost}
30+
onValueChange={handleValueChange}
31+
formatter={unlimitedDecimalFormatter}
32+
placeholder={t("settings:autoApprove.apiCostLimit.unlimited")}
33+
style={{ maxWidth: "200px" }}
34+
data-testid="max-cost-input"
35+
leftNodes={[<span key="dollar">$</span>]}
36+
/>
37+
</>
4038
)
4139
}

‎webview-ui/src/components/settings/MaxLimitInputs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const MaxLimitInputs: React.FC<MaxLimitInputsProps> = ({
2020

2121
return (
2222
<div className="space-y-2">
23-
<div className="flex justify-stretch">
23+
<div className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-2 items-center">
2424
<MaxRequestsInput allowedMaxRequests={allowedMaxRequests} onValueChange={onMaxRequestsChange} />
2525
<MaxCostInput allowedMaxCost={allowedMaxCost} onValueChange={onMaxCostChange} />
2626
</div>

‎webview-ui/src/components/settings/MaxRequestsInput.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,19 @@ export function MaxRequestsInput({ allowedMaxRequests, onValueChange }: MaxReque
2020
)
2121

2222
return (
23-
<div className="flex flex-col gap-3 pl-3 flex-auto">
24-
<div className="flex items-center gap-4 font-bold">
23+
<>
24+
<label className="flex items-center gap-2 text-sm font-medium whitespace-nowrap">
2525
<span className="codicon codicon-pulse" />
26-
<div>{t("settings:autoApprove.apiRequestLimit.title")}</div>
27-
</div>
28-
<div className="flex items-center gap-2">
29-
<FormattedTextField
30-
value={allowedMaxRequests}
31-
onValueChange={handleValueChange}
32-
formatter={unlimitedIntegerFormatter}
33-
placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
34-
style={{ flex: 1, maxWidth: "200px" }}
35-
data-testid="max-requests-input"
36-
/>
37-
</div>
38-
</div>
26+
{t("settings:autoApprove.apiRequestLimit.title")}:
27+
</label>
28+
<FormattedTextField
29+
value={allowedMaxRequests}
30+
onValueChange={handleValueChange}
31+
formatter={unlimitedIntegerFormatter}
32+
placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
33+
style={{ maxWidth: "200px" }}
34+
data-testid="max-requests-input"
35+
/>
36+
</>
3937
)
4038
}

‎webview-ui/src/i18n/locales/en/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
},
128128
"autoApprove": {
129129
"description": "Allow Roo to automatically perform operations without requiring approval. Enable these settings only if you fully trust the AI and understand the associated security risks.",
130+
"enabled": "Auto-Approve Enabled",
130131
"readOnly": {
131132
"label": "Read",
132133
"description": "When enabled, Roo will automatically view directory contents and read files without requiring you to click the Approve button.",

0 commit comments

Comments
 (0)