AXON-1861: Disable merge button if PR is draft

src/react/atlascode/pullrequest/PullRequestHeader.tsx

@@ -1,8 +1,8 @@
 import { AppBar, Box, Link, Toolbar, Typography } from '@mui/material';
 import React from 'react';
 
+import { PullRequestHeaderActions } from './header-actions/PullRequestHeaderActions';
 import { PullRequestDetailsControllerApi, PullRequestDetailsState } from './pullRequestDetailsController';
-import { PullRequestHeaderActions } from './PullRequestHeaderActions';
 
 interface PullRequestHeaderProps {
     state: PullRequestDetailsState;

src/react/atlascode/pullrequest/ApproveButton.tsx → src/react/atlascode/pullrequest/header-actions/ApproveButton.tsx

@@ -2,7 +2,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { Box, Button, Typography } from '@mui/material';
 import React, { useCallback } from 'react';
 
-import { ApprovalStatus } from '../../../bitbucket/model';
+import { ApprovalStatus } from '../../../../bitbucket/model';
 
 type ApproveButtonProps = {
     hidden?: boolean;

src/react/atlascode/pullrequest/header-actions/MergeButton.tsx

@@ -0,0 +1,40 @@
+import { Button, Tooltip, Typography } from '@mui/material';
+import React from 'react';
+
+type MergeButtonProps = {
+    prState: string;
+    isMerging: boolean;
+    isDraft: boolean;
+    onClick: () => void;
+};
+
+export const MergeButton: React.FC<MergeButtonProps> = ({ prState, isMerging, isDraft, onClick }) => {
+    const isDisabled = prState !== 'OPEN' || isMerging || isDraft;
+    const buttonText = prState === 'OPEN' ? 'Merge' : 'Merged';
+
+    let tooltipText = ''; // do not show tooltip when enabled
+    if (isDraft) {
+        tooltipText = 'This is a draft pull request. Mark as "ready for review" to enable merging.';
+    } else if (prState !== 'OPEN') {
+        tooltipText = `Pull request has "${prState.toLowerCase()}" state and cannot be merged.`;
+    } else if (isMerging) {
+        tooltipText = 'Merging in progress';
+    }
+
+    return (
+        <Tooltip title={tooltipText}>
+            {/*
+            By default disabled elements like <button> do not trigger user interactions so a Tooltip will not activate on normal events like hover.
+            To accommodate disabled elements, add a simple wrapper element, such as a span.
+            https://mui.com/material-ui/react-tooltip/#disabled-elements
+            */}
+            <div>
+                <Button color="primary" variant="contained" onClick={onClick} disabled={isDisabled} title={tooltipText}>
+                    <Typography variant="button" noWrap>
+                        {buttonText}
+                    </Typography>
+                </Button>
+            </div>
+        </Tooltip>
+    );
+};

src/react/atlascode/pullrequest/MergeDialog.tsx → src/react/atlascode/pullrequest/header-actions/MergeDialog.tsx

@@ -21,10 +21,11 @@ import {
 import { makeStyles } from '@mui/styles';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { DetailedSiteInfo } from '../../../atlclients/authInfo';
-import { Commit, MergeStrategy, PullRequestData } from '../../../bitbucket/model';
-import { JiraTransitionMenu } from './JiraTransitionMenu';
-import { MergeChecks } from './MergeChecks';
+import { DetailedSiteInfo } from '../../../../atlclients/authInfo';
+import { Commit, MergeStrategy, PullRequestData } from '../../../../bitbucket/model';
+import { JiraTransitionMenu } from '../JiraTransitionMenu';
+import { MergeChecks } from '../MergeChecks';
+import { MergeButton } from './MergeButton';
 
 const useStyles = makeStyles((theme: Theme) => ({
     table: {
@@ -210,16 +211,12 @@ export const MergeDialog: React.FC<MergeDialogProps> = ({
     return (
         <Box>
             <Box hidden={loadState.basicData}>
-                <Button
-                    color={'primary'}
-                    variant={'contained'}
+                <MergeButton
+                    prState={prData.state}
+                    isMerging={isMerging}
+                    isDraft={prData.draft}
                     onClick={handleOpen}
-                    disabled={prData.state !== 'OPEN' || isMerging}
-                >
-                    <Typography variant={'button'} noWrap>
-                        {prData.state === 'OPEN' ? 'Merge' : 'Merged'}
-                    </Typography>
-                </Button>
+                ></MergeButton>
             </Box>
             <Box hidden={!loadState.basicData}>
                 <CircularProgress />

src/react/atlascode/pullrequest/PullRequestHeaderActions.tsx → src/react/atlascode/pullrequest/header-actions/PullRequestHeaderActions.tsx

@@ -2,12 +2,12 @@ import { RefreshButton } from '@atlassianlabs/guipi-core-components';
 import { Box } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { ApprovalStatus } from '../../../bitbucket/model';
-import { CopyLinkButton } from '../common/CopyLinkButton';
+import { ApprovalStatus } from '../../../../bitbucket/model';
+import { CopyLinkButton } from '../../common/CopyLinkButton';
+import { PullRequestDetailsControllerApi } from '../pullRequestDetailsController';
+import { PullRequestDetailsState } from '../pullRequestDetailsController';
 import { ApproveButton } from './ApproveButton';
 import { MergeDialog } from './MergeDialog';
-import { PullRequestDetailsControllerApi } from './pullRequestDetailsController';
-import { PullRequestDetailsState } from './pullRequestDetailsController';
 import { RequestChangesButton } from './RequestChangesButton';
 
 export interface PullRequestHeaderActionsProps {

src/react/atlascode/pullrequest/RequestChangesButton.tsx → src/react/atlascode/pullrequest/header-actions/RequestChangesButton.tsx

@@ -1,8 +1,8 @@
 import { Box, Button, Typography } from '@mui/material';
 import React, { useCallback } from 'react';
 
-import { ApprovalStatus } from '../../../bitbucket/model';
-import StoppedIcon from '../icons/StoppedIcon';
+import { ApprovalStatus } from '../../../../bitbucket/model';
+import StoppedIcon from '../../icons/StoppedIcon';
 type RequestChangesButtonProps = {
     hidden?: boolean;
     status: ApprovalStatus;