1 files changed, 28 insertions, 81 deletions

diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index caeecb25227..84c9191975e 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,21 +1,19 @@
 <script>
-import { GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
 import BoardNewIssueMixin from 'ee_else_ce/boards/mixins/board_new_issue';
-import { __ } from '~/locale';
+
 import { toggleFormEventPrefix } from '../constants';
 import eventHub from '../eventhub';
+
+import BoardNewItem from './board_new_item.vue';
 import ProjectSelect from './project_select.vue';
 
 export default {
   name: 'BoardNewIssue',
-  i18n: {
-    cancel: __('Cancel'),
-  },
   components: {
+    BoardNewItem,
     ProjectSelect,
-    GlButton,
   },
   mixins: [BoardNewIssueMixin],
   inject: ['groupId'],
@@ -25,106 +23,55 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      title: '',
-    };
-  },
   computed: {
-    ...mapState(['selectedProject']),
-    ...mapGetters(['isGroupBoard', 'isEpicBoard']),
-    /**
-     * We've extended this component in EE where
-     * submitButtonTitle returns a different string
-     * hence this is kept as a computed prop.
-     */
-    submitButtonTitle() {
-      return __('Create issue');
+    ...mapState(['selectedProject', 'fullPath']),
+    ...mapGetters(['isGroupBoard']),
+    formEventPrefix() {
+      return toggleFormEventPrefix.issue;
     },
-    disabled() {
-      if (this.isGroupBoard) {
-        return this.title === '' || !this.selectedProject.name;
-      }
-      return this.title === '';
+    disableSubmit() {
+      return this.isGroupBoard ? !this.selectedProject.name : false;
     },
-    inputFieldId() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `${this.list.id}-title`;
+    projectPath() {
+      return this.isGroupBoard ? this.selectedProject.fullPath : this.fullPath;
     },
   },
-  mounted() {
-    this.$refs.input.focus();
-    eventHub.$on('setSelectedProject', this.setSelectedProject);
-  },
   methods: {
     ...mapActions(['addListNewIssue']),
-    submit() {
-      const { title } = this;
+    submit({ title }) {
       const labels = this.list.label ? [this.list.label] : [];
       const assignees = this.list.assignee ? [this.list.assignee] : [];
       const milestone = getMilestone(this.list);
 
-      eventHub.$emit(`scroll-board-list-${this.list.id}`);
-
       return this.addListNewIssue({
+        list: this.list,
         issueInput: {
           title,
           labelIds: labels?.map((l) => l.id),
           assigneeIds: assignees?.map((a) => a?.id),
           milestoneId: milestone?.id,
-          projectPath: this.selectedProject.fullPath,
-          ...this.extraIssueInput(),
+          projectPath: this.projectPath,
         },
-        list: this.list,
       }).then(() => {
-        this.reset();
+        this.cancel();
       });
     },
-    reset() {
-      this.title = '';
-      eventHub.$emit(`${toggleFormEventPrefix.issue}${this.list.id}`);
+    cancel() {
+      eventHub.$emit(`${this.formEventPrefix}${this.list.id}`);
     },
   },
 };
 </script>
 
 <template>
-  <div class="board-new-issue-form">
-    <div class="board-card position-relative p-3 rounded">
-      <form ref="submitForm" @submit.prevent="submit">
-        <label :for="inputFieldId" class="label-bold">{{ __('Title') }}</label>
-        <input
-          :id="inputFieldId"
-          ref="input"
-          v-model="title"
-          class="form-control"
-          type="text"
-          name="issue_title"
-          autocomplete="off"
-        />
-        <project-select v-if="isGroupBoard && !isEpicBoard" :group-id="groupId" :list="list" />
-        <div class="clearfix gl-mt-3">
-          <gl-button
-            ref="submitButton"
-            :disabled="disabled"
-            class="float-left js-no-auto-disable"
-            variant="confirm"
-            category="primary"
-            type="submit"
-          >
-            {{ submitButtonTitle }}
-          </gl-button>
-          <gl-button
-            ref="cancelButton"
-            class="float-right"
-            type="button"
-            variant="default"
-            @click="reset"
-          >
-            {{ $options.i18n.cancel }}
-          </gl-button>
-        </div>
-      </form>
-    </div>
-  </div>
+  <board-new-item
+    :list="list"
+    :form-event-prefix="formEventPrefix"
+    :submit-button-title="__('Create issue')"
+    :disable-submit="disableSubmit"
+    @form-submit="submit"
+    @form-cancel="cancel"
+  >
+    <project-select v-if="isGroupBoard" :group-id="groupId" :list="list" />
+  </board-new-item>
 </template>