Move Assignees vue component

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

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

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

+<script>
 export default {
   name: 'Assignees',
-  data() {
-    return {
-      defaultRenderCount: 5,
-      defaultMaxCounter: 99,
-      showLess: true,
-    };
-  },
   props: {
     rootPath: {
       type: String,
@@ -21,6 +15,13 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      defaultRenderCount: 5,
+      defaultMaxCounter: 99,
+      showLess: true,
+    };
+  },
   computed: {
     firstUser() {
       return this.users[0];
@@ -101,7 +102,10 @@ export default {
       return index === 0 || firstTwo;
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <div>
     <div
       class="sidebar-collapsed-icon sidebar-collapsed-user"
@@ -114,12 +118,14 @@ export default {
         v-if="hasNoUsers"
         aria-label="No Assignee"
         class="fa fa-user"
-        />
+      >
+      </i>
       <button
         type="button"
         class="btn-link"
         v-for="(user, index) in users"
         v-if="shouldRenderCollapsedAssignee(index)"
+        :key="user.id"
       >
         <img
           width="24"
@@ -184,6 +190,7 @@ export default {
             class="user-item"
             v-for="(user, index) in users"
             v-if="renderAssignee(index)"
+            :key="user.id"
           >
             <a
               class="user-link has-tooltip"
@@ -220,5 +227,5 @@ export default {
       </template>
     </div>
   </div>
-  `,
-};
+</template>
+

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

 import Flash from '../../../flash';
 import AssigneeTitle from './assignee_title';
-import Assignees from './assignees';
+import Assignees from './assignees.vue';
 import Store from '../../stores/sidebar_store';
 import eventHub from '../../event_hub';
 
@@ -28,8 +28,8 @@ export default {
     },
   },
   components: {
-    'assignee-title': AssigneeTitle,
-    assignees: Assignees,
+    AssigneeTitle,
+    Assignees,
   },
   methods: {
     assignSelf() {

changelogs/unreleased/refactor-move-assignees-vue-component.yml

+---
+title: Move Assignees vue component
+merge_request: 16952
+author: George Tsiolis
+type: performance

spec/javascripts/sidebar/assignees_spec.js

 import Vue from 'vue';
-import Assignee from '~/sidebar/components/assignees/assignees';
+import Assignee from '~/sidebar/components/assignees/assignees.vue';
 import UsersMock from './mock_data';
 import UsersMockHelper from '../helpers/user_mock_data_helper';