Move AssigneeTitle vue component

app/assets/javascripts/boards/components/board_sidebar.js

@@ -5,7 +5,7 @@ import Flash from '../../flash';
 import { __ } from '../../locale';
 import Sidebar from '../../right_sidebar';
 import eventHub from '../../sidebar/event_hub';
-import assigneeTitle from '../../sidebar/components/assignees/assignee_title';
+import assigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
 import assignees from '../../sidebar/components/assignees/assignees.vue';
 import DueDateSelectors from '../../due_date_select';
 import './sidebar/remove_issue';

app/assets/javascripts/sidebar/components/assignees/assignee_title.js → app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

+<script>
 export default {
   name: 'AssigneeTitle',
   props: {
@@ -26,34 +27,38 @@ export default {
       return assignees > 1 ? `${assignees} Assignees` : 'Assignee';
     },
   },
-  template: `
-    <div class="title hide-collapsed">
-      {{assigneeTitle}}
+};
+</script>
+<template>
+  <div class="title hide-collapsed">
+    {{ assigneeTitle }}
+    <i
+      v-if="loading"
+      aria-hidden="true"
+      class="fa fa-spinner fa-spin block-loading"
+    >
+
+    </i>
+    <a
+      v-if="editable"
+      class="js-sidebar-dropdown-toggle edit-link pull-right"
+      href="#"
+    >
+      {{ __('Edit') }}
+    </a>
+    <a
+      v-if="showToggle"
+      aria-label="Toggle sidebar"
+      class="gutter-toggle pull-right js-sidebar-toggle"
+      href="#"
+      role="button"
+    >
       <i
-        v-if="loading"
         aria-hidden="true"
-        class="fa fa-spinner fa-spin block-loading"
-      />
-      <a
-        v-if="editable"
-        class="js-sidebar-dropdown-toggle edit-link pull-right"
-        href="#"
-      >
-        {{ __('Edit') }}
-      </a>
-      <a
-        v-if="showToggle"
-        aria-label="Toggle sidebar"
-        class="gutter-toggle pull-right js-sidebar-toggle"
-        href="#"
-        role="button"
+        data-hidden="true"
+        class="fa fa-angle-double-right"
       >
-        <i
-          aria-hidden="true"
-          data-hidden="true"
-          class="fa fa-angle-double-right"
-        />
-      </a>
-    </div>
-  `,
-};
+      </i>
+    </a>
+  </div>
+</template>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

 <script>
 import Flash from '../../../flash';
-import AssigneeTitle from './assignee_title';
+import AssigneeTitle from './assignee_title.vue';
 import Assignees from './assignees.vue';
 import Store from '../../stores/sidebar_store';
 import eventHub from '../../event_hub';

changelogs/unreleased/refactor-move-assignee-title-vue-component.yml

+---
+title: Move AssigneeTitle vue component
+merge_request: 17397
+author: George Tsiolis
+type: performance

spec/javascripts/sidebar/assignee_title_spec.js

 import Vue from 'vue';
-import AssigneeTitle from '~/sidebar/components/assignees/assignee_title';
+import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
 describe('AssigneeTitle component', () => {
   let component;