-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Use Vue to refactor pull merge UI #19650
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 4 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
4d9e9b1
Use Vue to refactor pull merge UI
wxiaoguang 2d087d3
Merge branch 'main' into refactor-pull-merge-ui
6543 1f3d579
add comments
wxiaoguang 0c3d090
fix comments
wxiaoguang 3726a48
small fine tune
wxiaoguang 8fd26a7
fix tests
wxiaoguang 4c89a10
Merge branch 'main' into refactor-pull-merge-ui
wxiaoguang b460a35
adopt new pull default messages
wxiaoguang d79d309
Merge branch 'main' into refactor-pull-merge-ui
wxiaoguang ed4011e
clean up
wxiaoguang cdc11e3
Merge branch 'main' into refactor-pull-merge-ui
6543 dfd8f3d
Merge branch 'main' into refactor-pull-merge-ui
6543 11df652
Merge branch 'master' into refactor-pull-merge-ui
6543 a039deb
Merge branch 'main' into refactor-pull-merge-ui
6543 176f9a8
Merge branch 'main' into refactor-pull-merge-ui
6543 bba6806
Merge branch 'main' into refactor-pull-merge-ui
6543 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <template> | ||
| <div> | ||
| <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"> | ||
|
|
||
| <template v-if="!mergeStyleDetail.hideMergeMessage"> | ||
| <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"/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <button class="ui green button" type="submit" name="do" :value="mergeStyle"> | ||
| {{ mergeStyleDetail.textDoMerge }} | ||
| </button> | ||
|
|
||
| <button class="ui button merge-cancel" @click="showActionForm=false"> | ||
| {{ mergeForm.textCancel }} | ||
| </button> | ||
|
|
||
| <div class="ui checkbox" 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> | ||
|
|
||
| <div v-if="!showActionForm"> | ||
| <div class="ui buttons merge-button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" @click="showActionForm=true"> | ||
| <button class="ui button"> | ||
| <svg-icon name="octicon-git-merge"/> | ||
| <span class="button-text">{{ mergeStyleDetail.textDoMerge }}</span> | ||
| </button> | ||
| <div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1"> | ||
| <svg-icon name="octicon-triangle-down" :size="14"/> | ||
| <div class="menu" :class="{'show':showMergeStyleMenu}"> | ||
wxiaoguang marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <template v-for="msd in mergeForm.mergeStyles"> | ||
| <div class="item" v-if="msd.allowed" :key="msd.name" @click.stop="mergeStyle=msd.name"> | ||
| {{ msd.textDoMerge }} | ||
| </div> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import {SvgIcon} from '../svg.js'; | ||
|
|
||
| const {csrfToken, pageData} = window.config; | ||
|
|
||
| export default { | ||
| name: 'PullRequestMergeForm', | ||
| components: { | ||
| SvgIcon, | ||
| }, | ||
|
|
||
| data: () => ({ | ||
| csrfToken, | ||
| mergeForm: pageData.pullRequestMergeForm, | ||
|
|
||
| mergeTitleFieldValue: '', | ||
| mergeMessageFieldValue: '', | ||
| deleteBranchAfterMerge: false, | ||
|
|
||
| mergeStyle: '', | ||
| mergeStyleDetail: { // dummy only, these values will come from one of the mergeForm.mergeStyles | ||
| hideMergeMessage: false, | ||
| textDoMerge: '', | ||
| }, | ||
| mergeStyleAllowedCount: 0, | ||
|
|
||
| showMergeStyleMenu: false, | ||
| showActionForm: false, | ||
| }), | ||
|
|
||
| watch: { | ||
| mergeStyle(val) { | ||
| for (const msd of this.mergeForm.mergeStyles) { | ||
| if (val === msd.name) { | ||
| this.mergeStyleDetail = msd; | ||
| } | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| created() { | ||
| for (const msd of this.mergeForm.mergeStyles) { | ||
| if (msd.allowed) { | ||
| if (!this.mergeStyle) this.mergeStyle = msd.name; | ||
| this.mergeStyleAllowedCount++; | ||
| } | ||
| } | ||
| this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge; | ||
| this.mergeTitleFieldValue = this.mergeForm.mergeTitleFieldText; | ||
| this.mergeMessageFieldValue = this.mergeForm.mergeMessageFieldText; | ||
| }, | ||
|
|
||
| mounted() { | ||
| document.addEventListener('mouseup', this.hideMergeStyleMenu); | ||
| }, | ||
|
|
||
| unmounted() { | ||
| document.removeEventListener('mouseup', this.hideMergeStyleMenu); | ||
| }, | ||
|
|
||
| methods: { | ||
| hideMergeStyleMenu() { | ||
| this.showMergeStyleMenu = false; | ||
| } | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <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; | ||
| } | ||
| </style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import Vue from 'vue'; | ||
| import PullRequestMergeForm from '../components/PullRequestMergeForm.vue'; | ||
|
|
||
| export default function initPullRequestMergeForm() { | ||
| const el = document.getElementById('pull-request-merge-form'); | ||
| if (!el) return; | ||
|
|
||
| const View = Vue.extend({ | ||
| render: (createElement) => createElement(PullRequestMergeForm, {props: {}}), | ||
| }); | ||
| new View().$mount(el); | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.