<script>import {SvgIcon} from '../svg.js';import {toggleElem} from '../utils/dom.js'; 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() {      if (this.mergeForm.allOverridableChecksOk) return 'primary';      return this.autoMergeWhenSucceed ? 'primary' : 'red';    },    forceMerge() {      return this.mergeForm.canMergeNow && !this.mergeForm.allOverridableChecksOk;    },  },  watch: {    mergeStyle(val) {      this.mergeStyleDetail = this.mergeForm.mergeStyles.find((e) => e.name === val);      for (const elem of document.querySelectorAll('[data-pull-merge-style]')) {        toggleElem(elem, elem.getAttribute('data-pull-merge-style') === val);      }    },  },  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><template>  <!--  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  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"}'  -->  <div>    <!-- eslint-disable-next-line vue/no-v-html -->    <div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/>     <!-- another similar form is in pull.tmpl (manual merge)-->    <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">       <template v-if="!mergeStyleDetail.hideMergeMessageTexts">        <div class="field">          <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue">        </div>        <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 tw-mt-1 tw-p-1 interact-fg" :data-tooltip-content="mergeForm.textClearMergeMessageHint">              {{ mergeForm.textClearMergeMessage }}            </button>          </template>        </div>      </template>       <div class="field" v-if="mergeStyle === 'manually-merged'">        <input type="text" name="merge_commit_id" :placeholder="mergeForm.textMergeCommitId">      </div>       <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 tw-ml-1" v-if="mergeForm.isPullBranchDeletable">        <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>     <div v-if="!showActionForm" class="tw-flex">      <!-- the merge button -->      <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">        <button class="ui button">          <svg-icon name="octicon-git-merge"/>          <span class="button-text">            {{ mergeStyleDetail.textDoMerge }}            <template v-if="autoMergeWhenSucceed">              {{ mergeForm.textAutoMergeButtonWhenSucceed }}            </template>          </span>        </button>        <div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">          <svg-icon name="octicon-triangle-down" :size="14"/>          <div class="menu" :class="{'show':showMergeStyleMenu}">            <template v-for="msd in mergeForm.mergeStyles">              <!-- 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>              </div>            </template>          </div>        </div>      </div>       <!-- the cancel auto merge button -->      <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="tw-ml-4">        <input type="hidden" name="_csrf" :value="csrfToken">        <button class="ui button">          {{ mergeForm.textAutoMergeCancelSchedule }}        </button>      </form>    </div>  </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;} /* 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.8rem;  flex: 1} .auto-merge-small {  width: 40px;  display: flex;  align-items: center;  justify-content: center;  position: relative;}.auto-merge-small .auto-merge-tip {  display: none;  left: 38px;  top: -1px;  bottom: -1px;  position: absolute;  align-items: center;  color: var(--color-info-text);  background-color: var(--color-info-bg);  border: 1px solid var(--color-info-border);  border-left: none;  padding-right: 1rem;} .auto-merge-small:hover {  color: var(--color-info-text);  background-color: var(--color-info-bg);  border: 1px solid var(--color-info-border);} .auto-merge-small:hover .auto-merge-tip {  display: flex;} </style>