Skip to content

Commit

Permalink
Added variables button for text fields in Pagerduty component. (#60189)…
Browse files Browse the repository at this point in the history 
… (#60347)

* Added variables button for text fields in Pagerduty component. Fixed bugs mentioned in #60067

* Fixed due to comments

* fixed language check issue

* Fixed tests

* Fixed due to comments
  • Loading branch information
@YulNaumenko
YulNaumenko committed Mar 17, 2020
1 parent 72c450a commit 5a717b8
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 16 deletions.
1 change: 1 addition & 0 deletions ...triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,5 +183,6 @@ describe('PagerDutyParamsFields renders', () => {
expect(wrapper.find('[data-test-subj="groupInput"]').length > 0).toBeTruthy();
expect(wrapper.find('[data-test-subj="sourceInput"]').length > 0).toBeTruthy();
expect(wrapper.find('[data-test-subj="pagerdutySummaryInput"]').length > 0).toBeTruthy();
expect(wrapper.find('[data-test-subj="dedupKeyAddVariableButton"]').length > 0).toBeTruthy();
});
});
208 changes: 192 additions & 16 deletions ...gins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@
* 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 } from 'react';
import React, { Fragment, useState } from 'react';
import {
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiSelect,
EuiLink,
EuiContextMenuItem,
EuiPopover,
EuiButtonIcon,
EuiContextMenuPanel,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
Expand Down Expand Up @@ -158,6 +162,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
actionParams,
editAction,
index,
messageVariables,
errors,
}) => {
const {
Expand All @@ -171,16 +176,124 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
group,
} = actionParams;
const severityOptions = [
{ value: 'critical', text: 'Critical' },
{ value: 'info', text: 'Info' },
{ value: 'warning', text: 'Warning' },
{ value: 'error', text: 'Error' },
{
value: 'info',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectInfoOptionLabel',
{
defaultMessage: 'Info',
}
),
},
{
value: 'critical',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectCriticalOptionLabel',
{
defaultMessage: 'Critical',
}
),
},
{
value: 'warning',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectWarningOptionLabel',
{
defaultMessage: 'Warning',
}
),
},
{
value: 'error',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectErrorOptionLabel',
{
defaultMessage: 'Error',
}
),
},
];
const eventActionOptions = [
{ value: 'trigger', text: 'Trigger' },
{ value: 'resolve', text: 'Resolve' },
{ value: 'acknowledge', text: 'Acknowledge' },
{
value: 'trigger',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventSelectTriggerOptionLabel',
{
defaultMessage: 'Trigger',
}
),
},
{
value: 'resolve',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventSelectResolveOptionLabel',
{
defaultMessage: 'Resolve',
}
),
},
{
value: 'acknowledge',
text: i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventSelectAcknowledgeOptionLabel',
{
defaultMessage: 'Acknowledge',
}
),
},
];
const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<Record<string, boolean>>({
dedupKey: false,
summary: false,
source: false,
timestamp: false,
component: false,
group: false,
class: false,
});
// TODO: replace this button with a proper Eui component, when it will be ready
const getMessageVariables = (paramsProperty: string) =>
messageVariables?.map((variable: string) => (
<EuiContextMenuItem
key={variable}
icon="empty"
onClick={() => {
editAction(
paramsProperty,
((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
index
);
setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: false });
}}
>
{`{{${variable}}}`}
</EuiContextMenuItem>
));

const getAddVariableComponent = (paramsProperty: string, buttonName: string) => {
return (
<EuiPopover
button={
<EuiButtonIcon
data-test-subj={`${paramsProperty}AddVariableButton`}
onClick={() =>
setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: true })
}
iconType="indexOpen"
aria-label={buttonName}
/>
}
isOpen={isVariablesPopoverOpen[paramsProperty]}
closePopover={() =>
setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: false })
}
panelPaddingSize="none"
anchorPosition="downLeft"
>
<EuiContextMenuPanel items={getMessageVariables(paramsProperty)} />
</EuiPopover>
);
};
return (
<Fragment>
<EuiFlexGroup>
Expand All @@ -190,7 +303,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
label={i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectFieldLabel',
{
defaultMessage: 'Severity (optional)',
defaultMessage: 'Severity',
}
)}
>
Expand All @@ -211,7 +324,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
label={i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventActionSelectFieldLabel',
{
defaultMessage: 'Event action (optional)',
defaultMessage: 'Event action',
}
)}
>
Expand All @@ -237,6 +350,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
defaultMessage: 'DedupKey (optional)',
}
)}
labelAppend={getAddVariableComponent(
'dedupKey',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand All @@ -247,7 +369,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
editAction('dedupKey', e.target.value, index);
}}
onBlur={() => {
if (!index) {
if (!dedupKey) {
editAction('dedupKey', '', index);
}
}}
Expand All @@ -263,6 +385,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
defaultMessage: 'Timestamp (optional)',
}
)}
labelAppend={getAddVariableComponent(
'timestamp',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand All @@ -273,7 +404,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
editAction('timestamp', e.target.value, index);
}}
onBlur={() => {
if (!index) {
if (!timestamp) {
editAction('timestamp', '', index);
}
}}
Expand All @@ -289,6 +420,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
defaultMessage: 'Component (optional)',
}
)}
labelAppend={getAddVariableComponent(
'component',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand All @@ -299,7 +439,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
editAction('component', e.target.value, index);
}}
onBlur={() => {
if (!index) {
if (!component) {
editAction('component', '', index);
}
}}
Expand All @@ -313,6 +453,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
defaultMessage: 'Group (optional)',
}
)}
labelAppend={getAddVariableComponent(
'group',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand All @@ -323,7 +472,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
editAction('group', e.target.value, index);
}}
onBlur={() => {
if (!index) {
if (!group) {
editAction('group', '', index);
}
}}
Expand All @@ -337,6 +486,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
defaultMessage: 'Source (optional)',
}
)}
labelAppend={getAddVariableComponent(
'source',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand All @@ -347,7 +505,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
editAction('source', e.target.value, index);
}}
onBlur={() => {
if (!index) {
if (!source) {
editAction('source', '', index);
}
}}
Expand All @@ -364,6 +522,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
defaultMessage: 'Summary',
}
)}
labelAppend={getAddVariableComponent(
'summary',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand All @@ -387,9 +554,18 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
label={i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.classFieldLabel',
{
defaultMessage: 'Class',
defaultMessage: 'Class (optional)',
}
)}
labelAppend={getAddVariableComponent(
'class',
i18n.translate(
'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7',
{
defaultMessage: 'Add variable',
}
)
)}
>
<EuiFieldText
fullWidth
Expand Down

0 comments on commit 5a717b8

Please sign in to comment.