Move SidebarAssignees vue component

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

+<script>
 import Flash from '../../../flash';
 import AssigneeTitle from './assignee_title';
 import Assignees from './assignees.vue';
@@ -6,11 +7,9 @@ import eventHub from '../../event_hub';
 
 export default {
   name: 'SidebarAssignees',
-  data() {
-    return {
-      store: new Store(),
-      loading: false,
-    };
+  components: {
+    AssigneeTitle,
+    Assignees,
   },
   props: {
     mediator: {
@@ -27,9 +26,28 @@ export default {
       default: false,
     },
   },
-  components: {
-    AssigneeTitle,
-    Assignees,
+  data() {
+    return {
+      store: new Store(),
+      loading: false,
+    };
+  },
+  created() {
+    this.removeAssignee = this.store.removeAssignee.bind(this.store);
+    this.addAssignee = this.store.addAssignee.bind(this.store);
+    this.removeAllAssignees = this.store.removeAllAssignees.bind(this.store);
+
+    // Get events from glDropdown
+    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$on('sidebar.addAssignee', this.addAssignee);
+    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
+  },
+  beforeDestroy() {
+    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$off('sidebar.addAssignee', this.addAssignee);
+    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
   },
   methods: {
     assignSelf() {
@@ -54,39 +72,24 @@ export default {
         });
     },
   },
-  created() {
-    this.removeAssignee = this.store.removeAssignee.bind(this.store);
-    this.addAssignee = this.store.addAssignee.bind(this.store);
-    this.removeAllAssignees = this.store.removeAllAssignees.bind(this.store);
-
-    // Get events from glDropdown
-    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
-    eventHub.$on('sidebar.addAssignee', this.addAssignee);
-    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
-    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
-  },
-  beforeDestroy() {
-    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
-    eventHub.$off('sidebar.addAssignee', this.addAssignee);
-    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
-    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
-  },
-  template: `
-    <div>
-      <assignee-title
-        :number-of-assignees="store.assignees.length"
-        :loading="loading || store.isFetching.assignees"
-        :editable="store.editable"
-        :show-toggle="!signedIn"
-      />
-      <assignees
-        v-if="!store.isFetching.assignees"
-        class="value"
-        :root-path="store.rootPath"
-        :users="store.assignees"
-        :editable="store.editable"
-        @assign-self="assignSelf"
-      />
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div>
+    <assignee-title
+      :number-of-assignees="store.assignees.length"
+      :loading="loading || store.isFetching.assignees"
+      :editable="store.editable"
+      :show-toggle="!signedIn"
+    />
+    <assignees
+      v-if="!store.isFetching.assignees"
+      class="value"
+      :root-path="store.rootPath"
+      :users="store.assignees"
+      :editable="store.editable"
+      @assign-self="assignSelf"
+    />
+  </div>
+</template>

app/assets/javascripts/sidebar/mount_sidebar.js

 import Vue from 'vue';
 import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
-import SidebarAssignees from './components/assignees/sidebar_assignees';
+import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
 import LockIssueSidebar from './components/lock/lock_issue_sidebar.vue';

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

+---
+title: Move SidebarAssignees vue component
+merge_request: 17398
+author: George Tsiolis
+type: performance

spec/javascripts/sidebar/sidebar_assignees_spec.js

 import _ from 'underscore';
 import Vue from 'vue';
-import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees';
+import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees.vue';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarService from '~/sidebar/services/sidebar_service';
 import SidebarStore from '~/sidebar/stores/sidebar_store';