Skip to content

Commit 0657074

Browse files
robertpiosikrobertpiosik
committed
Add close buttons to quick pick dialogs and new configuration buttons to settings sections
1 parent 67ffd16 commit 0657074

15 files changed

Lines changed: 265 additions & 40 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ Remove irrelevant files from the current context selection.
9090
Get accurate inline suggestions from state-of-the-art models.
9191

9292
**🛠️ Commit Messages** \
93-
Meaningful summaries of changes adhering to your style.
93+
Meaningful summaries of changes adhering to your preffered style.
9494

9595
## Enterprise security
9696

‎apps/editor/src/commands/add-file-to-context-command.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,23 @@ export const add_file_to_context_command = (
134134
label: f.label,
135135
full_path: f.full_path
136136
}))
137-
folder_quick_pick.buttons = [vscode.QuickInputButtons.Back]
137+
folder_quick_pick.buttons = [
138+
vscode.QuickInputButtons.Back,
139+
{
140+
iconPath: new vscode.ThemeIcon('close'),
141+
tooltip: 'Close'
142+
}
143+
]
138144

139145
let folder_accepted = false
146+
let should_close_fully = false
140147

141148
folder_quick_pick.onDidTriggerButton((button) => {
142149
if (button === vscode.QuickInputButtons.Back) {
143150
folder_quick_pick.hide()
151+
} else if (button.tooltip == 'Close') {
152+
should_close_fully = true
153+
folder_quick_pick.hide()
144154
}
145155
})
146156

