Skip to content

Commit f792d19

Browse files
robertpiosikrobertpiosik
committed
Refactor the settings UI by moving the "Edit Format Instructions" configuration section from PresetsSection to GeneralSection
1 parent 0092eb6 commit f792d19

3 files changed

Lines changed: 79 additions & 79 deletions

File tree

‎packages/vscode/src/views/settings/frontend/Home/Home.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -275,17 +275,17 @@ export const Home: React.FC<Props> = (props) => {
275275
on_clear_checks_in_workspace_behavior_change={
276276
props.on_clear_checks_in_workspace_behavior_change
277277
}
278+
edit_format_instructions={props.edit_format_instructions}
279+
on_edit_format_instructions_change={
280+
props.on_edit_format_instructions_change
281+
}
278282
on_open_editor_settings={props.on_open_editor_settings}
279283
on_stuck_change={general_on_stuck_change}
280284
/>
281285
<PresetsSection
282286
ref={(el) => (section_refs.current['presets'] = el)}
283287
gemini_user_id={props.gemini_user_id}
284288
on_gemini_user_id_change={props.on_gemini_user_id_change}
285-
edit_format_instructions={props.edit_format_instructions}
286-
on_edit_format_instructions_change={
287-
props.on_edit_format_instructions_change
288-
}
289289
on_stuck_change={presets_on_stuck_change}
290290
/>
291291
<Section

‎packages/vscode/src/views/settings/frontend/Home/sections/GeneralSection.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Item } from '@ui/components/editor/settings/Item'
55
import { Group } from '@ui/components/editor/settings/Group/Group'
66
import { Section } from '@ui/components/editor/settings/Section'
77
import { TextButton } from '@ui/components/editor/settings/TextButton'
8+
import { Textarea } from '@ui/components/editor/common/Textarea'
9+
import { EditFormatInstructions } from '@/views/settings/types/messages'
810

911
type ClearChecksBehavior = 'ignore-open-editors' | 'uncheck-all'
1012

