1 files changed, 37 insertions, 47 deletions

diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index a9e6d768656..14d28643046 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,94 +1,85 @@
 <script>
+import { mapActions, mapState } from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
-import ListIssue from 'ee_else_ce/boards/models/issue';
 import eventHub from '../eventhub';
 import ProjectSelect from './project_select.vue';
-import boardsStore from '../stores/boards_store';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-
-// This component is being replaced in favor of './board_new_issue_new.vue' for GraphQL boards
+import { __ } from '~/locale';
 
 export default {
   name: 'BoardNewIssue',
+  i18n: {
+    submit: __('Submit issue'),
+    cancel: __('Cancel'),
+  },
   components: {
     ProjectSelect,
     GlButton,
   },
   mixins: [glFeatureFlagMixin()],
+  inject: ['groupId', 'weightFeatureAvailable', 'boardWeight'],
   props: {
     list: {
       type: Object,
       required: true,
     },
   },
-  inject: ['groupId'],
   data() {
     return {
       title: '',
-      error: false,
-      selectedProject: {},
     };
   },
   computed: {
+    ...mapState(['selectedProject']),
     disabled() {
       if (this.groupId) {
         return this.title === '' || !this.selectedProject.name;
       }
       return this.title === '';
     },
+    inputFieldId() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `${this.list.id}-title`;
+    },
   },
   mounted() {
     this.$refs.input.focus();
     eventHub.$on('setSelectedProject', this.setSelectedProject);
   },
   methods: {
+    ...mapActions(['addListNewIssue']),
     submit(e) {
       e.preventDefault();
-      if (this.title.trim() === '') return Promise.resolve();
-
-      this.error = false;
 
       const labels = this.list.label ? [this.list.label] : [];
       const assignees = this.list.assignee ? [this.list.assignee] : [];
       const milestone = getMilestone(this.list);
 
-      const { weightFeatureAvailable } = boardsStore;
-      const { weight } = weightFeatureAvailable ? boardsStore.state.currentBoard : {};
+      const weight = this.weightFeatureAvailable ? this.boardWeight : undefined;
 
-      const issue = new ListIssue({
-        title: this.title,
-        labels,
-        subscribed: true,
-        assignees,
-        milestone,
-        project_id: this.selectedProject.id,
-        weight,
-      });
+      const { title } = this;
 
       eventHub.$emit(`scroll-board-list-${this.list.id}`);
-      this.cancel();
 
-      return this.list
-        .newIssue(issue)
-        .then(() => {
-          boardsStore.setIssueDetail(issue);
-          boardsStore.setListDetail(this.list);
-        })
-        .catch(() => {
-          this.list.removeIssue(issue);
-
-          // Show error message
-          this.error = true;
-        });
+      return this.addListNewIssue({
+        issueInput: {
+          title,
+          labelIds: labels?.map((l) => l.id),
+          assigneeIds: assignees?.map((a) => a?.id),
+          milestoneId: milestone?.id,
+          projectPath: this.selectedProject.fullPath,
+          weight: weight >= 0 ? weight : null,
+        },
+        list: this.list,
+      }).then(() => {
+        this.reset();
+      });
     },
-    cancel() {
+    reset() {
       this.title = '';
       eventHub.$emit(`toggle-issue-form-${this.list.id}`);
     },
-    setSelectedProject(selectedProject) {
-      this.selectedProject = selectedProject;
-    },
   },
 };
 </script>
@@ -96,13 +87,10 @@ export default {
 <template>
   <div class="board-new-issue-form">
     <div class="board-card position-relative p-3 rounded">
-      <form @submit="submit($event)">
-        <div v-if="error" class="flash-container">
-          <div class="flash-alert">{{ __('An error occurred. Please try again.') }}</div>
-        </div>
-        <label :for="list.id + '-title'" class="label-bold">{{ __('Title') }}</label>
+      <form ref="submitForm" @submit="submit">
+        <label :for="inputFieldId" class="label-bold">{{ __('Title') }}</label>
         <input
-          :id="list.id + '-title'"
+          :id="inputFieldId"
           ref="input"
           v-model="title"
           class="form-control"
@@ -119,16 +107,18 @@ export default {
             variant="success"
             category="primary"
             type="submit"
-            >{{ __('Submit issue') }}</gl-button
           >
+            {{ $options.i18n.submit }}
+          </gl-button>
           <gl-button
             ref="cancelButton"
             class="float-right"
             type="button"
             variant="default"
-            @click="cancel"
-            >{{ __('Cancel') }}</gl-button
+            @click="reset"
           >
+            {{ $options.i18n.cancel }}
+          </gl-button>
         </div>
       </form>
     </div>