2023-09-02 17:59:07 +03:00
< script >
import { SvgIcon } from '../svg.js' ;
2023-10-25 18:01:31 +03:00
import { toggleElem } from '../utils/dom.js' ;
2023-09-02 17:59:07 +03:00
const { csrfToken , pageData } = window . config ;
export default {
components : { SvgIcon } ,
data : ( ) => ( {
csrfToken ,
mergeForm : pageData . pullRequestMergeForm ,
mergeTitleFieldValue : '' ,
mergeMessageFieldValue : '' ,
deleteBranchAfterMerge : false ,
autoMergeWhenSucceed : false ,
mergeStyle : '' ,
mergeStyleDetail : { // dummy only, these values will come from one of the mergeForm.mergeStyles
hideMergeMessageTexts : false ,
textDoMerge : '' ,
mergeTitleFieldText : '' ,
mergeMessageFieldText : '' ,
hideAutoMerge : false ,
} ,
mergeStyleAllowedCount : 0 ,
showMergeStyleMenu : false ,
showActionForm : false ,
} ) ,
computed : {
mergeButtonStyleClass ( ) {
2023-09-19 01:05:31 +03:00
if ( this . mergeForm . allOverridableChecksOk ) return 'primary' ;
return this . autoMergeWhenSucceed ? 'primary' : 'red' ;
2023-09-02 17:59:07 +03:00
} ,
forceMerge ( ) {
return this . mergeForm . canMergeNow && ! this . mergeForm . allOverridableChecksOk ;
} ,
} ,
watch : {
mergeStyle ( val ) {
this . mergeStyleDetail = this . mergeForm . mergeStyles . find ( ( e ) => e . name === val ) ;
2023-10-25 18:01:31 +03:00
for ( const elem of document . querySelectorAll ( '[data-pull-merge-style]' ) ) {
toggleElem ( elem , elem . getAttribute ( 'data-pull-merge-style' ) === val ) ;
}
2023-09-02 17:59:07 +03:00
}
} ,
created ( ) {
this . mergeStyleAllowedCount = this . mergeForm . mergeStyles . reduce ( ( v , msd ) => v + ( msd . allowed ? 1 : 0 ) , 0 ) ;
let mergeStyle = this . mergeForm . mergeStyles . find ( ( e ) => e . allowed && e . name === this . mergeForm . defaultMergeStyle ) ? . name ;
if ( ! mergeStyle ) mergeStyle = this . mergeForm . mergeStyles . find ( ( e ) => e . allowed ) ? . name ;
this . switchMergeStyle ( mergeStyle , ! this . mergeForm . canMergeNow ) ;
} ,
mounted ( ) {
document . addEventListener ( 'mouseup' , this . hideMergeStyleMenu ) ;
} ,
unmounted ( ) {
document . removeEventListener ( 'mouseup' , this . hideMergeStyleMenu ) ;
} ,
methods : {
hideMergeStyleMenu ( ) {
this . showMergeStyleMenu = false ;
} ,
toggleActionForm ( show ) {
this . showActionForm = show ;
if ( ! show ) return ;
this . deleteBranchAfterMerge = this . mergeForm . defaultDeleteBranchAfterMerge ;
this . mergeTitleFieldValue = this . mergeStyleDetail . mergeTitleFieldText ;
this . mergeMessageFieldValue = this . mergeStyleDetail . mergeMessageFieldText ;
} ,
switchMergeStyle ( name , autoMerge = false ) {
this . mergeStyle = name ;
this . autoMergeWhenSucceed = autoMerge ;
} ,
clearMergeMessage ( ) {
this . mergeMessageFieldValue = this . mergeForm . defaultMergeMessage ;
} ,
} ,
} ;
< / script >
2022-05-12 16:39:02 +03:00
< template >
2022-06-11 17:44:20 +03:00
<!--
2022-10-09 10:17:01 +03:00
if this component is shown , either the user is an admin ( can do a merge without checks ) , or they are a writer who has the permission to do a merge
if the user is a writer and can ' t do a merge now ( canMergeNow == false ) , then only show the Auto Merge for them
2022-06-11 17:44:20 +03:00
How to test the UI manually :
* Method 1 : manually set some variables in pull . tmpl , eg : { { $notAllOverridableChecksOk = true } } { { $canMergeNow = false } }
* Method 2 : make a protected branch , then set state = pending / success :
curl - X POST $ { root _url } / api / v1 / repos / $ { owner } / $ { repo } / statuses / $ { sha } \
- H "accept: application/json" - H "authorization: Basic $base64_auth" - H "Content-Type: application/json" \
- d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}'
-- >
2022-05-12 16:39:02 +03:00
< div >
2023-03-14 12:51:20 +03:00
<!-- eslint - disable - next - line vue / no - v - html -- >
< div v -if = " mergeForm.hasPendingPullRequestMerge " v -html = " mergeForm.hasPendingPullRequestMergeTip " class = "ui info message" / >
2022-06-11 17:44:20 +03:00
2024-03-22 14:17:30 +03:00
<!-- another similar form is in pull . tmpl ( manual merge ) -- >
2024-01-15 01:00:47 +03:00
< form class = "ui form form-fetch-action" v-if ="showActionForm" :action="mergeForm.baseLink+'/merge'" method="post" >
< input type = "hidden" name = "_csrf" :value ="csrfToken" >
< input type = "hidden" name = "head_commit_id" v-model ="mergeForm.pullHeadCommitID" >
< input type = "hidden" name = "merge_when_checks_succeed" v-model ="autoMergeWhenSucceed" >
< input type = "hidden" name = "force_merge" v-model ="forceMerge" >
2022-05-12 16:39:02 +03:00
2024-01-15 01:00:47 +03:00
< template v-if ="!mergeStyleDetail.hideMergeMessageTexts" >
< div class = "field" >
< input type = "text" name = "merge_title_field" v-model ="mergeTitleFieldValue" >
2023-02-21 13:03:41 +03:00
< / div >
2024-01-15 01:00:47 +03:00
< div class = "field" >
< textarea name = "merge_message_field" rows = "5" :placeholder ="mergeForm.mergeMessageFieldPlaceHolder" v -model = " mergeMessageFieldValue " / >
< template v-if ="mergeMessageFieldValue !== mergeForm.defaultMergeMessage" >
< button @click.prevent ="clearMergeMessage" class = "btn gt-mt-2 gt-p-2 interact-fg" :data-tooltip-content ="mergeForm.textClearMergeMessageHint" >
{ { mergeForm . textClearMergeMessage } }
< / button >
2022-06-11 17:44:20 +03:00
< / template >
2024-01-15 01:00:47 +03:00
< / div >
< / template >
2022-05-12 16:39:02 +03:00
2024-01-15 01:00:47 +03:00
< div class = "field" v-if ="mergeStyle === 'manually-merged'" >
< input type = "text" name = "merge_commit_id" :placeholder ="mergeForm.textMergeCommitId" >
< / div >
2022-05-12 16:39:02 +03:00
2024-01-15 01:00:47 +03:00
< button class = "ui button" :class ="mergeButtonStyleClass" type = "submit" name = "do" :value ="mergeStyle" >
{ { mergeStyleDetail . textDoMerge } }
< template v-if ="autoMergeWhenSucceed" >
{ { mergeForm . textAutoMergeButtonWhenSucceed } }
< / template >
< / button >
< button class = "ui button merge-cancel" @click ="toggleActionForm(false)" >
{ { mergeForm . textCancel } }
< / button >
< div class = "ui checkbox gt-ml-2" v-if ="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed" >
< input name = "delete_branch_after_merge" type = "checkbox" v-model ="deleteBranchAfterMerge" id="delete-branch-after-merge" >
< label for = "delete-branch-after-merge" > { { mergeForm . textDeleteBranch } } < / label >
< / div >
< / form >
2022-05-12 16:39:02 +03:00
2024-03-22 16:45:10 +03:00
< div v-if ="!showActionForm" class="tw-flex" >
2022-06-11 17:44:20 +03:00
<!-- the merge button -- >
2023-09-19 01:05:31 +03:00
< div class = "ui buttons merge-button" : class = "[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click ="toggleActionForm(true)" >
2022-05-12 16:39:02 +03:00
< button class = "ui button" >
< svg -icon name = "octicon-git-merge" / >
2022-06-11 17:44:20 +03:00
< span class = "button-text" >
{ { mergeStyleDetail . textDoMerge } }
< template v-if ="autoMergeWhenSucceed" >
{ { mergeForm . textAutoMergeButtonWhenSucceed } }
< / template >
< / span >
2022-05-12 16:39:02 +03:00
< / button >
2023-06-14 19:40:15 +03:00
< div class = "ui dropdown icon button" @ click.stop = " showMergeStyleMenu = ! showMergeStyleMenu " v-if ="mergeStyleAllowedCount>1" >
2022-05-12 16:39:02 +03:00
< svg -icon name = "octicon-triangle-down" :size ="14" / >
< div class = "menu" :class ="{'show':showMergeStyleMenu}" >
< template v-for ="msd in mergeForm.mergeStyles" >
2022-06-11 17:44:20 +03:00
<!-- if can merge now , show one action "merge now" , and an action "auto merge when succeed" -- >
< div class = "item" v-if ="msd.allowed && mergeForm.canMergeNow" :key="msd.name" @click.stop="switchMergeStyle(msd.name)" >
< div class = "action-text" >
{ { msd . textDoMerge } }
< / div >
< div v-if ="!msd.hideAutoMerge" class="auto-merge-small" @click.stop="switchMergeStyle(msd.name, true)" >
< svg -icon name = "octicon-clock" :size ="14" / >
< div class = "auto-merge-tip" >
{ { mergeForm . textAutoMergeWhenSucceed } }
< / div >
< / div >
< / div >
<!-- if can NOT merge now , only show one action "auto merge when succeed" -- >
< div class = "item" v-if ="msd.allowed && !mergeForm.canMergeNow && !msd.hideAutoMerge" :key="msd.name" @click.stop="switchMergeStyle(msd.name, true)" >
< div class = "action-text" >
{ { msd . textDoMerge } } { { mergeForm . textAutoMergeButtonWhenSucceed } }
< / div >
2022-05-12 16:39:02 +03:00
< / div >
< / template >
< / div >
< / div >
< / div >
2022-06-11 17:44:20 +03:00
<!-- the cancel auto merge button -- >
2023-02-13 20:59:59 +03:00
< form v-if ="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="gt-ml-4" >
2022-06-11 17:44:20 +03:00
< input type = "hidden" name = "_csrf" :value ="csrfToken" >
< button class = "ui button" >
{ { mergeForm . textAutoMergeCancelSchedule } }
< / button >
< / form >
< / div >
2022-05-12 16:39:02 +03:00
< / div >
< / template >
< style scoped >
/* to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles */
. ui . dropdown . menu . show {
display : block ;
}
. ui . checkbox label {
cursor : pointer ;
}
2022-06-11 17:44:20 +03:00
/* make the dropdown list left-aligned */
. ui . merge - button {
position : relative ;
}
. ui . merge - button . ui . dropdown {
position : static ;
}
. ui . merge - button > . ui . dropdown : last - child > . menu : not ( . left ) {
left : 0 ;
right : auto ;
}
. ui . merge - button . ui . dropdown . menu > . item {
display : flex ;
align - items : stretch ;
padding : 0 ! important ; /* polluted by semantic.css: .ui.dropdown .menu > .item { !important } */
}
/* merge style list item */
. action - text {
padding : 0.8 rem ;
flex : 1
}
. auto - merge - small {
width : 40 px ;
display : flex ;
align - items : center ;
justify - content : center ;
position : relative ;
}
. auto - merge - small . auto - merge - tip {
display : none ;
left : 38 px ;
top : - 1 px ;
bottom : - 1 px ;
position : absolute ;
align - items : center ;
color : var ( -- color - info - text ) ;
background - color : var ( -- color - info - bg ) ;
border : 1 px solid var ( -- color - info - border ) ;
border - left : none ;
padding - right : 1 rem ;
}
. auto - merge - small : hover {
color : var ( -- color - info - text ) ;
background - color : var ( -- color - info - bg ) ;
border : 1 px solid var ( -- color - info - border ) ;
}
. auto - merge - small : hover . auto - merge - tip {
display : flex ;
}
2022-05-12 16:39:02 +03:00
< / style >