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 ba30b838a8593..b478a9f0ced8b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
@@ -16,8 +16,10 @@ import {
EuiTab,
EuiTabs,
EuiTitle,
+ EuiBetaBadge,
} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
import { BASE_PATH, Section, routeToConnectors, routeToAlerts } from './constants';
import { getCurrentBreadcrumb } from './lib/breadcrumb';
import { getCurrentDocTitle } from './lib/doc_title';
@@ -91,6 +93,17 @@ export const TriggersActionsUIHome: React.FunctionComponent
+
+
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 0749ae1d30e9e..1eabf2441da4f 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
@@ -17,6 +17,7 @@ import {
EuiButtonEmpty,
EuiButton,
EuiFlyoutBody,
+ EuiBetaBadge,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useActionsConnectorsContext } from '../../context/actions_connectors_context';
@@ -146,6 +147,17 @@ export const ConnectorAddFlyout = () => {
actionTypeName: actionType.name,
}}
/>
+
+
@@ -159,6 +171,17 @@ export const ConnectorAddFlyout = () => {
defaultMessage="Select a connector"
id="xpack.triggersActionsUI.sections.addConnectorForm.selectConnectorFlyoutTitle"
/>
+
+
)}
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 55386ec6d61f9..6486292725660 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
@@ -5,7 +5,7 @@
*/
import React, { useCallback, useReducer, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiTitle, EuiFlexItem, EuiIcon, EuiFlexGroup } from '@elastic/eui';
+import { EuiTitle, EuiFlexItem, EuiIcon, EuiFlexGroup, EuiBetaBadge } from '@elastic/eui';
import {
EuiModal,
EuiButton,
@@ -129,6 +129,17 @@ export const ConnectorAddModal = ({
actionTypeName: actionType.name,
}}
/>
+
+
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 f7ad6f95d048f..6fe555fd74b39 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
@@ -16,6 +16,7 @@ import {
EuiFlyoutFooter,
EuiButtonEmpty,
EuiButton,
+ EuiBetaBadge,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useActionsConnectorsContext } from '../../context/actions_connectors_context';
@@ -96,6 +97,17 @@ export const ConnectorEditFlyout = ({ initialConnector }: ConnectorEditProps) =>
defaultMessage="Edit connector"
id="xpack.triggersActionsUI.sections.editConnectorForm.flyoutTitle"
/>
+
+
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.tsx
index a88f916346985..20ba9f5a49715 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.tsx
@@ -16,6 +16,7 @@ import {
EuiButton,
EuiFlyoutBody,
EuiPortal,
+ EuiBetaBadge,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useAlertsContext } from '../../context/alerts_context';
@@ -136,6 +137,16 @@ export const AlertAdd = ({ consumer, canChangeTrigger, alertTypeId }: AlertAddPr
defaultMessage="Create Alert"
id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
/>
+
+
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
index d2cf2decc4a16..2625768dc7242 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
@@ -8,9 +8,17 @@ import uuid from 'uuid';
import { shallow } from 'enzyme';
import { AlertDetails } from './alert_details';
import { Alert, ActionType } from '../../../../types';
-import { EuiTitle, EuiBadge, EuiFlexItem, EuiButtonEmpty, EuiSwitch } from '@elastic/eui';
+import {
+ EuiTitle,
+ EuiBadge,
+ EuiFlexItem,
+ EuiButtonEmpty,
+ EuiSwitch,
+ EuiBetaBadge,
+} from '@elastic/eui';
import { times, random } from 'lodash';
import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
jest.mock('../../../app_context', () => ({
useAppDependencies: jest.fn(() => ({
@@ -54,7 +62,19 @@ describe('alert_details', () => {
).containsMatchingElement(
- {alert.name}
+
+ {alert.name}
+
+
+
)
).toBeTruthy();
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
index 9c3b69962879f..1952e35c22924 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -21,8 +21,10 @@ import {
EuiSwitch,
EuiCallOut,
EuiSpacer,
+ EuiBetaBadge,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
import { useAppDependencies } from '../../../app_context';
import { hasSaveAlertsCapability } from '../../../lib/capabilities';
import { Alert, AlertType, ActionType } from '../../../../types';
@@ -66,7 +68,20 @@ export const AlertDetails: React.FunctionComponent = ({
- {alert.name}
+
+ {alert.name}
+
+
+
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts
index 307f39382a236..f049406b639c7 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/home_page.ts
@@ -23,7 +23,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
await log.debug('Checking for section heading to say Triggers and Actions.');
const headingText = await pageObjects.triggersActionsUI.getSectionHeadingText();
- expect(headingText).to.be('Alerts and Actions');
+ expect(headingText).to.be('Alerts and ActionsâBETA');
});
describe('Connectors tab', () => {