+ <>
@@ -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 b77593c9905509..20aec6974d395b 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 f9855cc9d71308..6b115abc590ccc 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 e4e67002298ee7..1c2a56f4cccaad 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 174407e7edec50..ad727be58280f4 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 55ebbbc6f3edd1..e9f79633ef5207 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 48c6c1b42d7af7..2690aeaffad324 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 && (
-
+ <>