diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx index 0654488939566..958511128de04 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx @@ -434,10 +434,10 @@ describe('alerts_list component with items', () => { expect(wrapper.find('[data-test-subj="alertSidebarDeleteAction"]').exists()).toBeTruthy(); }); - it('does not render edit button when rule type does not allow editing in rules management', async () => { + it('does not render edit and delete button when rule type does not allow editing in rules management', async () => { await setup(false); expect(wrapper.find('[data-test-subj="alertSidebarEditAction"]').exists()).toBeFalsy(); - expect(wrapper.find('[data-test-subj="alertSidebarDeleteAction"]').exists()).toBeTruthy(); + expect(wrapper.find('[data-test-subj="alertSidebarDeleteAction"]').exists()).toBeFalsy(); }); }); @@ -567,11 +567,18 @@ describe('alerts_list with show only capability', () => { }); } + it('renders table of alerts with edit button disabled', async () => { + await setup(); + expect(wrapper.find('EuiBasicTable')).toHaveLength(1); + expect(wrapper.find('EuiTableRow')).toHaveLength(2); + expect(wrapper.find('[data-test-subj="editActionHoverButton"]')).toHaveLength(0); + }); + it('renders table of alerts with delete button disabled', async () => { await setup(); expect(wrapper.find('EuiBasicTable')).toHaveLength(1); expect(wrapper.find('EuiTableRow')).toHaveLength(2); - // TODO: check delete button + expect(wrapper.find('[data-test-subj="deleteActionHoverButton"]')).toHaveLength(0); }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx index 9b488922a3cf6..941d400104082 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx @@ -464,28 +464,27 @@ export const AlertsList: React.FunctionComponent = () => { name: '', width: '10%', render(item: AlertTableItem) { - return ( + return item.isEditable && isRuleTypeEditableInContext(item.alertTypeId) ? ( - {item.isEditable && isRuleTypeEditableInContext(item.alertTypeId) && ( - - onRuleEdit(item)} - iconType={'pencil'} - aria-label={i18n.translate( - 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel', - { defaultMessage: 'Edit' } - )} - /> - - )} + + onRuleEdit(item)} + iconType={'pencil'} + aria-label={i18n.translate( + 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel', + { defaultMessage: 'Edit' } + )} + /> + { { defaultMessage: 'Delete' } )} className="alertSidebarItem__action" + data-test-subj="deleteActionHoverButton" onClick={() => setAlertsToDelete([item.id])} iconType={'trash'} aria-label={i18n.translate( @@ -504,6 +504,7 @@ export const AlertsList: React.FunctionComponent = () => { + { /> - ); + ) : null; }, }, ]; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.test.tsx index 5b7a87d0dfe27..5a06b03311cbe 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.test.tsx @@ -4,7 +4,6 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - import * as React from 'react'; import { mountWithIntl, nextTick } from '@kbn/test/jest'; @@ -95,6 +94,20 @@ describe('CollapsedItemActions', () => { }; }; + test('renders panel items as disabled', async () => { + await setup(); + const wrapper = mountWithIntl( + + ); + await act(async () => { + await nextTick(); + wrapper.update(); + }); + expect( + wrapper.find('[data-test-subj="selectActionButton"]').first().props().disabled + ).toBeTruthy(); + }); + test('renders closed popover initially and opens on click with all actions enabled', async () => { await setup(); const wrapper = mountWithIntl(); @@ -118,6 +131,10 @@ describe('CollapsedItemActions', () => { expect(wrapper.find('[data-test-subj="editAlert"]').exists()).toBeTruthy(); expect(wrapper.find('[data-test-subj="deleteAlert"]').exists()).toBeTruthy(); + expect( + wrapper.find('[data-test-subj="selectActionButton"]').first().props().disabled + ).toBeFalsy(); + expect(wrapper.find(`[data-test-subj="muteButton"] button`).prop('disabled')).toBeFalsy(); expect(wrapper.find(`[data-test-subj="muteButton"] button`).text()).toEqual('Mute'); expect(wrapper.find(`[data-test-subj="disableButton"] button`).prop('disabled')).toBeFalsy(); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.test.tsx new file mode 100644 index 0000000000000..bfa760b65ed4e --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.test.tsx @@ -0,0 +1,95 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { mountWithIntl } from '@kbn/test/jest'; +import { RuleEnabledSwitch, ComponentOpts } from './rule_enabled_switch'; + +describe('RuleEnabledSwitch', () => { + const enableAlert = jest.fn(); + const props: ComponentOpts = { + disableAlert: jest.fn(), + enableAlert, + item: { + id: '1', + name: 'test alert', + tags: ['tag1'], + enabled: true, + alertTypeId: 'test_alert_type', + schedule: { interval: '5d' }, + actions: [], + params: { name: 'test alert type name' }, + createdBy: null, + updatedBy: null, + apiKeyOwner: null, + throttle: '1m', + muteAll: false, + mutedInstanceIds: [], + executionStatus: { + status: 'active', + lastExecutionDate: new Date('2020-08-20T19:23:38Z'), + }, + consumer: 'test', + actionsCount: 0, + alertType: 'test_alert_type', + createdAt: new Date('2020-08-20T19:23:38Z'), + enabledInLicense: true, + isEditable: false, + notifyWhen: null, + tagsText: 'test', + updatedAt: new Date('2020-08-20T19:23:38Z'), + }, + onAlertChanged: jest.fn(), + }; + + beforeEach(() => jest.resetAllMocks()); + + test('renders switch control as disabled when rule is not editable', () => { + const wrapper = mountWithIntl(); + expect(wrapper.find('[data-test-subj="enableSwitch"]').first().props().disabled).toBeTruthy(); + }); + + test('renders switch control', () => { + const wrapper = mountWithIntl( + + ); + expect(wrapper.find('[data-test-subj="enableSwitch"]').first().props().checked).toBeFalsy(); + }); +}); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.tsx index 49871549d2734..21652f1cce781 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.tsx @@ -10,7 +10,7 @@ import { EuiSwitch, EuiLoadingSpinner } from '@elastic/eui'; import { Alert, AlertTableItem } from '../../../../types'; -interface ComponentOpts { +export interface ComponentOpts { item: AlertTableItem; onAlertChanged: () => void; enableAlert: (alert: Alert) => Promise;