mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Gildas Garcia
243e079a2c
## Problem The `_Shadcn_` suffix isn't needed anymore on `Command` components ## Solution - Remove the `_Shadcn_` suffix - Simplify UI package exports - Apply prettier <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Simplified command component imports and exports across the UI library by removing internal naming aliases and adopting direct component references. Updated the public UI package barrel export to use wildcard re-exports for cleaner API surface. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { Check, GitMerge, Shield } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
ScrollArea,
|
|
} from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { Branch } from '@/data/branches/branches-query'
|
|
|
|
interface BranchSelectorProps {
|
|
branches: Branch[]
|
|
onBranchSelected?: (branch: Branch) => void
|
|
disabled?: boolean
|
|
isUpdating?: boolean
|
|
type?: 'primary' | 'outline'
|
|
align?: 'end' | 'center'
|
|
}
|
|
|
|
export const BranchSelector = ({
|
|
branches,
|
|
onBranchSelected,
|
|
disabled = false,
|
|
isUpdating = false,
|
|
type = 'primary',
|
|
align = 'end',
|
|
}: BranchSelectorProps) => {
|
|
const [open, setOpen] = useState(false)
|
|
const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null)
|
|
|
|
const availableBranches = branches.filter((branch) => !branch.is_default)
|
|
|
|
const handleBranchSelect = (branch: Branch) => {
|
|
setSelectedBranch(branch)
|
|
setOpen(false)
|
|
onBranchSelected?.(branch)
|
|
}
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen} modal={false}>
|
|
<PopoverTrigger asChild>
|
|
<ButtonTooltip
|
|
icon={<GitMerge size={14} strokeWidth={1.5} />}
|
|
type={type}
|
|
disabled={
|
|
disabled || isUpdating || branches.length === 0 || availableBranches.length === 0
|
|
}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
align,
|
|
text:
|
|
branches.length === 0 || availableBranches.length === 0
|
|
? 'Create a branch first to start a merge request'
|
|
: undefined,
|
|
},
|
|
}}
|
|
>
|
|
{isUpdating ? 'Creating...' : 'New merge request'}
|
|
</ButtonTooltip>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="p-0 w-80" side="bottom" align="end">
|
|
<Command>
|
|
<CommandInput placeholder="Find branch to review..." />
|
|
<CommandList>
|
|
<CommandEmpty>No available branches found</CommandEmpty>
|
|
<CommandGroup>
|
|
<ScrollArea className="max-h-[210px] overflow-y-auto">
|
|
{availableBranches.map((branch) => (
|
|
<CommandItem
|
|
key={branch.id}
|
|
value={branch.name.replaceAll('"', '')}
|
|
className="cursor-pointer w-full flex items-center justify-between"
|
|
onSelect={() => handleBranchSelect(branch)}
|
|
disabled={isUpdating || !!branch.git_branch || !!branch.review_requested_at}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{branch.is_default && <Shield size={14} className="text-amber-900" />}
|
|
<span className="truncate" title={branch.name}>
|
|
{branch.name}
|
|
</span>
|
|
</div>
|
|
{selectedBranch?.id === branch.id && (
|
|
<Check size={14} strokeWidth={1.5} className="text-brand" />
|
|
)}
|
|
{branch.git_branch && <span>Synced to a Git branch</span>}
|
|
{branch.review_requested_at && <span>Merge request opened</span>}
|
|
</CommandItem>
|
|
))}
|
|
</ScrollArea>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|