Fix showing closed issues as open in group/project issues list

An issue's `closedAt` property was checked to see whether it is
closed (to mimic the logic in the Haml template). However,
we added the `closed_at` database column 5 years ago and did
not backfill the data so issues older than this incorrectly
showed as open on the group/project issues list. This commit
fixes this by checking the issue's `state` property.

Behind feature flag `vue_issues_list` defaulted to off.

app/assets/javascripts/issues/list/components/issue_card_time_info.vue

 <script>
 import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { IssuableStatus } from '~/issues/constants';
 import {
   dateInWords,
   getTimeRemainingInWords,
@@ -41,7 +42,10 @@ export default {
       return this.issue.dueDate && dateInWords(newDateAsLocaleTime(this.issue.dueDate), true);
     },
     showDueDateInRed() {
-      return isInPast(newDateAsLocaleTime(this.issue.dueDate)) && !this.issue.closedAt;
+      return (
+        isInPast(newDateAsLocaleTime(this.issue.dueDate)) &&
+        this.issue.state !== IssuableStatus.Closed
+      );
     },
     timeEstimate() {
       return this.issue.humanTimeEstimate || this.issue.timeStats?.humanTimeEstimate;

app/assets/javascripts/issues/list/components/issues_list_app.vue

@@ -19,6 +19,7 @@ import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { ITEM_TYPE } from '~/groups/constants';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
+import { IssuableStatus } from '~/issues/constants';
 import axios from '~/lib/utils/axios_utils';
 import { scrollUp } from '~/lib/utils/scroll_utils';
 import { getParameterByName, joinPaths } from '~/lib/utils/url_utility';
@@ -480,10 +481,10 @@ export default {
       return `${this.exportCsvPath}${window.location.search}`;
     },
     getStatus(issue) {
-      if (issue.closedAt && issue.moved) {
+      if (issue.state === IssuableStatus.Closed && issue.moved) {
         return this.$options.i18n.closedMoved;
       }
-      if (issue.closedAt) {
+      if (issue.state === IssuableStatus.Closed) {
         return this.$options.i18n.closed;
       }
       return undefined;

app/assets/javascripts/issues/list/queries/issue.fragment.graphql

@@ -2,7 +2,6 @@ fragment IssueFragment on Issue {
   __typename
   id
   iid
-  closedAt
   confidential
   createdAt
   downvotes
@@ -11,6 +10,7 @@ fragment IssueFragment on Issue {
   humanTimeEstimate
   mergeRequestsCount
   moved
+  state
   title
   updatedAt
   upvotes

spec/frontend/issues/list/components/issue_card_time_info_spec.js

 import { GlIcon, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { useFakeDate } from 'helpers/fake_date';
+import { IssuableStatus } from '~/issues/constants';
 import IssueCardTimeInfo from '~/issues/list/components/issue_card_time_info.vue';
 
 describe('CE IssueCardTimeInfo component', () => {
@@ -24,7 +25,7 @@ describe('CE IssueCardTimeInfo component', () => {
   const findDueDate = () => wrapper.find('[data-testid="issuable-due-date"]');
 
   const mountComponent = ({
-    closedAt = null,
+    state = IssuableStatus.Open,
     dueDate = issue.dueDate,
     milestoneDueDate = issue.milestone.dueDate,
     milestoneStartDate = issue.milestone.startDate,
@@ -38,7 +39,7 @@ describe('CE IssueCardTimeInfo component', () => {
             dueDate: milestoneDueDate,
             startDate: milestoneStartDate,
           },
-          closedAt,
+          state,
           dueDate,
         },
       },
@@ -101,7 +102,7 @@ describe('CE IssueCardTimeInfo component', () => {
         it('does not render in red', () => {
           wrapper = mountComponent({
             dueDate: '2020-10-10',
-            closedAt: '2020-09-05T13:06:25Z',
+            state: IssuableStatus.Closed,
           });
 
           expect(findDueDate().classes()).not.toContain('gl-text-red-500');

spec/frontend/issues/list/mock_data.js

@@ -21,7 +21,6 @@ export const getIssuesQueryResponse = {
             __typename: 'Issue',
             id: 'gid://gitlab/Issue/123456',
             iid: '789',
-            closedAt: null,
             confidential: false,
             createdAt: '2021-05-22T04:08:01Z',
             downvotes: 2,
@@ -30,6 +29,7 @@ export const getIssuesQueryResponse = {
             humanTimeEstimate: null,
             mergeRequestsCount: false,
             moved: false,
+            state: 'opened',
             title: 'Issue title',
             updatedAt: '2021-05-22T04:08:01Z',
             upvotes: 3,