ConnectButton.tsx53 lines · main

1	import { Plug } from 'lucide-react'
2	import { parseAsBoolean, useQueryState } from 'nuqs'
3	import { ComponentProps } from 'react'
4	import { Button, cn } from 'ui'
5
6	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
7	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
8	import { PROJECT_STATUS } from '@/lib/constants'
9	import { useTrack } from '@/lib/telemetry/track'
10	import { useAppStateSnapshot } from '@/state/app-state'
11
12	interface ConnectButtonProps {
13	buttonType?: ComponentProps<typeof Button>['type']
14	className?: string
15	iconOnly?: boolean
16	}
17
18	export const ConnectButton = ({
19	buttonType = 'default',
20	className,
21	iconOnly = false,
22	}: ConnectButtonProps) => {
23	const { data: selectedProject } = useSelectedProjectQuery()
24	const { setConnectSheetSource } = useAppStateSnapshot()
25	const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
26	const track = useTrack()
27
28	const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
29
30	return (
31	<ButtonTooltip
32	type={buttonType}
33	disabled={!isActiveHealthy}
34	className={cn('rounded-full', className)}
35	icon={<Plug className="rotate-90" />}
36	onClick={() => {
37	track('header_connect_button_clicked')
38	setConnectSheetSource('header_button')
39	setShowConnect(true)
40	}}
41	tooltip={{
42	content: {
43	side: 'bottom',
44	text: !isActiveHealthy
45	? 'Project is currently not active and cannot be connected'
46	: undefined,
47	},
48	}}
49	>
50	<span className={cn({ 'sr-only': iconOnly })}>Connect</span>
51	</ButtonTooltip>
52	)
53	}