diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue | 50 |
1 files changed, 47 insertions, 3 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue index c2ca87af9ce..8d5c3b2def3 100644 --- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue @@ -1,6 +1,8 @@ <script> +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { IssuableType } from '~/issue_show/constants'; import { __, sprintf } from '~/locale'; +import AttentionRequestedToggle from '../attention_requested_toggle.vue'; import AssigneeAvatarLink from './assignee_avatar_link.vue'; import UserNameWithStatus from './user_name_with_status.vue'; @@ -8,9 +10,11 @@ const DEFAULT_RENDER_COUNT = 5; export default { components: { + AttentionRequestedToggle, AssigneeAvatarLink, UserNameWithStatus, }, + mixins: [glFeatureFlagsMixin()], props: { users: { type: Array, @@ -32,6 +36,10 @@ export default { return this.users[0]; }, hasOneUser() { + if (this.showVerticalList) { + return false; + } + return this.users.length === 1; }, hiddenAssigneesLabel() { @@ -45,6 +53,10 @@ export default { return this.users.length - DEFAULT_RENDER_COUNT; }, uncollapsedUsers() { + if (this.showVerticalList) { + return this.users; + } + const uncollapsedLength = this.showLess ? Math.min(this.users.length, DEFAULT_RENDER_COUNT) : this.users.length; @@ -53,6 +65,12 @@ export default { username() { return `@${this.firstUser.username}`; }, + showVerticalList() { + return this.glFeatures.mrAttentionRequests && this.isMergeRequest; + }, + isMergeRequest() { + return this.issuableType === IssuableType.MergeRequest; + }, }, methods: { toggleShowLess() { @@ -64,6 +82,9 @@ export default { } return u?.status?.availability || ''; }, + toggleAttentionRequested(data) { + this.$emit('toggle-attention-requested', data); + }, }, }; </script> @@ -84,11 +105,34 @@ export default { <div v-else> <div class="gl-display-flex gl-flex-wrap"> <div - v-for="user in uncollapsedUsers" + v-for="(user, index) in uncollapsedUsers" :key="user.id" - class="user-item gl-display-inline-block" + :class="{ + 'user-item': !showVerticalList, + 'gl-mb-3': index !== users.length - 1 && showVerticalList, + }" + class="gl-display-inline-block" > - <assignee-avatar-link :user="user" :issuable-type="issuableType" /> + <attention-requested-toggle + v-if="showVerticalList && user.can_update_merge_request" + :user="user" + type="assignee" + @toggle-attention-requested="toggleAttentionRequested" + /> + <assignee-avatar-link + :user="user" + :issuable-type="issuableType" + :tooltip-has-name="!showVerticalList" + > + <div + v-if="showVerticalList" + class="gl-ml-3 gl-line-height-normal gl-display-grid" + data-testid="username" + > + <user-name-with-status :name="user.name" :availability="userAvailability(user)" /> + <span>@{{ user.username }}</span> + </div> + </assignee-avatar-link> </div> </div> <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800"> |