Move "Move to different project" to sidebar34261-move-move-to-sidebar

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/34261

6 files changed, 149 insertions, 4 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.js b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
index 5a6e47e566e..77f070d48cc 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
@@ -36,7 +36,7 @@ export default {
       />
       <a
         v-if="editable"
-        class="edit-link pull-right"
+        class="js-sidebar-dropdown-toggle edit-link pull-right"
         href="#"
       >
         Edit
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
new file mode 100644
index 00000000000..1c15a1b877a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -0,0 +1,85 @@
+/* global Flash */
+
+function isValidProjectId(id) {
+  return id > 0;
+}
+
+class SidebarMoveIssue {
+  constructor(mediator, dropdownToggle, confirmButton) {
+    this.mediator = mediator;
+
+    this.$dropdownToggle = $(dropdownToggle);
+    this.$confirmButton = $(confirmButton);
+
+    this.onConfirmClickedWrapper = this.onConfirmClicked.bind(this);
+  }
+
+  init() {
+    this.initDropdown();
+    this.addEventListeners();
+  }
+
+  destroy() {
+    this.removeEventListeners();
+  }
+
+  initDropdown() {
+    this.$dropdownToggle.glDropdown({
+      search: {
+        fields: ['name_with_namespace'],
+      },
+      showMenuAbove: true,
+      selectable: true,
+      filterable: true,
+      filterRemote: true,
+      multiSelect: false,
+      // Keep the dropdown open after selecting an option
+      shouldPropagate: false,
+      data: (searchTerm, callback) => {
+        this.mediator.fetchAutocompleteProjects(searchTerm)
+          .then(callback)
+          .catch(() => new Flash('An error occured while fetching projects autocomplete.'));
+      },
+      renderRow: project => `
+        <li>
+          <a href="#" class="js-move-issue-dropdown-item">
+            ${project.name_with_namespace}
+          </a>
+        </li>
+      `,
+      clicked: (options) => {
+        const project = options.selectedObj;
+        const selectedProjectId = options.isMarking ? project.id : 0;
+        this.mediator.setMoveToProjectId(selectedProjectId);
+
+        this.$confirmButton.attr('disabled', !isValidProjectId(selectedProjectId));
+      },
+    });
+  }
+
+  addEventListeners() {
+    this.$confirmButton.on('click', this.onConfirmClickedWrapper);
+  }
+
+  removeEventListeners() {
+    this.$confirmButton.off('click', this.onConfirmClickedWrapper);
+  }
+
+  onConfirmClicked() {
+    if (isValidProjectId(this.mediator.store.moveToProjectId)) {
+      this.$confirmButton
+        .disable()
+        .addClass('is-loading');
+
+      this.mediator.moveIssue()
+        .catch(() => {
+          Flash('An error occured while moving the issue.');
+          this.$confirmButton
+            .enable()
+            .removeClass('is-loading');
+        });
+    }
+  }
+}
+
+export default SidebarMoveIssue;
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index 5a82d01dc41..604648407a4 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -4,9 +4,11 @@ import VueResource from 'vue-resource';
 Vue.use(VueResource);
 
 export default class SidebarService {
-  constructor(endpoint) {
+  constructor(endpointMap) {
     if (!SidebarService.singleton) {
-      this.endpoint = endpoint;
+      this.endpoint = endpointMap.endpoint;
+      this.moveIssueEndpoint = endpointMap.moveIssueEndpoint;
+      this.projectsAutocompleteEndpoint = endpointMap.projectsAutocompleteEndpoint;
 
       SidebarService.singleton = this;
     }
@@ -25,4 +27,18 @@ export default class SidebarService {
       emulateJSON: true,
     });
   }
+
+  getProjectsAutocomplete(searchTerm) {
+    return Vue.http.get(this.projectsAutocompleteEndpoint, {
+      params: {
+        search: searchTerm,
+      },
+    });
+  }
+
+  moveIssue(moveToProjectId) {
+    return Vue.http.post(this.moveIssueEndpoint, {
+      move_to_project_id: moveToProjectId,
+    });
+  }
 }
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index 9edded3ead6..3d8972050a9 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
 import sidebarAssignees from './components/assignees/sidebar_assignees';
 import confidential from './components/confidential/confidential_issue_sidebar.vue';
+import SidebarMoveIssue from './lib/sidebar_move_issue';
 
 import Mediator from './sidebar_mediator';
 
@@ -31,6 +32,12 @@ function domContentLoaded() {
         service: mediator.service,
       },
     }).$mount(confidentialEl);
+
+    new SidebarMoveIssue(
+      mediator,
+      $('.js-move-issue'),
+      $('.js-move-issue-confirmation-button'),
+    ).init();
   }
 
   new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 721e92221cf..e38a8db4cc5 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -7,7 +7,11 @@ export default class SidebarMediator {
   constructor(options) {
     if (!SidebarMediator.singleton) {
       this.store = new Store(options);
-      this.service = new Service(options.endpoint);
+      this.service = new Service({
+        endpoint: options.endpoint,
+        moveIssueEndpoint: options.moveIssueEndpoint,
+        projectsAutocompleteEndpoint: options.projectsAutocompleteEndpoint,
+      });
       SidebarMediator.singleton = this;
     }
 
@@ -26,6 +30,10 @@ export default class SidebarMediator {
     return this.service.update(field, selected.length === 0 ? [0] : selected);
   }
 
+  setMoveToProjectId(projectId) {
+    this.store.setMoveToProjectId(projectId);
+  }
+
   fetch() {
     this.service.get()
       .then(response => response.json())
@@ -35,4 +43,23 @@ export default class SidebarMediator {
       })
       .catch(() => new Flash('Error occured when fetching sidebar data'));
   }
+
+  fetchAutocompleteProjects(searchTerm) {
+    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(response => response.json())
+      .then((data) => {
+        if (location.pathname !== data.web_url) {
+          gl.utils.visitUrl(data.web_url);
+        }
+      });
+  }
 }
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index 3356dd0191f..cc04a2a3fcf 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -13,6 +13,8 @@ export default class SidebarStore {
       this.isFetching = {
         assignees: true,
       };
+      this.autocompleteProjects = [];
+      this.moveToProjectId = 0;
 
       SidebarStore.singleton = this;
     }
@@ -53,4 +55,12 @@ export default class SidebarStore {
   removeAllAssignees() {
     this.assignees = [];
   }
+
+  setAutocompleteProjects(projects) {
+    this.autocompleteProjects = projects;
+  }
+
+  setMoveToProjectId(moveToProjectId) {
+    this.moveToProjectId = moveToProjectId;
+  }
 }