Empty state for incidents list

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>
 

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 = [

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: {

app/helpers/projects/incidents_helper.rb

@@ -7,7 +7,8 @@ module Projects::IncidentsHelper
       'new-issue-path' => new_project_issue_path(project),
       'incident-template-name' => 'incident',
       'incident-type' => 'incident',
-      'issue-path' => project_issues_path(project)
+      'issue-path' => project_issues_path(project),
+      'empty-list-svg-path' => image_path('illustrations/incident-empty-state.svg')
     }
   end
 end

changelogs/unreleased/229636-empty-incidents-list.yml

+---
+title: Empty State for the Incident list
+merge_request: 39718
+author:
+type: added

ee/spec/helpers/ee/projects/incidents_helper_spec.rb

@@ -17,7 +17,8 @@ RSpec.describe Projects::IncidentsHelper do
         'new-issue-path' => new_issue_path,
         'incident-template-name' => 'incident',
         'incident-type' => 'incident',
-        'issue-path' => issue_path
+        'issue-path' => issue_path,
+        'empty-list-svg-path' => match_asset_path('/assets/illustrations/incident-empty-state.svg')
       }
     end
 
@@ -30,13 +31,13 @@ RSpec.describe Projects::IncidentsHelper do
     context 'when status page feature is available' do
       let(:status_page_feature_available) { true }
 
-      it { is_expected.to eq(expected_incidents_data.merge('published-available' => 'true')) }
+      it { is_expected.to match(expected_incidents_data.merge('published-available' => 'true')) }
     end
 
     context 'when status page issue is not available' do
       let(:status_page_feature_available) { false }
 
-      it { is_expected.to eq(expected_incidents_data) }
+      it { is_expected.to match(expected_incidents_data) }
     end
   end
 end

locale/gitlab.pot

@@ -12911,6 +12911,9 @@ msgstr ""
 msgid "IncidentManagement|All"
 msgstr ""
 
+msgid "IncidentManagement|All alerts promoted to incidents will automatically be displayed within the list. You can also create a new incident using the button below."
+msgstr ""
+
 msgid "IncidentManagement|Assignees"
 msgstr ""
 
@@ -12923,6 +12926,9 @@ msgstr ""
 msgid "IncidentManagement|Date created"
 msgstr ""
 
+msgid "IncidentManagement|Display your incidents in a dedicated view"
+msgstr ""
+
 msgid "IncidentManagement|Incident"
 msgstr ""
 

spec/frontend/incidents/components/incidents_list_spec.js

@@ -9,6 +9,7 @@ import {
   GlTab,
   GlTabs,
   GlBadge,
+  GlEmptyState,
 } from '@gitlab/ui';
 import { visitUrl, joinPaths, mergeUrlParams } from '~/lib/utils/url_utility';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
@@ -25,6 +26,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
 describe('Incidents List', () => {
   let wrapper;
   const newIssuePath = 'namespace/project/-/issues/new';
+  const emptyListSvgPath = '/assets/empty.svg';
   const incidentTemplateName = 'incident';
   const incidentType = 'incident';
   const incidentsCount = {
@@ -48,6 +50,7 @@ describe('Incidents List', () => {
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findStatusTabs = () => wrapper.find(GlTabs);
+  const findEmptyState = () => wrapper.find(GlEmptyState);
 
   function mountComponent({ data = { incidents: [], incidentsCount: {} }, loading = false }) {
     wrapper = mount(IncidentsList, {
@@ -70,6 +73,7 @@ describe('Incidents List', () => {
         incidentType,
         issuePath: '/project/isssues',
         publishedAvailable: true,
+        emptyListSvgPath,
       },
       stubs: {
         GlButton: true,
@@ -97,7 +101,7 @@ describe('Incidents List', () => {
       data: { incidents: { list: [] }, incidentsCount: {} },
       loading: false,
     });
-    expect(findTable().text()).toContain(I18N.noIncidents);
+    expect(findEmptyState().exists()).toBe(true);
   });
 
   it('shows error state', () => {
@@ -164,7 +168,7 @@ describe('Incidents List', () => {
   describe('Create Incident', () => {
     beforeEach(() => {
       mountComponent({
-        data: { incidents: { list: [] }, incidentsCount: {} },
+        data: { incidents: { list: mockIncidents }, incidentsCount: {} },
         loading: false,
       });
     });

spec/helpers/projects/incidents_helper_spec.rb

@@ -19,7 +19,8 @@ RSpec.describe Projects::IncidentsHelper do
         'new-issue-path' => new_issue_path,
         'incident-template-name' => 'incident',
         'incident-type' => 'incident',
-        'issue-path' => issue_path
+        'issue-path' => issue_path,
+        'empty-list-svg-path' => match_asset_path('/assets/illustrations/incident-empty-state.svg')
       )
     end
   end