HelpButton.tsx49 lines · main

1	// @ts-nocheck
2	import { HelpCircle } from 'lucide-react'
3	import { cn } from 'ui'
4
5	import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
6	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
7	import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
8	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
9	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
10	import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
11
12	export const HelpButton = () => {
13	const { toggleSidebar, activeSidebar } = useSidebarManagerSnapshot()
14	const { data: project } = useSelectedProjectQuery()
15	const { data: org } = useSelectedOrganizationQuery()
16	const { mutate: sendEvent } = useSendEventMutation()
17
18	const isOpen = activeSidebar?.id === SIDEBAR_KEYS.HELP_PANEL
19
20	return (
21	<ButtonTooltip
22	id="help-dropdown-button"
23	type={isOpen ? 'secondary' : 'outline'}
24	size="tiny"
25	className={cn('rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group')}
26	onClick={() => {
27	toggleSidebar(SIDEBAR_KEYS.HELP_PANEL)
28	// Don't send telemetry event if dropdown is already open
29	if (!isOpen) {
30	sendEvent({
31	action: 'help_button_clicked',
32	groups: { project: project?.ref, organization: org?.slug },
33	})
34	}
35	}}
36	tooltip={{ content: { text: 'Help' } }}
37	>
38	<HelpCircle
39	size={16}
40	strokeWidth={1.5}
41	className={cn(
42	'text-foreground-light group-hover:text-foreground',
43	isOpen && 'text-background group-hover:text-background'
44	)}
45	/>
46	<span className="sr-only">Help</span>
47	</ButtonTooltip>
48	)
49	}