[Alerting UI] Not showing edit button in rule management UI if rule i…

…s not editable in UI (#107801) * Should not show edit button on rule management page if rule not editable in stack * Disabling edit button in collapsed actions * Adding tests for collapsed item actions component * Cleanup Co-authored-by: Kibana Machine <[email protected]>
elastic · Aug 10, 2021 · 565e071 · 565e071
1 parent baa903d
commit 565e071
Show file tree

Hide file tree

Showing 4 changed files with 400 additions and 24 deletions.
diff --git a/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx
@@ -13,7 +13,7 @@ import { act } from 'react-dom/test-utils';
 import { actionTypeRegistryMock } from '../../../action_type_registry.mock';
 import { ruleTypeRegistryMock } from '../../../rule_type_registry.mock';
 import { AlertsList } from './alerts_list';
-import { ValidationResult } from '../../../../types';
+import { AlertTypeModel, ValidationResult } from '../../../../types';
 import {
   AlertExecutionStatusErrorReasons,
   ALERTS_FEATURE_ID,
@@ -44,6 +44,12 @@ jest.mock('react-router-dom', () => ({
     pathname: '/triggersActions/alerts/',
   }),
 }));
+jest.mock('../../../lib/capabilities', () => ({
+  hasAllPrivilege: jest.fn(() => true),
+  hasSaveAlertsCapability: jest.fn(() => true),
+  hasShowActionsCapability: jest.fn(() => true),
+  hasExecuteActionsCapability: jest.fn(() => true),
+}));
 const { loadAlerts, loadAlertTypes } = jest.requireMock('../../../lib/alert_api');
 const { loadActionTypes, loadAllActions } = jest.requireMock('../../../lib/action_connector_api');
 const actionTypeRegistry = actionTypeRegistryMock.create();
@@ -264,7 +270,7 @@ describe('alerts_list component with items', () => {
     },
   ];
 
-  async function setup() {
+  async function setup(editable: boolean = true) {
     loadAlerts.mockResolvedValue({
       page: 1,
       perPage: 10000,
@@ -284,7 +290,20 @@ describe('alerts_list component with items', () => {
     loadAlertTypes.mockResolvedValue([alertTypeFromApi]);
     loadAllActions.mockResolvedValue([]);
 
+    const ruleTypeMock: AlertTypeModel = {
+      id: 'test_alert_type',
+      iconClass: 'test',
+      description: 'Alert when testing',
+      documentationUrl: 'https://localhost.local/docs',
+      validate: () => {
+        return { errors: {} };
+      },
+      alertParamsExpression: jest.fn(),
+      requiresAppContext: !editable,
+    };
+
     ruleTypeRegistry.has.mockReturnValue(true);
+    ruleTypeRegistry.get.mockReturnValue(ruleTypeMock);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useKibanaMock().services.ruleTypeRegistry = ruleTypeRegistry;
 
@@ -408,6 +427,18 @@ describe('alerts_list component with items', () => {
       })
     );
   });
+
+  it('renders edit and delete buttons when user can manage rules', async () => {
+    await setup();
+    expect(wrapper.find('[data-test-subj="alertSidebarEditAction"]').exists()).toBeTruthy();
+    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 () => {
+    await setup(false);
+    expect(wrapper.find('[data-test-subj="alertSidebarEditAction"]').exists()).toBeFalsy();
+    expect(wrapper.find('[data-test-subj="alertSidebarDeleteAction"]').exists()).toBeTruthy();
+  });
 });
 
 describe('alerts_list component empty with show only capability', () => {

diff --git a/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -50,7 +50,7 @@ import {
   deleteAlerts,
 } from '../../../lib/alert_api';
 import { loadActionTypes } from '../../../lib/action_connector_api';
-import { hasExecuteActionsCapability } from '../../../lib/capabilities';
+import { hasAllPrivilege, hasExecuteActionsCapability } from '../../../lib/capabilities';
 import { routeToRuleDetails, DEFAULT_SEARCH_PAGE_SIZE } from '../../../constants';
 import { DeleteModalConfirmation } from '../../../components/delete_modal_confirmation';
 import { EmptyPrompt } from '../../../components/prompts/empty_prompt';
@@ -60,7 +60,6 @@ import {
   ALERTS_FEATURE_ID,
   AlertExecutionStatusErrorReasons,
 } from '../../../../../../alerting/common';
-import { hasAllPrivilege } from '../../../lib/capabilities';
 import { alertsStatusesTranslationsMapping, ALERT_STATUS_LICENSE_ERROR } from '../translations';
 import { useKibana } from '../../../../common/lib/kibana';
 import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../../../common/constants';
@@ -143,6 +142,9 @@ export const AlertsList: React.FunctionComponent = () => {
     setCurrentRuleToEdit(ruleItem);
   };
 
+  const isRuleTypeEditableInContext = (ruleTypeId: string) =>
+    ruleTypeRegistry.has(ruleTypeId) ? !ruleTypeRegistry.get(ruleTypeId).requiresAppContext : false;
+
   useEffect(() => {
     loadAlertsData();
   }, [
@@ -466,23 +468,25 @@ export const AlertsList: React.FunctionComponent = () => {
           <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
             <EuiFlexItem grow={false} className="alertSidebarItem">
               <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
-                    color={'primary'}
-                    title={i18n.translate(
-                      'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editButtonTooltip',
-                      { defaultMessage: 'Edit' }
-                    )}
-                    className="alertSidebarItem__action"
-                    onClick={() => onRuleEdit(item)}
-                    iconType={'pencil'}
-                    aria-label={i18n.translate(
-                      'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel',
-                      { defaultMessage: 'Edit' }
-                    )}
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
+                {item.isEditable && isRuleTypeEditableInContext(item.alertTypeId) && (
+                  <EuiFlexItem grow={false} data-test-subj="alertSidebarEditAction">
+                    <EuiButtonIcon
+                      color={'primary'}
+                      title={i18n.translate(
+                        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editButtonTooltip',
+                        { defaultMessage: 'Edit' }
+                      )}
+                      className="alertSidebarItem__action"
+                      onClick={() => onRuleEdit(item)}
+                      iconType={'pencil'}
+                      aria-label={i18n.translate(
+                        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel',
+                        { defaultMessage: 'Edit' }
+                      )}
+                    />
+                  </EuiFlexItem>
+                )}
+                <EuiFlexItem grow={false} data-test-subj="alertSidebarDeleteAction">
                   <EuiButtonIcon
                     color={'danger'}
                     title={i18n.translate(