Add latest changes from gitlab-org/gitlab@master

3 files changed, 27 insertions, 2 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index 157e6f7b0ba..46852e4ddd9 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -14,6 +14,7 @@ import {
   GlTabs,
   GlTab,
   GlBadge,
+  GlEmptyState,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -80,6 +81,7 @@ export default {
     GlTab,
     PublishedCell: () => import('ee_component/incidents/components/published_cell.vue'),
     GlBadge,
+    GlEmptyState,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -91,6 +93,7 @@ export default {
     'incidentType',
     'issuePath',
     'publishedAvailable',
+    'emptyListSvgPath',
   ],
   apollo: {
     incidents: {
@@ -149,7 +152,7 @@ export default {
   },
   computed: {
     showErrorMsg() {
-      return this.errored && !this.isErrorAlertDismissed && this.incidentsCount?.all === 0;
+      return this.errored && !this.isErrorAlertDismissed;
     },
     loading() {
       return this.$apollo.queries.incidents.loading;
@@ -202,6 +205,9 @@ export default {
           ]
         : this.$options.fields;
     },
+    isEmpty() {
+      return !this.incidents.list?.length;
+    },
   },
   methods: {
     onInputChange: debounce(function debounceSearch(input) {
@@ -273,6 +279,7 @@ export default {
       </gl-tabs>
 
       <gl-button
+        v-if="!isEmpty"
         class="gl-my-3 gl-mr-5 create-incident-button"
         data-testid="createIncidentBtn"
         data-qa-selector="create_incident_button"
@@ -373,7 +380,17 @@ export default {
       </template>
 
       <template #empty>
-        {{ $options.i18n.noIncidents }}
+        <gl-empty-state
+          v-if="!errored"
+          :title="$options.i18n.emptyState.title"
+          :svg-path="emptyListSvgPath"
+          :description="$options.i18n.emptyState.description"
+          :primary-button-link="newIncidentPath"
+          :primary-button-text="$options.i18n.createIncidentBtnLabel"
+        />
+        <span v-else>
+          {{ $options.i18n.noIncidents }}
+        </span>
       </template>
     </gl-table>
 
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index dc90f30991c..02d8172533d 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -7,6 +7,12 @@ export const I18N = {
   createIncidentBtnLabel: s__('IncidentManagement|Create incident'),
   unPublished: s__('IncidentManagement|Unpublished'),
   searchPlaceholder: __('Search results…'),
+  emptyState: {
+    title: s__('IncidentManagement|Display your incidents in a dedicated view'),
+    description: s__(
+      'IncidentManagement|All alerts promoted to incidents will automatically be displayed within the list. You can also create a new incident using the button below.',
+    ),
+  },
 };
 
 export const INCIDENT_STATUS_TABS = [
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index ac49ad63ad1..7505d07449c 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -15,6 +15,7 @@ export default () => {
     incidentType,
     issuePath,
     publishedAvailable,
+    emptyListSvgPath,
   } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
@@ -30,6 +31,7 @@ export default () => {
       newIssuePath,
       issuePath,
       publishedAvailable,
+      emptyListSvgPath,
     },
     apolloProvider,
     components: {