mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 05:18:25 +00:00 
			
		
		
		
	Modernize merge button (#28140)
- Make use of the `form-fetch-action` for the merge button, which will automatically prevent the action from happening multiple times and show a nice loading indicator as user feedback while the merge request is being processed by the server. - Adjust the merge PR code to JSON response as this is required for the `form-fetch-action` functionality. - Resolves https://codeberg.org/forgejo/forgejo/issues/774 - Likely resolves the cause of https://codeberg.org/forgejo/forgejo/issues/1688#issuecomment-1313044 (cherry picked from commit 4ec64c19507caefff7ddaad722b1b5792b97cc5a) Co-authored-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
		@@ -94,48 +94,46 @@ export default {
 | 
			
		||||
    <!-- eslint-disable-next-line vue/no-v-html -->
 | 
			
		||||
    <div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/>
 | 
			
		||||
 | 
			
		||||
    <div class="ui form" v-if="showActionForm">
 | 
			
		||||
      <form :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">
 | 
			
		||||
    <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 gt-mt-2 gt-p-2 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">
 | 
			
		||||
      <template v-if="!mergeStyleDetail.hideMergeMessageTexts">
 | 
			
		||||
        <div class="field">
 | 
			
		||||
          <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue">
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
 | 
			
		||||
          {{ mergeStyleDetail.textDoMerge }}
 | 
			
		||||
          <template v-if="autoMergeWhenSucceed">
 | 
			
		||||
            {{ mergeForm.textAutoMergeButtonWhenSucceed }}
 | 
			
		||||
        <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>
 | 
			
		||||
          </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>
 | 
			
		||||
    </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 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>
 | 
			
		||||
 | 
			
		||||
    <div v-if="!showActionForm" class="gt-df">
 | 
			
		||||
      <!-- the merge button -->
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user