Move BoardNewIssue vue component

app/assets/javascripts/boards/components/board_list.vue

 <script>
 import Sortable from 'vendor/Sortable';
-import boardNewIssue from './board_new_issue';
+import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';

app/assets/javascripts/boards/components/board_new_issue.js → app/assets/javascripts/boards/components/board_new_issue.vue

-/* global ListIssue */
+<script>
 import eventHub from '../eventhub';
 import ProjectSelect from './project_select.vue';
+import ListIssue from '../models/issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
 export default {
   name: 'BoardNewIssue',
+  components: {
+    ProjectSelect,
+  },
   props: {
     groupId: {
       type: Number,
@@ -24,9 +28,6 @@ export default {
       selectedProject: {},
     };
   },
-  components: {
-    'project-select': ProjectSelect,
-  },
   computed: {
     disabled() {
       if (this.groupId) {
@@ -35,6 +36,10 @@ export default {
       return this.title === '';
     },
   },
+  mounted() {
+    this.$refs.input.focus();
+    eventHub.$on('setSelectedProject', this.setSelectedProject);
+  },
   methods: {
     submit(e) {
       e.preventDefault();
@@ -81,49 +86,57 @@ export default {
       this.selectedProject = selectedProject;
     },
   },
-  mounted() {
-    this.$refs.input.focus();
-    eventHub.$on('setSelectedProject', this.setSelectedProject);
-  },
-  template: `
-    <div class="board-new-issue-form">
-      <div class="card">
-        <form @submit="submit($event)">
-          <div class="flash-container"
-            v-if="error">
-            <div class="flash-alert">
-              An error occurred. Please try again.
-            </div>
-          </div>
-          <label class="label-light"
-            :for="list.id + '-title'">
-            Title
-          </label>
-          <input class="form-control"
-            type="text"
-            v-model="title"
-            ref="input"
-            autocomplete="off"
-            :id="list.id + '-title'" />
-          <project-select
-            v-if="groupId"
-            :groupId="groupId"
-          />
-          <div class="clearfix prepend-top-10">
-            <button class="btn btn-success pull-left"
-              type="submit"
-              :disabled="disabled"
-              ref="submit-button">
-              Submit issue
-            </button>
-            <button class="btn btn-default pull-right"
-              type="button"
-              @click="cancel">
-              Cancel
-            </button>
+};
+</script>
+
+<template>
+  <div class="board-new-issue-form">
+    <div class="card">
+      <form @submit="submit($event)">
+        <div
+          class="flash-container"
+          v-if="error"
+        >
+          <div class="flash-alert">
+            An error occurred. Please try again.
           </div>
-        </form>
-      </div>
+        </div>
+        <label
+          class="label-light"
+          :for="list.id + '-title'"
+        >
+          Title
+        </label>
+        <input
+          class="form-control"
+          type="text"
+          v-model="title"
+          ref="input"
+          autocomplete="off"
+          :id="list.id + '-title'"
+        />
+        <project-select
+          v-if="groupId"
+          :group-id="groupId"
+        />
+        <div class="clearfix prepend-top-10">
+          <button
+            class="btn btn-success pull-left"
+            type="submit"
+            :disabled="disabled"
+            ref="submit-button"
+          >
+            Submit issue
+          </button>
+          <button
+            class="btn btn-default pull-right"
+            type="button"
+            @click="cancel"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
     </div>
-  `,
-};
+  </div>
+</template>

app/assets/javascripts/boards/models/issue.js

@@ -122,3 +122,5 @@ class ListIssue {
 }
 
 window.ListIssue = ListIssue;
+
+export default ListIssue;

ee/changelogs/unreleased/refactor-move-board-new-issue-vue-component.yml

+---
+title: Move BoardNewIssue vue component
+merge_request: 16947
+author: George Tsiolis
+type: performance

spec/javascripts/boards/board_new_issue_spec.js

@@ -4,7 +4,7 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import boardNewIssue from '~/boards/components/board_new_issue';
+import boardNewIssue from '~/boards/components/board_new_issue.vue';
 
 import '~/boards/models/list';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';