bumped label of action group

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions.test.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
 import { act } from 'react-dom/test-utils';
 import { ReactWrapper } from 'enzyme';
-import AlertConditions, { ActionGroupWithCondition } from './alert_conditions';
+import { AlertConditions, ActionGroupWithCondition } from './alert_conditions';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiTitle,

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions.tsx

@@ -18,9 +18,19 @@ import {
 import { partition } from 'lodash';
 import { ActionGroup } from '../../../../../alerts/common';
 
-export interface ActionGroupWithCondition<T> extends ActionGroup {
-  conditions?: T;
-}
+export type ActionGroupWithCondition<T> = ActionGroup &
+  (
+    | // allow isRequired=false with or without conditions
+    {
+        conditions?: T;
+        isRequired?: false;
+      }
+    // but if isRequired=true then conditions must be specified
+    | {
+        conditions: T;
+        isRequired: true;
+      }
+  );
 
 export interface AlertConditionsProps<ConditionProps> {
   headline?: string;
@@ -107,52 +117,3 @@ export const AlertConditions = <ConditionProps extends any>({
     </EuiFlexGroup>
   );
 };
-
-export type AlertConditionsGroup<ConditionProps> = {
-  actionGroup?: ActionGroupWithCondition<ConditionProps>;
-} & Pick<AlertConditionsProps<ConditionProps>, 'onResetConditionsFor'>;
-
-export const AlertConditionsGroup = <ConditionProps extends unknown>({
-  actionGroup,
-  onResetConditionsFor,
-  children,
-  ...otherProps
-}: PropsWithChildren<AlertConditionsGroup<ConditionProps>>) => {
-  if (!actionGroup) {
-    return null;
-  }
-
-  return (
-    <EuiFormRow
-      label={actionGroup.name}
-      fullWidth
-      labelAppend={
-        onResetConditionsFor && (
-          <EuiButtonIcon
-            iconType="minusInCircle"
-            color="danger"
-            aria-label={i18n.translate(
-              'xpack.triggersActionsUI.sections.alertAdd.conditions.removeConditionLabel',
-              {
-                defaultMessage: 'Remove',
-              }
-            )}
-            onClick={() => onResetConditionsFor(actionGroup)}
-          />
-        )
-      }
-    >
-      {React.isValidElement(children) ? (
-        React.cloneElement(React.Children.only(children), {
-          actionGroup,
-          ...otherProps,
-        })
-      ) : (
-        <Fragment />
-      )}
-    </EuiFormRow>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export { AlertConditions as default };

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions_group.test.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import * as React from 'react';
+import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
+import { act } from 'react-dom/test-utils';
+import { ReactWrapper } from 'enzyme';
+import { AlertConditionsGroup } from './alert_conditions_group';
+import { EuiFormRow, EuiButtonIcon } from '@elastic/eui';
+
+describe('alert_conditions_group', () => {
+  async function setup(element: React.ReactElement): Promise<ReactWrapper<unknown>> {
+    const wrapper = mountWithIntl(element);
+
+    // Wait for active space to resolve before requesting the component to update
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    return wrapper;
+  }
+
+  it('renders with actionGroup name as label', async () => {
+    const InnerComponent = () => <div>{'inner component'}</div>;
+    const wrapper = await setup(
+      <AlertConditionsGroup
+        actionGroup={{
+          id: 'myGroup',
+          name: 'My Group',
+        }}
+      >
+        <InnerComponent />
+      </AlertConditionsGroup>
+    );
+
+    expect(wrapper.find(EuiFormRow).prop('label')).toMatchInlineSnapshot(`
+      <EuiTitle
+        size="s"
+      >
+        <strong>
+          My Group
+        </strong>
+      </EuiTitle>
+    `);
+    expect(wrapper.find(InnerComponent).prop('actionGroup')).toMatchInlineSnapshot(`
+      Object {
+        "id": "myGroup",
+        "name": "My Group",
+      }
+    `);
+  });
+
+  it('renders a reset button when onResetConditionsFor is specified', async () => {
+    const onResetConditionsFor = jest.fn();
+    const wrapper = await setup(
+      <AlertConditionsGroup
+        actionGroup={{
+          id: 'myGroup',
+          name: 'My Group',
+        }}
+        onResetConditionsFor={onResetConditionsFor}
+      >
+        <div>{'inner component'}</div>
+      </AlertConditionsGroup>
+    );
+
+    expect(wrapper.find(EuiButtonIcon).prop('aria-label')).toMatchInlineSnapshot(`"Remove"`);
+
+    wrapper.find(EuiButtonIcon).simulate('click');
+
+    expect(onResetConditionsFor).toHaveBeenCalledWith({
+      id: 'myGroup',
+      name: 'My Group',
+    });
+  });
+
+  it('shouldnt render a reset button when isRequired is true', async () => {
+    const onResetConditionsFor = jest.fn();
+    const wrapper = await setup(
+      <AlertConditionsGroup
+        actionGroup={{
+          id: 'myGroup',
+          name: 'My Group',
+          conditions: true,
+          isRequired: true,
+        }}
+        onResetConditionsFor={onResetConditionsFor}
+      >
+        <div>{'inner component'}</div>
+      </AlertConditionsGroup>
+    );
+
+    expect(wrapper.find(EuiButtonIcon).length).toEqual(0);
+  });
+});

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions_group.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { Fragment, PropsWithChildren } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiButtonIcon, EuiTitle } from '@elastic/eui';
+import { AlertConditionsProps, ActionGroupWithCondition } from './alert_conditions';
+
+export type AlertConditionsGroupProps<ConditionProps> = {
+  actionGroup?: ActionGroupWithCondition<ConditionProps>;
+} & Pick<AlertConditionsProps<ConditionProps>, 'onResetConditionsFor'>;
+
+export const AlertConditionsGroup = <ConditionProps extends unknown>({
+  actionGroup,
+  onResetConditionsFor,
+  children,
+  ...otherProps
+}: PropsWithChildren<AlertConditionsGroupProps<ConditionProps>>) => {
+  if (!actionGroup) {
+    return null;
+  }
+
+  return (
+    <EuiFormRow
+      label={
+        <EuiTitle size="s">
+          <strong>{actionGroup.name}</strong>
+        </EuiTitle>
+      }
+      fullWidth
+      labelAppend={
+        onResetConditionsFor &&
+        !actionGroup.isRequired && (
+          <EuiButtonIcon
+            iconType="minusInCircle"
+            color="danger"
+            aria-label={i18n.translate(
+              'xpack.triggersActionsUI.sections.alertAdd.conditions.removeConditionLabel',
+              {
+                defaultMessage: 'Remove',
+              }
+            )}
+            onClick={() => onResetConditionsFor(actionGroup)}
+          />
+        )
+      }
+    >
+      {React.isValidElement(children) ? (
+        React.cloneElement(React.Children.only(children), {
+          actionGroup,
+          ...otherProps,
+        })
+      ) : (
+        <Fragment />
+      )}
+    </EuiFormRow>
+  );
+};

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/index.tsx

@@ -7,10 +7,10 @@ import { lazy } from 'react';
 import { suspendedComponentWithProps } from '../../lib/suspended_component_with_props';
 export {
   AlertConditions,
-  AlertConditionsGroup,
   ActionGroupWithCondition,
   AlertConditionsProps,
 } from './alert_conditions';
+export { AlertConditionsGroup } from './alert_conditions_group';
 
 export const AlertAdd = suspendedComponentWithProps(lazy(() => import('./alert_add')));
 export const AlertEdit = suspendedComponentWithProps(lazy(() => import('./alert_edit')));