Show due date in gray when issue is closed in issues list

https://gitlab.com/gitlab-org/gitlab/-/issues/9202

Changelog: changed

app/assets/javascripts/issues_list/components/issue_card_time_info.vue

@@ -48,8 +48,8 @@ export default {
     dueDate() {
       return this.issue.dueDate && dateInWords(new Date(this.issue.dueDate), true);
     },
-    isDueDateInPast() {
-      return isInPast(new Date(this.issue.dueDate));
+    showDueDateInRed() {
+      return isInPast(new Date(this.issue.dueDate)) && !this.issue.closedAt;
     },
     timeEstimate() {
       return this.issue.humanTimeEstimate || this.issue.timeStats?.humanTimeEstimate;
@@ -97,7 +97,7 @@ export default {
       v-if="issue.dueDate"
       v-gl-tooltip
       class="issuable-due-date gl-display-none gl-sm-display-inline-block! gl-mr-3"
-      :class="{ 'gl-text-red-500': isDueDateInPast }"
+      :class="{ 'gl-text-red-500': showDueDateInRed }"
       :title="__('Due date')"
       data-testid="issuable-due-date"
     >

app/views/projects/issues/_issue.html.haml

@@ -36,7 +36,7 @@
               = sprite_icon('clock', css_class: 'gl-vertical-align-text-bottom')
               = issue.milestone.title
         - if issue.due_date
-          %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
+          %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue? && !issue.closed?}", title: _('Due date') }
              
             = sprite_icon('calendar')
             = issue.due_date.to_s(:medium)

spec/frontend/issues_list/components/issue_card_time_info_spec.js

@@ -24,6 +24,7 @@ describe('IssuesListApp component', () => {
   const findDueDate = () => wrapper.find('[data-testid="issuable-due-date"]');
 
   const mountComponent = ({
+    closedAt = null,
     dueDate = issue.dueDate,
     milestoneDueDate = issue.milestone.dueDate,
     milestoneStartDate = issue.milestone.startDate,
@@ -37,6 +38,7 @@ describe('IssuesListApp component', () => {
             dueDate: milestoneDueDate,
             startDate: milestoneStartDate,
           },
+          closedAt,
           dueDate,
         },
       },
@@ -87,12 +89,25 @@ describe('IssuesListApp component', () => {
     });
 
     describe('when in the past', () => {
+      describe('when issue is open', () => {
         it('renders in red', () => {
           wrapper = mountComponent({ dueDate: new Date('2020-10-10') });
 
           expect(findDueDate().classes()).toContain('gl-text-red-500');
         });
       });
+
+      describe('when issue is closed', () => {
+        it('does not render in red', () => {
+          wrapper = mountComponent({
+            dueDate: new Date('2020-10-10'),
+            closedAt: '2020-09-05T13:06:25Z',
+          });
+
+          expect(findDueDate().classes()).not.toContain('gl-text-red-500');
+        });
+      });
+    });
   });
 
   it('renders time estimate', () => {