From c05cc85244d8817453e6068cf39cc412d411d126 Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Mon, 9 Aug 2021 20:55:29 -0700 Subject: [PATCH 1/2] [Alerting UI] Fixed display permissions for Edit/delete buttons when user has read only access --- .../components/alerts_list.test.tsx | 9 +- .../alerts_list/components/alerts_list.tsx | 76 +++++------ .../collapsed_item_actions.test.tsx | 119 ++++++++++++++++++ .../components/collapsed_item_actions.tsx | 1 + .../components/rule_enabled_switch.test.tsx | 95 ++++++++++++++ .../components/rule_enabled_switch.tsx | 2 +- 6 files changed, 264 insertions(+), 38 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.test.tsx create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.test.tsx 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 5a8a9000ea5b9..b31bf7bd5cb48 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 @@ -536,11 +536,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 3625dc07a1181..92fec01872e48 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,42 +464,46 @@ export const AlertsList: React.FunctionComponent = () => { render(item: AlertTableItem) { return ( - - - - onRuleEdit(item)} - iconType={'pencil'} - aria-label={i18n.translate( - 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel', - { defaultMessage: 'Edit' } - )} - /> - - - setAlertsToDelete([item.id])} - iconType={'trash'} - aria-label={i18n.translate( - 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteAriaLabel', - { defaultMessage: 'Delete' } - )} - /> - - - + {item.isEditable ? ( + + + + onRuleEdit(item)} + iconType={'pencil'} + aria-label={i18n.translate( + 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel', + { defaultMessage: 'Edit' } + )} + /> + + + setAlertsToDelete([item.id])} + iconType={'trash'} + aria-label={i18n.translate( + 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteAriaLabel', + { defaultMessage: 'Delete' } + )} + /> + + + + ) : null} { + const props: ComponentOpts = { + deleteAlert: jest.fn(), + 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: true, + notifyWhen: null, + tagsText: 'test', + updatedAt: new Date('2020-08-20T19:23:38Z'), + }, + enableAlert: jest.fn(), + onAlertChanged: jest.fn(), + muteAlert: jest.fn(), + deleteAlerts: jest.fn(), + disableAlert: jest.fn(), + disableAlerts: jest.fn(), + enableAlerts: jest.fn(), + getHealth: jest.fn(), + loadAlert: jest.fn(), + loadAlertInstanceSummary: jest.fn(), + loadAlertState: jest.fn(), + loadAlertTypes: jest.fn(), + muteAlertInstance: jest.fn(), + muteAlerts: jest.fn(), + onEditAlert: jest.fn(), + setAlertsToDelete: jest.fn(), + unmuteAlert: jest.fn(), + unmuteAlertInstance: jest.fn(), + unmuteAlerts: jest.fn(), + }; + + beforeEach(() => jest.resetAllMocks()); + + test('renders panel items as disabled', () => { + const wrapper = mountWithIntl( + + ); + expect( + wrapper.find('[data-test-subj="collapsedActionsButton"]').first().props().disabled + ).toBeTruthy(); + }); + + test('renders panel items', () => { + const wrapper = mountWithIntl(); + + expect( + wrapper.find('[data-test-subj="collapsedActionsButton"]').first().props().disabled + ).toBeFalsy(); + }); +}); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index b4bf4e786bca3..dda185f110ab3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -45,6 +45,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({ const button = ( setIsPopoverOpen(!isPopoverOpen)} aria-label={i18n.translate( 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; From 8028b1fa7607d25bcf352cc8bd415dce4eea412b Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Tue, 10 Aug 2021 11:53:09 -0700 Subject: [PATCH 2/2] fixed due to comments --- .../alerts_list/components/alerts_list.tsx | 83 +++++++++---------- 1 file changed, 41 insertions(+), 42 deletions(-) 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 92fec01872e48..e85c64f1d859e 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 @@ -462,48 +462,47 @@ export const AlertsList: React.FunctionComponent = () => { name: '', width: '10%', render(item: AlertTableItem) { - return ( + return item.isEditable ? ( - {item.isEditable ? ( - - - - onRuleEdit(item)} - iconType={'pencil'} - aria-label={i18n.translate( - 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel', - { defaultMessage: 'Edit' } - )} - /> - - - setAlertsToDelete([item.id])} - iconType={'trash'} - aria-label={i18n.translate( - 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteAriaLabel', - { defaultMessage: 'Delete' } - )} - /> - - - - ) : null} + + + + onRuleEdit(item)} + iconType={'pencil'} + aria-label={i18n.translate( + 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel', + { defaultMessage: 'Edit' } + )} + /> + + + setAlertsToDelete([item.id])} + iconType={'trash'} + aria-label={i18n.translate( + 'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteAriaLabel', + { defaultMessage: 'Delete' } + )} + /> + + + + { /> - ); + ) : null; }, }, ];