[Alerting UI] Actions menu with mute/unmute, disable/enable should be available for the rules with requiresAppContext (#117806) (#117965)

* [Alerting UI] Actions menu with mute/unmute, disable/enable sould be available for the rules with requiresAppContext * fixed test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2021-11-08 21:41:55 -08:00 · 2021-11-08 21:41:55 -08:00 · 2ca2788154
commit 2ca2788154
parent c40d6638f7
3 changed files with 83 additions and 42 deletions
--- 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
@ -490,7 +490,7 @@ describe('alerts_list component with items', () => {
  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()).toBeFalsy();
+    expect(wrapper.find('[data-test-subj="alertSidebarDeleteAction"]').exists()).toBeTruthy();
  });
 });

@ -540,7 +540,7 @@ describe('alerts_list component empty with show only capability', () => {
 describe('alerts_list with show only capability', () => {
  let wrapper: ReactWrapper<any>;

-  async function setup() {
+  async function setup(editable: boolean = true) {
    loadAlerts.mockResolvedValue({
      page: 1,
      perPage: 10000,
@ -606,7 +606,20 @@ describe('alerts_list with show only capability', () => {
    loadAlertTypes.mockResolvedValue([alertTypeFromApi]);
    loadAllActions.mockResolvedValue([]);

-    ruleTypeRegistry.has.mockReturnValue(false);
+    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;

@ -621,18 +634,27 @@ describe('alerts_list with show only capability', () => {
  }

  it('renders table of alerts with edit button disabled', async () => {
-    await setup();
+    await setup(false);
    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();
+    const { hasAllPrivilege } = jest.requireMock('../../../lib/capabilities');
+    hasAllPrivilege.mockReturnValue(false);
+    await setup(false);
    expect(wrapper.find('EuiBasicTable')).toHaveLength(1);
    expect(wrapper.find('EuiTableRow')).toHaveLength(2);
    expect(wrapper.find('[data-test-subj="deleteActionHoverButton"]')).toHaveLength(0);
  });
+
+  it('renders table of alerts with actions menu collapsedItemActions', async () => {
+    await setup(false);
+    expect(wrapper.find('EuiBasicTable')).toHaveLength(1);
+    expect(wrapper.find('EuiTableRow')).toHaveLength(2);
+    expect(wrapper.find('[data-test-subj="collapsedItemActions"]').length).toBeGreaterThan(0);
+  });
 });

 describe('alerts_list with disabled itmes', () => {
--- 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
@ -571,47 +571,50 @@ export const AlertsList: React.FunctionComponent = () => {
      name: '',
      width: '10%',
      render(item: AlertTableItem) {
-        return item.isEditable && isRuleTypeEditableInContext(item.alertTypeId) ? (
+        return (
          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
            <EuiFlexItem grow={false} className="alertSidebarItem">
              <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-                <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"
-                    data-test-subj="editActionHoverButton"
-                    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(
-                      'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteButtonTooltip',
-                      { defaultMessage: 'Delete' }
-                    )}
-                    className="alertSidebarItem__action"
-                    data-test-subj="deleteActionHoverButton"
-                    onClick={() => setAlertsToDelete([item.id])}
-                    iconType={'trash'}
-                    aria-label={i18n.translate(
-                      'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteAriaLabel',
-                      { defaultMessage: 'Delete' }
-                    )}
-                  />
-                </EuiFlexItem>
+                {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"
+                      data-test-subj="editActionHoverButton"
+                      onClick={() => onRuleEdit(item)}
+                      iconType={'pencil'}
+                      aria-label={i18n.translate(
+                        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editAriaLabel',
+                        { defaultMessage: 'Edit' }
+                      )}
+                    />
+                  </EuiFlexItem>
+                ) : null}
+                {item.isEditable ? (
+                  <EuiFlexItem grow={false} data-test-subj="alertSidebarDeleteAction">
+                    <EuiButtonIcon
+                      color={'danger'}
+                      title={i18n.translate(
+                        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteButtonTooltip',
+                        { defaultMessage: 'Delete' }
+                      )}
+                      className="alertSidebarItem__action"
+                      data-test-subj="deleteActionHoverButton"
+                      onClick={() => setAlertsToDelete([item.id])}
+                      iconType={'trash'}
+                      aria-label={i18n.translate(
+                        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteAriaLabel',
+                        { defaultMessage: 'Delete' }
+                      )}
+                    />
+                  </EuiFlexItem>
+                ) : null}
              </EuiFlexGroup>
            </EuiFlexItem>
-
            <EuiFlexItem grow={false}>
              <CollapsedItemActions
                key={item.id}
@ -622,7 +625,7 @@ export const AlertsList: React.FunctionComponent = () => {
              />
            </EuiFlexItem>
          </EuiFlexGroup>
-        ) : null;
+        );
      },
    },
  ];
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_list.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_list.ts
@ -206,6 +206,22 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
      });
    });

+    it('should be able to mute the rule with non "alerts" consumer from a non editable context', async () => {
+      const createdAlert = await createAlert({ consumer: 'siem' });
+      await refreshAlertsList();
+      await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name);
+
+      await testSubjects.click('collapsedItemActions');
+
+      await testSubjects.click('muteButton');
+
+      await retry.tryForTime(30000, async () => {
+        await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name);
+        const muteBadge = await testSubjects.find('mutedActionsBadge');
+        expect(await muteBadge.isDisplayed()).to.eql(true);
+      });
+    });
+
    it('should unmute single alert', async () => {
      const createdAlert = await createAlert();
      await muteAlert(createdAlert.id);