diff --git a/src/react/atlascode/pullrequest/PullRequestHeader.tsx b/src/react/atlascode/pullrequest/PullRequestHeader.tsx index 23d34305a..4a6122d75 100644 --- a/src/react/atlascode/pullrequest/PullRequestHeader.tsx +++ b/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; diff --git a/src/react/atlascode/pullrequest/ApproveButton.tsx b/src/react/atlascode/pullrequest/header-actions/ApproveButton.tsx similarity index 94% rename from src/react/atlascode/pullrequest/ApproveButton.tsx rename to src/react/atlascode/pullrequest/header-actions/ApproveButton.tsx index b11284a19..6b924e0de 100644 --- a/src/react/atlascode/pullrequest/ApproveButton.tsx +++ b/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; diff --git a/src/react/atlascode/pullrequest/header-actions/MergeButton.tsx b/src/react/atlascode/pullrequest/header-actions/MergeButton.tsx new file mode 100644 index 000000000..5373dc8e4 --- /dev/null +++ b/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 = ({ 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 ( + + {/* + By default disabled elements like + + + ); +}; diff --git a/src/react/atlascode/pullrequest/MergeDialog.tsx b/src/react/atlascode/pullrequest/header-actions/MergeDialog.tsx similarity index 95% rename from src/react/atlascode/pullrequest/MergeDialog.tsx rename to src/react/atlascode/pullrequest/header-actions/MergeDialog.tsx index fcddac333..23f5a94dc 100644 --- a/src/react/atlascode/pullrequest/MergeDialog.tsx +++ b/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 = ({ return (