Merge branch 'refactor/move-assignees-vue-component' into 'master'

Move (Multiple) Assignees vue component

See merge request gitlab-org/gitlab-ce!16952

6 files changed, 241 insertions, 229 deletions

diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index add24303e7b..9501e35b178 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -6,7 +6,7 @@ import { __ } from '../../locale';
 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';
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.js b/app/assets/javascripts/sidebar/components/assignees/assignees.js
deleted file mode 100644
index 643877b9d47..00000000000
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.js
+++ /dev/null
@@ -1,224 +0,0 @@
-export default {
-  name: 'Assignees',
-  data() {
-    return {
-      defaultRenderCount: 5,
-      defaultMaxCounter: 99,
-      showLess: true,
-    };
-  },
-  props: {
-    rootPath: {
-      type: String,
-      required: true,
-    },
-    users: {
-      type: Array,
-      required: true,
-    },
-    editable: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    firstUser() {
-      return this.users[0];
-    },
-    hasMoreThanTwoAssignees() {
-      return this.users.length > 2;
-    },
-    hasMoreThanOneAssignee() {
-      return this.users.length > 1;
-    },
-    hasAssignees() {
-      return this.users.length > 0;
-    },
-    hasNoUsers() {
-      return !this.users.length;
-    },
-    hasOneUser() {
-      return this.users.length === 1;
-    },
-    renderShowMoreSection() {
-      return this.users.length > this.defaultRenderCount;
-    },
-    numberOfHiddenAssignees() {
-      return this.users.length - this.defaultRenderCount;
-    },
-    isHiddenAssignees() {
-      return this.numberOfHiddenAssignees > 0;
-    },
-    hiddenAssigneesLabel() {
-      return `+ ${this.numberOfHiddenAssignees} more`;
-    },
-    collapsedTooltipTitle() {
-      const maxRender = Math.min(this.defaultRenderCount, this.users.length);
-      const renderUsers = this.users.slice(0, maxRender);
-      const names = renderUsers.map(u => u.name);
-
-      if (this.users.length > maxRender) {
-        names.push(`+ ${this.users.length - maxRender} more`);
-      }
-
-      return names.join(', ');
-    },
-    sidebarAvatarCounter() {
-      let counter = `+${this.users.length - 1}`;
-
-      if (this.users.length > this.defaultMaxCounter) {
-        counter = `${this.defaultMaxCounter}+`;
-      }
-
-      return counter;
-    },
-  },
-  methods: {
-    assignSelf() {
-      this.$emit('assign-self');
-    },
-    toggleShowLess() {
-      this.showLess = !this.showLess;
-    },
-    renderAssignee(index) {
-      return !this.showLess || (index < this.defaultRenderCount && this.showLess);
-    },
-    avatarUrl(user) {
-      return user.avatar || user.avatar_url || gon.default_avatar_url;
-    },
-    assigneeUrl(user) {
-      return `${this.rootPath}${user.username}`;
-    },
-    assigneeAlt(user) {
-      return `${user.name}'s avatar`;
-    },
-    assigneeUsername(user) {
-      return `@${user.username}`;
-    },
-    shouldRenderCollapsedAssignee(index) {
-      const firstTwo = this.users.length <= 2 && index <= 2;
-
-      return index === 0 || firstTwo;
-    },
-  },
-  template: `
-    <div>
-      <div
-        class="sidebar-collapsed-icon sidebar-collapsed-user"
-        :class="{ 'multiple-users': hasMoreThanOneAssignee, 'has-tooltip': hasAssignees }"
-        data-container="body"
-        data-placement="left"
-        :title="collapsedTooltipTitle"
-      >
-        <i
-          v-if="hasNoUsers"
-          aria-label="No Assignee"
-          class="fa fa-user"
-        />
-        <button
-          type="button"
-          class="btn-link"
-          v-for="(user, index) in users"
-          v-if="shouldRenderCollapsedAssignee(index)"
-        >
-          <img
-            width="24"
-            class="avatar avatar-inline s24"
-            :alt="assigneeAlt(user)"
-            :src="avatarUrl(user)"
-          />
-          <span class="author">
-            {{ user.name }}
-          </span>
-        </button>
-        <button
-          v-if="hasMoreThanTwoAssignees"
-          class="btn-link"
-          type="button"
-        >
-          <span
-            class="avatar-counter sidebar-avatar-counter"
-          >
-            {{ sidebarAvatarCounter }}
-          </span>
-        </button>
-      </div>
-      <div class="value hide-collapsed">
-        <template v-if="hasNoUsers">
-          <span class="assign-yourself no-value">
-            No assignee
-            <template v-if="editable">
-             -
-              <button
-                type="button"
-                class="btn-link"
-                @click="assignSelf"
-              >
-                assign yourself
-              </button>
-            </template>
-          </span>
-        </template>
-        <template v-else-if="hasOneUser">
-          <a
-            class="author_link bold"
-            :href="assigneeUrl(firstUser)"
-          >
-            <img
-              width="32"
-              class="avatar avatar-inline s32"
-              :alt="assigneeAlt(firstUser)"
-              :src="avatarUrl(firstUser)"
-            />
-            <span class="author">
-              {{ firstUser.name }}
-            </span>
-            <span class="username">
-              {{ assigneeUsername(firstUser) }}
-            </span>
-          </a>
-        </template>
-        <template v-else>
-          <div class="user-list">
-            <div
-              class="user-item"
-              v-for="(user, index) in users"
-              v-if="renderAssignee(index)"
-            >
-              <a
-                class="user-link has-tooltip"
-                data-placement="bottom"
-                :href="assigneeUrl(user)"
-                :data-title="user.name"
-              >
-                <img
-                  width="32"
-                  class="avatar avatar-inline s32"
-                  :alt="assigneeAlt(user)"
-                  :src="avatarUrl(user)"
-                />
-              </a>
-            </div>
-          </div>
-          <div
-            v-if="renderShowMoreSection"
-            class="user-list-more"
-          >
-            <button
-              type="button"
-              class="btn-link"
-              @click="toggleShowLess"
-            >
-              <template v-if="showLess">
-                {{ hiddenAssigneesLabel }}
-              </template>
-              <template v-else>
-                - show less
-              </template>
-            </button>
-          </div>
-        </template>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
new file mode 100644
index 00000000000..73d53dda6fd
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -0,0 +1,231 @@
+<script>
+export default {
+  name: 'Assignees',
+  props: {
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    users: {
+      type: Array,
+      required: true,
+    },
+    editable: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      defaultRenderCount: 5,
+      defaultMaxCounter: 99,
+      showLess: true,
+    };
+  },
+  computed: {
+    firstUser() {
+      return this.users[0];
+    },
+    hasMoreThanTwoAssignees() {
+      return this.users.length > 2;
+    },
+    hasMoreThanOneAssignee() {
+      return this.users.length > 1;
+    },
+    hasAssignees() {
+      return this.users.length > 0;
+    },
+    hasNoUsers() {
+      return !this.users.length;
+    },
+    hasOneUser() {
+      return this.users.length === 1;
+    },
+    renderShowMoreSection() {
+      return this.users.length > this.defaultRenderCount;
+    },
+    numberOfHiddenAssignees() {
+      return this.users.length - this.defaultRenderCount;
+    },
+    isHiddenAssignees() {
+      return this.numberOfHiddenAssignees > 0;
+    },
+    hiddenAssigneesLabel() {
+      return `+ ${this.numberOfHiddenAssignees} more`;
+    },
+    collapsedTooltipTitle() {
+      const maxRender = Math.min(this.defaultRenderCount, this.users.length);
+      const renderUsers = this.users.slice(0, maxRender);
+      const names = renderUsers.map(u => u.name);
+
+      if (this.users.length > maxRender) {
+        names.push(`+ ${this.users.length - maxRender} more`);
+      }
+
+      return names.join(', ');
+    },
+    sidebarAvatarCounter() {
+      let counter = `+${this.users.length - 1}`;
+
+      if (this.users.length > this.defaultMaxCounter) {
+        counter = `${this.defaultMaxCounter}+`;
+      }
+
+      return counter;
+    },
+  },
+  methods: {
+    assignSelf() {
+      this.$emit('assign-self');
+    },
+    toggleShowLess() {
+      this.showLess = !this.showLess;
+    },
+    renderAssignee(index) {
+      return !this.showLess || (index < this.defaultRenderCount && this.showLess);
+    },
+    avatarUrl(user) {
+      return user.avatar || user.avatar_url || gon.default_avatar_url;
+    },
+    assigneeUrl(user) {
+      return `${this.rootPath}${user.username}`;
+    },
+    assigneeAlt(user) {
+      return `${user.name}'s avatar`;
+    },
+    assigneeUsername(user) {
+      return `@${user.username}`;
+    },
+    shouldRenderCollapsedAssignee(index) {
+      const firstTwo = this.users.length <= 2 && index <= 2;
+
+      return index === 0 || firstTwo;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="sidebar-collapsed-icon sidebar-collapsed-user"
+      :class="{ 'multiple-users': hasMoreThanOneAssignee, 'has-tooltip': hasAssignees }"
+      data-container="body"
+      data-placement="left"
+      :title="collapsedTooltipTitle"
+    >
+      <i
+        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"
+          class="avatar avatar-inline s24"
+          :alt="assigneeAlt(user)"
+          :src="avatarUrl(user)"
+        />
+        <span class="author">
+          {{ user.name }}
+        </span>
+      </button>
+      <button
+        v-if="hasMoreThanTwoAssignees"
+        class="btn-link"
+        type="button"
+      >
+        <span
+          class="avatar-counter sidebar-avatar-counter"
+        >
+          {{ sidebarAvatarCounter }}
+        </span>
+      </button>
+    </div>
+    <div class="value hide-collapsed">
+      <template v-if="hasNoUsers">
+        <span class="assign-yourself no-value">
+          No assignee
+          <template v-if="editable">
+            -
+            <button
+              type="button"
+              class="btn-link"
+              @click="assignSelf"
+            >
+              assign yourself
+            </button>
+          </template>
+        </span>
+      </template>
+      <template v-else-if="hasOneUser">
+        <a
+          class="author_link bold"
+          :href="assigneeUrl(firstUser)"
+        >
+          <img
+            width="32"
+            class="avatar avatar-inline s32"
+            :alt="assigneeAlt(firstUser)"
+            :src="avatarUrl(firstUser)"
+          />
+          <span class="author">
+            {{ firstUser.name }}
+          </span>
+          <span class="username">
+            {{ assigneeUsername(firstUser) }}
+          </span>
+        </a>
+      </template>
+      <template v-else>
+        <div class="user-list">
+          <div
+            class="user-item"
+            v-for="(user, index) in users"
+            v-if="renderAssignee(index)"
+            :key="user.id"
+          >
+            <a
+              class="user-link has-tooltip"
+              data-placement="bottom"
+              :href="assigneeUrl(user)"
+              :data-title="user.name"
+            >
+              <img
+                width="32"
+                class="avatar avatar-inline s32"
+                :alt="assigneeAlt(user)"
+                :src="avatarUrl(user)"
+              />
+            </a>
+          </div>
+        </div>
+        <div
+          v-if="renderShowMoreSection"
+          class="user-list-more"
+        >
+          <button
+            type="button"
+            class="btn-link"
+            @click="toggleShowLess"
+          >
+            <template v-if="showLess">
+              {{ hiddenAssigneesLabel }}
+            </template>
+            <template v-else>
+              - show less
+            </template>
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
index 9e47039d920..8269fe1281d 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
@@ -1,6 +1,6 @@
 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() {
diff --git a/changelogs/unreleased/refactor-move-assignees-vue-component.yml b/changelogs/unreleased/refactor-move-assignees-vue-component.yml
new file mode 100644
index 00000000000..98cfa6b4c81
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-assignees-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move Assignees vue component
+merge_request: 16952
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/sidebar/assignees_spec.js b/spec/javascripts/sidebar/assignees_spec.js
index c9453a21189..4e4343812bd 100644
--- a/spec/javascripts/sidebar/assignees_spec.js
+++ b/spec/javascripts/sidebar/assignees_spec.js
@@ -1,5 +1,5 @@
 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';