diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/merge_requests')
4 files changed, 101 insertions, 6 deletions
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js index 1a0fa6e544e..8d152ec4ba6 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js @@ -1,7 +1,7 @@ import $ from 'jquery'; -import initCompareAutocomplete from '~/compare_autocomplete'; import axios from '~/lib/utils/axios_utils'; import { localTimeAgo } from '~/lib/utils/datetime_utility'; +import initCompareAutocomplete from './compare_autocomplete'; import initTargetProjectDropdown from './target_project_dropdown'; const updateCommitList = (url, $loadingIndicator, $commitList, params) => { diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js new file mode 100644 index 00000000000..68ab7021cf3 --- /dev/null +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js @@ -0,0 +1,82 @@ +/* eslint-disable func-names */ + +import $ from 'jquery'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; +import { deprecatedCreateFlash as flash } from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; +import { __ } from '~/locale'; +import { fixTitle } from '~/tooltips'; + +export default function initCompareAutocomplete(limitTo = null, clickHandler = () => {}) { + $('.js-compare-dropdown').each(function () { + const $dropdown = $(this); + const selected = $dropdown.data('selected'); + const $dropdownContainer = $dropdown.closest('.dropdown'); + const $fieldInput = $(`input[name="${$dropdown.data('fieldName')}"]`, $dropdownContainer); + const $filterInput = $('input[type="search"]', $dropdownContainer); + initDeprecatedJQueryDropdown($dropdown, { + data(term, callback) { + const params = { + ref: $dropdown.data('ref'), + search: term, + }; + + if (limitTo) { + params.find = limitTo; + } + + axios + .get($dropdown.data('refsUrl'), { + params, + }) + .then(({ data }) => { + if (limitTo) { + callback(data[capitalizeFirstCharacter(limitTo)] || []); + } else { + callback(data); + } + }) + .catch(() => flash(__('Error fetching refs'))); + }, + selectable: true, + filterable: true, + filterRemote: Boolean($dropdown.data('refsUrl')), + fieldName: $dropdown.data('fieldName'), + filterInput: 'input[type="search"]', + renderRow(ref) { + const link = $('<a />') + .attr('href', '#') + .addClass(ref === selected ? 'is-active' : '') + .text(ref) + .attr('data-ref', ref); + if (ref.header != null) { + return $('<li />').addClass('dropdown-header').text(ref.header); + } + return $('<li />').append(link); + }, + id(obj, $el) { + return $el.attr('data-ref'); + }, + toggleLabel(obj, $el) { + return $el.text().trim(); + }, + clicked: () => clickHandler($dropdown), + }); + $filterInput.on('keyup', (e) => { + const keyCode = e.keyCode || e.which; + if (keyCode !== 13) return; + const text = $filterInput.val(); + $fieldInput.val(text); + $('.dropdown-toggle-text', $dropdown).text(text); + $dropdownContainer.removeClass('open'); + }); + + $dropdownContainer.on('click', '.dropdown-content a', (e) => { + $dropdown.prop('title', e.target.text.replace(/_+?/g, '-')); + if ($dropdown.hasClass('has-tooltip')) { + fixTitle($dropdown); + } + }); + }); +} diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js index a5118e3529a..6cd3202815b 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js +++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js @@ -1,16 +1,17 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import loadAwardsHandler from '~/awards_handler'; import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; import initIssuableSidebar from '~/init_issuable_sidebar'; -import initInviteMemberModal from '~/invite_member/init_invite_member_modal'; -import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; +import StatusBox from '~/issuable/components/status_box.vue'; +import createDefaultClient from '~/lib/graphql'; import { handleLocationHash } from '~/lib/utils/common_utils'; -import StatusBox from '~/merge_request/components/status_box.vue'; import initSourcegraph from '~/sourcegraph'; import ZenMode from '~/zen_mode'; +import getStateQuery from './queries/get_state.query.graphql'; export default function initMergeRequestShow() { const awardEmojiEl = document.getElementById('js-vue-awards-block'); @@ -28,15 +29,20 @@ export default function initMergeRequestShow() { } else { loadAwardsHandler(); } - initInviteMemberModal(); - initInviteMemberTrigger(); initInviteMembersModal(); initInviteMembersTrigger(); const el = document.querySelector('.js-mr-status-box'); + const apolloProvider = new VueApollo({ defaultClient: createDefaultClient() }); // eslint-disable-next-line no-new new Vue({ el, + apolloProvider, + provide: { + query: getStateQuery, + projectPath: el.dataset.projectPath, + iid: el.dataset.iid, + }, render(h) { return h(StatusBox, { props: { diff --git a/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql b/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql new file mode 100644 index 00000000000..b5a82b9428e --- /dev/null +++ b/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql @@ -0,0 +1,7 @@ +query getMergeRequestState($projectPath: ID!, $iid: String!) { + workspace: project(fullPath: $projectPath) { + issuable: mergeRequest(iid: $iid) { + state + } + } +} |