Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

4 files changed, 58 insertions, 8 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index 7a904bdb6ad..324797ad645 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -1,5 +1,6 @@
 <script>
 import {
+  GlLink,
   GlLoadingIcon,
   GlTable,
   GlAvatarsInline,
@@ -24,9 +25,11 @@ import {
 } from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants';
 import PaginatedTableWithSearchAndTabs from '~/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import {
   I18N,
   INCIDENT_STATUS_TABS,
+  ESCALATION_STATUSES,
   TH_CREATED_AT_TEST_ID,
   TH_INCIDENT_SLA_TEST_ID,
   TH_SEVERITY_TEST_ID,
@@ -38,7 +41,7 @@ import {
 import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 
-const MAX_VISIBLE_ASSIGNEES = 4;
+const MAX_VISIBLE_ASSIGNEES = 3;
 
 export default {
   trackIncidentCreateNewOptions,
@@ -49,7 +52,7 @@ export default {
     {
       key: 'severity',
       label: s__('IncidentManagement|Severity'),
-      thClass: `${thClass} w-15p`,
+      thClass: `${thClass} gl-w-15p`,
       tdClass: `${tdClass} sortable-cell`,
       actualSortKey: 'SEVERITY',
       sortable: true,
@@ -62,6 +65,12 @@ export default {
       tdClass,
     },
     {
+      key: 'escalationStatus',
+      label: s__('IncidentManagement|Status'),
+      thClass: `${thClass} gl-w-eighth gl-pointer-events-none`,
+      tdClass,
+    },
+    {
       key: 'createdAt',
       label: s__('IncidentManagement|Date created'),
       thClass: `${thClass} gl-w-eighth`,
@@ -73,7 +82,7 @@ export default {
     {
       key: 'incidentSla',
       label: s__('IncidentManagement|Time to SLA'),
-      thClass: `gl-text-right gl-w-eighth`,
+      thClass: `gl-text-right gl-w-10p`,
       tdClass: `${tdClass} gl-text-right`,
       thAttr: TH_INCIDENT_SLA_TEST_ID,
       actualSortKey: 'SLA_DUE_AT',
@@ -83,13 +92,13 @@ export default {
     {
       key: 'assignees',
       label: s__('IncidentManagement|Assignees'),
-      thClass: 'gl-pointer-events-none w-15p',
+      thClass: 'gl-pointer-events-none gl-w-15',
       tdClass,
     },
     {
       key: 'published',
       label: s__('IncidentManagement|Published'),
-      thClass: `${thClass} w-15p`,
+      thClass: `${thClass} gl-w-15`,
       tdClass: `${tdClass} sortable-cell`,
       actualSortKey: 'PUBLISHED',
       sortable: true,
@@ -98,6 +107,7 @@ export default {
   ],
   MAX_VISIBLE_ASSIGNEES,
   components: {
+    GlLink,
     GlLoadingIcon,
     GlTable,
     GlAvatarsInline,
@@ -112,6 +122,7 @@ export default {
     GlEmptyState,
     SeverityToken,
     PaginatedTableWithSearchAndTabs,
+    TooltipOnTruncate,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -129,6 +140,7 @@ export default {
     'assigneeUsernameQuery',
     'slaFeatureAvailable',
     'canCreateIncident',
+    'incidentEscalationsAvailable',
   ],
   apollo: {
     incidents: {
@@ -222,6 +234,7 @@ export default {
       const isHidden = {
         published: !this.publishedAvailable,
         incidentSla: !this.slaFeatureAvailable,
+        escalationStatus: !this.incidentEscalationsAvailable,
       };
 
       return this.$options.fields.filter(({ key }) => !isHidden[key]);
@@ -260,7 +273,7 @@ export default {
       return Boolean(assignees.nodes?.length);
     },
     navigateToIncidentDetails({ iid }) {
-      return visitUrl(joinPaths(this.issuePath, INCIDENT_DETAILS_PATH, iid));
+      return visitUrl(this.showIncidentLink({ iid }));
     },
     navigateToCreateNewIncident() {
       const { category, action } = this.$options.trackIncidentCreateNewOptions;
@@ -283,6 +296,12 @@ export default {
     getSeverity(severity) {
       return INCIDENT_SEVERITY[severity];
     },
+    getEscalationStatus(escalationStatus) {
+      return ESCALATION_STATUSES[escalationStatus] || this.$options.i18n.noEscalationStatus;
+    },
+    showIncidentLink({ iid }) {
+      return joinPaths(this.issuePath, INCIDENT_DETAILS_PATH, iid);
+    },
     pageChanged(pagination) {
       this.pagination = pagination;
     },
@@ -370,7 +389,14 @@ export default {
 
           <template #cell(title)="{ item }">
             <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
-              <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
+              <gl-link
+                v-gl-tooltip
+                :title="item.title"
+                data-testid="incident-link"
+                :href="showIncidentLink(item)"
+              >
+                {{ item.title }}
+              </gl-link>
               <gl-icon
                 v-if="item.state === 'closed'"
                 name="issue-close"
@@ -381,8 +407,21 @@ export default {
             </div>
           </template>
 
+          <template v-if="incidentEscalationsAvailable" #cell(escalationStatus)="{ item }">
+            <tooltip-on-truncate
+              :title="getEscalationStatus(item.escalationStatus)"
+              data-testid="incident-escalation-status"
+              class="gl-display-block gl-text-truncate"
+            >
+              {{ getEscalationStatus(item.escalationStatus) }}
+            </tooltip-on-truncate>
+          </template>
+
           <template #cell(createdAt)="{ item }">
-            <time-ago-tooltip :time="item.createdAt" />
+            <time-ago-tooltip
+              :time="item.createdAt"
+              class="gl-display-block gl-max-w-full gl-text-truncate"
+            />
           </template>
 
           <template v-if="slaFeatureAvailable" #cell(incidentSla)="{ item }">
@@ -392,6 +431,7 @@ export default {
               :project-path="projectPath"
               :sla-due-at="item.slaDueAt"
               data-testid="incident-sla"
+              class="gl-display-block gl-max-w-full gl-text-truncate"
             />
           </template>
 
@@ -432,6 +472,7 @@ export default {
               :un-published="$options.i18n.unPublished"
             />
           </template>
+
           <template #table-busy>
             <gl-loading-icon size="lg" color="dark" class="mt-3" />
           </template>
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index 23909ae3b6c..21cdbef05a1 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -7,6 +7,7 @@ export const I18N = {
   unassigned: s__('IncidentManagement|Unassigned'),
   createIncidentBtnLabel: s__('IncidentManagement|Create incident'),
   unPublished: s__('IncidentManagement|Unpublished'),
+  noEscalationStatus: s__('IncidentManagement|None'),
   emptyState: {
     title: s__('IncidentManagement|Display your incidents in a dedicated view'),
     emptyClosedTabTitle: s__('IncidentManagement|There are no closed incidents'),
@@ -37,6 +38,12 @@ export const INCIDENT_STATUS_TABS = [
   },
 ];
 
+export const ESCALATION_STATUSES = {
+  TRIGGERED: s__('AlertManagement|Triggered'),
+  ACKNOWLEDGED: s__('AlertManagement|Acknowledged'),
+  RESOLVED: s__('AlertManagement|Resolved'),
+};
+
 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' };
diff --git a/app/assets/javascripts/incidents/graphql/fragments/incident_fields.fragment.graphql b/app/assets/javascripts/incidents/graphql/fragments/incident_fields.fragment.graphql
index faa68d37088..b72941966c6 100644
--- a/app/assets/javascripts/incidents/graphql/fragments/incident_fields.fragment.graphql
+++ b/app/assets/javascripts/incidents/graphql/fragments/incident_fields.fragment.graphql
@@ -1,4 +1,5 @@
 # eslint-disable-next-line @graphql-eslint/require-id-when-available
 fragment IncidentFields on Issue {
   severity
+  escalationStatus
 }
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index 1d40f1093a4..c0f16a43d5c 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -46,6 +46,7 @@ export default () => {
       assigneeUsernameQuery,
       slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
       canCreateIncident: parseBoolean(canCreateIncident),
+      incidentEscalationsAvailable: parseBoolean(gon?.features?.incidentEscalations),
     },
     apolloProvider,
     render(createElement) {