Skip to content

Commit 58cc1b6

Browse files
YulNaumenkoelasticmachine
YulNaumenko
and
elasticmachine
authored
Added UI for pre-configured connectors. (#63074) (#63318)
* Added UI for pre-configured connectors. * fixed due to comments * Fixed jest tests * Fixed due to comments and added some functional tests * test fix * Fixed failed checks * Fixed functional tests failing Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 383ea04 commit 58cc1b6

File tree

11 files changed

+286
-78
lines changed

11 files changed

+286
-78
lines changed

‎x-pack/plugins/translations/translations/ja-JP.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16089,7 +16089,6 @@
1608916089
"xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.userTextFieldLabel": "ユーザー名",
1609016090
"xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent": "{pluginName} はベータ段階で、変更される可能性があります。デザインとコードはオフィシャル GA 機能よりも完成度が低く、現状のまま保証なしで提供されています。ベータ機能にはオフィシャル GA 機能の SLA が適用されません。",
1609116091
"xpack.triggersActionsUI.sections.editConnectorForm.cancelButtonLabel": "キャンセル",
16092-
"xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle": "コネクターを編集",
1609316092
"xpack.triggersActionsUI.sections.editConnectorForm.saveButtonLabel": "保存",
1609416093
"xpack.triggersActionsUI.sections.editConnectorForm.updateErrorNotificationText": "コネクターを更新できません。",
1609516094
"xpack.triggersActionsUI.sections.editConnectorForm.updateSuccessNotificationText": "「{connectorName}」を更新しました",

‎x-pack/plugins/translations/translations/zh-CN.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16094,7 +16094,6 @@
1609416094
"xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.userTextFieldLabel": "用户名",
1609516095
"xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent": "{pluginName} 为公测版，可能会进行更改。设计和代码相对于正式发行版功能还不够成熟，将按原样提供，且不提供任何保证。公测版功能不受正式发行版功能支持 SLA 的约束。",
1609616096
"xpack.triggersActionsUI.sections.editConnectorForm.cancelButtonLabel": "取消",
16097-
"xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle": "编辑连接器",
1609816097
"xpack.triggersActionsUI.sections.editConnectorForm.saveButtonLabel": "保存",
1609916098
"xpack.triggersActionsUI.sections.editConnectorForm.updateErrorNotificationText": "无法更新连接器。",
1610016099
"xpack.triggersActionsUI.sections.editConnectorForm.updateSuccessNotificationText": "已更新“{connectorName}”",

‎x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
2222
const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);
2323

