Update Issue due date text styling

Updates Issue due date text on Issue Boards
to use gray color when issue is past due date
but is closed.

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -177,9 +177,9 @@ export default {
           class="confidential-icon append-right-4"
           :aria-label="__('Confidential')"
         />
-        <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>
-          {{ issue.title }}
-        </a>
+        <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
+          issue.title
+        }}</a>
       </h4>
     </div>
     <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
@@ -225,7 +225,7 @@ export default {
           #{{ issue.iid }}
         </span>
         <span class="board-info-items prepend-top-8 d-inline-block">
-          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" />
+          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight
             v-if="validIssueWeight"

app/assets/javascripts/boards/components/issue_due_date.vue

@@ -16,6 +16,11 @@ export default {
     GlTooltip,
   },
   props: {
+    closed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     date: {
       type: String,
       required: true,
@@ -66,7 +71,7 @@ export default {
       return getDayDifference(today, this.issueDueDate);
     },
     isPastDue() {
-      if (this.timeDifference >= 0) return false;
+      if (this.timeDifference >= 0 || this.closed) return false;
       return true;
     },
     standardDateFormat() {
@@ -92,7 +97,8 @@ export default {
       }}</time>
     </span>
     <gl-tooltip :target="() => $refs.issueDueDate" :placement="tooltipPlacement">
-      <span class="bold">{{ __('Due date') }}</span> <br />
+      <span class="bold">{{ __('Due date') }}</span>
+      <br />
       <span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span>
     </gl-tooltip>
   </span>

app/assets/javascripts/boards/models/issue.js

@@ -19,6 +19,7 @@ class ListIssue {
     this.isFetching = {
       subscriptions: true,
     };
+    this.closed = obj.closed;
     this.isLoading = {};
 
     this.refreshData(obj, defaultAvatar);

app/serializers/issue_board_entity.rb

@@ -12,6 +12,9 @@ class IssueBoardEntity < Grape::Entity
   expose :project_id
   expose :relative_position
   expose :time_estimate
+  expose :closed do |issue|
+    issue.closed?
+  end
 
   expose :project do |issue|
     API::Entities::Project.represent issue.project, only: [:id, :path]

changelogs/unreleased/closed-issue-weight-grey

+---
+title: Board issue due dates appear grey for closed past-due issues
+merge_request: 
+author: rachelfox
+type: fixed

spec/fixtures/api/schemas/entities/issue_board.json

@@ -5,6 +5,7 @@
     "iid": { "type": "integer" },
     "title": { "type": "string" },
     "confidential": { "type": "boolean" },
+    "closed": { "type": "boolean" },
     "due_date": { "type": "date" },
     "project_id": { "type": "integer" },
     "relative_position": { "type": ["integer", "null"] },

spec/frontend/boards/components/issue_due_date_spec.js

@@ -7,8 +7,8 @@ describe('Issue Due Date component', () => {
   let vm;
   let date;
   const Component = Vue.extend(IssueDueDate);
-  const createComponent = (dueDate = new Date()) =>
-    mountComponent(Component, { date: dateFormat(dueDate, 'yyyy-mm-dd', true) });
+  const createComponent = (dueDate = new Date(), closed = false) =>
+    mountComponent(Component, { closed, date: dateFormat(dueDate, 'yyyy-mm-dd', true) });
 
   beforeEach(() => {
     date = new Date();
@@ -56,10 +56,17 @@ describe('Issue Due Date component', () => {
     expect(vm.$el.querySelector('time').textContent.trim()).toEqual(dateFormat(date, format));
   });
 
-  it('should contain the correct `.text-danger` css class for overdue issue', () => {
+  it('should contain the correct `.text-danger` css class for overdue issue that is open', () => {
     date.setDate(date.getDate() - 17);
     vm = createComponent(date);
 
     expect(vm.$el.querySelector('time').classList.contains('text-danger')).toEqual(true);
   });
+
+  it('should not contain the `.text-danger` css class for overdue issue that is closed', () => {
+    date.setDate(date.getDate() - 17);
+    vm = createComponent(date, true);
+
+    expect(vm.$el.querySelector('time').classList.contains('text-danger')).toEqual(false);
+  });
 });