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 da9f300c94187f2af64a8ad416745b7ac29e1cdb..c928130e795967f5439c21ddeb3e3e6085af1e6c 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 { }; diff --git a/app/helpers/projects/alert_management_helper.rb b/app/helpers/projects/alert_management_helper.rb index 50c7db683c6cf47608932fb1f151bf828e00e7a1..888bdb3a6b2fe74405482baa67fbb59572d34fa3 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 b2889d429b12e44bc16e311e95fa8edea4fcc3e7..f91901f6abfdcfe8a4439511052e4699fe7417e5 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 97b75ae5080c9120fd19f1d6d7133336e8a9c1bc..d42aafbbf28cbb0797e1dcbfccaaf225a495b57d 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,