2424
const getMessageVariables = () =>
25-
messageVariables?.map((variable: string) => (
25+
messageVariables?.map((variable: string, i: number) => (
2626
<EuiContextMenuItem
2727
key={variable}
28+
data-test-subj={`variableMenuButton-${i}`}
2829
icon="empty"
2930
onClick={() => {
3031
onSelectEventHandler(variable);

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,15 +147,22 @@ export const ActionForm = ({
147147
setIsLoadingConnectors(false);
148148
}
149149
}
150+
const preconfiguredMessage = i18n.translate(
151+
'xpack.triggersActionsUI.sections.actionForm.preconfiguredTitleMessage',
152+
{
153+
defaultMessage: '(pre-configured)',
154+
}
155+
);
150156
const getSelectedOptions = (actionItemId: string) => {
151157
const val = connectors.find(connector => connector.id === actionItemId);
152158
if (!val) {
153159
return [];
154160
}
161+
const optionTitle = `${val.name} ${val.isPreconfigured ? preconfiguredMessage : ''}`;
155162
return [
156163
{
157-
label: val.name,
158-
value: val.name,
164+
label: optionTitle,
165+
value: optionTitle,
159166
id: actionItemId,
160167
},
161168
];
@@ -270,7 +277,9 @@ export const ActionForm = ({
270277
defaultMessage="{actionConnectorName}"
271278
id="xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeEditTitle"
272279
values={{
273-
actionConnectorName: actionConnector.name,
280+
actionConnectorName: `${actionConnector.name} ${
281+
actionConnector.isPreconfigured ? preconfiguredMessage : ''
282+
}`,
274283
}}
275284
/>
276285
</EuiFlexItem>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,4 +95,60 @@ describe('connector_edit_flyout', () => {
9595
expect(connectorNameField.exists()).toBeTruthy();
9696
expect(connectorNameField.first().prop('value')).toBe('action-connector');
9797
});
98+
99+
test('if pre-configured connector rendered correct in the edit form', () => {
100+
const connector = {
101+
secrets: {},
102+
id: 'test',
103+
actionTypeId: 'test-action-type-id',
104+
actionType: 'test-action-type-name',
105+
name: 'pre-configured-connector',
106+
isPreconfigured: true,
107+
referencedByCount: 0,
108+
config: {},
109+
};
110+
111+
const actionType = {
112+
id: 'test-action-type-id',
113+
iconClass: 'test',
114+
selectMessage: 'test',
115+
validateConnector: (): ValidationResult => {
116+
return { errors: {} };
117+
},
118+
validateParams: (): ValidationResult => {
119+
const validationResult = { errors: {} };
120+
return validationResult;
121+
},
122+
actionConnectorFields: null,
123+
actionParamsFields: null,
124+
};
125+
actionTypeRegistry.get.mockReturnValue(actionType);
126+
actionTypeRegistry.has.mockReturnValue(true);
127+
128+
const wrapper = mountWithIntl(
129+
<AppContextProvider appDeps={deps}>
130+
<ActionsConnectorsContextProvider
131+
value={{
132+
http: deps.http,
133+
toastNotifications: deps.toastNotifications,
134+
capabilities: deps.capabilities,
135+
actionTypeRegistry: deps.actionTypeRegistry,
136+
reloadConnectors: () => {
137+
return new Promise<void>(() => {});
138+
},
139+
}}
140+
>
141+
<ConnectorEditFlyout
142+
initialConnector={connector}
143+
editFlyoutVisible={true}
144+
setEditFlyoutVisibility={state => {}}
145+
/>
146+
</ActionsConnectorsContextProvider>
147+
</AppContextProvider>
148+
);
149+
150+
const preconfiguredBadge = wrapper.find('[data-test-subj="preconfiguredBadge"]');
151+
expect(preconfiguredBadge.exists()).toBeTruthy();
152+
expect(wrapper.find('[data-test-subj="saveEditedActionButton"]').exists()).toBeFalsy();
153+
});
98154
});

‎x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx‎

Lines changed: 102 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
import React, { useCallback, useReducer, useState } from 'react';
6+
import React, { useCallback, useReducer, useState, Fragment } from 'react';
77
import { FormattedMessage } from '@kbn/i18n/react';
88
import {
99
EuiTitle,
@@ -17,6 +17,8 @@ import {
1717
EuiButtonEmpty,
1818
EuiButton,
1919
EuiBetaBadge,
20+
EuiText,
21+
EuiLink,
2022
} from '@elastic/eui';
2123
import { i18n } from '@kbn/i18n';
2224
import { ActionConnectorForm, validateBaseProperties } from './action_connector_form';
@@ -91,50 +93,115 @@ export const ConnectorEditFlyout = ({
9193
return undefined;
9294
});
9395

96+
const flyoutTitle = connector.isPreconfigured ? (
97+
<Fragment>
98+
<EuiTitle size="s">
99+
<h3 id="flyoutTitle">
100+
<FormattedMessage
101+
defaultMessage="{connectorName}"
102+
id="xpack.triggersActionsUI.sections.preconfiguredConnectorForm.flyoutTitle"
103+
values={{ connectorName: initialConnector.name }}
104+
/>
105+
&emsp;
106+
<EuiBetaBadge
107+
label="Pre-configured"
108+
data-test-subj="preconfiguredBadge"
109+
tooltipContent={i18n.translate(
110+
'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.tooltipContent',
111+
{
112+
defaultMessage: 'This connector is preconfigured and cannot be edited',
113+
}
114+
)}
115+
/>
116+
&emsp;
117+
<EuiBetaBadge
118+
label="Beta"
119+
tooltipContent={i18n.translate(
120+
'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.betaBadgeTooltipContent',
121+
{
122+
defaultMessage:
123+
'{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
124+
values: {
125+
pluginName: PLUGIN.getI18nName(i18n),
126+
},
127+
}
128+
)}
129+
/>
130+
</h3>
131+
</EuiTitle>
132+
<EuiText size="s">
133+
<FormattedMessage
134+
defaultMessage="{actionDescription}"
135+
id="xpack.triggersActionsUI.sections.editConnectorForm.actionTypeDescription"
136+
values={{ actionDescription: actionTypeModel.selectMessage }}
137+
/>
138+
</EuiText>
139+
</Fragment>
140+
) : (
141+
<EuiTitle size="s">
142+
<h3 id="flyoutTitle">
143+
<FormattedMessage
144+
defaultMessage="Edit connector"
145+
id="xpack.triggersActionsUI.sections.editConnectorForm.flyoutPreconfiguredTitle"
146+
/>
147+
&emsp;
148+
<EuiBetaBadge
149+
label="Beta"
150+
tooltipContent={i18n.translate(
151+
'xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent',
152+
{
153+
defaultMessage:
154+
'{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
155+
values: {
156+
pluginName: PLUGIN.getI18nName(i18n),
157+
},
158+
}
159+
)}
160+
/>
161+
</h3>
162+
</EuiTitle>
163+
);
164+
94165
return (
95-
<EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutActionAddTitle" size="m">
166+
<EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutActionEditTitle" size="m">
96167
<EuiFlyoutHeader hasBorder>
97168
<EuiFlexGroup gutterSize="s" alignItems="center">
98169
{actionTypeModel ? (
99170
<EuiFlexItem grow={false}>
100171
<EuiIcon type={actionTypeModel.iconClass} size="m" />
101172
</EuiFlexItem>
102173
) : null}
103-
<EuiFlexItem>
104-
<EuiTitle size="s">
105-
<h3 id="flyoutTitle">
106-
<FormattedMessage
107-
defaultMessage="Edit connector"
108-
id="xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle"
109-
/>
110-
&emsp;
111-
<EuiBetaBadge
112-
label="Beta"
113-
tooltipContent={i18n.translate(
114-
'xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent',
115-
{
116-
defaultMessage:
117-
'{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
118-
values: {
119-
pluginName: PLUGIN.getI18nName(i18n),
120-
},
121-
}
122-
)}
123-
/>
124-
</h3>
125-
</EuiTitle>
126-
</EuiFlexItem>
174+
<EuiFlexItem>{flyoutTitle}</EuiFlexItem>
127175
</EuiFlexGroup>
128176
</EuiFlyoutHeader>
129177
<EuiFlyoutBody>
130-
<ActionConnectorForm
131-
connector={connector}
132-
errors={errors}
133-
actionTypeName={connector.actionType}
134-
dispatch={dispatch}
135-
actionTypeRegistry={actionTypeRegistry}
136-
http={http}
137-
/>
178+
{!connector.isPreconfigured ? (
179+
<ActionConnectorForm
180+
connector={connector}
181+
errors={errors}
182+
actionTypeName={connector.actionType}
183+
dispatch={dispatch}
184+
actionTypeRegistry={actionTypeRegistry}
185+
http={http}
186+
/>
187+
) : (
188+
<Fragment>
189+
<EuiText>
190+
{i18n.translate(
191+
'xpack.triggersActionsUI.sections.editConnectorForm.descriptionText',
192+
{
193+
defaultMessage: 'This connector is readonly.',
194+
}
195+
)}
196+
</EuiText>
197+
<EuiLink href="https://www.elastic.co/guide" target="_blank">
198+
<FormattedMessage
199+
id="xpack.triggersActionsUI.sections.editConnectorForm.preconfiguredHelpLabel"
200+
defaultMessage="Learn more about pre-configured connectors."
201+
/>
202+
</EuiLink>
203+
</Fragment>
204+
)}
138205
</EuiFlyoutBody>
139206
<EuiFlyoutFooter>
140207
<EuiFlexGroup justifyContent="spaceBetween">
@@ -148,7 +215,7 @@ export const ConnectorEditFlyout = ({
148215
)}
149216
</EuiButtonEmpty>
150217
</EuiFlexItem>
151-
{canSave && actionTypeModel ? (
218+
{canSave && actionTypeModel && !connector.isPreconfigured ? (
152219
<EuiFlexItem grow={false}>
153220
<EuiButton
154221
fill

‎x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ describe('actions_connectors_list component with items', () => {
111111
id: '1',
112112
actionTypeId: 'test',
113113
description: 'My test',
114+
isPreconfigured: false,
114115
referencedByCount: 1,
115116
config: {},
116117
},
@@ -119,6 +120,15 @@ describe('actions_connectors_list component with items', () => {
119120
actionTypeId: 'test2',
120121
description: 'My test 2',
121122
referencedByCount: 1,
123+
isPreconfigured: false,
124+
config: {},
125+
},
126+
{
127+
id: '3',
128+
actionTypeId: 'test2',
129+
description: 'My preconfigured test 2',
130+
referencedByCount: 1,
131+
isPreconfigured: true,
122132
config: {},
123133
},
124134
]);
@@ -185,7 +195,11 @@ describe('actions_connectors_list component with items', () => {
185195

186196
it('renders table of connectors', () => {
187197
expect(wrapper.find('EuiInMemoryTable')).toHaveLength(1);
188-
expect(wrapper.find('EuiTableRow')).toHaveLength(2);
198+
expect(wrapper.find('EuiTableRow')).toHaveLength(3);
199+
});
200+
201+
it('renders table with preconfigured connectors', () => {
202+
expect(wrapper.find('[data-test-subj="preConfiguredTitleMessage"]')).toHaveLength(2);
189203
});
190204

191205
test('if select item for edit should render ConnectorEditFlyout', () => {

0 commit comments

Comments
 (0)