Skip to content

Commit 9730de8

Browse files
gmmorrisgmmorris
committed
bumped label of action group
1 parent 2f576ab commit 9730de8

File tree

5 files changed

+173
-54
lines changed

5 files changed

+173
-54
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as React from 'react';
77
import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
88
import { act } from 'react-dom/test-utils';
99
import { ReactWrapper } from 'enzyme';
10-
import AlertConditions, { ActionGroupWithCondition } from './alert_conditions';
10+
import { AlertConditions, ActionGroupWithCondition } from './alert_conditions';
1111
import { FormattedMessage } from '@kbn/i18n/react';
1212
import {
1313
EuiTitle,

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

Lines changed: 13 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,19 @@ import {
1818
import { partition } from 'lodash';
1919
import { ActionGroup } from '../../../../../alerts/common';
2020

21-
export interface ActionGroupWithCondition<T> extends ActionGroup {
22-
conditions?: T;
23-
}
21+
export type ActionGroupWithCondition<T> = ActionGroup &
22+
(
23+
| // allow isRequired=false with or without conditions
24+
{
25+
conditions?: T;
26+
isRequired?: false;
27+
}
28+
// but if isRequired=true then conditions must be specified
29+
| {
30+
conditions: T;
31+
isRequired: true;
32+
}
33+
);
2434

2535
export interface AlertConditionsProps<ConditionProps> {
2636
headline?: string;
@@ -107,52 +117,3 @@ export const AlertConditions = <ConditionProps extends any>({
107117
</EuiFlexGroup>
108118
);
109119
};
110-
111-
export type AlertConditionsGroup<ConditionProps> = {
112-
actionGroup?: ActionGroupWithCondition<ConditionProps>;
113-
} & Pick<AlertConditionsProps<ConditionProps>, 'onResetConditionsFor'>;
114-
115-
export const AlertConditionsGroup = <ConditionProps extends unknown>({
116-
actionGroup,
117-
onResetConditionsFor,
118-
children,
119-
...otherProps
120-
}: PropsWithChildren<AlertConditionsGroup<ConditionProps>>) => {
121-
if (!actionGroup) {
122-
return null;
123-
}
124-
125-
return (
126-
<EuiFormRow
127-
label={actionGroup.name}
128-
fullWidth
129-
labelAppend={
130-
onResetConditionsFor && (
131-
<EuiButtonIcon
132-
iconType="minusInCircle"
133-
color="danger"
134-
aria-label={i18n.translate(
135-
'xpack.triggersActionsUI.sections.alertAdd.conditions.removeConditionLabel',
136-
{
137-
defaultMessage: 'Remove',
138-
}
139-
)}
140-
onClick={() => onResetConditionsFor(actionGroup)}
141-
/>
142-
)
143-
}
144-
>
145-
{React.isValidElement(children) ? (
146-
React.cloneElement(React.Children.only(children), {
147-
actionGroup,
148-
...otherProps,
149-
})
150-
) : (
151-
<Fragment />
152-
)}
153-
</EuiFormRow>
154-
);
155-
};
156-
157-
// eslint-disable-next-line import/no-default-export
158-
export { AlertConditions as default };

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import * as React from 'react';
7+
import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
8+
import { act } from 'react-dom/test-utils';
9+
import { ReactWrapper } from 'enzyme';
10+
import { AlertConditionsGroup } from './alert_conditions_group';
11+
import { EuiFormRow, EuiButtonIcon } from '@elastic/eui';
12+
13+
describe('alert_conditions_group', () => {
14+
async function setup(element: React.ReactElement): Promise<ReactWrapper<unknown>> {
15+
const wrapper = mountWithIntl(element);
16+
17+
// Wait for active space to resolve before requesting the component to update
18+
await act(async () => {
19+
await nextTick();
20+
wrapper.update();
21+
});
22+
23+
return wrapper;
24+
}
25+
26+
it('renders with actionGroup name as label', async () => {
27+
const InnerComponent = () => <div>{'inner component'}</div>;
28+
const wrapper = await setup(
29+
<AlertConditionsGroup
30+
actionGroup={{
31+
id: 'myGroup',
32+
name: 'My Group',
33+
}}
34+
>
35+
<InnerComponent />
36+
</AlertConditionsGroup>
37+
);
38+
39+
expect(wrapper.find(EuiFormRow).prop('label')).toMatchInlineSnapshot(`
40+
<EuiTitle
41+
size="s"
42+
>
43+
<strong>
44+
My Group
45+
</strong>
46+
</EuiTitle>
47+
`);
48+
expect(wrapper.find(InnerComponent).prop('actionGroup')).toMatchInlineSnapshot(`
49+
Object {
50+
"id": "myGroup",
51+
"name": "My Group",
52+
}
53+
`);
54+
});
55+
56+
it('renders a reset button when onResetConditionsFor is specified', async () => {
57+
const onResetConditionsFor = jest.fn();
58+
const wrapper = await setup(
59+
<AlertConditionsGroup
60+
actionGroup={{
61+
id: 'myGroup',
62+
name: 'My Group',
63+
}}
64+
onResetConditionsFor={onResetConditionsFor}
65+
>
66+
<div>{'inner component'}</div>
67+
</AlertConditionsGroup>
68+
);
69+
70+
expect(wrapper.find(EuiButtonIcon).prop('aria-label')).toMatchInlineSnapshot(`"Remove"`);
71+
72+
wrapper.find(EuiButtonIcon).simulate('click');
73+
74+
expect(onResetConditionsFor).toHaveBeenCalledWith({
75+
id: 'myGroup',
76+
name: 'My Group',
77+
});
78+
});
79+
80+
it('shouldnt render a reset button when isRequired is true', async () => {
81+
const onResetConditionsFor = jest.fn();
82+
const wrapper = await setup(
83+
<AlertConditionsGroup
84+
actionGroup={{
85+
id: 'myGroup',
86+
name: 'My Group',
87+
conditions: true,
88+
isRequired: true,
89+
}}
90+
onResetConditionsFor={onResetConditionsFor}
91+
>
92+
<div>{'inner component'}</div>
93+
</AlertConditionsGroup>
94+
);
95+
96+
expect(wrapper.find(EuiButtonIcon).length).toEqual(0);
97+
});
98+
});

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import React, { Fragment, PropsWithChildren } from 'react';
7+
import { i18n } from '@kbn/i18n';
8+
import { EuiFormRow, EuiButtonIcon, EuiTitle } from '@elastic/eui';
9+
import { AlertConditionsProps, ActionGroupWithCondition } from './alert_conditions';
10+
11+
export type AlertConditionsGroupProps<ConditionProps> = {
12+
actionGroup?: ActionGroupWithCondition<ConditionProps>;
13+
} & Pick<AlertConditionsProps<ConditionProps>, 'onResetConditionsFor'>;
14+
15+
export const AlertConditionsGroup = <ConditionProps extends unknown>({
16+
actionGroup,
17+
onResetConditionsFor,
18+
children,
19+
...otherProps
20+
}: PropsWithChildren<AlertConditionsGroupProps<ConditionProps>>) => {
21+
if (!actionGroup) {
22+
return null;
23+
}
24+
25+
return (
26+
<EuiFormRow
27+
label={
28+
<EuiTitle size="s">
29+
<strong>{actionGroup.name}</strong>
30+
</EuiTitle>
31+
}
32+
fullWidth
33+
labelAppend={
34+
onResetConditionsFor &&
35+
!actionGroup.isRequired && (
36+
<EuiButtonIcon
37+
iconType="minusInCircle"
38+
color="danger"
39+
aria-label={i18n.translate(
40+
'xpack.triggersActionsUI.sections.alertAdd.conditions.removeConditionLabel',
41+
{
42+
defaultMessage: 'Remove',
43+
}
44+
)}
45+
onClick={() => onResetConditionsFor(actionGroup)}
46+
/>
47+
)
48+
}
49+
>
50+
{React.isValidElement(children) ? (
51+
React.cloneElement(React.Children.only(children), {
52+
actionGroup,
53+
...otherProps,
54+
})
55+
) : (
56+
<Fragment />
57+
)}
58+
</EuiFormRow>
59+
);
60+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { lazy } from 'react';
77
import { suspendedComponentWithProps } from '../../lib/suspended_component_with_props';
88
export {
99
AlertConditions,
10-
AlertConditionsGroup,
1110
ActionGroupWithCondition,
1211
AlertConditionsProps,
1312
} from './alert_conditions';
13+
export { AlertConditionsGroup } from './alert_conditions_group';
1414

1515
export const AlertAdd = suspendedComponentWithProps(lazy(() => import('./alert_add')));
1616
export const AlertEdit = suspendedComponentWithProps(lazy(() => import('./alert_edit')));

0 commit comments

Comments
 (0)