Add closed icon for incidents

We add a closed icon for
closed incidents to show
quickly the state of incidents

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -9,6 +9,7 @@ import {
   GlTooltipDirective,
   GlButton,
   GlSearchBoxByType,
+  GlIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -55,6 +56,7 @@ export default {
     GlButton,
     TimeAgoTooltip,
     GlSearchBoxByType,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -164,7 +166,15 @@ export default {
       @row-clicked="navigateToIncidentDetails"
     >
       <template #cell(title)="{ item }">
-        <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
+        <div class="gl-display-flex gl-justify-content-center">
+          <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
+          <gl-icon
+            v-if="item.state === 'closed'"
+            name="issue-close"
+            class="gl-fill-blue-500"
+            data-testid="incident-closed"
+          />
+        </div>
       </template>
 
       <template #cell(createdAt)="{ item }">

app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql

@@ -10,6 +10,7 @@ query getIncidents(
         iid
         title
         createdAt
+        state
         labels {
           nodes {
             title

changelogs/unreleased/229401-close-icon.yml

+---
+title: Add closed issue icon to incidents list for closed incidents
+merge_request: 37949
+author:
+type: changed

spec/frontend/incidents/components/incidents_list_spec.js

 import { mount } from '@vue/test-utils';
-import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import { GlAlert, GlLoadingIcon, GlTable, GlAvatar, GlSearchBoxByType } from '@gitlab/ui';
+import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { I18N } from '~/incidents/constants';
@@ -25,6 +25,7 @@ describe('Incidents List', () => {
   const findAssingees = () => wrapper.findAll('[data-testid="incident-assignees"]');
   const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
   const findSearch = () => wrapper.find(GlSearchBoxByType);
+  const findClosedIcon = () => wrapper.findAll("[data-testid='incident-closed']");
 
   function mountComponent({ data = { incidents: [] }, loading = false }) {
     wrapper = mount(IncidentsList, {
@@ -127,6 +128,12 @@ describe('Incidents List', () => {
           .trigger('click');
         expect(visitUrl).toHaveBeenCalledWith(joinPaths(`/project/isssues/`, mockIncidents[0].iid));
       });
+
+      it('renders a closed icon for closed incidents', () => {
+        expect(findClosedIcon().length).toBe(
+          mockIncidents.filter(({ state }) => state === 'closed').length,
+        );
+      });
     });
   });
 

spec/frontend/incidents/mocks/incidents.json

@@ -3,7 +3,8 @@
     "iid": "15",
     "title": "New: Incident",
     "createdAt": "2020-06-03T15:46:08Z",
-    "assignees": {}
+    "assignees": {},
+    "state": "opened"
   },
   {
     "iid": "14",
@@ -18,18 +19,21 @@
           "webUrl": "https://invalid"
         }
       ]
-    }
+    },
+    "state": "opened"
   },
   {
     "iid": "13",
     "title": "Create issue3",
     "createdAt": "2020-05-19T08:53:55Z",
-    "assignees": {}
+    "assignees": {},
+    "state": "closed"
   },
   {
     "iid": "12",
     "title": "Create issue2",
     "createdAt": "2020-05-18T17:13:35Z",
-    "assignees": {}
+    "assignees": {},
+    "state": "closed"
   }
 ]