feat: integrate Draft status API and UI (#1658)

Co-authored-by: Quanyi Ma <eli@patch.sh>

Author: zyd123-cmd

moon/apps/web/components/ClBox/MergeBox.tsx

@@ -14,11 +14,12 @@ import { useGetCurrentUser } from '@/hooks/useGetCurrentUser'
 import { legacyApiClient } from '@/utils/queryClient'
 
 import { ChecksSection } from './ChecksSection'
+import { DraftStatusBanner } from './components/DraftStatusBanner'
 import { useMergeChecks } from './hooks/useMergeChecks'
 import { MergeSection } from './MergeSection'
 import { ReviewerSection } from './ReviewerSection'
 
-export const MergeBox = React.memo<{ prId: string }>(({ prId }) => {
+export const MergeBox = React.memo<{ prId: string; status?: string }>(({ prId, status }) => {
   const { scope } = useScope()
   const { checks, refresh } = useMergeChecks(prId)
   const [hasCheckFailures, setHasCheckFailures] = useState(true)
@@ -95,6 +96,8 @@ export const MergeBox = React.memo<{ prId: string }>(({ prId }) => {
         <div className='ml-3 w-full divide-y rounded-lg border bg-white'>
           <ReviewerSection required={required} actual={actual} />
           <ChecksSection checks={checks} onStatusChange={setHasCheckFailures} additionalChecks={additionalChecks} />
+          {status === 'Draft' && <DraftStatusBanner link={id} />}
+
           <MergeSection
             isNowUserApprove={isNowUserApprove}
             isAllReviewerApproved={isAllReviewerApproved}
@@ -103,6 +106,7 @@ export const MergeBox = React.memo<{ prId: string }>(({ prId }) => {
             onApprove={handleApprove}
             isMerging={clMergeIsPending}
             clLink={clLink}
+            clStatus={status}
           />
         </div>
       )}

moon/apps/web/components/ClBox/MergeSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
-import { CheckCircleIcon, LoadingSpinner, WarningTriangleIcon } from '@gitmono/ui'
+import { CheckCircleIcon, LoadingSpinner, Tooltip, WarningTriangleIcon } from '@gitmono/ui'
 
 import { useScope } from '@/contexts/scope'
 import { useGetMergeQueueStatus } from '@/hooks/MergeQueue/useGetMergeQueueStatus'
@@ -15,6 +15,7 @@ interface MergeSectionProps {
   onApprove: () => void
   isMerging: boolean
   clLink: string
+  clStatus?: string
 }
 
 export const MergeSection = React.memo<MergeSectionProps>(
@@ -25,7 +26,8 @@ export const MergeSection = React.memo<MergeSectionProps>(
     onMerge,
     onApprove,
     isMerging,
-    clLink
+    clLink,
+    clStatus
   }) => {
     const router = useRouter()
     const { scope } = useScope()
@@ -38,8 +40,16 @@ export const MergeSection = React.memo<MergeSectionProps>(
     let statusNode: React.ReactNode
 
     const isMergeable = isAllReviewerApproved
+    const isDraft = clStatus?.toLowerCase() === 'draft'
 
-    if (!isAllReviewerApproved) {
+    if (isDraft) {
+      statusNode = (
+        <div className='flex items-center text-yellow-700'>
+          <WarningTriangleIcon className='mr-3 h-5 w-5' />
+          <span className='font-semibold'>CL has not yet prepared for the review</span>
+        </div>
+      )
+    } else if (!isAllReviewerApproved) {
       statusNode = (
         <div className='flex items-center text-yellow-700'>
           <WarningTriangleIcon className='mr-3 h-5 w-5' />
@@ -82,22 +92,43 @@ export const MergeSection = React.memo<MergeSectionProps>(
         )}
 
         <div className='ClBox-MergeSection flex items-center justify-center gap-4' style={{ marginTop: '12px' }}>
-          <button
-            onClick={onApprove}
-            disabled={isNowUserApprove === undefined || isNowUserApprove}
-            className='w-full rounded-md bg-green-600 px-4 py-2 font-bold text-white duration-500 hover:bg-green-800 disabled:cursor-not-allowed disabled:bg-gray-400'
-          >
-            Approve
-          </button>
-
-          {!inQueue ? (
+          {!isDraft && (
             <button
-              onClick={handleAddToQueue}
-              disabled={isAddingToQueue || !isMergeable}
-              className='w-full rounded-md bg-purple-600 px-4 py-2 font-bold text-white duration-500 hover:bg-purple-800 disabled:cursor-not-allowed disabled:bg-gray-400'
+              onClick={onApprove}
+              disabled={isNowUserApprove === undefined || isNowUserApprove}
+              className='w-full rounded-md bg-green-600 px-4 py-2 font-bold text-white duration-500 hover:bg-green-800 disabled:cursor-not-allowed disabled:bg-gray-400'
             >
-              {isAddingToQueue ? <LoadingSpinner /> : 'Add to Queue'}
+              Approve
             </button>
+          )}
+
+          {!inQueue ? (
+            isDraft ? (
+              <Tooltip
+                label={
+                  <div className='rounded-md bg-[#25292e] px-3 py-1 text-xs text-white'>
+                    Merging is blocked due to failing merge requirements
+                  </div>
+                }
+                side='top'
+              >
+                <button
+                  onClick={handleAddToQueue}
+                  disabled
+                  className='w-full rounded-md bg-purple-600 px-4 py-2 font-bold text-white duration-500 hover:bg-purple-800 disabled:cursor-not-allowed disabled:bg-gray-400'
+                >
+                  Add to Queue
+                </button>
+              </Tooltip>
+            ) : (
+              <button
+                onClick={handleAddToQueue}
+                disabled={isAddingToQueue || !isMergeable}
+                className='w-full rounded-md bg-purple-600 px-4 py-2 font-bold text-white duration-500 hover:bg-purple-800 disabled:cursor-not-allowed disabled:bg-gray-400'
+              >
+                {isAddingToQueue ? <LoadingSpinner /> : 'Add to Queue'}
+              </button>
+            )
           ) : (
             <button
               onClick={onMerge}

moon/apps/web/components/ClBox/components/DraftStatusBanner.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { GitPullRequestDraftIcon } from '@primer/octicons-react'
+
+import { useUpdateClStatus } from '@/components/ClView/hook/useUpdateClStatus'
+
+interface DraftStatusBannerProps {
+  link: string
+}
+
+export const DraftStatusBanner: React.FC<DraftStatusBannerProps> = ({ link }) => {
+  const { mutate: updateStatus, isPending } = useUpdateClStatus()
+
+  const handleReadyForReview = () => {
+    updateStatus({ link, status: 'Open' })
+  }
+
+  return (
+    <div className='flex items-center justify-between px-4 py-3'>
+      <div className='flex items-start gap-3'>
+        <div className='mt-1'>
+          <GitPullRequestDraftIcon className='text-[#6e7781]' size={24} />
+        </div>
+        <div>
+          <div className='text-sm font-semibold text-[#24292f]'>This pull request is still a work in progress</div>
+          <div className='mt-1 text-xs text-[#57606a]'>Draft pull requests cannot be merged.</div>
+        </div>
+      </div>
+      <button
+        type='button'
+        onClick={handleReadyForReview}
+        disabled={isPending}
+        className='rounded-md border border-[#d0d7de] bg-[#f6f8fa] px-3 py-1 text-sm font-semibold text-[#24292f] hover:bg-[#eef1f4] disabled:cursor-not-allowed disabled:opacity-60'
+      >
+        Ready for review
+      </button>
+    </div>
+  )
+}

moon/apps/web/components/ClView/ClList.tsx

@@ -74,6 +74,9 @@ export function IndexTabFilter({
       >
         Open
       </Button>
+      <Button size='sm' onClick={() => setPart('draft')} variant={part === 'draft' ? 'flat' : 'plain'}>
+        Draft
+      </Button>
       <Button
         size='sm'
         onClick={() => setPart('closed')}

moon/apps/web/components/ClView/ConversationTab.tsx

@@ -6,6 +6,7 @@ import { cn } from '@gitmono/ui/utils'
 
 import { EMPTY_HTML } from '@/atoms/markdown'
 import { MergeBox } from '@/components/ClBox/MergeBox'
+import { ConvertToDraftDialog } from '@/components/ClView/components/ConvertToDraftDialog'
 import TimelineItems from '@/components/ClView/TimelineItems'
 import { BadgeItem } from '@/components/Issues/IssueNewPage'
 import { splitFun } from '@/components/Issues/utils/sideEffect'
@@ -115,7 +116,11 @@ export const ConversationTab = React.memo<ConversationTabProps>(
           )
         )}
         <div style={{ marginTop: '12px' }} className='prose'>
-          <div className='w-full'>{clDetail && clDetail.status === 'Open' && <MergeBox prId={id} />}</div>
+          <div className='w-full'>
+            {clDetail && (clDetail.status === 'Open' || clDetail.status === 'Draft') && (
+              <MergeBox prId={id} status={clDetail.status} />
+            )}
+          </div>
           <h2 style={{ marginTop: '15px', marginBottom: '15px' }}>Add a comment</h2>
           <input {...dropzone.getInputProps()} />
           <div className='rounded-lg border p-6' style={{ marginTop: '15px', marginBottom: '15px' }}>
@@ -184,6 +189,20 @@ export const ConversationTab = React.memo<ConversationTabProps>(
           onOpenChange={(open) => review_handleOpenChange(open)}
           handleGroup={(selected) => handleReviewers(selected)}
           selected={review_fetchSelected}
+          emptyExtra={
+            clDetail &&
+            clDetail.status === 'Open' && (
+              <div className='mt-2 text-xs text-gray-900'>
+                <span>Still in progress? </span>
+                <ConvertToDraftDialog
+                  trigger={
+                    <span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>Convert to draft</span>
+                  }
+                  link={clDetail.link}
+                />
+              </div>
+            )
+          }
         >
           {(el) => {
             const names = Array.from(new Set(splitFun(el)))
@@ -217,6 +236,19 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                     </div>
                   )
                 })}
+                {clDetail && clDetail.status === 'Open' && (
+                  <div className='pointer-events-auto mt-2 px-4 text-xs text-gray-900'>
+                    <span>Still in progress? </span>
+                    <ConvertToDraftDialog
+                      trigger={
+                        <span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>
+                          Convert to draft
+                        </span>
+                      }
+                      link={clDetail.link}
+                    />
+                  </div>
+                )}
               </div>
             )
           }}

moon/apps/web/components/ClView/EditItem.tsx

@@ -0,0 +1,44 @@
+import { ConversationItem } from '@gitmono/types/generated'
+import { ConditionalWrap } from '@gitmono/ui'
+
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+
+import { MemberHovercard } from '../InlinePost/MemberHovercard'
+import { MemberAvatar } from '../MemberAvatar'
+import HandleTime from './components/HandleTime'
+import { UserLinkByName } from './components/UserLinkByName'
+
+interface EditItemProps {
+  conv: ConversationItem
+}
+
+const EditItem = ({ conv }: EditItemProps) => {
+  const { data: member } = useGetOrganizationMember({ username: conv.username })
+
+  return (
+    <>
+      <div className='flex items-center space-x-2'>
+        <div className='cursor-pointer'>
+          <ConditionalWrap
+            condition
+            wrap={(c) => (
+              <MemberHovercard username={conv?.username}>
+                <UserLinkByName username={conv?.username} className='relative'>
+                  {c}
+                </UserLinkByName>
+              </MemberHovercard>
+            )}
+          >
+            {member ? <MemberAvatar member={member} size='sm' /> : 'Avatar not found'}
+          </ConditionalWrap>
+        </div>
+        <div>{conv.comment}</div>
+        <div className='text-sm text-gray-500 hover:text-gray-700'>
+          <HandleTime created_at={conv.created_at} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default EditItem

moon/apps/web/components/ClView/TimelineItems.tsx

@@ -9,6 +9,7 @@ import {
   FeedPullRequestClosedIcon,
   FeedPullRequestOpenIcon,
   FeedTagIcon,
+  GitPullRequestDraftIcon,
   PersonIcon,
   RepoPushIcon
 } from '@primer/octicons-react'
@@ -24,6 +25,7 @@ import { CommonDetailData } from '@/utils/types'
 import { SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent'
 import AssigneeItem from './AssigneeItem'
 import CloseItem from './CloseItem'
+import EditItem from './EditItem'
 import ForcePushItem from './item/ForcePushItem'
 import MergedItem from './MergedItem'
 import ReopenItem from './ReopenItem'
@@ -117,6 +119,10 @@ const TimelineItems = React.memo<{
             children = <CloseItem conv={conv} />
             isOver = true
             break
+          case 'Edit':
+            icon = <GitPullRequestDraftIcon size={24} className='text-[#6e7781]' />
+            children = <EditItem conv={conv} />
+            break
           case 'Reopen':
             icon = <FeedPullRequestOpenIcon size={24} className='text-green-500' />
             children = <ReopenItem conv={conv} />

moon/apps/web/components/ClView/components/ConvertToDraftDialog.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+
+import { Dialog } from '@gitmono/ui'
+
+import { useUpdateClStatus } from '@/components/ClView/hook/useUpdateClStatus'
+
+interface ConvertToDraftDialogProps {
+  trigger: React.ReactNode
+  link: string
+}
+
+export const ConvertToDraftDialog: React.FC<ConvertToDraftDialogProps> = ({ trigger, link }) => {
+  const [open, setOpen] = useState(false)
+  const { mutate: updateClStatus, isPending } = useUpdateClStatus()
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+  }
+
+  const handleConfirm = () => {
+    updateClStatus(
+      { link, status: 'draft' },
+      {
+        onSuccess: () => {
+          setOpen(false)
+        }
+      }
+    )
+  }
+
+  const handleConfirmClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    handleConfirm()
+  }
+
+  const handleTriggerClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    setOpen(true)
+  }
+
+  return (
+    <>
+      <span onClick={handleTriggerClick}>{trigger}</span>
+      <Dialog.Root open={open} onOpenChange={handleOpenChange} size='lg' align='top'>
+        <Dialog.Header className='flex items-center rounded-b-none border-b bg-white p-4 text-sm'>
+          <Dialog.Title className='text-sm font-semibold text-[#22262b]'>
+            Convert this pull request to draft?
+          </Dialog.Title>
+          <Dialog.CloseButton />
+        </Dialog.Header>
+        <Dialog.Content className='flex min-h-[70px] justify-center bg-[#fff8c5] px-4 py-6'>
+          <div className='flex items-center text-xs text-[#22262b]'>
+            People who are already subscribed will not be unsubscribed.
+          </div>
+        </Dialog.Content>
+        <Dialog.Footer
+          variant='secondary'
+          className='flex justify-center rounded-t-none border-t bg-[#f6f8fa] px-4 pb-3 pt-3'
+        >
+          <button
+            type='button'
+            onClick={handleConfirmClick}
+            disabled={isPending}
+            className='w-full rounded-md border border-[#dce2e7] bg-[#f6f8fa] px-4 py-2 text-center text-sm font-semibold text-[#cf222e] transition-colors hover:bg-[#cf222e] hover:text-[#f6f8fa] disabled:cursor-not-allowed disabled:opacity-60'
+          >
+            Convert to draft
+          </button>
+        </Dialog.Footer>
+      </Dialog.Root>
+    </>
+  )
+}