1 files changed, 71 insertions, 0 deletions
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>