[Alerting] adds an Run When field in the alert flyout to assign the action to an Action Group

x-pack/examples/alerting_example/public/alert_types/astros.tsx

@@ -127,9 +127,9 @@ export const PeopleinSpaceExpression: React.FunctionComponent<PeopleinSpaceParam
   });
 
   const errorsCallout = flatten(
-    Object.entries(errors).map(([field, errs]: [string, string[]]) =>
-      errs.map((e) => (
-        <p>
+    Object.entries(errors).map(([field, errs]: [string, string[]], fieldIndex) =>
+      errs.map((e, index) => (
+        <p key={`astros-error-${fieldIndex}-${index}`}>
           <EuiTextColor color="accent">{field}:</EuiTextColor>`: ${errs}`
         </p>
       ))

x-pack/examples/alerting_example/server/alert_types/always_firing.ts

@@ -5,25 +5,31 @@
  */
 
 import uuid from 'uuid';
-import { range } from 'lodash';
+import { range, random } from 'lodash';
 import { AlertType } from '../../../../plugins/alerts/server';
 import { DEFAULT_INSTANCES_TO_GENERATE, ALERTING_EXAMPLE_APP_ID } from '../../common/constants';
 
+const ACTION_GROUPS = [
+  { id: 'small', name: 'small' },
+  { id: 'medium', name: 'medium' },
+  { id: 'large', name: 'large' },
+];
+
 export const alertType: AlertType = {
   id: 'example.always-firing',
   name: 'Always firing',
-  actionGroups: [{ id: 'default', name: 'default' }],
-  defaultActionGroupId: 'default',
+  actionGroups: ACTION_GROUPS,
+  defaultActionGroupId: 'small',
   async executor({ services, params: { instances = DEFAULT_INSTANCES_TO_GENERATE }, state }) {
     const count = (state.count ?? 0) + 1;
 
     range(instances)
-      .map(() => ({ id: uuid.v4() }))
-      .forEach((instance: { id: string }) => {
+      .map(() => ({ id: uuid.v4(), tshirtSize: ACTION_GROUPS[random(0, 2)].id! }))
+      .forEach((instance: { id: string; tshirtSize: string }) => {
         services
           .alertInstanceFactory(instance.id)
           .replaceState({ triggerdOnCycle: count })
-          .scheduleActions('default');
+          .scheduleActions(instance.tshirtSize);
       });
 
     return {

x-pack/plugins/triggers_actions_ui/README.md

@@ -1319,37 +1319,40 @@ ActionForm Props definition:
 interface ActionAccordionFormProps {
   actions: AlertAction[];
   defaultActionGroupId: string;
+  actionGroups?: ActionGroup[];
   setActionIdByIndex: (id: string, index: number) => void;
+  setActionGroupIdByIndex?: (group: string, index: number) => void;
   setAlertProperty: (actions: AlertAction[]) => void;
   setActionParamsProperty: (key: string, value: any, index: number) => void;
   http: HttpSetup;
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
-  toastNotifications: Pick<
-    ToastsApi,
-    'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
-  >;
+  actionTypeRegistry: ActionTypeRegistryContract;
+  toastNotifications: ToastsSetup;
+  docLinks: DocLinksStart;
   actionTypes?: ActionType[];
   messageVariables?: ActionVariable[];
   defaultActionMessage?: string;
-  consumer: string;
+  capabilities: ApplicationStart['capabilities'];
 }
 
 ```
 
 |Property|Description|
 |---|---|
 |actions|List of actions comes from alert.actions property.|
-|defaultActionGroupId|Default action group id to which each new action will belong to.|
+|defaultActionGroupId|Default action group id to which each new action will belong by default.|
+|actionGroups|Optional. List of action groups to which new action can be assigned. The RunWhen field is only displayed when these action groups are specified|
 |setActionIdByIndex|Function for changing action 'id' by the proper index in alert.actions array.|
+|setActionGroupIdByIndex|Function for changing action 'group' by the proper index in alert.actions array.|
 |setAlertProperty|Function for changing alert property 'actions'. Used when deleting action from the array to reset it.|
 |setActionParamsProperty|Function for changing action key/value property by index in alert.actions array.|
 |http|HttpSetup needed for executing API calls.|
 |actionTypeRegistry|Registry for action types.|
-|toastNotifications|Toast messages.|
+|toastNotifications|Toast messages  Plugin Setup Contract.|
+|docLinks|Documentation links Plugin Start Contract.|
 |actionTypes|Optional property, which allowes to define a list of available actions specific for a current plugin.|
 |actionTypes|Optional property, which allowes to define a list of variables for action 'message' property.|
 |defaultActionMessage|Optional property, which allowes to define a message value for action with 'message' property.|
-|consumer|Name of the plugin that creates an action.|
+|capabilities|Kibana core's Capabilities ApplicationStart['capabilities'].|
 
 
 AlertsContextProvider value options:

x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.scss

@@ -3,9 +3,15 @@
 }
 
 .actAccordionActionForm {
-  .euiCard {
-    box-shadow: none;
-  }
+  background-color: $euiColorLightestShade;
+}
+
+.actAccordionActionForm .euiCard {
+  box-shadow: none;
+}
+
+.actAccordionActionForm__button {
+  padding: $euiSizeM;
 }
 
 .actConnectorsListGrid {

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx

@@ -6,7 +6,6 @@
 import React, { Fragment, lazy } from 'react';
 import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
 import { coreMock } from '../../../../../../../src/core/public/mocks';
-import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { actionTypeRegistryMock } from '../../action_type_registry.mock';
 import { ValidationResult, Alert, AlertAction } from '../../../types';
@@ -112,8 +111,6 @@ describe('action_form', () => {
   };
 
   describe('action_form in alert', () => {
-    let wrapper: ReactWrapper<any>;
-
     async function setup(customActions?: AlertAction[]) {
       const { loadAllActions } = jest.requireMock('../../lib/action_connector_api');
       loadAllActions.mockResolvedValueOnce([
@@ -217,7 +214,7 @@ describe('action_form', () => {
         mutedInstanceIds: [],
       } as unknown) as Alert;
 
-      wrapper = mountWithIntl(
+      const wrapper = mountWithIntl(
         <ActionForm
           actions={initialAlert.actions}
           messageVariables={[
@@ -228,6 +225,10 @@ describe('action_form', () => {
           setActionIdByIndex={(id: string, index: number) => {
             initialAlert.actions[index].id = id;
           }}
+          actionGroups={[{ id: 'default', name: 'Default' }]}
+          setActionGroupIdByIndex={(group: string, index: number) => {
+            initialAlert.actions[index].group = group;
+          }}
           setAlertProperty={(_updatedActions: AlertAction[]) => {}}
           setActionParamsProperty={(key: string, value: any, index: number) =>
             (initialAlert.actions[index] = { ...initialAlert.actions[index], [key]: value })
@@ -297,10 +298,12 @@ describe('action_form', () => {
         await nextTick();
         wrapper.update();
       });
+
+      return wrapper;
     }
 
     it('renders available action cards', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find(
         `[data-test-subj="${actionType.id}-ActionTypeSelectOption"]`
       );
@@ -314,60 +317,80 @@ describe('action_form', () => {
     });
 
     it('does not render action types disabled by config', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find(
         '[data-test-subj="disabled-by-config-ActionTypeSelectOption"]'
       );
       expect(actionOption.exists()).toBeFalsy();
     });
 
     it('render action types which is preconfigured only (disabled by config and with preconfigured connectors)', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find('[data-test-subj="preconfigured-ActionTypeSelectOption"]');
       expect(actionOption.exists()).toBeTruthy();
     });
 
+    it('renders available action groups for the selected action type', async () => {
+      const wrapper = await setup();
+      const actionOption = wrapper.find(
+        `[data-test-subj="${actionType.id}-ActionTypeSelectOption"]`
+      );
+      actionOption.first().simulate('click');
+      const actionGroupsSelect = wrapper.find(
+        `[data-test-subj="addNewActionConnectorActionGroup-0"]`
+      );
+      expect((actionGroupsSelect.first().props() as any).options).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "data-test-subj": "addNewActionConnectorActionGroup-0-option-default",
+            "inputDisplay": "Default",
+            "value": "default",
+          },
+        ]
+      `);
+    });
+
     it('renders available connectors for the selected action type', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find(
         `[data-test-subj="${actionType.id}-ActionTypeSelectOption"]`
       );
       actionOption.first().simulate('click');
       const combobox = wrapper.find(`[data-test-subj="selectActionConnector-${actionType.id}"]`);
       expect((combobox.first().props() as any).options).toMatchInlineSnapshot(`
-      Array [
-        Object {
-          "id": "test",
-          "key": "test",
-          "label": "Test connector ",
-        },
-        Object {
-          "id": "test2",
-          "key": "test2",
-          "label": "Test connector 2 (preconfigured)",
-        },
-      ]
-      `);
+              Array [
+                Object {
+                  "id": "test",
+                  "key": "test",
+                  "label": "Test connector ",
+                },
+                Object {
+                  "id": "test2",
+                  "key": "test2",
+                  "label": "Test connector 2 (preconfigured)",
+                },
+              ]
+            `);
     });
 
     it('renders only preconfigured connectors for the selected preconfigured action type', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find('[data-test-subj="preconfigured-ActionTypeSelectOption"]');
       actionOption.first().simulate('click');
       const combobox = wrapper.find('[data-test-subj="selectActionConnector-preconfigured"]');
       expect((combobox.first().props() as any).options).toMatchInlineSnapshot(`
-      Array [
-        Object {
-          "id": "test3",
-          "key": "test3",
-          "label": "Preconfigured Only (preconfigured)",
-        },
-      ]
-      `);
+              Array [
+                Object {
+                  "id": "test3",
+                  "key": "test3",
+                  "label": "Preconfigured Only (preconfigured)",
+                },
+              ]
+            `);
     });
 
     it('does not render "Add connector" button for preconfigured only action type', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find('[data-test-subj="preconfigured-ActionTypeSelectOption"]');
       actionOption.first().simulate('click');
       const preconfigPannel = wrapper.find('[data-test-subj="alertActionAccordion-default"]');
@@ -378,7 +401,7 @@ describe('action_form', () => {
     });
 
     it('renders action types disabled by license', async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find(
         '[data-test-subj="disabled-by-license-ActionTypeSelectOption"]'
       );
@@ -391,7 +414,7 @@ describe('action_form', () => {
     });
 
     it(`shouldn't render action types without params component`, async () => {
-      await setup();
+      const wrapper = await setup();
       const actionOption = wrapper.find(
         `[data-test-subj="${actionTypeWithoutParams.id}-ActionTypeSelectOption"]`
       );