diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/assignees')
4 files changed, 66 insertions, 4 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue index e41bb41dc05..bdd014163a0 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -39,6 +39,9 @@ export default { assignSelf() { this.$emit('assign-self'); }, + toggleAttentionRequested(data) { + this.$emit('toggle-attention-requested', data); + }, }, }; </script> @@ -58,7 +61,12 @@ export default { </template> </span> - <uncollapsed-assignee-list v-else :users="sortedAssigness" :issuable-type="issuableType" /> + <uncollapsed-assignee-list + v-else + :users="sortedAssigness" + :issuable-type="issuableType" + @toggle-attention-requested="toggleAttentionRequested" + /> </div> </div> </template> diff --git a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue index 80caebad39d..a3379784bc1 100644 --- a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue @@ -32,6 +32,11 @@ export default { return this.users.length === 0; }, }, + methods: { + toggleAttentionRequested(data) { + this.$emit('toggle-attention-requested', data); + }, + }, }; </script> @@ -61,6 +66,7 @@ export default { :users="users" :issuable-type="issuableType" class="gl-text-gray-800 gl-mt-2 hide-collapsed" + @toggle-attention-requested="toggleAttentionRequested" /> </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 c6877226b7d..453dd1b0580 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue @@ -125,6 +125,9 @@ export default { availability: this.assigneeAvailabilityStatus[username] || '', })); }, + toggleAttentionRequested(data) { + this.mediator.toggleAttentionRequested('assignee', data); + }, }, }; </script> @@ -152,6 +155,7 @@ export default { :editable="store.editable" :issuable-type="issuableType" @assign-self="assignSelf" + @toggle-attention-requested="toggleAttentionRequested" /> </div> </template> 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"> |