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>