From 17b21d211ebf2690ead4313d070b71d2e920155a Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Tue, 25 May 2021 19:00:29 -0700 Subject: [PATCH] Merge remote-tracking branch upstream/master --- packages/kbn-optimizer/limits.yml | 2 +- .../connectors_dropdown.test.tsx | 40 ++++- .../public/components/connectors/types.ts | 3 +- .../translations/translations/ja-JP.json | 28 --- .../translations/translations/zh-CN.json | 28 --- x-pack/plugins/triggers_actions_ui/README.md | 36 ++-- .../application/action_type_registry.mock.ts | 4 +- .../public/application/app.tsx | 2 +- .../components/add_message_variables.tsx | 4 +- .../email/email_params.tsx | 10 +- .../builtin_action_types/jira/jira.tsx | 3 +- .../builtin_action_types/jira/jira_params.tsx | 6 +- .../builtin_action_types/jira/logo.svg | 9 - .../builtin_action_types/jira/logo.tsx | 35 ++++ .../builtin_action_types/pagerduty/logo.tsx | 37 ++++ .../pagerduty/pagerduty.svg | 13 -- .../pagerduty/pagerduty.test.tsx | 2 +- .../pagerduty/pagerduty.tsx | 3 +- .../pagerduty/pagerduty_connectors.tsx | 10 +- .../pagerduty/pagerduty_params.tsx | 6 +- .../resilient/{logo.svg => logo.tsx} | 23 ++- .../resilient/resilient.tsx | 3 +- .../resilient/resilient_params.tsx | 6 +- .../server_log/server_log_params.tsx | 6 +- .../builtin_action_types/servicenow/logo.svg | 5 - .../builtin_action_types/servicenow/logo.tsx | 33 ++++ .../servicenow/servicenow.tsx | 5 +- .../servicenow/servicenow_itsm_params.tsx | 6 +- .../servicenow/servicenow_sir_params.tsx | 6 +- .../slack/slack_connectors.tsx | 10 +- .../teams/{teams.svg => logo.tsx} | 42 ++++- .../builtin_action_types/teams/teams.tsx | 3 +- .../webhook/webhook_connectors.tsx | 10 +- .../application/components/health_check.tsx | 10 +- .../prompts/empty_connectors_prompt.tsx | 6 +- .../public/application/home.tsx | 52 +++--- .../lib/check_action_type_enabled.test.tsx | 2 +- .../lib/check_action_type_enabled.tsx | 8 +- .../action_connector_form.tsx | 6 +- .../action_form.test.tsx | 6 +- .../action_connector_form/action_form.tsx | 110 ++++++------ .../action_type_form.tsx | 162 +++++++++--------- .../connector_add_flyout.tsx | 23 +-- .../connector_add_inline.tsx | 28 +-- .../connector_add_modal.test.tsx | 2 +- .../connector_add_modal.tsx | 10 +- .../connector_edit_flyout.tsx | 33 ++-- .../sections/action_connector_form/index.ts | 8 + .../test_connector_form.tsx | 10 +- .../actions_connectors_list.test.tsx | 7 +- .../components/actions_connectors_list.tsx | 20 ++- .../components/alert_details.tsx | 14 +- .../components/alert_instances.tsx | 10 +- .../sections/alert_form/alert_add.test.tsx | 3 +- .../sections/alert_form/alert_add.tsx | 17 +- .../alert_form/alert_conditions_group.tsx | 4 +- .../sections/alert_form/alert_edit.test.tsx | 2 +- .../sections/alert_form/alert_edit.tsx | 24 +-- .../sections/alert_form/alert_form.test.tsx | 12 +- .../sections/alert_form/alert_form.tsx | 73 ++++---- .../sections/alert_form/alert_notify_when.tsx | 22 +-- .../alerts_list/components/alerts_list.tsx | 9 +- .../components/bulk_operation_popover.tsx | 4 +- .../common/expression_items/group_by_over.tsx | 6 +- .../common/expression_items/threshold.tsx | 2 +- .../public/common/get_add_alert_flyout.tsx | 12 +- .../common/get_add_connector_flyout.tsx | 14 +- .../public/common/get_edit_alert_flyout.tsx | 12 +- .../common/get_edit_connector_flyout.tsx | 14 +- .../triggers_actions_ui/public/index.ts | 17 +- .../triggers_actions_ui/public/mocks.ts | 13 +- .../triggers_actions_ui/public/plugin.ts | 13 +- .../triggers_actions_ui/public/types.ts | 50 +++++- 73 files changed, 696 insertions(+), 593 deletions(-) delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.svg create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.tsx create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/logo.tsx delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.svg rename x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/{logo.svg => logo.tsx} (77%) delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.svg create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.tsx rename x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/{teams.svg => logo.tsx} (91%) diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 5300d22eb2447..890e3eab0d7d5 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -77,7 +77,7 @@ pageLoadAssetSize: tileMap: 65337 timelion: 29920 transform: 41151 - triggersActionsUi: 186732 + triggersActionsUi: 100000 uiActions: 95074 uiActionsEnhanced: 313011 upgradeAssistant: 80966 diff --git a/x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx index 0070bc18dfe12..86f80f772944a 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx @@ -73,7 +73,14 @@ describe('ConnectorsDropdown', () => { > @@ -96,7 +103,14 @@ describe('ConnectorsDropdown', () => { > @@ -119,7 +133,14 @@ describe('ConnectorsDropdown', () => { > @@ -142,7 +163,14 @@ describe('ConnectorsDropdown', () => { > @@ -182,7 +210,9 @@ describe('ConnectorsDropdown', () => { wrappingComponent: TestProviders, }); - expect(newWrapper.find('button span:not([data-euiicon-type])').text()).toEqual('My Connector'); + expect(newWrapper.find('button span:not([data-euiicon-type])').at(1).text()).toBe( + 'My Connector' + ); }); test('if the props hideConnectorServiceNowSir is true, the connector should not be part of the list of options ', () => { diff --git a/x-pack/plugins/cases/public/components/connectors/types.ts b/x-pack/plugins/cases/public/components/connectors/types.ts index fc2f66d331700..1657153ab645b 100644 --- a/x-pack/plugins/cases/public/components/connectors/types.ts +++ b/x-pack/plugins/cases/public/components/connectors/types.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { IconType } from '@elastic/eui/src/components/icon/icon'; import React from 'react'; import { @@ -26,7 +27,7 @@ export interface ThirdPartyField { export interface ConnectorConfiguration { name: string; - logo: string; + logo: IconType; } export interface CaseConnector { diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index d7ae3ca5b80b5..7187a0378320a 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -23666,19 +23666,6 @@ "xpack.triggersActionsUI.sections.alertEdit.saveButtonLabel": "保存", "xpack.triggersActionsUI.sections.alertEdit.saveErrorNotificationText": "ルールを更新できません", "xpack.triggersActionsUI.sections.alertEdit.saveSuccessNotificationText": "'{ruleName}'を更新しました", - "xpack.triggersActionsUI.sections.alertForm.accordion.deleteIconAriaLabel": "削除", - "xpack.triggersActionsUI.sections.alertForm.actionDisabledTitle": "このアクションは無効です", - "xpack.triggersActionsUI.sections.alertForm.actionIdLabel": "{connectorInstance} コネクター", - "xpack.triggersActionsUI.sections.alertForm.actionRunWhenInActionGroup": "次のときに実行", - "xpack.triggersActionsUI.sections.alertForm.actionSectionsTitle": "アクション", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByConfigMessageTitle": "この機能は Kibana の構成で無効になっています。", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseLinkTitle": "ライセンスオプションを表示", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseMessageDescription": "このアクションを再び有効にするには、ライセンスをアップグレードしてください。", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseMessageTitle": "この機能には {minimumLicenseRequired} ライセンスが必要です。", - "xpack.triggersActionsUI.sections.alertForm.addActionButtonLabel": "アクションの追加", - "xpack.triggersActionsUI.sections.alertForm.addConnectorButtonLabel": "コネクターを作成する", - "xpack.triggersActionsUI.sections.alertForm.addNewActionConnectorActionGroup.display": "{actionGroupName} (現在サポートされていません) ", - "xpack.triggersActionsUI.sections.alertForm.addNewConnectorEmptyButton": "コネクターの追加", "xpack.triggersActionsUI.sections.alertForm.alertNameLabel": "名前", "xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.label": "毎", "xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onActionGroupChange.description": "アラートステータスが変更されるときにアクションを実行します。", @@ -23696,37 +23683,22 @@ "xpack.triggersActionsUI.sections.alertForm.conditions.addConditionLabel": "追加：", "xpack.triggersActionsUI.sections.alertForm.conditions.removeConditionLabel": "削除", "xpack.triggersActionsUI.sections.alertForm.conditions.title": "条件：", - "xpack.triggersActionsUI.sections.alertForm.connectorAddInline.actionIdLabel": "別の{connectorInstance}コネクターを使用", - "xpack.triggersActionsUI.sections.alertForm.connectorAddInline.addNewConnectorEmptyButton": "コネクターの追加", "xpack.triggersActionsUI.sections.alertForm.documentationLabel": "ドキュメント", - "xpack.triggersActionsUI.sections.alertForm.emptyConnectorsLabel": "{actionTypeName}コネクターがありません", "xpack.triggersActionsUI.sections.alertForm.error.noAuthorizedRuleTypes": "ルールを{operation}するには、適切な権限が付与されている必要があります。", "xpack.triggersActionsUI.sections.alertForm.error.noAuthorizedRuleTypesTitle": "ルールタイプを{operation}する権限がありません。", "xpack.triggersActionsUI.sections.alertForm.error.requiredActionConnector": "{actionTypeId}コネクターのアクションが必要です。", "xpack.triggersActionsUI.sections.alertForm.error.requiredIntervalText": "確認間隔が必要です。", "xpack.triggersActionsUI.sections.alertForm.error.requiredNameText": "名前が必要です。", "xpack.triggersActionsUI.sections.alertForm.error.requiredRuleTypeIdText": "ルールタイプは必須です。", - "xpack.triggersActionsUI.sections.alertForm.existingAlertActionTypeEditTitle": "{actionConnectorName}", - "xpack.triggersActionsUI.sections.alertForm.loadingConnectorsDescription": "コネクターを読み込んでいます…", - "xpack.triggersActionsUI.sections.alertForm.loadingConnectorTypesDescription": "コネクタータイプを読み込んでいます...", "xpack.triggersActionsUI.sections.alertForm.loadingRuleTypeParamsDescription": "ルールタイプパラメーターを読み込んでいます…", "xpack.triggersActionsUI.sections.alertForm.loadingRuleTypesDescription": "ルールタイプを読み込んでいます…", - "xpack.triggersActionsUI.sections.alertForm.newAlertActionTypeEditTitle": "{actionConnectorName}", - "xpack.triggersActionsUI.sections.alertForm.preconfiguredTitleMessage": "構成済み", "xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel": "通知", "xpack.triggersActionsUI.sections.alertForm.renotifyWithTooltip": "ルールがアクティブな間にアクションを繰り返す頻度を定義します。", "xpack.triggersActionsUI.sections.alertForm.ruleTypeSelectLabel": "ルールタイプを選択", "xpack.triggersActionsUI.sections.alertForm.searchPlaceholderTitle": "検索", - "xpack.triggersActionsUI.sections.alertForm.selectConnectorTypeTitle": "コネクタータイプを選択", "xpack.triggersActionsUI.sections.alertForm.solutionFilterLabel": "ユースケースでフィルタリング", "xpack.triggersActionsUI.sections.alertForm.tagsFieldLabel": "タグ (任意) ", - "xpack.triggersActionsUI.sections.alertForm.unableToAddAction": "デフォルトアクショングループの定義がないのでアクションを追加できません", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage": "コネクターを読み込めません", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTitle": "コネクターを読み込めません。", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTitle'": "コネクターを読み込めません。", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTypesMessage": "コネクタータイプを読み込めません", "xpack.triggersActionsUI.sections.alertForm.unableToLoadRuleTypesMessage": "ルールタイプを読み込めません", - "xpack.triggersActionsUI.sections.alertForm.unauthorizedToCreateForEmptyConnectors": "許可されたユーザーのみがコネクターを構成できます。管理者にお問い合わせください。", "xpack.triggersActionsUI.sections.alertsList.actionTypeFilterLabel": "アクションタイプ", "xpack.triggersActionsUI.sections.alertsList.addRuleButtonLabel": "ルールを作成", "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonDecrypting": "ルールの復号中にエラーが発生しました。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index fbbdf72f5a44f..6194f5b137602 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -24031,19 +24031,6 @@ "xpack.triggersActionsUI.sections.alertEdit.saveButtonLabel": "保存", "xpack.triggersActionsUI.sections.alertEdit.saveErrorNotificationText": "无法更新规则。", "xpack.triggersActionsUI.sections.alertEdit.saveSuccessNotificationText": "已更新“{ruleName}”", - "xpack.triggersActionsUI.sections.alertForm.accordion.deleteIconAriaLabel": "删除", - "xpack.triggersActionsUI.sections.alertForm.actionDisabledTitle": "此操作已禁用", - "xpack.triggersActionsUI.sections.alertForm.actionIdLabel": "{connectorInstance} 连接器", - "xpack.triggersActionsUI.sections.alertForm.actionRunWhenInActionGroup": "运行条件", - "xpack.triggersActionsUI.sections.alertForm.actionSectionsTitle": "操作", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByConfigMessageTitle": "此功能已由 Kibana 配置禁用。", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseLinkTitle": "查看许可证选项", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseMessageDescription": "要重新启用此操作，请升级您的许可证。", - "xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseMessageTitle": "此功能需要{minimumLicenseRequired}许可证。", - "xpack.triggersActionsUI.sections.alertForm.addActionButtonLabel": "添加操作", - "xpack.triggersActionsUI.sections.alertForm.addConnectorButtonLabel": "创建连接器", - "xpack.triggersActionsUI.sections.alertForm.addNewActionConnectorActionGroup.display": "{actionGroupName} (当前不支持) ", - "xpack.triggersActionsUI.sections.alertForm.addNewConnectorEmptyButton": "添加连接器", "xpack.triggersActionsUI.sections.alertForm.alertNameLabel": "名称", "xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.label": "每", "xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onActionGroupChange.description": "操作在告警状态更改时运行。", @@ -24061,37 +24048,22 @@ "xpack.triggersActionsUI.sections.alertForm.conditions.addConditionLabel": "添加：", "xpack.triggersActionsUI.sections.alertForm.conditions.removeConditionLabel": "移除", "xpack.triggersActionsUI.sections.alertForm.conditions.title": "条件：", - "xpack.triggersActionsUI.sections.alertForm.connectorAddInline.actionIdLabel": "使用其他 {connectorInstance} 连接器", - "xpack.triggersActionsUI.sections.alertForm.connectorAddInline.addNewConnectorEmptyButton": "添加连接器", "xpack.triggersActionsUI.sections.alertForm.documentationLabel": "文档", - "xpack.triggersActionsUI.sections.alertForm.emptyConnectorsLabel": "无 {actionTypeName} 连接器", "xpack.triggersActionsUI.sections.alertForm.error.noAuthorizedRuleTypes": "为了{operation}规则，您需要获得相应的权限。", "xpack.triggersActionsUI.sections.alertForm.error.noAuthorizedRuleTypesTitle": "您尚无权{operation}任何规则类型", "xpack.triggersActionsUI.sections.alertForm.error.requiredActionConnector": "“{actionTypeId} 连接器的操作”必填。", "xpack.triggersActionsUI.sections.alertForm.error.requiredIntervalText": "“检查时间间隔”必填。", "xpack.triggersActionsUI.sections.alertForm.error.requiredNameText": "“名称”必填。", "xpack.triggersActionsUI.sections.alertForm.error.requiredRuleTypeIdText": "“规则类型”必填。", - "xpack.triggersActionsUI.sections.alertForm.existingAlertActionTypeEditTitle": "{actionConnectorName}", - "xpack.triggersActionsUI.sections.alertForm.loadingConnectorsDescription": "正在加载连接器……", - "xpack.triggersActionsUI.sections.alertForm.loadingConnectorTypesDescription": "正在加载连接器类型……", "xpack.triggersActionsUI.sections.alertForm.loadingRuleTypeParamsDescription": "正在加载规则类型参数……", "xpack.triggersActionsUI.sections.alertForm.loadingRuleTypesDescription": "正在加载规则类型……", - "xpack.triggersActionsUI.sections.alertForm.newAlertActionTypeEditTitle": "{actionConnectorName}", - "xpack.triggersActionsUI.sections.alertForm.preconfiguredTitleMessage": "预配置", "xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel": "通知", "xpack.triggersActionsUI.sections.alertForm.renotifyWithTooltip": "定义规则处于活动状态时重复操作的频率。", "xpack.triggersActionsUI.sections.alertForm.ruleTypeSelectLabel": "选择规则类型", "xpack.triggersActionsUI.sections.alertForm.searchPlaceholderTitle": "搜索", - "xpack.triggersActionsUI.sections.alertForm.selectConnectorTypeTitle": "选择连接器类型", "xpack.triggersActionsUI.sections.alertForm.solutionFilterLabel": "按用例筛选", "xpack.triggersActionsUI.sections.alertForm.tagsFieldLabel": "标签 (可选) ", - "xpack.triggersActionsUI.sections.alertForm.unableToAddAction": "无法添加操作，因为未定义默认操作组", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage": "无法加载连接器", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTitle": "无法加载连接器。", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTitle'": "无法加载连接器。", - "xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTypesMessage": "无法加载连接器类型", "xpack.triggersActionsUI.sections.alertForm.unableToLoadRuleTypesMessage": "无法加载规则类型", - "xpack.triggersActionsUI.sections.alertForm.unauthorizedToCreateForEmptyConnectors": "只有获得授权的用户才能配置连接器。请联系您的管理员。", "xpack.triggersActionsUI.sections.alertsList.actionTypeFilterLabel": "操作类型", "xpack.triggersActionsUI.sections.alertsList.addRuleButtonLabel": "创建规则", "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonDecrypting": "解密规则时发生错误。", diff --git a/x-pack/plugins/triggers_actions_ui/README.md b/x-pack/plugins/triggers_actions_ui/README.md index dc1da533af374..7d736218af2d9 100644 --- a/x-pack/plugins/triggers_actions_ui/README.md +++ b/x-pack/plugins/triggers_actions_ui/README.md @@ -206,13 +206,13 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent + <> {hasExpressionErrors ? ( - + <> - + ) : null} @@ -221,7 +221,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent .... - + ); }; @@ -322,7 +322,7 @@ Fields of this object `AlertTypeModel` will be mapped properly in the UI below. 2. Define `alertParamsExpression` as `React.FunctionComponent` - this is the form for filling Alert params based on the current Alert type. ``` -import React, { Fragment, useState } from 'react'; +import React, { useState } from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { WhenExpression, OfExpression } from '../../../../common/expression_items'; import { builtInAggregationTypes } from '../../../../common/constants'; @@ -340,7 +340,7 @@ export const ExampleExpression: React.FunctionComponent = ({ }) => { const [aggType, setAggType] = useState('count'); return ( - + <> = ({ ) : null} - + ); }; @@ -653,7 +653,7 @@ const ThresholdSpecifier = ( }) => { if (!actionGroup) { // render empty if no condition action group is specified - return ; + return null; } return ( @@ -1073,7 +1073,7 @@ Action type model definition: export function getActionType(): ActionTypeModel { return { id: '.pagerduty', - iconClass: 'apps', + iconClass: lazy(() => import('./logo')), selectMessage: i18n.translate( 'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.selectMessageText', { @@ -1110,7 +1110,7 @@ and action params form available in Create Alert form: Each action type should be defined as an `ActionTypeModel` object with the following properties: ``` id: string; - iconClass: string; + iconClass: IconType; selectMessage: string; actionTypeTitle?: string; validateConnector: (connector: any) => ValidationResult; @@ -1121,7 +1121,7 @@ Each action type should be defined as an `ActionTypeModel` object with the follo |Property|Description| |---|---| |id|Action type id. Should be the same as on server side.| -|iconClass|Icon of action type, that will be displayed on the select card in UI.| +|iconClass|Setting for icon to be displayed to the user. EUI supports any known EUI icon, SVG URL, or a lazy loaded React component, ReactElement.| |selectMessage|Short description of action type responsibility, that will be displayed on the select card in UI.| |validateConnector|Validation function for action connector.| |validateParams|Validation function for action params.| @@ -1157,7 +1157,7 @@ Below is a list of steps that should be done to build and register a new action 1. At any suitable place in Kibana, create a file, which will expose an object implementing interface [ActionTypeModel]: ``` -import React, { Fragment, lazy } from 'react'; +import React, { lazy } from 'react'; import { i18n } from '@kbn/i18n'; import { ActionTypeModel, @@ -1230,7 +1230,7 @@ export function getActionType(): ActionTypeModel { 2. Define `actionConnectorFields` as `React.FunctionComponent` - this is the form for action connector. ``` -import React, { Fragment } from 'react'; +import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFieldText } from '@elastic/eui'; import { EuiTextArea } from '@elastic/eui'; @@ -1252,7 +1252,7 @@ const ExampleConnectorFields: React.FunctionComponent> = ({ action, editActionConfig, errors }) => { const { someConnectorField } = action.config; return ( - + <> 0 && someConnectorField !== undefined} @@ -1267,7 +1267,7 @@ const ExampleConnectorFields: React.FunctionComponent - + ); }; @@ -1277,7 +1277,7 @@ export {ExampleConnectorFields as default}; 3. Define action type params fields using the property of `ActionTypeModel` `actionParamsFields`: ``` -import React, { Fragment } from 'react'; +import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFieldText } from '@elastic/eui'; import { EuiTextArea } from '@elastic/eui'; @@ -1300,7 +1300,7 @@ const ExampleParamsFields: React.FunctionComponent { const { message } = actionParams; return ( - + <> 0 && message !== undefined} @@ -1315,7 +1315,7 @@ const ExampleParamsFields: React.FunctionComponent - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/action_type_registry.mock.ts b/x-pack/plugins/triggers_actions_ui/public/application/action_type_registry.mock.ts index c1d7a3281b410..3c5c1b551028e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/action_type_registry.mock.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/action_type_registry.mock.ts @@ -5,7 +5,7 @@ * 2.0. */ -import React, { lazy, Fragment } from 'react'; +import React, { lazy } from 'react'; import uuid from 'uuid'; import { ActionTypeModel, ActionTypeRegistryContract } from '../types'; @@ -21,7 +21,7 @@ const createActionTypeRegistryMock = () => { const mockedActionParamsFields = lazy(async () => ({ default() { - return React.createElement(Fragment); + return React.createElement(React.Fragment); }, })); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx index 2e0614e7ea963..5acb99c684a96 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx @@ -26,7 +26,7 @@ import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common import { setSavedObjectsClient } from '../common/lib/data_apis'; import { KibanaContextProvider } from '../common/lib/kibana'; -const TriggersActionsUIHome = lazy(async () => import('./home')); +const TriggersActionsUIHome = lazy(() => import('./home')); const AlertDetailsRoute = lazy( () => import('./sections/alert_details/components/alert_details_route') ); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx index 57b251fba0d45..2f220855f9474 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiPopover, @@ -62,7 +62,7 @@ export const AddMessageVariables: React.FunctionComponent = ({ ); if ((messageVariables?.length ?? 0) === 0) { - return ; + return <>; } return ( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx index 2c25220598b03..e2d6237af85da 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiComboBox, EuiButtonEmpty, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -46,7 +46,7 @@ export const EmailParamsFields = ({ }, [defaultMessage]); return ( - + <> + <> {!addCC ? ( setAddCC(true)}> @@ -77,7 +77,7 @@ export const EmailParamsFields = ({ ) : null} - + } > - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx index ba6a5fa2079dc..ff7fd026f8e31 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira.tsx @@ -11,7 +11,6 @@ import { ActionTypeModel, ConnectorValidationResult, } from '../../../../types'; -import logo from './logo.svg'; import { JiraActionConnector, JiraConfig, JiraSecrets, JiraActionParams } from './types'; import * as i18n from './translations'; import { isValidUrl } from '../../../lib/value_validators'; @@ -63,7 +62,7 @@ const validateConnector = ( export function getActionType(): ActionTypeModel { return { id: '.jira', - iconClass: logo, + iconClass: lazy(() => import('./logo')), selectMessage: i18n.JIRA_DESC, actionTypeTitle: i18n.JIRA_TITLE, validateConnector, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx index cb2d637972cb8..11123a81440bb 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { i18n } from '@kbn/i18n'; import { @@ -190,7 +190,7 @@ const JiraParamsFields: React.FunctionComponent + <> <> - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.svg b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.svg deleted file mode 100644 index 8560cf7e270c8..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.tsx new file mode 100644 index 0000000000000..2e8f1d5ef3bd7 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/logo.tsx @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +const Logo = () => ( + + + + + + + + + +); + +// eslint-disable-next-line import/no-default-export +export { Logo as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/logo.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/logo.tsx new file mode 100644 index 0000000000000..20db34351c6b1 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/logo.tsx @@ -0,0 +1,37 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +const Logo = () => ( + + + + + + +); + +// eslint-disable-next-line import/no-default-export +export { Logo as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.svg b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.svg deleted file mode 100644 index b11dcb3570c26..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx index 7a60d79d33137..eae8690dbdd98 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx @@ -25,7 +25,7 @@ beforeAll(() => { describe('actionTypeRegistry.get() works', () => { test('action type static data is as expected', () => { expect(actionTypeModel.id).toEqual(ACTION_TYPE_ID); - expect(actionTypeModel.iconClass).toEqual('test-file-stub'); + expect(actionTypeModel.actionTypeTitle).toEqual('Send to PagerDuty'); }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx index cae4221e5d7ce..310c5cae24566 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx @@ -20,7 +20,6 @@ import { PagerDutyActionParams, EventActionOptions, } from '.././types'; -import pagerDutySvg from './pagerduty.svg'; import { hasMustacheTokens } from '../../../lib/has_mustache_tokens'; export function getActionType(): ActionTypeModel< @@ -30,7 +29,7 @@ export function getActionType(): ActionTypeModel< > { return { id: '.pagerduty', - iconClass: pagerDutySvg, + iconClass: lazy(() => import('./logo')), selectMessage: i18n.translate( 'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.selectMessageText', { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_connectors.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_connectors.tsx index 8c9f809b97447..7e9a5770c2158 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_connectors.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_connectors.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment } from 'react'; +import React from 'react'; import { EuiFieldText, EuiFormRow, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -21,7 +21,7 @@ const PagerDutyActionConnectorFields: React.FunctionComponent< const { apiUrl } = action.config; const { routingKey } = action.secrets; return ( - + <> - + <> {getEncryptedFieldNotifyLabel( !action.id, 1, @@ -94,9 +94,9 @@ const PagerDutyActionConnectorFields: React.FunctionComponent< } }} /> - + - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx index 98dd9c6bf8431..4961a27fd0ac1 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment } from 'react'; +import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isUndefined } from 'lodash'; @@ -102,7 +102,7 @@ const PagerDutyParamsFields: React.FunctionComponent + <> ) : null} - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/logo.svg b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/logo.tsx similarity index 77% rename from x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/logo.svg rename to x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/logo.tsx index 553c2c62b7191..325893756e2f4 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/logo.svg +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/logo.tsx @@ -1,3 +1,20 @@ - - - +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +const Logo = () => ( + + + +); + +// eslint-disable-next-line import/no-default-export +export { Logo as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx index a8fe5e8ae4b6a..e7074b7506e7a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient.tsx @@ -11,7 +11,6 @@ import { ActionTypeModel, ConnectorValidationResult, } from '../../../../types'; -import logo from './logo.svg'; import { ResilientActionConnector, ResilientConfig, @@ -72,7 +71,7 @@ export function getActionType(): ActionTypeModel< > { return { id: '.resilient', - iconClass: logo, + iconClass: lazy(() => import('./logo')), selectMessage: i18n.DESC, actionTypeTitle: i18n.TITLE, validateConnector, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient_params.tsx index 8444f5a2c5ca9..4642226d40222 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/resilient/resilient_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { EuiFormRow, EuiComboBox, @@ -165,7 +165,7 @@ const ResilientParamsFields: React.FunctionComponent + <>

Incident

 @@ -251,7 +251,7 @@ const ResilientParamsFields: React.FunctionComponent - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx index 2a6d21f31973b..6397ce7bc184e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSelect, EuiFormRow } from '@elastic/eui'; import { ActionParamsProps } from '../../../../types'; @@ -48,7 +48,7 @@ export const ServerLogParamsFields: React.FunctionComponent< }, [defaultMessage]); return ( - + <> - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.svg b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.svg deleted file mode 100644 index dcd022a8dca18..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.tsx new file mode 100644 index 0000000000000..f7f79d387c62c --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/logo.tsx @@ -0,0 +1,33 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +function Logo() { + return ( + + + + + + ); +} + +// eslint-disable-next-line import/no-default-export +export default Logo; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx index b1664656c0d14..a6cc116d3d7b4 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow.tsx @@ -11,7 +11,6 @@ import { ActionTypeModel, ConnectorValidationResult, } from '../../../../types'; -import logo from './logo.svg'; import { ServiceNowActionConnector, ServiceNowConfig, @@ -68,7 +67,7 @@ export function getServiceNowITSMActionType(): ActionTypeModel< > { return { id: '.servicenow', - iconClass: logo, + iconClass: lazy(() => import('./logo')), selectMessage: i18n.SERVICENOW_ITSM_DESC, actionTypeTitle: i18n.SERVICENOW_ITSM_TITLE, validateConnector, @@ -103,7 +102,7 @@ export function getServiceNowSIRActionType(): ActionTypeModel< > { return { id: '.servicenow-sir', - iconClass: logo, + iconClass: lazy(() => import('./logo')), selectMessage: i18n.SERVICENOW_SIR_DESC, actionTypeTitle: i18n.SERVICENOW_SIR_TITLE, validateConnector, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_itsm_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_itsm_params.tsx index 84326a7ae9be8..dbd6fec3dad19 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_itsm_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_itsm_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { EuiFormRow, EuiSelect, @@ -146,7 +146,7 @@ const ServiceNowParamsFields: React.FunctionComponent< }, [actionParams]); return ( - + <>

{i18n.INCIDENT}

 @@ -270,7 +270,7 @@ const ServiceNowParamsFields: React.FunctionComponent< inputTargetValue={comments && comments.length > 0 ? comments[0].comment : undefined} label={i18n.COMMENTS_LABEL} /> - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_sir_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_sir_params.tsx index 95a17c205801c..be6756b1c1049 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_sir_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/servicenow/servicenow_sir_params.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { EuiFormRow, EuiSelect, @@ -142,7 +142,7 @@ const ServiceNowSIRParamsFields: React.FunctionComponent< }, [actionParams]); return ( - + <>

{i18n.INCIDENT}

 @@ -276,7 +276,7 @@ const ServiceNowSIRParamsFields: React.FunctionComponent< inputTargetValue={comments && comments.length > 0 ? comments[0].comment : undefined} label={i18n.COMMENTS_LABEL} /> - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_connectors.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_connectors.tsx index 677eb8d7d05f9..ce6cda1294adc 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_connectors.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_connectors.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment } from 'react'; +import React from 'react'; import { EuiFieldText, EuiFormRow, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -21,7 +21,7 @@ const SlackActionFields: React.FunctionComponent< const { webhookUrl } = action.secrets; return ( - + <> - + <> {getEncryptedFieldNotifyLabel( !action.id, 1, @@ -68,9 +68,9 @@ const SlackActionFields: React.FunctionComponent< } }} /> - + - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.svg b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/logo.tsx similarity index 91% rename from x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.svg rename to x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/logo.tsx index ab07be8f1ef0a..42b1fa2c2a0da 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.svg +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/logo.tsx @@ -1,7 +1,32 @@ - - - + - +MS0xMlQxOTo1Nzo0NSswMzowMIKUWWYAAAAASUVORK5CYII=" + /> + +); + +// eslint-disable-next-line import/no-default-export +export { Logo as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.tsx index 00d860fc54110..e8c7be7311c1c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/teams/teams.tsx @@ -7,7 +7,6 @@ import { lazy } from 'react'; import { i18n } from '@kbn/i18n'; -import teamsSvg from './teams.svg'; import { ActionTypeModel, GenericValidationResult, @@ -19,7 +18,7 @@ import { isValidUrl } from '../../../lib/value_validators'; export function getActionType(): ActionTypeModel { return { id: '.teams', - iconClass: teamsSvg, + iconClass: lazy(() => import('./logo')), selectMessage: i18n.translate( 'xpack.triggersActionsUI.components.builtinActionTypes.teamsAction.selectMessageText', { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx index 9a93d29cfcb15..d3231f52b4d7b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -110,7 +110,7 @@ const WebhookActionConnectorFields: React.FunctionComponent< let headerControl; if (hasHeaders) { headerControl = ( - + <>
- + ); } @@ -220,7 +220,7 @@ const WebhookActionConnectorFields: React.FunctionComponent< }); return ( - + <> - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx index d75ab102a8e0c..762526dfd7fa7 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment } from 'react'; +import React from 'react'; import { Option, none, some, fold } from 'fp-ts/lib/Option'; import { pipe } from 'fp-ts/lib/pipeable'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -69,16 +69,16 @@ export const HealthCheck: React.FunctionComponent = ({ fold( () => waitForCheck ? ( - + <> - + ) : ( - {children} + <>{children} ), (healthCheck) => { return healthCheck?.isSufficientlySecure && healthCheck?.hasPermanentEncryptionKey ? ( - {children} + <>{children} ) : !healthCheck.isAlertsAvailable ? ( ) : !healthCheck.isSufficientlySecure && !healthCheck.hasPermanentEncryptionKey ? ( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_connectors_prompt.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_connectors_prompt.tsx index e56fad409d98f..84ac46605905e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_connectors_prompt.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_connectors_prompt.tsx @@ -6,7 +6,7 @@ */ import { FormattedMessage } from '@kbn/i18n/react'; -import React, { Fragment } from 'react'; +import React from 'react'; import { EuiButton, EuiEmptyPrompt, EuiIcon, EuiSpacer, EuiTitle } from '@elastic/eui'; import './empty_connectors_prompt.scss'; @@ -14,7 +14,7 @@ export const EmptyConnectorsPrompt = ({ onCTAClicked }: { onCTAClicked: () => vo + <> @@ -27,7 +27,7 @@ export const EmptyConnectorsPrompt = ({ onCTAClicked }: { onCTAClicked: () => vo />
- + } body={

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx index b77593c990550..20aec6974d395 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useEffect } from 'react'; +import React, { lazy, useEffect } from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -26,11 +26,15 @@ import { getAlertingSectionBreadcrumb } from './lib/breadcrumb'; import { getCurrentDocTitle } from './lib/doc_title'; import { hasShowActionsCapability } from './lib/capabilities'; -import { ActionsConnectorsList } from './sections/actions_connectors_list/components/actions_connectors_list'; -import { AlertsList } from './sections/alerts_list/components/alerts_list'; import { HealthCheck } from './components/health_check'; import { HealthContextProvider } from './context/health_context'; import { useKibana } from '../common/lib/kibana'; +import { suspendedComponentWithProps } from './lib/suspended_component_with_props'; + +const ActionsConnectorsList = lazy( + () => import('./sections/actions_connectors_list/components/actions_connectors_list') +); +const AlertsList = lazy(() => import('./sections/alerts_list/components/alerts_list')); export interface MatchParams { section: Section; @@ -137,32 +141,24 @@ export const TriggersActionsUIHome: React.FunctionComponent - - {canShowActions && ( - ( - - - - - + + + + {canShowActions && ( + )} - /> - )} - ( - - - - - - )} - /> - + + + + ); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx index f9855cc9d7130..6b115abc590cc 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx @@ -61,7 +61,7 @@ describe('checkActionTypeEnabled', () => { > diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.tsx b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.tsx index e4e67002298ee..1c2a56f4cccaa 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.tsx @@ -39,7 +39,7 @@ const getLicenseCheckResult = (actionType: ActionType) => { { // The "re-enable" terminology is used here because this message is used when an alert // action was previously enabled and needs action to be re-enabled. description={i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseMessageDescription', + 'xpack.triggersActionsUI.licenseCheck.actionTypeDisabledByLicenseMessageDescription', { defaultMessage: 'To re-enable this action, please upgrade your license.' } )} className="actCheckActionTypeEnabled__disabledActionWarningCard" @@ -58,7 +58,7 @@ const getLicenseCheckResult = (actionType: ActionType) => { } @@ -76,7 +76,7 @@ const configurationCheckResult = { messageCard: ( + <> - + ); const FieldsComponent = actionTypeRegistered.actionConnectorFields; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx index 174407e7edec5..ad727be58280f 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, lazy } from 'react'; +import React, { lazy } from 'react'; import { mountWithIntl, nextTick } from '@kbn/test/jest'; import { EuiAccordion } from '@elastic/eui'; import { coreMock } from '../../../../../../../src/core/public/mocks'; @@ -34,7 +34,7 @@ const setHasActionsWithBrokenConnector = jest.fn(); describe('action_form', () => { const mockedActionParamsFields = lazy(async () => ({ default() { - return ; + return <>; }, })); @@ -45,7 +45,7 @@ describe('action_form', () => { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: false, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx index 55ebbbc6f3edd..e9f79633ef520 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx @@ -30,7 +30,6 @@ import { ActionTypeRegistryContract, } from '../../../types'; import { SectionLoading } from '../../components/section_loading'; -import { ConnectorAddModal } from './connector_add_modal'; import { ActionTypeForm, ActionTypeFormProps } from './action_type_form'; import { AddConnectorInline } from './connector_add_inline'; import { actionTypeCompare } from '../../lib/action_type_compare'; @@ -43,6 +42,8 @@ import { import { ActionGroup, AlertActionParam } from '../../../../../alerting/common'; import { useKibana } from '../../../common/lib/kibana'; import { DefaultActionParamsGetter } from '../../lib/get_defaults_for_action_params'; +import { ConnectorAddModal } from '.'; +import { suspendedComponentWithProps } from '../../lib/suspended_component_with_props'; export interface ActionGroupWithMessageVariables extends ActionGroup { omitOptionalMessageVariables?: boolean; @@ -124,7 +125,7 @@ export const ActionForm = ({ } catch (e) { toasts.addDanger({ title: i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTypesMessage', + 'xpack.triggersActionsUI.sections.actionForm.unableToLoadConnectorTypesMessage', { defaultMessage: 'Unable to load connector types' } ), }); @@ -145,7 +146,7 @@ export const ActionForm = ({ } catch (e) { toasts.addDanger({ title: i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage', + 'xpack.triggersActionsUI.sections.actionForm.unableToLoadActionsMessage', { defaultMessage: 'Unable to load connectors', } @@ -193,7 +194,7 @@ export const ActionForm = ({ function addActionType(actionTypeModel: ActionTypeModel) { if (!defaultActionGroupId) { toasts!.addDanger({ - title: i18n.translate('xpack.triggersActionsUI.sections.alertForm.unableToAddAction', { + title: i18n.translate('xpack.triggersActionsUI.sections.actionForm.unableToAddAction', { defaultMessage: 'Unable to add action, because default action group is not defined', }), }); @@ -271,7 +272,14 @@ export const ActionForm = ({ label={actionTypesIndex[item.id].name} onClick={() => addActionType(item)} > - + ); @@ -291,17 +299,17 @@ export const ActionForm = ({ return isLoadingConnectors ? ( ) : ( - + <>

@@ -354,54 +362,56 @@ export const ActionForm = ({ ?.validateParams(actionItem.params); return ( - { - setActiveActionItem({ actionTypeId: actionItem.actionTypeId, indices: [index] }); - setAddModalVisibility(true); - }} - onConnectorSelected={(id: string) => { - setActionIdByIndex(id, index); - }} - actionTypeRegistry={actionTypeRegistry} - onDeleteAction={() => { - const updatedActions = actions.filter( - (_item: AlertAction, i: number) => i !== index - ); - setActions(updatedActions); - setIsAddActionPanelOpen( - updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length === - 0 - ); - setActiveActionItem(undefined); - }} - /> + + { + setActiveActionItem({ actionTypeId: actionItem.actionTypeId, indices: [index] }); + setAddModalVisibility(true); + }} + onConnectorSelected={(id: string) => { + setActionIdByIndex(id, index); + }} + actionTypeRegistry={actionTypeRegistry} + onDeleteAction={() => { + const updatedActions = actions.filter( + (_item: AlertAction, i: number) => i !== index + ); + setActions(updatedActions); + setIsAddActionPanelOpen( + updatedActions.filter((item: AlertAction) => item.id !== actionItem.id) + .length === 0 + ); + setActiveActionItem(undefined); + }} + /> + + ); })} {isAddActionPanelOpen ? ( - + <>
@@ -431,7 +441,7 @@ export const ActionForm = ({ {isLoadingActionTypes ? ( @@ -439,7 +449,7 @@ export const ActionForm = ({ actionTypeNodes )} - + ) : ( @@ -449,7 +459,7 @@ export const ActionForm = ({ onClick={() => setIsAddActionPanelOpen(true)} > @@ -468,7 +478,7 @@ export const ActionForm = ({ actionTypeRegistry={actionTypeRegistry} /> ) : null} - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx index 48c6c1b42d7af..2690aeaffad32 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, Suspense, useEffect, useState } from 'react'; +import React, { Suspense, useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -166,7 +166,7 @@ export const ActionTypeForm = ({ isActionGroupDisabledForActionType ? isActionGroupDisabledForActionType(actionGroupId, actionTypeId) ? i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.addNewActionConnectorActionGroup.display', + 'xpack.triggersActionsUI.sections.actionTypeForm.addNewActionConnectorActionGroup.display', { defaultMessage: '{actionGroupName} (Not Currently Supported)', values: { actionGroupName }, @@ -202,9 +202,9 @@ export const ActionTypeForm = ({ ); const accordionContent = checkEnabledResult.isEnabled ? ( - + <> {actionGroups && selectedActionGroup && setActionGroupIdByIndex && ( - + <> @@ -240,7 +240,7 @@ export const ActionTypeForm = ({ - + )} @@ -248,7 +248,7 @@ export const ActionTypeForm = ({ fullWidth label={ ) : null @@ -305,88 +305,86 @@ export const ActionTypeForm = ({ ) : null} - + ) : ( checkEnabledResult.messageCard ); return ( - - - - - - - -
- + + + + + + +
+ + + + + {selectedActionGroup && !isOpen && ( - + {selectedActionGroup.name} - {selectedActionGroup && !isOpen && ( - - {selectedActionGroup.name} - + )} + + {checkEnabledResult.isEnabled === false && ( + <> + + )} - - {checkEnabledResult.isEnabled === false && ( - - - - )} - - -
- - - - } - extraAction={ - - } - > - {accordionContent} - - - + + +
+ + + + } + extraAction={ + + } + > + {accordionContent} + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx index 6dc75b318a8f0..d3a6d662720ca 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useState, Fragment, useReducer } from 'react'; +import React, { useCallback, useState, useReducer } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, @@ -29,8 +29,8 @@ import { ActionConnectorForm, getConnectorErrors } from './action_connector_form import { ActionType, ActionConnector, - ActionTypeRegistryContract, UserConfiguredActionConnector, + ConnectorAddFlyoutProps, } from '../../../types'; import { hasSaveActionsCapability } from '../../lib/capabilities'; import { createActionConnector } from '../../lib/action_connector_api'; @@ -39,15 +39,6 @@ import { useKibana } from '../../../common/lib/kibana'; import { createConnectorReducer, InitialConnector, ConnectorReducer } from './connector_reducer'; import { getConnectorWithInvalidatedFields } from '../../lib/value_validators'; -export interface ConnectorAddFlyoutProps { - onClose: () => void; - actionTypes?: ActionType[]; - onTestConnector?: (connector: ActionConnector) => void; - reloadConnectors?: () => Promise; - consumer?: string; - actionTypeRegistry: ActionTypeRegistryContract; -} - const ConnectorAddFlyout: React.FunctionComponent = ({ onClose, actionTypes, @@ -199,7 +190,7 @@ const ConnectorAddFlyout: React.FunctionComponent = ({ }; saveButton = ( - + <> {onTestConnector && ( = ({ /> - + ); } @@ -251,7 +242,7 @@ const ConnectorAddFlyout: React.FunctionComponent = ({ ) : null} {actionTypeModel && actionType ? ( - + <>

= ({ {actionTypeModel.selectMessage} - + ) : (

@@ -285,7 +276,7 @@ const ConnectorAddFlyout: React.FunctionComponent = ({ !actionType && hasActionsUpgradeableByTrial ? ( ) : ( - + <> ) } > diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_inline.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_inline.tsx index 9a9583313bcdb..0cdcf8bd44413 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_inline.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_inline.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -68,7 +68,7 @@ export const AddConnectorInline = ({ const noConnectorsLabel = ( @@ -117,7 +117,7 @@ export const AddConnectorInline = ({ fullWidth label={ } @@ -162,8 +162,9 @@ export const AddConnectorInline = ({ ); return ( - + <> } /> @@ -211,7 +212,7 @@ export const AddConnectorInline = ({ color="danger" className="actAccordionActionForm__extraAction" aria-label={i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.accordion.deleteIconAriaLabel', + 'xpack.triggersActionsUI.sections.connectorAddInline.accordion.deleteIconAriaLabel', { defaultMessage: 'Delete', } @@ -236,7 +237,7 @@ export const AddConnectorInline = ({ onClick={onAddConnector} > @@ -247,7 +248,7 @@ export const AddConnectorInline = ({

@@ -255,6 +256,9 @@ export const AddConnectorInline = ({ )} - + ); }; + +// eslint-disable-next-line import/no-default-export +export { AddConnectorInline as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.test.tsx index ccff4f5853b1b..c18f6955d1217 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.test.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { mountWithIntl } from '@kbn/test/jest'; -import { ConnectorAddModal } from './connector_add_modal'; +import ConnectorAddModal from './connector_add_modal'; import { actionTypeRegistryMock } from '../../action_type_registry.mock'; import { ActionType, ConnectorValidationResult, GenericValidationResult } from '../../../types'; import { useKibana } from '../../../common/lib/kibana'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx index 8732727b9a77a..d01ee08df2394 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx @@ -35,15 +35,16 @@ import { import { useKibana } from '../../../common/lib/kibana'; import { getConnectorWithInvalidatedFields } from '../../lib/value_validators'; -interface ConnectorAddModalProps { +// eslint-disable-next-line @typescript-eslint/consistent-type-definitions +type ConnectorAddModalProps = { actionType: ActionType; onClose: () => void; postSaveEventHandler?: (savedAction: ActionConnector) => void; consumer?: string; actionTypeRegistry: ActionTypeRegistryContract; -} +}; -export const ConnectorAddModal = ({ +const ConnectorAddModal = ({ actionType, onClose, postSaveEventHandler, @@ -216,3 +217,6 @@ export const ConnectorAddModal = ({ ); }; + +// eslint-disable-next-line import/no-default-export +export { ConnectorAddModal as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx index 6c08b0b0b1ac5..66a4dcc452c51 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useReducer, useState, Fragment } from 'react'; +import React, { useCallback, useReducer, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, @@ -30,7 +30,8 @@ import { ActionConnectorForm, getConnectorErrors } from './action_connector_form import { TestConnectorForm } from './test_connector_form'; import { ActionConnector, - ActionTypeRegistryContract, + ConnectorEditFlyoutProps, + EditConectorTabs, UserConfiguredActionConnector, } from '../../../types'; import { ConnectorReducer, createConnectorReducer } from './connector_reducer'; @@ -44,21 +45,7 @@ import './connector_edit_flyout.scss'; import { useKibana } from '../../../common/lib/kibana'; import { getConnectorWithInvalidatedFields } from '../../lib/value_validators'; -export interface ConnectorEditFlyoutProps { - initialConnector: ActionConnector; - onClose: () => void; - tab?: EditConectorTabs; - reloadConnectors?: () => Promise; - consumer?: string; - actionTypeRegistry: ActionTypeRegistryContract; -} - -export enum EditConectorTabs { - Configuration = 'configuration', - Test = 'test', -} - -export const ConnectorEditFlyout = ({ +const ConnectorEditFlyout = ({ initialConnector, onClose, tab = EditConectorTabs.Configuration, @@ -173,7 +160,7 @@ export const ConnectorEditFlyout = ({ }); const flyoutTitle = connector.isPreconfigured ? ( - + <>

- + ) : (

@@ -313,7 +300,7 @@ export const ConnectorEditFlyout = ({ consumer={consumer} /> ) : ( - + <> {i18n.translate( 'xpack.triggersActionsUI.sections.editConnectorForm.descriptionText', @@ -328,7 +315,7 @@ export const ConnectorEditFlyout = ({ defaultMessage="Learn more about preconfigured connectors." /> - + ) ) : ( {canSave && actionTypeModel && !connector.isPreconfigured ? ( - + <> - + ) : null} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/index.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/index.ts index 6ff8b5ae1d500..75d29fd4b0c09 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/index.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/index.ts @@ -15,3 +15,11 @@ export const ConnectorEditFlyout = suspendedComponentWithProps( lazy(() => import('./connector_edit_flyout')) ); export const ActionForm = suspendedComponentWithProps(lazy(() => import('./action_form'))); + +export const ConnectorAddModal = suspendedComponentWithProps( + lazy(() => import('./connector_add_modal')) +); + +export const AddConnectorInline = suspendedComponentWithProps( + lazy(() => import('./connector_add_inline')) +); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/test_connector_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/test_connector_form.tsx index 8afa2d2b57529..92a17a2e4cfae 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/test_connector_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/test_connector_form.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, Suspense } from 'react'; +import React, { Suspense } from 'react'; import { EuiFlexGroup, EuiFlexItem, @@ -102,9 +102,9 @@ export const TestConnectorForm = ({ defaultMessage: 'Run the test', }), children: ( - + <> {executeEnabled ? null : ( - + <>

- + )} - + ), }, { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx index 9102e73690cac..7b6453e705ec3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import { mountWithIntl, nextTick } from '@kbn/test/jest'; -import { ActionsConnectorsList } from './actions_connectors_list'; +import ActionsConnectorsList from './actions_connectors_list'; import { coreMock } from '../../../../../../../../src/core/public/mocks'; import { ReactWrapper } from 'enzyme'; import { act } from 'react-dom/test-utils'; @@ -154,7 +154,7 @@ describe('actions_connectors_list component with items', () => { const mockedActionParamsFields = React.lazy(async () => ({ default() { - return ; + return <>; }, })); @@ -260,7 +260,8 @@ describe('actions_connectors_list component with items', () => { await setup(); await wrapper.find('[data-test-subj="edit1"]').first().simulate('click'); - expect(wrapper.find('ConnectorEditFlyout')).toHaveLength(1); + const edit = await wrapper.find('ConnectorEditFlyout'); + expect(edit).toHaveLength(1); }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx index a322460cde444..c237bbda48658 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx @@ -25,10 +25,6 @@ import { i18n } from '@kbn/i18n'; import { omit } from 'lodash'; import { FormattedMessage } from '@kbn/i18n/react'; import { loadAllActions, loadActionTypes, deleteActions } from '../../../lib/action_connector_api'; -import ConnectorAddFlyout from '../../action_connector_form/connector_add_flyout'; -import ConnectorEditFlyout, { - EditConectorTabs, -} from '../../action_connector_form/connector_edit_flyout'; import { hasDeleteActionsCapability, hasSaveActionsCapability, @@ -37,13 +33,20 @@ import { import { DeleteModalConfirmation } from '../../../components/delete_modal_confirmation'; import { checkActionTypeEnabled } from '../../../lib/check_action_type_enabled'; import './actions_connectors_list.scss'; -import { ActionConnector, ActionConnectorTableItem, ActionTypeIndex } from '../../../../types'; +import { + ActionConnector, + ActionConnectorTableItem, + ActionTypeIndex, + EditConectorTabs, +} from '../../../../types'; import { EmptyConnectorsPrompt } from '../../../components/prompts/empty_connectors_prompt'; import { useKibana } from '../../../../common/lib/kibana'; import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../../../'; import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner'; +import ConnectorEditFlyout from '../../action_connector_form/connector_edit_flyout'; +import ConnectorAddFlyout from '../../action_connector_form/connector_add_flyout'; -export const ActionsConnectorsList: React.FunctionComponent = () => { +const ActionsConnectorsList: React.FunctionComponent = () => { const { http, notifications: { toasts }, @@ -440,6 +443,9 @@ export const ActionsConnectorsList: React.FunctionComponent = () => { ); }; +// eslint-disable-next-line import/no-default-export +export { ActionsConnectorsList as default }; + function getActionsCountByActionType(actions: ActionConnector[], actionTypeId: string) { return actions.filter((action) => action.actionTypeId === actionTypeId).length; } @@ -455,7 +461,7 @@ const DeleteOperation: React.FunctionComponent<{ = ({ {hasEditButton ? ( - + <> {' '} = ({ onSave={setAlert} /> )} - + ) : null} @@ -201,7 +201,7 @@ export const AlertDetails: React.FunctionComponent = ({ {uniqueActions && uniqueActions.length ? ( - + <>

= ({ ))} - + ) : null} @@ -336,7 +336,7 @@ export const AlertDetails: React.FunctionComponent = ({ readOnly={!canSaveAlert} /> ) : ( - + <> = ({ />

- + )} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx index 5ba4c466f6fad..29290af0d0285 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useState } from 'react'; +import React, { useState } from 'react'; import moment, { Duration } from 'moment'; import { i18n } from '@kbn/i18n'; import { EuiBasicTable, EuiHealth, EuiSpacer, EuiSwitch, EuiToolTip } from '@elastic/eui'; @@ -112,7 +112,7 @@ export const alertInstancesTableColumns = ( ), render: (alertInstance: AlertInstanceListItem) => { return ( - + <> onMuteAction(alertInstance)} /> - + ); }, sortable: false, @@ -167,7 +167,7 @@ export function AlertInstances({ }; return ( - + <> - + ); } export const AlertInstancesWithApi = withBulkAlertOperations(AlertInstances); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx index a2463d785a3eb..cb43c168aa999 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx @@ -12,11 +12,12 @@ import { act } from 'react-dom/test-utils'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFormLabel } from '@elastic/eui'; import { coreMock } from '../../../../../../../src/core/public/mocks'; -import AlertAdd, { AlertAddProps } from './alert_add'; +import AlertAdd from './alert_add'; import { createAlert } from '../../lib/alert_api'; import { actionTypeRegistryMock } from '../../action_type_registry.mock'; import { Alert, + AlertAddProps, AlertFlyoutCloseReason, ConnectorValidationResult, GenericValidationResult, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx index bcae77f896b71..a40f77998d6ee 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx @@ -11,12 +11,11 @@ import { EuiTitle, EuiFlyoutHeader, EuiFlyout, EuiFlyoutBody, EuiPortal } from ' import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; import { - ActionTypeRegistryContract, Alert, - AlertTypeRegistryContract, AlertTypeParams, AlertUpdates, AlertFlyoutCloseReason, + AlertAddProps, } from '../../../types'; import { AlertForm, getAlertErrors, isValidAlert } from './alert_form'; import { alertReducer, InitialAlert, InitialAlertReducer } from './alert_reducer'; @@ -31,20 +30,6 @@ import { useKibana } from '../../../common/lib/kibana'; import { hasAlertChanged, haveAlertParamsChanged } from './has_alert_changed'; import { getAlertWithInvalidatedFields } from '../../lib/value_validators'; -export interface AlertAddProps> { - consumer: string; - alertTypeRegistry: AlertTypeRegistryContract; - actionTypeRegistry: ActionTypeRegistryContract; - onClose: (reason: AlertFlyoutCloseReason) => void; - alertTypeId?: string; - canChangeTrigger?: boolean; - initialValues?: Partial; - /** @deprecated use `onSave` as a callback after an alert is saved*/ - reloadAlerts?: () => Promise; - onSave?: () => Promise; - metadata?: MetaData; -} - const AlertAdd = ({ consumer, alertTypeRegistry, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions_group.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions_group.tsx index 6c2f5aecfcb7c..dd0a7df38eb62 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions_group.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_conditions_group.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, PropsWithChildren } from 'react'; +import React, { PropsWithChildren } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFormRow, EuiButtonIcon, EuiTitle } from '@elastic/eui'; import { AlertConditionsProps, ActionGroupWithCondition } from './alert_conditions'; @@ -55,7 +55,7 @@ export const AlertConditionsGroup = ({ ...otherProps, }) ) : ( - + <> )} ); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx index 0736e28f193b8..49dd92b67ee41 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx @@ -98,7 +98,7 @@ describe('alert_edit', () => { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: false, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx index d704111858e4f..f6569f32088ee 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useReducer, useState } from 'react'; +import React, { useReducer, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, @@ -23,12 +23,7 @@ import { } from '@elastic/eui'; import { cloneDeep } from 'lodash'; import { i18n } from '@kbn/i18n'; -import { - ActionTypeRegistryContract, - Alert, - AlertFlyoutCloseReason, - AlertTypeRegistryContract, -} from '../../../types'; +import { Alert, AlertEditProps, AlertFlyoutCloseReason } from '../../../types'; import { AlertForm, getAlertErrors, isValidAlert } from './alert_form'; import { alertReducer, ConcreteAlertReducer } from './alert_reducer'; import { updateAlert } from '../../lib/alert_api'; @@ -39,17 +34,6 @@ import { ConfirmAlertClose } from './confirm_alert_close'; import { hasAlertChanged } from './has_alert_changed'; import { getAlertWithInvalidatedFields } from '../../lib/value_validators'; -export interface AlertEditProps> { - initialAlert: Alert; - alertTypeRegistry: AlertTypeRegistryContract; - actionTypeRegistry: ActionTypeRegistryContract; - onClose: (reason: AlertFlyoutCloseReason) => void; - /** @deprecated use `onSave` as a callback after an alert is saved*/ - reloadAlerts?: () => Promise; - onSave?: () => Promise; - metadata?: MetaData; -} - export const AlertEdit = ({ initialAlert, onClose, @@ -149,7 +133,7 @@ export const AlertEdit = ({ {hasActionsDisabled && ( - + <> - + )} { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: false, }; @@ -72,7 +72,7 @@ describe('alert_form', () => { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: true, }; @@ -84,7 +84,7 @@ describe('alert_form', () => { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: false, }; @@ -322,7 +322,7 @@ describe('alert_form', () => { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: true, }, { @@ -333,7 +333,7 @@ describe('alert_form', () => { validate: (): ValidationResult => { return { errors: {} }; }, - alertParamsExpression: () => , + alertParamsExpression: () => <>, requiresAppContext: false, }, ]); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx index 6bb485bc7fbb8..b4b6477fd5947 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx @@ -470,35 +470,34 @@ export const AlertForm = ({ ); return ( - - - {alertTypeListItemHtml} - - ) + + {alertTypeListItemHtml} + + ) + } + isDisabled={!item.checkEnabledResult.isEnabled} + onClick={() => { + setAlertProperty('alertTypeId', item.id); + setActions([]); + setAlertTypeModel(item.alertTypeItem); + setAlertProperty('params', {}); + if (alertTypesIndex && alertTypesIndex.has(item.id)) { + setDefaultActionGroupId(alertTypesIndex.get(item.id)!.defaultActionGroupId); } - isDisabled={!item.checkEnabledResult.isEnabled} - onClick={() => { - setAlertProperty('alertTypeId', item.id); - setActions([]); - setAlertTypeModel(item.alertTypeItem); - setAlertProperty('params', {}); - if (alertTypesIndex && alertTypesIndex.has(item.id)) { - setDefaultActionGroupId(alertTypesIndex.get(item.id)!.defaultActionGroupId); - } - }} - /> - + }} + /> ); })} @@ -507,7 +506,7 @@ export const AlertForm = ({ )); const alertTypeDetails = ( - + <> @@ -605,11 +604,11 @@ export const AlertForm = ({ selectedAlertType ? ( <> {errors.actionConnectors.length >= 1 ? ( - + <> - + ) : null} ) : null} - + ); const labelForAlertChecked = ( @@ -793,9 +792,9 @@ export const AlertForm = ({ {alertTypeModel ? ( - {alertTypeDetails} + <>{alertTypeDetails} ) : availableAlertTypes.length ? ( - + <> {errors.alertTypeId.length >= 1 && alert.alertTypeId !== undefined ? ( - + <> - + ) : null} {alertTypeNodes} - + ) : alertTypesIndex ? ( ) : ( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx index b774fd702fadc..15b228467cf2d 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Fragment, useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -39,7 +39,7 @@ const NOTIFY_WHEN_OPTIONS: Array> = [ ), 'data-test-subj': 'onActionGroupChange', dropdownDisplay: ( - + <> > = [ />

- + ), }, { @@ -67,7 +67,7 @@ const NOTIFY_WHEN_OPTIONS: Array> = [ ), 'data-test-subj': 'onActiveAlert', dropdownDisplay: ( - + <> > = [ />

- + ), }, { @@ -95,7 +95,7 @@ const NOTIFY_WHEN_OPTIONS: Array> = [ ), 'data-test-subj': 'onThrottleInterval', dropdownDisplay: ( - + <> > = [ />

- + ), }, ]; @@ -173,7 +173,7 @@ export const AlertNotifyWhen = ({ ); return ( - + <> @@ -184,7 +184,7 @@ export const AlertNotifyWhen = ({ onChange={onNotifyWhenValueChange} /> {showCustomThrottleOpts && ( - + <> @@ -227,11 +227,11 @@ export const AlertNotifyWhen = ({ - + )} - + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx index d43dd9f05344f..1fb688c4dd6bf 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { capitalize, sortBy } from 'lodash'; import { FormattedMessage } from '@kbn/i18n/react'; -import React, { useEffect, useState, Fragment } from 'react'; +import React, { useEffect, useState } from 'react'; import { EuiBasicTable, EuiBadge, @@ -479,7 +479,7 @@ export const AlertsList: React.FunctionComponent = () => { : false; const table = ( - + <> {selectedIds.length > 0 && authorizedToModifySelectedAlerts && ( @@ -713,7 +713,7 @@ export const AlertsList: React.FunctionComponent = () => { onCancel={() => setManageLicenseModalOpts(null)} /> )} - + ); const loadedItems = convertAlertsToTableItems( @@ -782,6 +782,9 @@ export const AlertsList: React.FunctionComponent = () => { ); }; +// eslint-disable-next-line import/no-default-export +export { AlertsList as default }; + const noPermissionPrompt = ( { > {children && React.Children.map(children, (child) => - React.isValidElement(child) ? {React.cloneElement(child, {})} : child + React.isValidElement(child) ? <>{React.cloneElement(child, {})} : child )} ); diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx index a6ec9d1b39665..1430c40340771 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { @@ -151,7 +151,7 @@ export const GroupByExpression = ({ {groupByTypes[groupBy].sizeRequired ? ( - + <> 0} error={errors.termSize}> - + ) : null} diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx index d650162816f2b..5c44b6f29178b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useEffect, useState, Fragment } from 'react'; +import React, { Fragment, useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiExpression, diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_add_alert_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_add_alert_flyout.tsx index 42444f4b54e86..2698f4ee2e428 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/get_add_alert_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/get_add_alert_flyout.tsx @@ -5,14 +5,10 @@ * 2.0. */ -import React, { lazy, Suspense } from 'react'; -import type { AlertAddProps } from '../application/sections/alert_form/alert_add'; +import React from 'react'; +import { AlertAdd } from '../application/sections/alert_form'; +import type { AlertAddProps } from '../types'; export const getAddAlertFlyoutLazy = (props: AlertAddProps) => { - const AlertAddFlyoutLazy = lazy(() => import('../application/sections/alert_form/alert_add')); - return ( - - - - ); + return ; }; diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_add_connector_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_add_connector_flyout.tsx index 2c211572f2850..09261714cf8cf 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/get_add_connector_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/get_add_connector_flyout.tsx @@ -5,16 +5,10 @@ * 2.0. */ -import React, { lazy, Suspense } from 'react'; -import type { ConnectorAddFlyoutProps } from '../application/sections/action_connector_form/connector_add_flyout'; +import React from 'react'; +import { ConnectorAddFlyout } from '../application/sections/action_connector_form'; +import type { ConnectorAddFlyoutProps } from '../types'; export const getAddConnectorFlyoutLazy = (props: ConnectorAddFlyoutProps) => { - const ConnectorAddFlyoutLazy = lazy( - () => import('../application/sections/action_connector_form/connector_add_flyout') - ); - return ( - - - - ); + return ; }; diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_edit_alert_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_edit_alert_flyout.tsx index 89b17f5bb1596..26cc1159e5afd 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/get_edit_alert_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/get_edit_alert_flyout.tsx @@ -5,14 +5,10 @@ * 2.0. */ -import React, { lazy, Suspense } from 'react'; -import type { AlertEditProps } from '../application/sections/alert_form/alert_edit'; +import React from 'react'; +import { AlertEdit } from '../application/sections/alert_form'; +import type { AlertEditProps } from '../types'; export const getEditAlertFlyoutLazy = (props: AlertEditProps) => { - const AlertEditFlyoutLazy = lazy(() => import('../application/sections/alert_form/alert_edit')); - return ( - - - - ); + return ; }; diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_edit_connector_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_edit_connector_flyout.tsx index 38002cfe14a15..90ecea56856f5 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/get_edit_connector_flyout.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/common/get_edit_connector_flyout.tsx @@ -5,16 +5,10 @@ * 2.0. */ -import React, { lazy, Suspense } from 'react'; -import type { ConnectorEditFlyoutProps } from '../application/sections/action_connector_form/connector_edit_flyout'; +import React from 'react'; +import { ConnectorEditFlyout } from '../application/sections/action_connector_form'; +import type { ConnectorEditFlyoutProps } from '../types'; export const getEditConnectorFlyoutLazy = (props: ConnectorEditFlyoutProps) => { - const ConnectorEditFlyoutLazy = lazy( - () => import('../application/sections/action_connector_form/connector_edit_flyout') - ); - return ( - - - - ); + return ; }; diff --git a/x-pack/plugins/triggers_actions_ui/public/index.ts b/x-pack/plugins/triggers_actions_ui/public/index.ts index b65086cd6f3e7..134627929e4a0 100644 --- a/x-pack/plugins/triggers_actions_ui/public/index.ts +++ b/x-pack/plugins/triggers_actions_ui/public/index.ts @@ -7,14 +7,6 @@ import { Plugin } from './plugin'; -export { AlertAdd } from './application/sections/alert_form'; -export { - AlertEdit, - AlertConditions, - AlertConditionsGroup, - ActionGroupWithCondition, -} from './application/sections'; - export type { AlertAction, Alert, @@ -37,7 +29,10 @@ export { ConnectorEditFlyout, } from './application/sections/action_connector_form'; -export { loadActionTypes } from './application/lib/action_connector_api'; +export type { ActionGroupWithCondition } from './application/sections'; + +export { AlertConditions, AlertConditionsGroup } from './application/sections'; + export * from './common'; export function plugin() { @@ -47,6 +42,8 @@ export function plugin() { export { Plugin }; export * from './plugin'; -export { TIME_UNITS } from './application/constants'; +export { loadActionTypes } from './application/lib/action_connector_api/connector_types'; + +export type { TIME_UNITS } from './application/constants'; export { getTimeUnitLabel } from './common/lib/get_time_unit_label'; export type { TriggersAndActionsUiServices } from '../public/application/app'; diff --git a/x-pack/plugins/triggers_actions_ui/public/mocks.ts b/x-pack/plugins/triggers_actions_ui/public/mocks.ts index 9666f8ab1b16b..dfc1cc88e15bc 100644 --- a/x-pack/plugins/triggers_actions_ui/public/mocks.ts +++ b/x-pack/plugins/triggers_actions_ui/public/mocks.ts @@ -5,10 +5,6 @@ * 2.0. */ -import type { ConnectorAddFlyoutProps } from './application/sections/action_connector_form/connector_add_flyout'; -import type { ConnectorEditFlyoutProps } from './application/sections/action_connector_form/connector_edit_flyout'; -import type { AlertAddProps } from './application/sections/alert_form/alert_add'; -import type { AlertEditProps } from './application/sections/alert_form/alert_edit'; import type { TriggersAndActionsUIPublicPluginStart } from './plugin'; import { getAddConnectorFlyoutLazy } from './common/get_add_connector_flyout'; @@ -17,7 +13,14 @@ import { getAddAlertFlyoutLazy } from './common/get_add_alert_flyout'; import { getEditAlertFlyoutLazy } from './common/get_edit_alert_flyout'; import { TypeRegistry } from './application/type_registry'; -import { ActionTypeModel, AlertTypeModel } from './types'; +import { + ActionTypeModel, + AlertAddProps, + AlertEditProps, + AlertTypeModel, + ConnectorAddFlyoutProps, + ConnectorEditFlyoutProps, +} from './types'; function createStartMock(): TriggersAndActionsUIPublicPluginStart { const actionTypeRegistry = new TypeRegistry(); diff --git a/x-pack/plugins/triggers_actions_ui/public/plugin.ts b/x-pack/plugins/triggers_actions_ui/public/plugin.ts index a027f25d15eb7..62daf2ad198f3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/plugin.ts +++ b/x-pack/plugins/triggers_actions_ui/public/plugin.ts @@ -32,11 +32,14 @@ import { getEditConnectorFlyoutLazy } from './common/get_edit_connector_flyout'; import { getAddAlertFlyoutLazy } from './common/get_add_alert_flyout'; import { getEditAlertFlyoutLazy } from './common/get_edit_alert_flyout'; -import type { ActionTypeModel, AlertTypeModel } from './types'; -import type { ConnectorAddFlyoutProps } from './application/sections/action_connector_form/connector_add_flyout'; -import type { ConnectorEditFlyoutProps } from './application/sections/action_connector_form/connector_edit_flyout'; -import type { AlertAddProps } from './application/sections/alert_form/alert_add'; -import type { AlertEditProps } from './application/sections/alert_form/alert_edit'; +import type { + ActionTypeModel, + AlertAddProps, + AlertEditProps, + AlertTypeModel, + ConnectorAddFlyoutProps, + ConnectorEditFlyoutProps, +} from './types'; export interface TriggersAndActionsUIPublicPluginSetup { actionTypeRegistry: TypeRegistry; diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts index 6db5634be2221..0f2b961b1f2da 100644 --- a/x-pack/plugins/triggers_actions_ui/public/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/types.ts @@ -10,6 +10,7 @@ import type { DocLinksStart } from 'kibana/public'; import { ComponentType } from 'react'; import { ChartsPluginSetup } from 'src/plugins/charts/public'; import { DataPublicPluginStart } from 'src/plugins/data/public'; +import { IconType } from '@elastic/eui'; import { ActionType, AlertHistoryEsIndexConnectorId, @@ -103,7 +104,7 @@ export interface Sorting { export interface ActionTypeModel { id: string; - iconClass: string; + iconClass: IconType; selectMessage: string; actionTypeTitle?: string; validateConnector: ( @@ -247,3 +248,50 @@ export interface AlertTypeModel void; + actionTypes?: ActionType[]; + onTestConnector?: (connector: ActionConnector) => void; + reloadConnectors?: () => Promise; + consumer?: string; + actionTypeRegistry: ActionTypeRegistryContract; +} +export enum EditConectorTabs { + Configuration = 'configuration', + Test = 'test', +} + +export interface ConnectorEditFlyoutProps { + initialConnector: ActionConnector; + onClose: () => void; + tab?: EditConectorTabs; + reloadConnectors?: () => Promise; + consumer?: string; + actionTypeRegistry: ActionTypeRegistryContract; +} + +export interface AlertEditProps> { + initialAlert: Alert; + alertTypeRegistry: AlertTypeRegistryContract; + actionTypeRegistry: ActionTypeRegistryContract; + onClose: (reason: AlertFlyoutCloseReason) => void; + /** @deprecated use `onSave` as a callback after an alert is saved*/ + reloadAlerts?: () => Promise; + onSave?: () => Promise; + metadata?: MetaData; +} + +export interface AlertAddProps> { + consumer: string; + alertTypeRegistry: AlertTypeRegistryContract; + actionTypeRegistry: ActionTypeRegistryContract; + onClose: (reason: AlertFlyoutCloseReason) => void; + alertTypeId?: string; + canChangeTrigger?: boolean; + initialValues?: Partial; + /** @deprecated use `onSave` as a callback after an alert is saved*/ + reloadAlerts?: () => Promise; + onSave?: () => Promise; + metadata?: MetaData; +}