@@ -176,6 +186,11 @@ export const add_file_to_context_command = (
176186
folder_quick_pick.dispose()
177187
is_showing_folder_quick_pick = false
178188

189+
if (should_close_fully) {
190+
quick_pick.dispose()
191+
return
192+
}
193+
179194
if (!folder_accepted) {
180195
if (file_items_cache.length > 0) {
181196
quick_pick.items = file_items_cache

‎apps/editor/src/commands/check-parent-folder-command.ts‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,39 @@ export const check_parent_folder_command = (
4343
return
4444
}
4545

46-
const selected = await vscode.window.showQuickPick(folders, {
47-
placeHolder: 'Select a parent folder to check',
48-
title: 'Parent Folders'
46+
const selected = await new Promise<
47+
{ label: string; full_path: string } | undefined
48+
>((resolve) => {
49+
const quick_pick = vscode.window.createQuickPick<{
50+
label: string
51+
full_path: string
52+
}>()
53+
quick_pick.items = folders
54+
quick_pick.placeholder = 'Select a parent folder to check'
55+
quick_pick.title = 'Parent Folders'
56+
quick_pick.buttons = [
57+
{
58+
iconPath: new vscode.ThemeIcon('close'),
59+
tooltip: 'Close'
60+
}
61+
]
62+
63+
quick_pick.onDidTriggerButton(() => {
64+
resolve(undefined)
65+
quick_pick.hide()
66+
})
67+
68+
quick_pick.onDidAccept(() => {
69+
resolve(quick_pick.selectedItems[0])
70+
quick_pick.hide()
71+
})
72+
73+
quick_pick.onDidHide(() => {
74+
resolve(undefined)
75+
quick_pick.dispose()
76+
})
77+
78+
quick_pick.show()
4979
})
5080

5181
if (selected) {

‎apps/editor/src/commands/remove-file-from-context-command.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,13 +158,23 @@ export const remove_file_from_context_command = (
158158
label: f.label,
159159
full_path: f.full_path
160160
}))
161-
folder_quick_pick.buttons = [vscode.QuickInputButtons.Back]
161+
folder_quick_pick.buttons = [
162+
vscode.QuickInputButtons.Back,
163+
{
164+
iconPath: new vscode.ThemeIcon('close'),
165+
tooltip: 'Close'
166+
}
167+
]
162168

163169
let folder_accepted = false
170+
let should_close_fully = false
164171

165172
folder_quick_pick.onDidTriggerButton((button) => {
166173
if (button === vscode.QuickInputButtons.Back) {
167174
folder_quick_pick.hide()
175+
} else if (button.tooltip == 'Close') {
176+
should_close_fully = true
177+
folder_quick_pick.hide()
168178
}
169179
})
170180

@@ -200,6 +210,11 @@ export const remove_file_from_context_command = (
200210
folder_quick_pick.dispose()
201211
is_showing_folder_quick_pick = false
202212

213+
if (should_close_fully) {
214+
quick_pick.dispose()
215+
return
216+
}
217+
203218
if (!folder_accepted) {
204219
if (file_items_cache.length > 0) {
205220
quick_pick.items = file_items_cache

‎apps/editor/src/views/panel/frontend/components/Layout/Footer/Footer.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@
8787

8888
&__action-button {
8989
$btn: &;
90-
9190
display: flex;
9291
align-items: center;
9392
flex-shrink: 0;

‎apps/editor/src/views/settings/frontend/Home/Home.tsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Section } from '@ui/components/editor/settings/Section'
1010
import { Input } from '@ui/components/editor/common/Input'
1111
import { Textarea } from '@ui/components/editor/common/Textarea'
1212
import { Toggler } from '@ui/components/editor/common/Toggler'
13+
import { Button } from '@ui/components/editor/common/Button'
1314
import {
1415
ConfigurationForClient,
1516
ProviderForClient,
@@ -342,6 +343,11 @@ export const Home: React.FC<Props> = (props) => {
342343
title="Model Providers"
343344
subtitle="Manage your API keys for use with API tools."
344345
on_stuck_change={model_providers_on_stuck_change}
346+
actions={
347+
<Button on_click={() => props.on_add_provider()}>
348+
New Provider...
349+
</Button>
350+
}
345351
>
346352
<Group>
347353
<ModelProvidersSection
@@ -363,6 +369,11 @@ export const Home: React.FC<Props> = (props) => {
363369
title="Edit Context"
364370
subtitle="Pair-programming using natural language instructions."
365371
on_stuck_change={edit_context_on_stuck_change}
372+
actions={
373+
<Button on_click={() => props.on_add_config('EDIT_CONTEXT')}>
374+
New Configuration...
375+
</Button>
376+
}
366377
>
367378
<Group>
368379
<ApiToolConfigurationSection
@@ -402,6 +413,11 @@ export const Home: React.FC<Props> = (props) => {
402413
title="Intelligent Update"
403414
subtitle="Integrate changes from malformed markdown code blocks."
404415
on_stuck_change={intelligent_update_on_stuck_change}
416+
actions={
417+
<Button on_click={() => props.on_add_config('INTELLIGENT_UPDATE')}>
418+
New Configuration...
419+
</Button>
420+
}
405421
>
406422
<Group>
407423
<ApiToolConfigurationSection
@@ -447,6 +463,11 @@ export const Home: React.FC<Props> = (props) => {
447463
title="Prune Context"
448464
subtitle="Remove irrelevant files from the current context selection."
449465
on_stuck_change={prune_context_on_stuck_change}
466+
actions={
467+
<Button on_click={() => props.on_add_config('PRUNE_CONTEXT')}>
468+
New Configuration...
469+
</Button>
470+
}
450471
>
451472
<Group>
452473
<ApiToolConfigurationSection
@@ -471,6 +492,11 @@ export const Home: React.FC<Props> = (props) => {
471492
title="Code at Cursor"
472493
subtitle="Get accurate inline suggestions from state-of-the-art models."
473494
on_stuck_change={code_completions_on_stuck_change}
495+
actions={
496+
<Button on_click={() => props.on_add_config('CODE_COMPLETIONS')}>
497+
New Configuration...
498+
</Button>
499+
}
474500
>
475501
<Group>
476502
<ApiToolConfigurationSection
@@ -499,8 +525,13 @@ export const Home: React.FC<Props> = (props) => {
499525
ref={(el) => (section_refs.current['commit-messages'] = el)}
500526
group="API Tool"
501527
title="Commit Messages"
502-
subtitle="Meaningful summaries of changes adhering to your style."
528+
subtitle="Meaningful summaries of changes adhering to your preffered style."
503529
on_stuck_change={commit_messages_on_stuck_change}
530+
actions={
531+
<Button on_click={() => props.on_add_config('COMMIT_MESSAGES')}>
532+
New Configuration...
533+
</Button>
534+
}
504535
>
505536
<Group>
506537
<ApiToolConfigurationSection

‎packages/ui/src/components/editor/common/IconButton/IconButton.module.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.icon-button {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
border-radius: 5px;
6+
--size: 20px;
7+
width: var(--size);
8+
height: var(--size);
9+
color: var(--vscode-icon-foreground);
10+
cursor: pointer;
11+
text-decoration: none;
12+
13+
&:focus {
14+
outline: none;
15+
}
16+
17+
&:hover {
18+
background-color: var(--vscode-toolbar-hoverBackground);
19+
text-decoration: none;
20+
}
21+
22+
&.with-label {
23+
width: auto;
24+
justify-content: flex-start;
25+
gap: 4px;
26+
padding-left: 4px;
27+
}
28+
}
29+
30+
.icon-wrapper {
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
width: 20px;
35+
height: 20px;
36+
flex-shrink: 0;
37+
}

‎packages/ui/src/components/editor/common/IconButton/IconButton.stories.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { IconButton } from './IconButton'
2+
3+
export default {
4+
component: IconButton
5+
}
6+
7+
export const Primary = () => (
8+
<IconButton
9+
codicon_icon="search"
10+
on_click={() => console.log('IconButton clicked')}
11+
title="Search"
12+
/>
13+
)
14+
15+
export const AsLink = () => (
16+
<IconButton
17+
codicon_icon="link-external"
18+
href="https://github.com"
19+
title="Open GitHub"
20+
/>
21+
)

‎packages/ui/src/components/editor/common/IconButton/IconButton.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import styles from './IconButton.module.scss'
2+
import cn from 'classnames'
3+
4+
type Props = {
5+
codicon_icon: string
6+
on_click?: (e: any) => void
7+
on_mouse_down?: (e: any) => void
8+
href?: string
9+
title?: string
10+
label?: string
11+
style?: React.CSSProperties
12+
}
13+
14+
export const IconButton: React.FC<Props> = (props) => {
15+
const icon_element = (
16+
<span className={styles['icon-wrapper']}>
17+
<span className={cn('codicon', `codicon-${props.codicon_icon}`)} />
18+
</span>
19+
)
20+
21+
const label_element = props.label && <span>{props.label}</span>
22+
23+
if (props.href) {
24+
return (
25+
<a
26+
href={props.href}
27+
className={cn(styles['icon-button'], {
28+
[styles['with-label']]: !!props.label
29+
})}
30+
onMouseDown={props.on_mouse_down}
31+
title={props.title}
32+
target="_blank"
33+
style={props.style}
34+
rel="noopener noreferrer"
35+
>
36+
{label_element}
37+
{icon_element}
38+
</a>
39+
)
40+
} else {
41+
return (
42+
<button
43+
className={cn(styles['icon-button'], {
44+
[styles['with-label']]: !!props.label
45+
})}
46+
onMouseDown={props.on_mouse_down}
47+
onClick={props.on_click}
48+
title={props.title}
49+
style={props.style}
50+
>
51+
{label_element}
52+
{icon_element}
53+
</button>
54+
)
55+
}
56+
}

‎packages/ui/src/components/editor/common/IconButton/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './IconButton'

0 commit comments

Comments
 (0)