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 ListIssue from '../models/issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -17,6 +18,9 @@ export default {
       error: false,
     };
   },
+  mounted() {
+    this.$refs.input.focus();
+  },
   methods: {
     submit(e) {
       e.preventDefault();
@@ -59,42 +63,51 @@ export default {
       eventHub.$emit(`hide-issue-form-${this.list.id}`);
     },
   },
-  mounted() {
-    this.$refs.input.focus();
-  },
-  template: `
-    <div class="card board-new-issue-form">
-      <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'" />
-        <div class="clearfix prepend-top-10">
-          <button class="btn btn-success pull-left"
-            type="submit"
-            :disabled="title === ''"
-            ref="submit-button">
-            Submit issue
-          </button>
-          <button class="btn btn-default pull-right"
-            type="button"
-            @click="cancel">
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="card board-new-issue-form">
+    <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'"
+      />
+      <div class="clearfix prepend-top-10">
+        <button
+          class="btn btn-success pull-left"
+          type="submit"
+          :disabled="title === ''"
+          ref="submit-button"
+        >
+          Submit issue
+        </button>
+        <button
+          class="btn btn-default pull-right"
+          type="button"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>
+</template>

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

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

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';