@@ -16,10 +18,14 @@ const CLEAR_CHECKS_OPTIONS: Dropdown.Option<ClearChecksBehavior>[] = [
1618
type Props = {
1719
context_size_warning_threshold: number
1820
clear_checks_in_workspace_behavior: ClearChecksBehavior
21+
edit_format_instructions: EditFormatInstructions
1922
on_context_size_warning_threshold_change: (threshold: number) => void
2023
on_clear_checks_in_workspace_behavior_change: (
2124
value: ClearChecksBehavior
2225
) => void
26+
on_edit_format_instructions_change: (
27+
instructions: EditFormatInstructions
28+
) => void
2329
on_open_editor_settings: () => void
2430
on_stuck_change: (is_stuck: boolean) => void
2531
}
@@ -28,13 +34,24 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
2834
(props, ref) => {
2935
const [context_size_warning_threshold, set_context_size_warning_threshold] =
3036
useState('')
37+
const [instructions, set_instructions] = useState<EditFormatInstructions>({
38+
whole: '',
39+
truncated: '',
40+
diff: ''
41+
})
3142

3243
useEffect(() => {
3344
set_context_size_warning_threshold(
3445
String(props.context_size_warning_threshold)
3546
)
3647
}, [props.context_size_warning_threshold])
3748

49+
useEffect(() => {
50+
if (props.edit_format_instructions) {
51+
set_instructions(props.edit_format_instructions)
52+
}
53+
}, [props.edit_format_instructions])
54+
3855
useEffect(() => {
3956
const handler = setTimeout(() => {
4057
const num_threshold = parseInt(context_size_warning_threshold, 10)
@@ -54,6 +71,23 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
5471
props.context_size_warning_threshold
5572
])
5673

74+
useEffect(() => {
75+
const handler = setTimeout(() => {
76+
if (
77+
props.edit_format_instructions &&
78+
JSON.stringify(instructions) !==
79+
JSON.stringify(props.edit_format_instructions)
80+
) {
81+
props.on_edit_format_instructions_change(instructions)
82+
}
83+
}, 500)
84+
return () => clearTimeout(handler)
85+
}, [
86+
instructions,
87+
props.on_edit_format_instructions_change,
88+
props.edit_format_instructions
89+
])
90+
5791
return (
5892
<Section
5993
ref={ref}
@@ -95,6 +129,47 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
95129
}
96130
/>
97131
</Group>
132+
<Group title="Edit Format Instructions">
133+
<Item
134+
title="Whole"
135+
description="Instructions for generating code in 'whole' edit format."
136+
slot_placement="below"
137+
slot={
138+
<Textarea
139+
value={instructions.whole}
140+
on_change={(value) =>
141+
set_instructions((prev) => ({ ...prev, whole: value }))
142+
}
143+
/>
144+
}
145+
/>
146+
<Item
147+
title="Truncated"
148+
description="Instructions for generating code in 'truncated' edit format."
149+
slot_placement="below"
150+
slot={
151+
<Textarea
152+
value={instructions.truncated}
153+
on_change={(value) =>
154+
set_instructions((prev) => ({ ...prev, truncated: value }))
155+
}
156+
/>
157+
}
158+
/>
159+
<Item
160+
title="Diff"
161+
description="Instructions for generating code in 'diff' edit format."
162+
slot_placement="below"
163+
slot={
164+
<Textarea
165+
value={instructions.diff}
166+
on_change={(value) =>
167+
set_instructions((prev) => ({ ...prev, diff: value }))
168+
}
169+
/>
170+
}
171+
/>
172+
</Group>
98173
</Section>
99174
)
100175
}

‎packages/vscode/src/views/settings/frontend/Home/sections/PresetsSection.tsx‎

Lines changed: 0 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,16 @@ import { Input } from '@ui/components/editor/common/Input'
33
import { Item } from '@ui/components/editor/settings/Item'
44
import { Section } from '@ui/components/editor/settings/Section'
55
import { Group } from '@ui/components/editor/settings/Group/Group'
6-
import { Textarea } from '@ui/components/editor/common/Textarea'
7-
import { EditFormatInstructions } from '@/views/settings/types/messages'
86

97
type Props = {
108
gemini_user_id: number | null
11-
edit_format_instructions: EditFormatInstructions
129
on_gemini_user_id_change: (id: number | null) => void
13-
on_edit_format_instructions_change: (
14-
instructions: EditFormatInstructions
15-
) => void
1610
on_stuck_change: (is_stuck: boolean) => void
1711
}
1812

1913
export const PresetsSection = forwardRef<HTMLDivElement, Props>(
2014
(props, ref) => {
2115
const [gemini_user_id_str, set_gemini_user_id_str] = useState('')
22-
const [instructions, set_instructions] = useState<EditFormatInstructions>({
23-
whole: '',
24-
truncated: '',
25-
diff: ''
26-
})
2716

2817
useEffect(() => {
2918
set_gemini_user_id_str(
@@ -33,12 +22,6 @@ export const PresetsSection = forwardRef<HTMLDivElement, Props>(
3322
)
3423
}, [props.gemini_user_id])
3524

36-
useEffect(() => {
37-
if (props.edit_format_instructions) {
38-
set_instructions(props.edit_format_instructions)
39-
}
40-
}, [props.edit_format_instructions])
41-
4225
useEffect(() => {
4326
const handler = setTimeout(() => {
4427
if (gemini_user_id_str == '') {
@@ -65,23 +48,6 @@ export const PresetsSection = forwardRef<HTMLDivElement, Props>(
6548
props.gemini_user_id
6649
])
6750

68-
useEffect(() => {
69-
const handler = setTimeout(() => {
70-
if (
71-
props.edit_format_instructions &&
72-
JSON.stringify(instructions) !==
73-
JSON.stringify(props.edit_format_instructions)
74-
) {
75-
props.on_edit_format_instructions_change(instructions)
76-
}
77-
}, 500)
78-
return () => clearTimeout(handler)
79-
}, [
80-
instructions,
81-
props.on_edit_format_instructions_change,
82-
props.edit_format_instructions
83-
])
84-
8551
return (
8652
<Section
8753
ref={ref}
@@ -103,47 +69,6 @@ export const PresetsSection = forwardRef<HTMLDivElement, Props>(
10369
}
10470
/>
10571
</Group>
106-
<Group title="Edit Format Instructions">
107-
<Item
108-
title="Whole"
109-
description="Instructions for generating code in 'whole' edit format."
110-
slot_placement="below"
111-
slot={
112-
<Textarea
113-
value={instructions.whole}
114-
on_change={(value) =>
115-
set_instructions((prev) => ({ ...prev, whole: value }))
116-
}
117-
/>
118-
}
119-
/>
120-
<Item
121-
title="Truncated"
122-
description="Instructions for generating code in 'truncated' edit format."
123-
slot_placement="below"
124-
slot={
125-
<Textarea
126-
value={instructions.truncated}
127-
on_change={(value) =>
128-
set_instructions((prev) => ({ ...prev, truncated: value }))
129-
}
130-
/>
131-
}
132-
/>
133-
<Item
134-
title="Diff"
135-
description="Instructions for generating code in 'diff' edit format."
136-
slot_placement="below"
137-
slot={
138-
<Textarea
139-
value={instructions.diff}
140-
on_change={(value) =>
141-
set_instructions((prev) => ({ ...prev, diff: value }))
142-
}
143-
/>
144-
}
145-
/>
146-
</Group>
14772
</Section>
14873
)
14974
}

0 commit comments

Comments
 (0)