From f8873fccddf20b5e6844aac99d534b10a8e47026 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Mon, 4 Mar 2024 19:45:10 +0100
Subject: [PATCH] Update surface alerts empty state illustration

Changelog: changed
---
 .../alert_management_empty_state.vue          | 36 ++++++++-----------
 .../projects/alert_management_helper.rb       |  2 +-
 .../alert_management_empty_state_spec.js      | 25 ++++++++++---
 .../projects/alert_management_helper_spec.rb  |  2 +-
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue
index da9f300c94187f..c928130e795967 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue
@@ -33,25 +33,19 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <gl-empty-state
-      :title="$options.i18n.emptyState.title"
-      :svg-path="emptyAlertSvgPath"
-      :svg-height="null"
-    >
-      <template #description>
-        <div class="gl-display-block">
-          <span>{{ $options.i18n.emptyState.info }}</span>
-          <gl-link :href="alertsHelpUrl" target="_blank">
-            {{ $options.i18n.moreInformation }}
-          </gl-link>
-        </div>
-        <div v-if="userCanEnableAlertManagement" class="gl-display-block center gl-pt-4">
-          <gl-button category="primary" variant="confirm" :href="enableAlertManagementPath">
-            {{ $options.i18n.emptyState.buttonText }}
-          </gl-button>
-        </div>
-      </template>
-    </gl-empty-state>
-  </div>
+  <gl-empty-state :title="$options.i18n.emptyState.title" :svg-path="emptyAlertSvgPath">
+    <template #description>
+      <div class="gl-display-block">
+        <span>{{ $options.i18n.emptyState.info }}</span>
+        <gl-link :href="alertsHelpUrl" target="_blank">
+          {{ $options.i18n.moreInformation }}
+        </gl-link>
+      </div>
+    </template>
+    <template v-if="userCanEnableAlertManagement" #actions>
+      <gl-button category="primary" variant="confirm" :href="enableAlertManagementPath">
+        {{ $options.i18n.emptyState.buttonText }}
+      </gl-button>
+    </template>
+  </gl-empty-state>
 </template>
diff --git a/app/helpers/projects/alert_management_helper.rb b/app/helpers/projects/alert_management_helper.rb
index 50c7db683c6cf4..888bdb3a6b2fe7 100644
--- a/app/helpers/projects/alert_management_helper.rb
+++ b/app/helpers/projects/alert_management_helper.rb
@@ -7,7 +7,7 @@ def alert_management_data(current_user, project)
       'enable-alert-management-path' => project_settings_operations_path(project, anchor: 'js-alert-management-settings'),
       'alerts-help-url' => help_page_url('operations/incident_management/alerts.md'),
       'populating-alerts-help-url' => help_page_url('operations/incident_management/integrations.md', anchor: 'configuration'),
-      'empty-alert-svg-path' => image_path('illustrations/alert-management-empty-state.svg'),
+      'empty-alert-svg-path' => image_path('illustrations/empty-state/empty-scan-alert-md.svg'),
       'user-can-enable-alert-management' => can?(current_user, :admin_operations, project).to_s,
       'alert-management-enabled' => alert_management_enabled?(project).to_s,
       'text-query': params[:search],
diff --git a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
index b2889d429b12e4..f91901f6abfdcf 100644
--- a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
@@ -1,4 +1,4 @@
-import { GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AlertManagementEmptyState from '~/alert_management/components/alert_management_empty_state.vue';
 import defaultProvideValues from '../mocks/alerts_provide_config.json';
@@ -19,11 +19,28 @@ describe('AlertManagementEmptyState', () => {
     mountComponent();
   });
 
-  const EmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findButton = () => wrapper.findComponent(GlButton);
 
   describe('Empty state', () => {
-    it('shows empty state', () => {
-      expect(EmptyState().exists()).toBe(true);
+    it('renders empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it("does not show the button is user can't enable alert management", () => {
+      expect(findButton().exists()).toBe(false);
+    });
+
+    it('shows the button if user can enable alert management', () => {
+      mountComponent({
+        provide: {
+          userCanEnableAlertManagement: true,
+          alertManagementEnabled: true,
+        },
+      });
+
+      expect(findButton().exists()).toBe(true);
+      expect(findButton().text()).toBe('Authorize external service');
     });
   });
 });
diff --git a/spec/helpers/projects/alert_management_helper_spec.rb b/spec/helpers/projects/alert_management_helper_spec.rb
index 97b75ae5080c91..d42aafbbf28cbb 100644
--- a/spec/helpers/projects/alert_management_helper_spec.rb
+++ b/spec/helpers/projects/alert_management_helper_spec.rb
@@ -31,7 +31,7 @@
           'enable-alert-management-path' => setting_path,
           'alerts-help-url' => 'http://test.host/help/operations/incident_management/alerts.md',
           'populating-alerts-help-url' => 'http://test.host/help/operations/incident_management/integrations.md#configuration',
-          'empty-alert-svg-path' => match_asset_path('/assets/illustrations/alert-management-empty-state.svg'),
+          'empty-alert-svg-path' => match_asset_path('/assets/illustrations/empty-state/empty-scan-alert-md.svg'),
           'user-can-enable-alert-management' => 'true',
           'alert-management-enabled' => 'false',
           'text-query': nil,
-- 
GitLab