Skip to content

Commit a7d0c13

Browse files
chriswritescode-devchriswritescode-dev
authored
fix: avoid auto-applying OpenCode config on dropdown selection (#275)
1 parent 0b1d3b1 commit a7d0c13

1 file changed

Lines changed: 80 additions & 52 deletions

File tree

‎frontend/src/components/settings/OpenCodeConfigManager.tsx‎

Lines changed: 80 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { useState, useEffect, useRef } from 'react'
22
import { cn } from '@/lib/utils'
3-
import { Loader2, Plus, Trash2, Edit, StarOff, Download, RotateCcw, FileText, ArrowUpCircle, History, ChevronDown } from 'lucide-react'
3+
import { Loader2, Plus, Trash2, Edit, Download, RotateCcw, FileText, ArrowUpCircle, History, ChevronDown } from 'lucide-react'
44
import { Button } from '@/components/ui/button'
55
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
66
import { Label } from '@/components/ui/label'
77
import { Badge } from '@/components/ui/badge'
88
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
9+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
910
import { DeleteDialog } from '@/components/ui/delete-dialog'
1011
import { CreateConfigDialog } from './CreateConfigDialog'
1112
import { OpenCodeConfigEditor } from './OpenCodeConfigEditor'
@@ -638,76 +639,103 @@ export function OpenCodeConfigManager({ hideHealthStatus = false }: OpenCodeConf
638639
value={activeConfigName}
639640
onValueChange={(value) => {
640641
setActiveConfigName(value)
641-
const next = configs.find((c) => c.name === value)
642-
if (next && !next.isDefault) {
643-
void setDefaultConfig(next)
644-
}
645642
}}
646643
>
647644
<SelectTrigger className="w-full sm:max-w-xs">
648-
<SelectValue placeholder="Select a configuration..." />
645+
<SelectValue placeholder="Select a configuration...">
646+
{activeConfig && (
647+
<>
648+
{activeConfig.name}
649+
{activeConfig.isDefault && (
650+
<span className="text-orange-500 dark:text-orange-400"> (Active)</span>
651+
)}
652+
{!activeConfig.isValid && ' (Invalid)'}
653+
</>
654+
)}
655+
</SelectValue>
649656
</SelectTrigger>
650657
<SelectContent>
651658
{configs.map((config) => (
652659
<SelectItem key={config.id} value={config.name}>
653660
{config.name}
654-
{config.isDefault && ' (Current)'}
661+
{config.isDefault && (
662+
<span className="text-orange-500 dark:text-orange-400"> (Active)</span>
663+
)}
655664
{!config.isValid && ' (Invalid)'}
656665
</SelectItem>
657666
))}
658667
</SelectContent>
659668
</Select>
660669

661670
<div className="flex items-center gap-2">
662-
{activeConfig?.isDefault && (
663-
<Badge variant="default" className="text-green-500 bg-green-500/10">
664-
Current
665-
</Badge>
666-
)}
667671
{activeConfig && !activeConfig.isValid && (
668672
<Badge variant="destructive">Invalid Config</Badge>
669673
)}
670674
</div>
671675

672-
<div className="flex items-center gap-2 sm:ml-auto">
673-
<Button
674-
variant="ghost"
675-
size="sm"
676-
disabled={!activeConfig}
677-
onClick={() => activeConfig && downloadConfig(activeConfig)}
678-
>
679-
<Download className="h-4 w-4" />
680-
</Button>
681-
<Button
682-
variant="ghost"
683-
size="sm"
684-
disabled={!activeConfig}
685-
onClick={() => activeConfig && startEdit(activeConfig)}
686-
>
687-
<Edit className="h-4 w-4" />
688-
</Button>
689-
<Button
690-
variant="ghost"
691-
size="sm"
692-
disabled={!activeConfig || activeConfig.isDefault || isUpdating}
693-
onClick={() => activeConfig && setDefaultConfig(activeConfig)}
694-
>
695-
<StarOff className="h-4 w-4" />
696-
</Button>
697-
<Button
698-
variant="ghost"
699-
size="sm"
700-
disabled={!activeConfig}
701-
className="text-red-500 hover:text-red-600"
702-
onClick={() => activeConfig && setDeleteConfirmConfig(activeConfig)}
703-
>
704-
<Trash2 className="h-4 w-4" />
705-
</Button>
706-
<Button size="sm" onClick={() => setIsCreateDialogOpen(true)}>
707-
<Plus className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
708-
<span className="text-xs sm:text-sm">New Config</span>
709-
</Button>
710-
</div>
676+
<TooltipProvider delayDuration={200}>
677+
<div className="flex items-center gap-1 sm:gap-1.5 sm:ml-auto">
678+
<Tooltip>
679+
<TooltipTrigger asChild>
680+
<Button
681+
variant="ghost"
682+
size="sm"
683+
disabled={!activeConfig}
684+
onClick={() => activeConfig && downloadConfig(activeConfig)}
685+
>
686+
<Download className="h-4 w-4" />
687+
</Button>
688+
</TooltipTrigger>
689+
<TooltipContent side="bottom">Download</TooltipContent>
690+
</Tooltip>
691+
<Tooltip>
692+
<TooltipTrigger asChild>
693+
<Button
694+
variant="ghost"
695+
size="sm"
696+
disabled={!activeConfig}
697+
onClick={() => activeConfig && startEdit(activeConfig)}
698+
>
699+
<Edit className="h-4 w-4" />
700+
</Button>
701+
</TooltipTrigger>
702+
<TooltipContent side="bottom">Edit</TooltipContent>
703+
</Tooltip>
704+
{!activeConfig?.isDefault && (
705+
<Tooltip>
706+
<TooltipTrigger asChild>
707+
<Button
708+
size="sm"
709+
variant="default"
710+
disabled={!activeConfig || isUpdating}
711+
onClick={() => activeConfig && setDefaultConfig(activeConfig)}
712+
>
713+
Apply
714+
</Button>
715+
</TooltipTrigger>
716+
<TooltipContent side="bottom">Apply as default</TooltipContent>
717+
</Tooltip>
718+
)}
719+
<Tooltip>
720+
<TooltipTrigger asChild>
721+
<Button
722+
variant="ghost"
723+
size="sm"
724+
disabled={!activeConfig}
725+
className="text-red-500 hover:text-red-600"
726+
onClick={() => activeConfig && setDeleteConfirmConfig(activeConfig)}
727+
>
728+
<Trash2 className="h-4 w-4" />
729+
</Button>
730+
</TooltipTrigger>
731+
<TooltipContent side="bottom">Delete</TooltipContent>
732+
</Tooltip>
733+
<Button size="sm" onClick={() => setIsCreateDialogOpen(true)}>
734+
<Plus className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
735+
<span className="text-xs sm:text-sm">New Config</span>
736+
</Button>
737+
</div>
738+
</TooltipProvider>
711739
</div>
712740

713741
{activeConfig && (
@@ -781,7 +809,7 @@ export function OpenCodeConfigManager({ hideHealthStatus = false }: OpenCodeConf
781809
<div className="space-y-6">
782810
<div className='px-1'>
783811
<Label className="text-sm sm:text-base font-medium">Select Configuration to Edit</Label>
784-
<Select
812+
<Select
785813
onValueChange={(value) => {
786814
const config = configs.find(c => c.name === value)
787815
setSelectedConfig(config || null)

0 commit comments

Comments
 (0)