Add latest changes from gitlab-org/gitlab@master

5 files changed, 103 insertions, 98 deletions

diff --git a/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue b/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue
index 02323e5a0c6..9f64ddc8721 100644
--- a/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue
+++ b/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue
@@ -206,7 +206,7 @@ export default {
             category="primary"
             variant="confirm"
             :disabled="!Boolean(selectedProject)"
-            class="gl-text-center! issuable-move-button"
+            class="gl-w-full issuable-move-button"
             @click="handleMoveClick"
             >{{ __('Move') }}</gl-button
           >
diff --git a/app/assets/javascripts/sidebar/components/move/move_issue_button.vue b/app/assets/javascripts/sidebar/components/move/move_issue_button.vue
new file mode 100644
index 00000000000..e1259fad6a7
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/move/move_issue_button.vue
@@ -0,0 +1,71 @@
+<script>
+import ProjectSelect from '~/sidebar/components/move/issuable_move_dropdown.vue';
+import { __ } from '~/locale';
+import { createAlert } from '~/flash';
+import { visitUrl } from '~/lib/utils/url_utility';
+import moveIssueMutation from '../../queries/move_issue.mutation.graphql';
+
+export default {
+  name: 'MoveIssueButton',
+  components: { ProjectSelect },
+  inject: ['projectsAutocompleteEndpoint', 'projectFullPath', 'issueIid'],
+
+  i18n: {
+    title: __('Move issue'),
+    titleInProgress: __('Moving issue'),
+    moveErrorMessage: __('An error occurred while moving the issue.'),
+  },
+  data() {
+    return {
+      moveInProgress: false,
+    };
+  },
+  computed: {
+    dropdownButtonTitle() {
+      return this.moveInProgress ? this.$options.i18n.titleInProgress : this.$options.i18n.title;
+    },
+  },
+  methods: {
+    moveIssue(targetProject) {
+      this.moveInProgress = true;
+      return this.$apollo
+        .mutate({
+          mutation: moveIssueMutation,
+          variables: {
+            moveIssueInput: {
+              projectPath: this.projectFullPath,
+              iid: this.issueIid,
+              targetProjectPath: targetProject.full_path,
+            },
+          },
+        })
+        .then(({ data = {} }) => {
+          if (!data.issueMove) return;
+
+          const { errors } = data.issueMove;
+          if (errors?.length > 0) {
+            throw new Error(`Error moving the issue. Error message: ${errors[0].message}`);
+          }
+          visitUrl(data.issueMove?.issue.webUrl);
+        })
+        .catch((error) => {
+          this.moveInProgress = false;
+          createAlert({
+            message: this.$options.i18n.moveErrorMessage,
+            captureError: true,
+            error,
+          });
+        });
+    },
+  },
+};
+</script>
+<template>
+  <project-select
+    :projects-fetch-path="projectsAutocompleteEndpoint"
+    :dropdown-button-title="dropdownButtonTitle"
+    :dropdown-header-title="$options.i18n.title"
+    :move-in-progress="moveInProgress"
+    @move-issuable="moveIssue"
+  />
+</template>
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
deleted file mode 100644
index 2cce27df598..00000000000
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import $ from 'jquery';
-import { escape } from 'lodash';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { createAlert } from '~/flash';
-import { __ } from '~/locale';
-
-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() {
-    initDeprecatedJQueryDropdown(this.$dropdownToggle, {
-      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(() =>
-            createAlert({
-              message: __('An error occurred while fetching projects autocomplete.'),
-            }),
-          );
-      },
-      renderRow: (project) => `
-        <li>
-          <a href="#" class="js-move-issue-dropdown-item">
-            ${escape(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.prop('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(() => {
-        createAlert({ message: __('An error occurred while moving the issue.') });
-        this.$confirmButton.enable().removeClass('is-loading');
-      });
-    }
-  }
-}
-
-export default SidebarMoveIssue;
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index fc12b0b04eb..facc07e8ce5 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants';
@@ -43,8 +42,8 @@ import SidebarTimeTracking from './components/time_tracking/sidebar_time_trackin
 import SidebarTodoWidget from './components/todo_toggle/sidebar_todo_widget.vue';
 import { IssuableAttributeType } from './constants';
 import CrmContacts from './components/crm_contacts/crm_contacts.vue';
-import SidebarMoveIssue from './lib/sidebar_move_issue';
 import trackShowInviteMemberLink from './track_invite_members';
+import MoveIssueButton from './components/move/move_issue_button.vue';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -701,6 +700,31 @@ export function mountSubscriptionsDropdown() {
   });
 }
 
+export function mountMoveIssueButton() {
+  const el = document.querySelector('.js-sidebar-move-issue-block');
+
+  if (!el) {
+    return null;
+  }
+
+  const { projectsAutocompleteEndpoint } = getSidebarOptions();
+  const { projectFullPath, issueIid } = el.dataset;
+
+  Vue.use(VueApollo);
+
+  return new Vue({
+    el,
+    name: 'MoveIssueDropdownRoot',
+    apolloProvider,
+    provide: {
+      projectsAutocompleteEndpoint,
+      projectFullPath,
+      issueIid,
+    },
+    render: (createElement) => createElement(MoveIssueButton),
+  });
+}
+
 const isAssigneesWidgetShown =
   (isInIssuePage() || isInDesignPage() || isInMRPage()) && gon.features.issueAssigneesWidget;
 
@@ -727,12 +751,7 @@ export function mountSidebar(mediator, store) {
   mountSidebarTimeTracking();
   mountSidebarSeverityWidget();
   mountSidebarEscalationStatus();
-
-  new SidebarMoveIssue(
-    mediator,
-    $('.js-move-issue'),
-    $('.js-move-issue-confirmation-button'),
-  ).init();
+  mountMoveIssueButton();
 }
 
 export { getSidebarOptions };
diff --git a/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql b/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql
index d350072425b..e3ed3c5089b 100644
--- a/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql
+++ b/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql
@@ -1,5 +1,9 @@
 mutation moveIssue($moveIssueInput: IssueMoveInput!) {
   issueMove(input: $moveIssueInput) {
+    issue {
+      id
+      webUrl
+    }
     errors
   }
 }