Add latest changes from gitlab-org/gitlab@master

3 files changed, 38 insertions, 20 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index 50f2136325d..3ecd911e814 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -39,6 +39,7 @@ import {
   DEFAULT_PAGE_SIZE,
   INCIDENT_STATUS_TABS,
   TH_CREATED_AT_TEST_ID,
+  TH_INCIDENT_SLA_TEST_ID,
   TH_SEVERITY_TEST_ID,
   TH_PUBLISHED_TEST_ID,
   INCIDENT_DETAILS_PATH,
@@ -67,7 +68,7 @@ export default {
     {
       key: 'severity',
       label: s__('IncidentManagement|Severity'),
-      thClass,
+      thClass: `${thClass} w-15p`,
       tdClass: `${tdClass} sortable-cell`,
       sortable: true,
       thAttr: TH_SEVERITY_TEST_ID,
@@ -75,23 +76,38 @@ export default {
     {
       key: 'title',
       label: s__('IncidentManagement|Incident'),
-      thClass: `gl-pointer-events-none gl-w-half`,
+      thClass: `gl-pointer-events-none`,
       tdClass,
     },
     {
       key: 'createdAt',
       label: s__('IncidentManagement|Date created'),
-      thClass,
+      thClass: `${thClass} gl-w-eighth`,
       tdClass: `${tdClass} sortable-cell`,
       sortable: true,
       thAttr: TH_CREATED_AT_TEST_ID,
     },
     {
+      key: 'incidentSla',
+      label: s__('IncidentManagement|Time to SLA'),
+      thClass: `gl-pointer-events-none gl-text-right gl-w-eighth`,
+      tdClass: `${tdClass} gl-text-right`,
+      thAttr: TH_INCIDENT_SLA_TEST_ID,
+    },
+    {
       key: 'assignees',
       label: s__('IncidentManagement|Assignees'),
-      thClass: 'gl-pointer-events-none',
+      thClass: 'gl-pointer-events-none w-15p',
       tdClass,
     },
+    {
+      key: 'published',
+      label: s__('IncidentManagement|Published'),
+      thClass: `${thClass} w-15p`,
+      tdClass: `${tdClass} sortable-cell`,
+      sortable: true,
+      thAttr: TH_PUBLISHED_TEST_ID,
+    },
   ],
   components: {
     GlLoadingIcon,
@@ -107,6 +123,8 @@ export default {
     GlTabs,
     GlTab,
     PublishedCell: () => import('ee_component/incidents/components/published_cell.vue'),
+    ServiceLevelAgreementCell: () =>
+      import('ee_component/incidents/components/service_level_agreement_cell.vue'),
     GlBadge,
     GlEmptyState,
     SeverityToken,
@@ -126,6 +144,7 @@ export default {
     'textQuery',
     'authorUsernamesQuery',
     'assigneeUsernamesQuery',
+    'slaFeatureAvailable',
   ],
   apollo: {
     incidents: {
@@ -231,21 +250,12 @@ export default {
       );
     },
     availableFields() {
-      return this.publishedAvailable
-        ? [
-            ...this.$options.fields,
-            ...[
-              {
-                key: 'published',
-                label: s__('IncidentManagement|Published'),
-                thClass,
-                tdClass: `${tdClass} sortable-cell`,
-                sortable: true,
-                thAttr: TH_PUBLISHED_TEST_ID,
-              },
-            ],
-          ]
-        : this.$options.fields;
+      const isHidden = {
+        published: !this.publishedAvailable,
+        incidentSla: !this.slaFeatureAvailable,
+      };
+
+      return this.$options.fields.filter(({ key }) => !isHidden[key]);
     },
     isEmpty() {
       return !this.incidents.list?.length;
@@ -526,6 +536,10 @@ export default {
         <time-ago-tooltip :time="item.createdAt" />
       </template>
 
+      <template v-if="slaFeatureAvailable" #cell(incidentSla)="{ item }">
+        <service-level-agreement-cell :sla-due-at="item.slaDueAt" data-testid="incident-sla" />
+      </template>
+
       <template #cell(assignees)="{ item }">
         <div data-testid="incident-assignees">
           <template v-if="hasAssignees(item.assignees)">
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index bdabf1c3e42..4fccefb66c5 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -46,5 +46,6 @@ export const trackIncidentCreateNewOptions = {
 export const DEFAULT_PAGE_SIZE = 20;
 export const TH_CREATED_AT_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
 export const TH_SEVERITY_TEST_ID = { 'data-testid': 'incident-management-severity-sort' };
+export const TH_INCIDENT_SLA_TEST_ID = { 'data-testid': 'incident-management-sla' };
 export const TH_PUBLISHED_TEST_ID = { 'data-testid': 'incident-management-published-sort' };
 export const INCIDENT_DETAILS_PATH = 'incident';
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index aeec4a258b9..15af7432436 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import IncidentsList from './components/incidents_list.vue';
 
 Vue.use(VueApollo);
@@ -19,6 +20,7 @@ export default () => {
     textQuery,
     authorUsernamesQuery,
     assigneeUsernamesQuery,
+    slaFeatureAvailable,
   } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
@@ -33,11 +35,12 @@ export default () => {
       incidentType,
       newIssuePath,
       issuePath,
-      publishedAvailable,
+      publishedAvailable: parseBoolean(publishedAvailable),
       emptyListSvgPath,
       textQuery,
       authorUsernamesQuery,
       assigneeUsernamesQuery,
+      slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
     },
     apolloProvider,
     components: {