1 files changed, 67 insertions, 61 deletions

diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index e82a271d007..cbd68f2513a 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
@@ -1,15 +1,19 @@
 <script>
-// NOTE! For the first iteration, we are simply copying the implementation of Assignees
-// It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
-import { __, sprintf } from '~/locale';
+import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import ReviewerAvatarLink from './reviewer_avatar_link.vue';
 
-const DEFAULT_RENDER_COUNT = 5;
+const LOADING_STATE = 'loading';
+const SUCCESS_STATE = 'success';
 
 export default {
   components: {
+    GlButton,
+    GlIcon,
     ReviewerAvatarLink,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     users: {
       type: Array,
@@ -28,76 +32,78 @@ export default {
   data() {
     return {
       showLess: true,
+      loadingStates: {},
     };
   },
-  computed: {
-    firstUser() {
-      return this.users[0];
-    },
-    hasOneUser() {
-      return this.users.length === 1;
-    },
-    hiddenReviewersLabel() {
-      const { numberOfHiddenReviewers } = this;
-      return sprintf(__('+ %{numberOfHiddenReviewers} more'), { numberOfHiddenReviewers });
-    },
-    renderShowMoreSection() {
-      return this.users.length > DEFAULT_RENDER_COUNT;
-    },
-    numberOfHiddenReviewers() {
-      return this.users.length - DEFAULT_RENDER_COUNT;
-    },
-    uncollapsedUsers() {
-      const uncollapsedLength = this.showLess
-        ? Math.min(this.users.length, DEFAULT_RENDER_COUNT)
-        : this.users.length;
-      return this.showLess ? this.users.slice(0, uncollapsedLength) : this.users;
-    },
-    username() {
-      return `@${this.firstUser.username}`;
+  watch: {
+    users: {
+      handler(users) {
+        this.loadingStates = users.reduce(
+          (acc, user) => ({
+            ...acc,
+            [user.id]: acc[user.id] || null,
+          }),
+          this.loadingStates,
+        );
+      },
+      immediate: true,
     },
   },
   methods: {
     toggleShowLess() {
       this.showLess = !this.showLess;
     },
+    reRequestReview(userId) {
+      this.loadingStates[userId] = LOADING_STATE;
+      this.$emit('request-review', { userId, callback: this.requestReviewComplete });
+    },
+    requestReviewComplete(userId, success) {
+      if (success) {
+        this.loadingStates[userId] = SUCCESS_STATE;
+
+        setTimeout(() => {
+          this.loadingStates[userId] = null;
+        }, 1500);
+      } else {
+        this.loadingStates[userId] = null;
+      }
+    },
   },
+  LOADING_STATE,
+  SUCCESS_STATE,
 };
 </script>
 
 <template>
-  <reviewer-avatar-link
-    v-if="hasOneUser"
-    #default="{ user }"
-    tooltip-placement="left"
-    :tooltip-has-name="false"
-    :user="firstUser"
-    :root-path="rootPath"
-    :issuable-type="issuableType"
-  >
-    <div class="gl-ml-3 gl-line-height-normal">
-      <div class="author">{{ user.name }}</div>
-      <div class="username">{{ username }}</div>
-    </div>
-  </reviewer-avatar-link>
-  <div v-else>
-    <div class="user-list">
-      <div v-for="user in uncollapsedUsers" :key="user.id" class="user-item">
-        <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType" />
-      </div>
-    </div>
-    <div v-if="renderShowMoreSection" class="user-list-more">
-      <button
-        type="button"
-        class="btn-link"
-        data-qa-selector="more_reviewers_link"
-        @click="toggleShowLess"
-      >
-        <template v-if="showLess">
-          {{ hiddenReviewersLabel }}
-        </template>
-        <template v-else>{{ __('- show less') }}</template>
-      </button>
+  <div>
+    <div
+      v-for="(user, index) in users"
+      :key="user.id"
+      :class="{ 'gl-mb-3': index !== users.length - 1 }"
+      data-testid="reviewer"
+    >
+      <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType">
+        <div class="gl-ml-3">@{{ user.username }}</div>
+      </reviewer-avatar-link>
+      <gl-icon
+        v-if="loadingStates[user.id] === $options.SUCCESS_STATE"
+        :size="24"
+        name="check"
+        class="float-right gl-text-green-500"
+        data-testid="re-request-success"
+      />
+      <gl-button
+        v-else-if="user.can_update_merge_request && user.reviewed"
+        v-gl-tooltip.left
+        :title="__('Re-request review')"
+        :loading="loadingStates[user.id] === $options.LOADING_STATE"
+        class="float-right gl-text-gray-500!"
+        size="small"
+        icon="redo"
+        variant="link"
+        data-testid="re-request-button"
+        @click="reRequestReview(user.id)"
+      />
     </div>
   </div>
 </template>