3 files changed, 65 insertions, 60 deletions
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';