diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue index ce592720531..c6cc04a139f 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue @@ -67,14 +67,18 @@ export default { saveAssignees() { this.loading = true; + function setLoadingFalse() { + this.loading = false; + } + this.mediator .saveAssignees(this.field) + .then(setLoadingFalse.bind(this)) .then(() => { - this.loading = false; refreshUserMergeRequestCounts(); }) .catch(() => { - this.loading = false; + setLoadingFalse(); return new Flash(__('Error occurred when saving assignees')); }); }, diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js index feb08e3acaf..cbe20f761ff 100644 --- a/app/assets/javascripts/sidebar/services/sidebar_service.js +++ b/app/assets/javascripts/sidebar/services/sidebar_service.js @@ -1,4 +1,7 @@ -import axios from '~/lib/utils/axios_utils'; +import Vue from 'vue'; +import VueResource from 'vue-resource'; + +Vue.use(VueResource); export default class SidebarService { constructor(endpointMap) { @@ -15,15 +18,23 @@ export default class SidebarService { } get() { - return axios.get(this.endpoint); + return Vue.http.get(this.endpoint); } update(key, data) { - return axios.put(this.endpoint, { [key]: data }); + return Vue.http.put( + this.endpoint, + { + [key]: data, + }, + { + emulateJSON: true, + }, + ); } getProjectsAutocomplete(searchTerm) { - return axios.get(this.projectsAutocompleteEndpoint, { + return Vue.http.get(this.projectsAutocompleteEndpoint, { params: { search: searchTerm, }, @@ -31,11 +42,11 @@ export default class SidebarService { } toggleSubscription() { - return axios.post(this.toggleSubscriptionEndpoint); + return Vue.http.post(this.toggleSubscriptionEndpoint); } moveIssue(moveToProjectId) { - return axios.post(this.moveIssueEndpoint, { + return Vue.http.post(this.moveIssueEndpoint, { move_to_project_id: moveToProjectId, }); } diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js index 4a7000cbbda..643fe6c00b6 100644 --- a/app/assets/javascripts/sidebar/sidebar_mediator.js +++ b/app/assets/javascripts/sidebar/sidebar_mediator.js @@ -32,10 +32,7 @@ export default class SidebarMediator { // If there are no ids, that means we have to unassign (which is id = 0) // And it only accepts an array, hence [0] - const assignees = selected.length === 0 ? [0] : selected; - const data = { assignee_ids: assignees }; - - return this.service.update(field, data); + return this.service.update(field, selected.length === 0 ? [0] : selected); } setMoveToProjectId(projectId) { @@ -45,7 +42,8 @@ export default class SidebarMediator { fetch() { return this.service .get() - .then(({ data }) => { + .then(response => response.json()) + .then(data => { this.processFetchedData(data); }) .catch(() => new Flash(__('Error occurred when fetching sidebar data'))); @@ -73,17 +71,23 @@ export default class SidebarMediator { } fetchAutocompleteProjects(searchTerm) { - return this.service.getProjectsAutocomplete(searchTerm).then(({ data }) => { - this.store.setAutocompleteProjects(data); - return this.store.autocompleteProjects; - }); + return this.service + .getProjectsAutocomplete(searchTerm) + .then(response => response.json()) + .then(data => { + this.store.setAutocompleteProjects(data); + return this.store.autocompleteProjects; + }); } moveIssue() { - return this.service.moveIssue(this.store.moveToProjectId).then(({ data }) => { - if (window.location.pathname !== data.web_url) { - visitUrl(data.web_url); - } - }); + return this.service + .moveIssue(this.store.moveToProjectId) + .then(response => response.json()) + .then(data => { + if (window.location.pathname !== data.web_url) { + visitUrl(data.web_url); + } + }); } } diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml index dfb0e7ed297..1dc538826dc 100644 --- a/app/views/shared/issuable/_sidebar_assignees.html.haml +++ b/app/views/shared/issuable/_sidebar_assignees.html.haml @@ -1,7 +1,7 @@ - issuable_type = issuable_sidebar[:type] - signed_in = !!issuable_sidebar.dig(:current_user, :id) -#js-vue-sidebar-assignees{ data: { field: "#{issuable_type}", signed_in: signed_in } } +#js-vue-sidebar-assignees{ data: { field: "#{issuable_type}[assignee_ids]", signed_in: signed_in } } .title.hide-collapsed = _('Assignee') = icon('spinner spin') diff --git a/changelogs/unreleased/remove-vue-resource-from-sidebar-service.yml b/changelogs/unreleased/remove-vue-resource-from-sidebar-service.yml deleted file mode 100644 index f86e0a4259f..00000000000 --- a/changelogs/unreleased/remove-vue-resource-from-sidebar-service.yml +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Remove vue resource from sidebar service -merge_request: 32400 -author: Lee Tickett -type: other diff --git a/spec/javascripts/sidebar/mock_data.js b/spec/javascripts/sidebar/mock_data.js index 3ee97b978fd..7f20b0da991 100644 --- a/spec/javascripts/sidebar/mock_data.js +++ b/spec/javascripts/sidebar/mock_data.js @@ -210,4 +210,14 @@ const mockData = { }, }; +mockData.sidebarMockInterceptor = function(request, next) { + const body = this.responseMap[request.method.toUpperCase()][request.url]; + + next( + request.respondWith(JSON.stringify(body), { + status: 200, + }), + ); +}.bind(mockData); + export default mockData; diff --git a/spec/javascripts/sidebar/sidebar_mediator_spec.js b/spec/javascripts/sidebar/sidebar_mediator_spec.js index 2e5845cd847..6c69c08e733 100644 --- a/spec/javascripts/sidebar/sidebar_mediator_spec.js +++ b/spec/javascripts/sidebar/sidebar_mediator_spec.js @@ -1,16 +1,13 @@ -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; +import _ from 'underscore'; +import Vue from 'vue'; import SidebarMediator from '~/sidebar/sidebar_mediator'; import SidebarStore from '~/sidebar/stores/sidebar_store'; import SidebarService from '~/sidebar/services/sidebar_service'; import Mock from './mock_data'; describe('Sidebar mediator', function() { - let mock; - beforeEach(() => { - mock = new MockAdapter(axios); - + Vue.http.interceptors.push(Mock.sidebarMockInterceptor); this.mediator = new SidebarMediator(Mock.mediator); }); @@ -18,7 +15,7 @@ describe('Sidebar mediator', function() { SidebarService.singleton = null; SidebarStore.singleton = null; SidebarMediator.singleton = null; - mock.restore(); + Vue.http.interceptors = _.without(Vue.http.interceptors, Mock.sidebarMockInterceptor); }); it('assigns yourself ', () => { @@ -29,7 +26,6 @@ describe('Sidebar mediator', function() { }); it('saves assignees', done => { - mock.onPut('/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras').reply(200, {}); this.mediator .saveAssignees('issue[assignee_ids]') .then(resp => { @@ -42,9 +38,6 @@ describe('Sidebar mediator', function() { it('fetches the data', done => { const mockData = Mock.responseMap.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras']; - mock - .onGet('/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras') - .reply(200, mockData); spyOn(this.mediator, 'processFetchedData').and.callThrough(); this.mediator @@ -81,7 +74,6 @@ describe('Sidebar mediator', function() { it('fetches autocomplete projects', done => { const searchTerm = 'foo'; - mock.onGet('/autocomplete/projects?project_id=15').reply(200, {}); spyOn(this.mediator.service, 'getProjectsAutocomplete').and.callThrough(); spyOn(this.mediator.store, 'setAutocompleteProjects').and.callThrough(); @@ -96,9 +88,7 @@ describe('Sidebar mediator', function() { }); it('moves issue', done => { - const mockData = Mock.responseMap.POST['/gitlab-org/gitlab-shell/issues/5/move']; const moveToProjectId = 7; - mock.onPost('/gitlab-org/gitlab-shell/issues/5/move').reply(200, mockData); this.mediator.store.setMoveToProjectId(moveToProjectId); spyOn(this.mediator.service, 'moveIssue').and.callThrough(); const visitUrl = spyOnDependency(SidebarMediator, 'visitUrl'); @@ -115,7 +105,6 @@ describe('Sidebar mediator', function() { it('toggle subscription', done => { this.mediator.store.setSubscribedState(false); - mock.onPost('/gitlab-org/gitlab-shell/issues/5/toggle_subscription').reply(200, {}); spyOn(this.mediator.service, 'toggleSubscription').and.callThrough(); this.mediator diff --git a/spec/javascripts/sidebar/sidebar_move_issue_spec.js b/spec/javascripts/sidebar/sidebar_move_issue_spec.js index ec712450f2e..230e0a933a9 100644 --- a/spec/javascripts/sidebar/sidebar_move_issue_spec.js +++ b/spec/javascripts/sidebar/sidebar_move_issue_spec.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; +import _ from 'underscore'; +import Vue from 'vue'; import SidebarMediator from '~/sidebar/sidebar_mediator'; import SidebarStore from '~/sidebar/stores/sidebar_store'; import SidebarService from '~/sidebar/services/sidebar_service'; @@ -8,12 +8,8 @@ import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue'; import Mock from './mock_data'; describe('SidebarMoveIssue', function() { - let mock; - beforeEach(() => { - mock = new MockAdapter(axios); - const mockData = Mock.responseMap.GET['/autocomplete/projects?project_id=15']; - mock.onGet('/autocomplete/projects?project_id=15').reply(200, mockData); + Vue.http.interceptors.push(Mock.sidebarMockInterceptor); this.mediator = new SidebarMediator(Mock.mediator); this.$content = $(`
@@ -41,7 +37,8 @@ describe('SidebarMoveIssue', function() { SidebarMediator.singleton = null; this.sidebarMoveIssue.destroy(); - mock.restore(); + + Vue.http.interceptors = _.without(Vue.http.interceptors, Mock.sidebarMockInterceptor); }); describe('init', () => {