Move AssigneeTitle vue component

6 files changed, 72 insertions, 62 deletions

diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 9501e35b178..d1a5a3a2253 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/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';
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.js b/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
deleted file mode 100644
index 129ba2e4e89..00000000000
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.js
+++ /dev/null
@@ -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>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
new file mode 100644
index 00000000000..5eeb2a41bae
--- /dev/null
+++ b/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>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index b58e04b5e60..3c6b9c27814 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/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';
diff --git a/changelogs/unreleased/refactor-move-assignee-title-vue-component.yml b/changelogs/unreleased/refactor-move-assignee-title-vue-component.yml
new file mode 100644
index 00000000000..f6521339c39
--- /dev/null
+++ b/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
diff --git a/spec/javascripts/sidebar/assignee_title_spec.js b/spec/javascripts/sidebar/assignee_title_spec.js
index ac93f918ce4..509edba2036 100644
--- a/spec/javascripts/sidebar/assignee_title_spec.js
+++ b/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;