konnosDashboard
MergeRequestButton.tsx97 lines · main
1// @ts-nocheck
2import { useParams } from 'common'
3import { GitMerge } from 'lucide-react'
4import { useRouter } from 'next/router'
5import { toast } from 'sonner'
6
7import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
8import { useBranchUpdateMutation } from '@/data/branches/branch-update-mutation'
9import { useBranchesQuery } from '@/data/branches/branches-query'
10import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
11import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
12import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
13import { useTrack } from '@/lib/telemetry/track'
14
15export const MergeRequestButton = () => {
16 const { ref } = useParams()
17 const router = useRouter()
18 const { data: projectDetails } = useSelectedProjectQuery()
19 const { data: selectedOrg } = useSelectedOrganizationQuery()
20
21 const projectRef = projectDetails?.parent_project_ref || ref
22
23 const { data: branches } = useBranchesQuery({ projectRef }, { enabled: Boolean(projectDetails) })
24
25 const { mutate: sendEvent } = useSendEventMutation()
26 const track = useTrack()
27
28 const { mutate: updateBranch, isPending: isUpdating } = useBranchUpdateMutation({
29 onError: () => {
30 toast.error(`Failed to open merge request`)
31 },
32 })
33
34 const selectedBranch = branches?.find((branch) => branch.project_ref === ref)
35
36 if (!projectRef || !selectedBranch || selectedBranch.is_default || selectedBranch.git_branch)
37 return null
38
39 const hasReviewRequested = !!selectedBranch.review_requested_at
40 const buttonLabel = hasReviewRequested ? 'Review merge request' : 'Open merge request'
41
42 const handleClick = () => {
43 track('header_merge_request_button_clicked', { hasReviewRequested })
44 if (hasReviewRequested) {
45 router.push(`/project/${selectedBranch.project_ref}/merge`)
46 } else {
47 updateBranch(
48 {
49 branchRef: selectedBranch.project_ref,
50 projectRef,
51 requestReview: true,
52 },
53 {
54 onSuccess: () => {
55 toast.success('Merge request created')
56 router.push(`/project/${selectedBranch.project_ref}/merge`)
57 sendEvent({
58 action: 'branch_create_merge_request_button_clicked',
59 properties: {
60 branchType: selectedBranch.persistent ? 'persistent' : 'preview',
61 origin: 'header',
62 },
63 groups: {
64 project: projectRef ?? 'Unknown',
65 organization: selectedOrg?.slug ?? 'Unknown',
66 },
67 })
68 },
69 }
70 )
71 }
72 }
73
74 return (
75 <ButtonTooltip
76 type="default"
77 className="rounded-full w-[26px] h-[26px]"
78 onClick={handleClick}
79 loading={isUpdating}
80 tooltip={{
81 content: {
82 text: buttonLabel,
83 side: 'bottom',
84 align: 'center',
85 },
86 }}
87 icon={
88 <div className="relative">
89 {hasReviewRequested && (
90 <span className="w-1 h-1 absolute top-0 right-0 rounded-full bg-brand" />
91 )}
92 <GitMerge size={16} strokeWidth={1.5} />
93 </div>
94 }
95 />
96 )
97}