diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components')
12 files changed, 175 insertions, 14 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"> diff --git a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue new file mode 100644 index 00000000000..38ba468d197 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue @@ -0,0 +1,74 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; + +export default { + i18n: { + attentionRequestedReviewer: __('Request attention to review'), + attentionRequestedAssignee: __('Request attention'), + removeAttentionRequested: __('Remove attention request'), + }, + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + type: { + type: String, + required: true, + }, + user: { + type: Object, + required: true, + }, + }, + data() { + return { + loading: false, + }; + }, + computed: { + tooltipTitle() { + if (this.user.attention_requested) { + return this.$options.i18n.removeAttentionRequested; + } + + return this.type === 'reviewer' + ? this.$options.i18n.attentionRequestedReviewer + : this.$options.i18n.attentionRequestedAssignee; + }, + }, + methods: { + toggleAttentionRequired() { + if (this.loading) return; + + this.$root.$emit(BV_HIDE_TOOLTIP); + this.loading = true; + this.$emit('toggle-attention-requested', { + user: this.user, + callback: this.toggleAttentionRequiredComplete, + }); + }, + toggleAttentionRequiredComplete() { + this.loading = false; + }, + }, +}; +</script> + +<template> + <span v-gl-tooltip.left.viewport="tooltipTitle"> + <gl-button + :loading="loading" + :variant="user.attention_requested ? 'warning' : 'default'" + :icon="user.attention_requested ? 'star' : 'star-o'" + :aria-label="tooltipTitle" + size="small" + category="tertiary" + @click="toggleAttentionRequired" + /> + </span> +</template> diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue index d5647619ea3..5cd4a1a5192 100644 --- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue +++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue @@ -11,6 +11,7 @@ import { toLabelGid } from '~/sidebar/utils'; import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants'; import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue'; +import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; const mutationMap = { @@ -48,6 +49,7 @@ export default { return { isLabelsSelectInProgress: false, selectedLabels: this.initiallySelectedLabels, + LabelType, }; }, methods: { @@ -154,13 +156,12 @@ export default { :footer-manage-label-title="__('Manage project labels')" :labels-create-title="__('Create project label')" :labels-filter-base-path="projectIssuesPath" - :labels-select-in-progress="isLabelsSelectInProgress" - :selected-labels="selectedLabels" :variant="$options.variant" :issuable-type="issuableType" + workspace-type="project" + :attr-workspace-path="fullPath" + :label-create-type="LabelType.project" data-qa-selector="labels_block" - @onLabelRemove="handleLabelRemove" - @updateSelectedLabels="handleUpdateSelectedLabels" > {{ __('None') }} </labels-select-widget> diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue index 5729b958b5d..b07fd944ff9 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue @@ -49,6 +49,9 @@ export default { requestReview(data) { this.$emit('request-review', data); }, + toggleAttentionRequested(data) { + this.$emit('toggle-attention-requested', data); + }, }, }; </script> @@ -70,6 +73,7 @@ export default { :root-path="rootPath" :issuable-type="issuableType" @request-review="requestReview" + @toggle-attention-requested="toggleAttentionRequested" /> </div> </div> diff --git a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue index e414aaf719b..2ea63219e92 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue @@ -88,6 +88,9 @@ export default { requestReview(data) { this.mediator.requestReview(data); }, + toggleAttentionRequested(data) { + this.mediator.toggleAttentionRequested('reviewer', data); + }, }, }; </script> @@ -106,6 +109,7 @@ export default { :editable="store.editable" :issuable-type="issuableType" @request-review="requestReview" + @toggle-attention-requested="toggleAttentionRequested" /> </div> </template> 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 2922008cfb2..adaf1b65f3f 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue @@ -1,6 +1,8 @@ <script> import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { __, sprintf, s__ } from '~/locale'; +import AttentionRequestedToggle from '../attention_requested_toggle.vue'; import ReviewerAvatarLink from './reviewer_avatar_link.vue'; const LOADING_STATE = 'loading'; @@ -14,10 +16,12 @@ export default { GlButton, GlIcon, ReviewerAvatarLink, + AttentionRequestedToggle, }, directives: { GlTooltip: GlTooltipDirective, }, + mixins: [glFeatureFlagsMixin()], props: { users: { type: Array, @@ -76,6 +80,9 @@ export default { this.loadingStates[userId] = null; } }, + toggleAttentionRequested(data) { + this.$emit('toggle-attention-requested', data); + }, }, LOADING_STATE, SUCCESS_STATE, @@ -90,6 +97,12 @@ export default { :class="{ 'gl-mb-3': index !== users.length - 1 }" data-testid="reviewer" > + <attention-requested-toggle + v-if="glFeatures.mrAttentionRequests && user.can_update_merge_request" + :user="user" + type="reviewer" + @toggle-attention-requested="toggleAttentionRequested" + /> <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType"> <div class="gl-ml-3 gl-line-height-normal gl-display-grid"> <span>{{ user.name }}</span> @@ -113,7 +126,9 @@ export default { data-testid="re-request-success" /> <gl-button - v-else-if="user.can_update_merge_request && user.reviewed" + v-else-if=" + user.can_update_merge_request && user.reviewed && !glFeatures.mrAttentionRequests + " v-gl-tooltip.left :title="$options.i18n.reRequestReview" :aria-label="$options.i18n.reRequestReview" diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue index 8f4d5406da8..0ba8c4f8907 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue @@ -370,6 +370,7 @@ export default { :loading="loading" class="gl-w-full" toggle-class="gl-max-w-100" + block @shown="setFocus" > <gl-search-box-by-type ref="search" v-model="searchTerm" /> diff --git a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue index 22adbd79ef6..056b3e98a1c 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue @@ -134,7 +134,7 @@ export default { v-if="canUpdate && !initialLoading && canEdit" category="tertiary" size="small" - class="gl-text-gray-900! gl-ml-auto hide-collapsed gl-mr-n2" + class="gl-text-gray-900! gl-ml-auto hide-collapsed gl-mr-n2 shortcut-sidebar-dropdown-toggle" data-testid="edit-button" :data-track-action="tracking.event" :data-track-label="tracking.label" diff --git a/app/assets/javascripts/sidebar/components/time_tracking/report.vue b/app/assets/javascripts/sidebar/components/time_tracking/report.vue index d4a8abb81a8..5d4031ac68b 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/report.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/report.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlTable } from '@gitlab/ui'; +import { GlLoadingIcon, GlTableLite } from '@gitlab/ui'; import createFlash from '~/flash'; import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; @@ -12,7 +12,7 @@ const TIME_DATE_FORMAT = 'mmmm d, yyyy, HH:MM ("UTC:" o)'; export default { components: { GlLoadingIcon, - GlTable, + GlTableLite, }, inject: ['issuableType'], props: { @@ -89,7 +89,7 @@ export default { <template> <div> <div v-if="isLoading"><gl-loading-icon size="md" /></div> - <gl-table v-else :items="report" :fields="$options.fields" foot-clone> + <gl-table-lite v-else :items="report" :fields="$options.fields" foot-clone> <template #cell(spentAt)="{ item: { spentAt } }"> <div>{{ formatDate(spentAt) }}</div> </template> @@ -111,6 +111,6 @@ export default { <div>{{ getSummary(summary, note) }}</div> </template> <template #foot(note)> </template> - </gl-table> + </gl-table-lite> </div> </template> |