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

@@ -1,59 +0,0 @@
-export default {
-  name: 'AssigneeTitle',
-  props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    numberOfAssignees: {
-      type: Number,
-      required: true,
-    },
-    editable: {
-      type: Boolean,
-      required: true,
-    },
-    showToggle: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    assigneeTitle() {
-      const assignees = this.numberOfAssignees;
-      return assignees > 1 ? `${assignees} Assignees` : 'Assignee';
-    },
-  },
-  template: `
-    <div class="title hide-collapsed">
-      {{assigneeTitle}}
-      <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"
-      >
-        <i
-          aria-hidden="true"
-          data-hidden="true"
-          class="fa fa-angle-double-right"
-        />
-      </a>
-    </div>
-  `,
-};

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

@@ -0,0 +1,64 @@
+<script>
+export default {
+  name: 'AssigneeTitle',
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    numberOfAssignees: {
+      type: Number,
+      required: true,
+    },
+    editable: {
+      type: Boolean,
+      required: true,
+    },
+    showToggle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    assigneeTitle() {
+      const assignees = this.numberOfAssignees;
+      return assignees > 1 ? `${assignees} Assignees` : 'Assignee';
+    },
+  },
+};
+</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
+        aria-hidden="true"
+        data-hidden="true"
+        class="fa fa-angle-double-right"
+      >
+      </i>
+    </a>
+  </div>
+</template>

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

@@ -1,6 +1,6 @@
 <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

@@ -0,0 +1,5 @@
+---
+title: Move AssigneeTitle vue component
+merge_request: 17397
+author: George Tsiolis
+type: performance

spec/javascripts/sidebar/assignee_title_spec.js

@@ -1,5 +1,5 @@
 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;