Skip to content

Commit 2e103b4

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Fix defaults
1 parent d9858f5 commit 2e103b4

File tree

2 files changed

+76
-32
lines changed

2 files changed

+76
-32
lines changed

‎site/src/pages/WorkspacesPage/Filter.tsx

Lines changed: 75 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
123123
onChange,
124124
}: UseAutocompleteOptions<TOption>) => {
125125
const [query, setQuery] = useState("")
126-
const [selectedOption, setSelectedOption] = useState<BaseOption>()
126+
const [selectedOption, setSelectedOption] = useState<TOption>()
127127
const initialOptionQuery = useQuery({
128128
queryKey: [id, "autocomplete", "initial"],
129129
queryFn: () => getInitialOption(),
@@ -136,7 +136,7 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
136136
const selectOption = (option: TOption) => {
137137
let newSelectedOptionValue: TOption | undefined = option
138138

139-
if (option.label === selectedOption?.value) {
139+
if (option.value === selectedOption?.value) {
140140
newSelectedOptionValue = undefined
141141
}
142142

@@ -294,9 +294,9 @@ export const Filter = ({
294294
return (
295295
<Box display="flex" sx={{ gap: 1, mb: 2 }}>
296296
<FilterSkeleton width="100%" />
297-
<FilterSkeleton width={120} />
298-
<FilterSkeleton width={120} />
299-
<FilterSkeleton width={120} />
297+
<FilterSkeleton width="200px" />
298+
<FilterSkeleton width="200px" />
299+
<FilterSkeleton width="200px" />
300300
</Box>
301301
)
302302
}
@@ -355,8 +355,16 @@ const OwnerFilter = ({ autocomplete }: { autocomplete: UsersAutocomplete }) => {
355355

356356
return (
357357
<div>
358-
<MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
359-
User
358+
<MenuButton
359+
ref={buttonRef}
360+
onClick={() => setIsMenuOpen(true)}
361+
sx={{ width: 200 }}
362+
>
363+
{autocomplete.selectedOption ? (
364+
<UserOptionItem option={autocomplete.selectedOption} />
365+
) : (
366+
"All users"
367+
)}
360368
</MenuButton>
361369
<SearchMenu
362370
id="user-filter-menu"
@@ -373,21 +381,27 @@ const OwnerFilter = ({ autocomplete }: { autocomplete: UsersAutocomplete }) => {
373381
handleClose()
374382
}}
375383
>
376-
<Box display="flex" alignItems="center" gap={2} fontSize={14}>
377-
<UserAvatar
378-
username={option.label}
379-
avatarURL={option.avatarUrl}
380-
sx={{ width: 16, height: 16, fontSize: 8 }}
381-
/>
382-
<span>{option.label}</span>
383-
</Box>
384+
<UserOptionItem option={option} />
384385
</MenuItem>
385386
)}
386387
/>
387388
</div>
388389
)
389390
}
390391

392+
const UserOptionItem = ({ option }: { option: OwnerOption }) => {
393+
return (
394+
<Box display="flex" alignItems="center" gap={2} fontSize={14}>
395+
<UserAvatar
396+
username={option.label}
397+
avatarURL={option.avatarUrl}
398+
sx={{ width: 16, height: 16, fontSize: 8 }}
399+
/>
400+
<span>{option.label}</span>
401+
</Box>
402+
)
403+
}
404+
391405
const TemplatesFilter = ({
392406
autocomplete,
393407
}: {
@@ -402,8 +416,16 @@ const TemplatesFilter = ({
402416

403417
return (
404418
<div>
405-
<MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
406-
Template
419+
<MenuButton
420+
ref={buttonRef}
421+
onClick={() => setIsMenuOpen(true)}
422+
sx={{ width: 200 }}
423+
>
424+
{autocomplete.selectedOption ? (
425+
<TemplateOptionItem option={autocomplete.selectedOption} />
426+
) : (
427+
"All templates"
428+
)}
407429
</MenuButton>
408430
<SearchMenu
409431
id="template-filter-menu"
@@ -420,21 +442,27 @@ const TemplatesFilter = ({
420442
handleClose()
421443
}}
422444
>
423-
<Box display="flex" alignItems="center" gap={2} fontSize={14}>
424-
<TemplateAvatar
425-
templateName={option.label}
426-
icon={option.icon}
427-
sx={{ width: 14, height: 14, fontSize: 8 }}
428-
/>
429-
<span>{option.label}</span>
430-
</Box>
445+
<TemplateOptionItem option={option} />
431446
</MenuItem>
432447
)}
433448
/>
434449
</div>
435450
)
436451
}
437452

453+
const TemplateOptionItem = ({ option }: { option: TemplateOption }) => {
454+
return (
455+
<Box display="flex" alignItems="center" gap={2} fontSize={14}>
456+
<TemplateAvatar
457+
templateName={option.label}
458+
icon={option.icon}
459+
sx={{ width: 14, height: 14, fontSize: 8 }}
460+
/>
461+
<span>{option.label}</span>
462+
</Box>
463+
)
464+
}
465+
438466
const TemplateAvatar: FC<
439467
AvatarProps & { templateName: string; icon?: string }
440468
> = ({ templateName, icon, ...avatarProps }) => {
@@ -459,14 +487,23 @@ const StatusFilter = ({
459487

460488
return (
461489
<div>
462-
<MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
463-
Status
490+
<MenuButton
491+
ref={buttonRef}
492+
onClick={() => setIsMenuOpen(true)}
493+
sx={{ width: 200 }}
494+
>
495+
{autocomplete.selectedOption ? (
496+
<StatusOptionItem option={autocomplete.selectedOption} />
497+
) : (
498+
"All statuses"
499+
)}
464500
</MenuButton>
465501
<Menu
466502
id="status-filter-menu"
467503
anchorEl={buttonRef.current}
468504
open={isMenuOpen}
469505
onClose={handleClose}
506+
sx={{ "& .MuiPaper-root": { minWidth: 200 } }}
470507
>
471508
{autocomplete.searchOptions?.map((option) => (
472509
<MenuItem
@@ -477,17 +514,23 @@ const StatusFilter = ({
477514
handleClose()
478515
}}
479516
>
480-
<Box display="flex" alignItems="center" gap={2} fontSize={14}>
481-
<StatusIndicator option={option} />
482-
<span>{option.label}</span>
483-
</Box>
517+
<StatusOptionItem option={option} />
484518
</MenuItem>
485519
))}
486520
</Menu>
487521
</div>
488522
)
489523
}
490524

525+
const StatusOptionItem = ({ option }: { option: StatusOption }) => {
526+
return (
527+
<Box display="flex" alignItems="center" gap={2} fontSize={14}>
528+
<StatusIndicator option={option} />
529+
<span>{option.label}</span>
530+
</Box>
531+
)
532+
}
533+
491534
const StatusIndicator: FC<{ option: StatusOption }> = ({ option }) => {
492535
return (
493536
<Box
@@ -511,6 +554,7 @@ const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
511554
sx={{
512555
borderRadius: "6px",
513556
lineHeight: 0,
557+
justifyContent: "space-between",
514558
...props.sx,
515559
}}
516560
/>

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const WorkspacesPage: FC = () => {
3131
(option) => filter.update({ ...filter.values, template: option?.value }),
3232
)
3333
const statusAutocomplete = useStatusAutocomplete(
34-
filter.values.owner,
34+
filter.values.status,
3535
(option) => filter.update({ ...filter.values, status: option?.value }),
3636
)
3737

0 commit comments

Comments
 (0)