Add beta badge to alert and actions UI components (#58691)

* Added Beta badge to Alerts and Actions UI components * Fixed failing test * Fixed FT * Fixed labels
elastic · Feb 27, 2020 · a896515 · a896515
1 parent f62bda0
commit a896515
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 5 deletions.
diff --git 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<RouteComponentProps<
                   id="xpack.triggersActionsUI.home.appTitle"
                   defaultMessage="Alerts and Actions"
                 />
+                &emsp;
+                <EuiBetaBadge
+                  label="Beta"
+                  tooltipContent={i18n.translate(
+                    'xpack.triggersActionsUI.home.betaBadgeTooltipContent',
+                    {
+                      defaultMessage:
+                        'This module is not GA. Please help us by reporting any bugs.',
+                    }
+                  )}
+                />
               </h1>
             </EuiTitle>
           </EuiPageContentHeaderSection>

diff --git a/...ers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx b/...ers_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,
                       }}
                     />
+                    &emsp;
+                    <EuiBetaBadge
+                      label="Beta"
+                      tooltipContent={i18n.translate(
+                        'xpack.triggersActionsUI.sections.addConnectorForm.betaBadgeTooltipContent',
+                        {
+                          defaultMessage:
+                            'This module is not GA. Please help us by reporting any bugs.',
+                        }
+                      )}
+                    />
                   </h3>
                 </EuiTitle>
                 <EuiText size="s" color="subdued">
@@ -159,6 +171,17 @@ export const ConnectorAddFlyout = () => {
                     defaultMessage="Select a connector"
                     id="xpack.triggersActionsUI.sections.addConnectorForm.selectConnectorFlyoutTitle"
                   />
+                  &emsp;
+                  <EuiBetaBadge
+                    label="Beta"
+                    tooltipContent={i18n.translate(
+                      'xpack.triggersActionsUI.sections.addFlyout.betaBadgeTooltipContent',
+                      {
+                        defaultMessage:
+                          'This module is not GA. Please help us by reporting any bugs.',
+                      }
+                    )}
+                  />
                 </h3>
               </EuiTitle>
             )}

diff --git a/...gers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx b/...gers_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,
                       }}
                     />
+                    &emsp;
+                    <EuiBetaBadge
+                      label="Beta"
+                      tooltipContent={i18n.translate(
+                        'xpack.triggersActionsUI.sections.addModalConnectorForm.betaBadgeTooltipContent',
+                        {
+                          defaultMessage:
+                            'This module is not GA. Please help us by reporting any bugs.',
+                        }
+                      )}
+                    />
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>

diff --git a/...rs_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx b/...rs_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"
                 />
+                &emsp;
+                <EuiBetaBadge
+                  label="Beta"
+                  tooltipContent={i18n.translate(
+                    'xpack.triggersActionsUI.sections.editConnectorForm.betaBadgeTooltipContent',
+                    {
+                      defaultMessage:
+                        'This module is not GA. Please help us by reporting any bugs.',
+                    }
+                  )}
+                />
               </h3>
             </EuiTitle>
           </EuiFlexItem>

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
@@ -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"
               />
+              &emsp;
+              <EuiBetaBadge
+                label="Beta"
+                tooltipContent={i18n.translate(
+                  'xpack.triggersActionsUI.sections.alertAdd.betaBadgeTooltipContent',
+                  {
+                    defaultMessage: 'This module is not GA. Please help us by reporting any bugs.',
+                  }
+                )}
+              />
             </h3>
           </EuiTitle>
         </EuiFlyoutHeader>

diff --git a/...rs_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/...rs_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', () => {
         <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
       ).containsMatchingElement(
         <EuiTitle size="m">
-          <h1>{alert.name}</h1>
+          <h1>
+            {alert.name}
+            &emsp;
+            <EuiBetaBadge
+              label="Beta"
+              tooltipContent={i18n.translate(
+                'xpack.triggersActionsUI.sections.alertDetails.betaBadgeTooltipContent',
+                {
+                  defaultMessage: 'This module is not GA. Please help us by reporting any bugs.',
+                }
+              )}
+            />
+          </h1>
         </EuiTitle>
       )
     ).toBeTruthy();

diff --git a/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/...riggers_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<AlertDetailsProps> = ({
           <EuiPageContentHeader>
             <EuiPageContentHeaderSection>
               <EuiTitle size="m">
-                <h1 data-test-subj="alertDetailsTitle">{alert.name}</h1>
+                <h1 data-test-subj="alertDetailsTitle">
+                  {alert.name}
+                  &emsp;
+                  <EuiBetaBadge
+                    label="Beta"
+                    tooltipContent={i18n.translate(
+                      'xpack.triggersActionsUI.sections.alertDetails.betaBadgeTooltipContent',
+                      {
+                        defaultMessage:
+                          'This module is not GA. Please help us by reporting any bugs.',
+                      }
+                    )}
+                  />
+                </h1>
               </EuiTitle>
             </EuiPageContentHeaderSection>
             <EuiPageContentHeaderSection>

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
@@ -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', () => {