mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { PlugIcon } from 'lucide-react'
|
|
import { parseAsBoolean, useQueryState } from 'nuqs'
|
|
import { ComponentProps } from 'react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
|
|
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
|
|
import { PROJECT_STATUS } from '@/lib/constants'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
import { useAppStateSnapshot } from '@/state/app-state'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
|
|
interface ConnectButtonProps {
|
|
buttonVariant?: ComponentProps<typeof Button>['variant']
|
|
className?: string
|
|
iconOnly?: boolean
|
|
}
|
|
|
|
export const ConnectButton = ({
|
|
buttonVariant = 'default',
|
|
className,
|
|
iconOnly = false,
|
|
}: ConnectButtonProps) => {
|
|
const { data: selectedProject } = useSelectedProjectQuery()
|
|
const { setConnectSheetSource } = useAppStateSnapshot()
|
|
const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
|
|
const track = useTrack()
|
|
|
|
const [showConnect, setShowConnect] = useQueryState(
|
|
'showConnect',
|
|
parseAsBoolean.withDefault(false)
|
|
)
|
|
|
|
if (isActiveHealthy) {
|
|
return (
|
|
<ShortcutTooltip
|
|
shortcutId={SHORTCUT_IDS.CONNECT_OPEN_SHEET}
|
|
side="bottom"
|
|
open={showConnect ? false : undefined}
|
|
>
|
|
<Button
|
|
variant={buttonVariant}
|
|
aria-label="Connect"
|
|
disabled={!isActiveHealthy}
|
|
className={cn('rounded-full', className)}
|
|
icon={<PlugIcon className="rotate-90" />}
|
|
onClick={() => {
|
|
track('header_connect_button_clicked')
|
|
setConnectSheetSource('header_button')
|
|
setShowConnect(true)
|
|
}}
|
|
>
|
|
{!iconOnly && <span>Connect</span>}
|
|
</Button>
|
|
</ShortcutTooltip>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
variant={buttonVariant}
|
|
disabled
|
|
className={cn('rounded-full', className)}
|
|
icon={<PlugIcon className="rotate-90" />}
|
|
onClick={() => {
|
|
track('header_connect_button_clicked')
|
|
setConnectSheetSource('header_button')
|
|
setShowConnect(true)
|
|
}}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: 'Project is currently not active and cannot be connected',
|
|
},
|
|
}}
|
|
>
|
|
<span className={cn({ 'sr-only': iconOnly })}>Connect</span>
|
|
</ButtonTooltip>
|
|
)
|
|
}
|