diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue | 44 |
1 files changed, 36 insertions, 8 deletions
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue index c80ccc928b3..2e00a23de7c 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue @@ -16,11 +16,13 @@ import { IssuableType } from '~/issue_show/constants'; import { __, s__, sprintf } from '~/locale'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; import { + Tracking, IssuableAttributeState, IssuableAttributeType, issuableAttributesQueries, noAttributeId, -} from '../constants'; + defaultEpicSort, +} from '~/sidebar/constants'; export default { noAttributeId, @@ -28,6 +30,7 @@ export default { issuableAttributesQueries, i18n: { [IssuableAttributeType.Milestone]: __('Milestone'), + expired: __('(expired)'), none: __('None'), }, directives: { @@ -73,9 +76,14 @@ export default { type: String, required: true, validator(value) { - return value === IssuableType.Issue; + return [IssuableType.Issue, IssuableType.MergeRequest].includes(value); }, }, + icon: { + type: String, + required: false, + default: undefined, + }, }, apollo: { currentAttribute: { @@ -117,7 +125,9 @@ export default { return { fullPath: this.attrWorkspacePath, title: this.searchTerm, + in: this.searchTerm && this.issuableAttribute === IssuableType.Epic ? 'TITLE' : undefined, state: this.$options.IssuableAttributeState[this.issuableAttribute], + sort: this.issuableAttribute === IssuableType.Epic ? defaultEpicSort : null, }; }, update(data) { @@ -140,8 +150,8 @@ export default { currentAttribute: null, attributesList: [], tracking: { - label: 'right_sidebar', - event: 'click_edit_button', + event: Tracking.editEvent, + label: Tracking.rightSidebarLabel, property: this.issuableAttribute, }, }; @@ -170,6 +180,9 @@ export default { attributeTypeTitle() { return this.$options.i18n[this.issuableAttribute]; }, + attributeTypeIcon() { + return this.icon || this.issuableAttribute; + }, i18n() { return { noAttribute: sprintf(s__('DropdownWidget|No %{issuableAttribute}'), { @@ -222,7 +235,8 @@ export default { variables: { fullPath: this.workspacePath, attributeId: - this.issuableAttribute === IssuableAttributeType.Milestone + this.issuableAttribute === IssuableAttributeType.Milestone && + this.issuableType === IssuableType.Issue ? getIdFromGraphQLId(attributeId) : attributeId, iid: this.iid, @@ -253,6 +267,11 @@ export default { attributeId === this.currentAttribute?.id || (!this.currentAttribute?.id && !attributeId) ); }, + isAttributeOverdue(attribute) { + return this.issuableAttribute === IssuableAttributeType.Milestone + ? attribute?.expired + : false; + }, showDropdown() { this.$refs.newDropdown.show(); }, @@ -282,8 +301,10 @@ export default { > <template #collapsed> <div v-if="isClassicSidebar" v-gl-tooltip class="sidebar-collapsed-icon"> - <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="issuableAttribute" /> - <span class="collapse-truncated-title">{{ attributeTitle }}</span> + <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="attributeTypeIcon" /> + <span class="collapse-truncated-title"> + {{ attributeTitle }} + </span> </div> <div :data-testid="`select-${issuableAttribute}`" @@ -300,8 +321,13 @@ export default { :attributeUrl="attributeUrl" :currentAttribute="currentAttribute" > - <gl-link class="gl-text-gray-900! gl-font-weight-bold" :href="attributeUrl"> + <gl-link + class="gl-text-gray-900! gl-font-weight-bold" + :href="attributeUrl" + :data-qa-selector="`${issuableAttribute}_link`" + > {{ attributeTitle }} + <span v-if="isAttributeOverdue(currentAttribute)">{{ $options.i18n.expired }}</span> </gl-link> </slot> </div> @@ -328,6 +354,7 @@ export default { <gl-dropdown-divider /> <gl-loading-icon v-if="$apollo.queries.attributesList.loading" + size="sm" class="gl-py-4" data-testid="loading-icon-dropdown" /> @@ -351,6 +378,7 @@ export default { @click="updateAttribute(attrItem.id)" > {{ attrItem.title }} + <span v-if="isAttributeOverdue(attrItem)">{{ $options.i18n.expired }}</span> </gl-dropdown-item> </slot> </template> |