Add a link to documentation in the alerts and actions management UI (elastic#81909)

* Add a link to documentation in the alerts and actions management UI

* Update label

* Remove usage of any on registries
# Conflicts:
#	x-pack/plugins/triggers_actions_ui/public/application/context/alerts_context.tsx

Author: mikecote

x-pack/plugins/triggers_actions_ui/public/application/app.tsx

@@ -18,8 +18,7 @@ import {
 } from 'kibana/public';
 import { Section, routeToAlertDetails } from './constants';
 import { AppContextProvider } from './app_context';
-import { ActionTypeModel, AlertTypeModel } from '../types';
-import { TypeRegistry } from './type_registry';
+import { ActionTypeRegistryContract, AlertTypeRegistryContract } from '../types';
 import { ChartsPluginStart } from '../../../../../src/plugins/charts/public';
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 import { PluginStartContract as AlertingStart } from '../../../alerts/public';
@@ -42,8 +41,8 @@ export interface AppDeps {
   uiSettings: IUiSettingsClient;
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
   capabilities: ApplicationStart['capabilities'];
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
-  alertTypeRegistry: TypeRegistry<AlertTypeModel>;
+  actionTypeRegistry: ActionTypeRegistryContract;
+  alertTypeRegistry: AlertTypeRegistryContract;
   history: ScopedHistory;
 }
 

x-pack/plugins/triggers_actions_ui/public/application/context/actions_connectors_context.tsx

@@ -6,12 +6,11 @@
 
 import React, { createContext, useContext } from 'react';
 import { HttpSetup, ApplicationStart, DocLinksStart, ToastsSetup } from 'kibana/public';
-import { ActionTypeModel, ActionConnector } from '../../types';
-import { TypeRegistry } from '../type_registry';
+import { ActionTypeRegistryContract, ActionConnector } from '../../types';
 
 export interface ActionsConnectorsContextValue {
   http: HttpSetup;
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
+  actionTypeRegistry: ActionTypeRegistryContract;
   toastNotifications: ToastsSetup;
   capabilities: ApplicationStart['capabilities'];
   reloadConnectors?: () => Promise<ActionConnector[] | void>;

x-pack/plugins/triggers_actions_ui/public/application/context/alerts_context.tsx

@@ -15,14 +15,13 @@ import {
 import { ChartsPluginSetup } from 'src/plugins/charts/public';
 import { FieldFormatsRegistry } from 'src/plugins/data/common/field_formats';
 import { DataPublicPluginStartUi, IndexPatternsContract } from 'src/plugins/data/public';
-import { TypeRegistry } from '../type_registry';
-import { AlertTypeModel, ActionTypeModel } from '../../types';
+import { AlertTypeRegistryContract, ActionTypeRegistryContract } from '../../types';
 
 export interface AlertsContextValue<MetaData = Record<string, any>> {
   reloadAlerts?: () => Promise<void>;
   http: HttpSetup;
-  alertTypeRegistry: TypeRegistry<AlertTypeModel>;
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
+  alertTypeRegistry: AlertTypeRegistryContract;
+  actionTypeRegistry: ActionTypeRegistryContract;
   toastNotifications: ToastsStart;
   uiSettings?: IUiSettingsClient;
   charts?: ChartsPluginSetup;

x-pack/plugins/triggers_actions_ui/public/application/home.test.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { RouteComponentProps, Router } from 'react-router-dom';
+import { createMemoryHistory, createLocation } from 'history';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+
+import TriggersActionsUIHome, { MatchParams } from './home';
+import { AppContextProvider } from './app_context';
+import { getMockedAppDependencies } from './test_utils';
+
+describe('home', () => {
+  it('renders the documentation link', async () => {
+    const deps = await getMockedAppDependencies();
+
+    const props: RouteComponentProps<MatchParams> = {
+      history: createMemoryHistory(),
+      location: createLocation('/'),
+      match: {
+        isExact: true,
+        path: `/alerts`,
+        url: '',
+        params: {
+          section: 'alerts',
+        },
+      },
+    };
+    const wrapper = mountWithIntl(
+      <Router history={deps.history}>
+        <AppContextProvider appDeps={deps}>
+          <TriggersActionsUIHome {...props} />
+        </AppContextProvider>
+      </Router>
+    );
+    const documentationLink = wrapper.find('[data-test-subj="documentationLink"]');
+    expect(documentationLink.exists()).toBeTruthy();
+    expect(documentationLink.first().prop('href')).toEqual(
+      'https://www.elastic.co/guide/en/kibana/mocked-test-branch/managing-alerts-and-actions.html'
+    );
+  });
+});

x-pack/plugins/triggers_actions_ui/public/application/home.tsx

@@ -10,13 +10,14 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiPageBody,
   EuiPageContent,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
   EuiSpacer,
   EuiTab,
   EuiTabs,
   EuiTitle,
   EuiText,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 
 import { Section, routeToConnectors, routeToAlerts } from './constants';
@@ -30,7 +31,7 @@ import { AlertsList } from './sections/alerts_list/components/alerts_list';
 import { HealthCheck } from './components/health_check';
 import { HealthContextProvider } from './context/health_context';
 
-interface MatchParams {
+export interface MatchParams {
   section: Section;
 }
 
@@ -80,27 +81,40 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
   return (
     <EuiPageBody>
       <EuiPageContent>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
-            <EuiTitle size="m">
+        <EuiTitle size="m">
+          <EuiFlexGroup>
+            <EuiFlexItem>
               <h1 data-test-subj="appTitle">
                 <FormattedMessage
                   id="xpack.triggersActionsUI.home.appTitle"
                   defaultMessage="Alerts and Actions"
                 />
               </h1>
-            </EuiTitle>
-            <EuiSpacer size="s" />
-            <EuiText>
-              <p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                href={`${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/managing-alerts-and-actions.html`}
+                target="_blank"
+                iconType="help"
+                data-test-subj="documentationLink"
+              >
                 <FormattedMessage
-                  id="xpack.triggersActionsUI.home.sectionDescription"
-                  defaultMessage="Detect conditions using alerts, and take actions using connectors."
+                  id="xpack.triggersActionsUI.home.alertsAndActionsDocsLinkText"
+                  defaultMessage="Documentation"
                 />
-              </p>
-            </EuiText>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.triggersActionsUI.home.sectionDescription"
+              defaultMessage="Detect conditions using alerts, and take actions using connectors."
+            />
+          </p>
+        </EuiText>
 
         <EuiTabs>
           {tabs.map((tab) => (

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

@@ -22,7 +22,7 @@ describe('action_connector_form', () => {
     ] = await mocks.getStartServices();
     deps = {
       http: mocks.http,
-      actionTypeRegistry: actionTypeRegistry as any,
+      actionTypeRegistry,
       docLinks: { ELASTIC_WEBSITE_URL: '', DOC_LINK_VERSION: '' },
       capabilities,
     };

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

@@ -24,10 +24,9 @@ import { ReducerAction } from './connector_reducer';
 import {
   ActionConnector,
   IErrorObject,
-  ActionTypeModel,
+  ActionTypeRegistryContract,
   UserConfiguredActionConnector,
 } from '../../../types';
-import { TypeRegistry } from '../../type_registry';
 import { hasSaveActionsCapability } from '../../lib/capabilities';
 
 export function validateBaseProperties(actionObject: ActionConnector) {
@@ -61,7 +60,7 @@ interface ActionConnectorProps<
   };
   errors: IErrorObject;
   http: HttpSetup;
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
+  actionTypeRegistry: ActionTypeRegistryContract;
   docLinks: DocLinksStart;
   capabilities: ApplicationStart['capabilities'];
   consumer?: string;

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

@@ -178,7 +178,7 @@ describe('action_form', () => {
           },
         },
         setHasActionsWithBrokenConnector: jest.fn(),
-        actionTypeRegistry: actionTypeRegistry as any,
+        actionTypeRegistry,
         docLinks: { ELASTIC_WEBSITE_URL: '', DOC_LINK_VERSION: '' },
       };
       actionTypeRegistry.list.mockReturnValue([

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

@@ -34,6 +34,7 @@ import { loadActionTypes, loadAllActions as loadConnectors } from '../../lib/act
 import {
   IErrorObject,
   ActionTypeModel,
+  ActionTypeRegistryContract,
   AlertAction,
   ActionTypeIndex,
   ActionConnector,
@@ -42,7 +43,6 @@ import {
 } from '../../../types';
 import { SectionLoading } from '../../components/section_loading';
 import { ConnectorAddModal } from './connector_add_modal';
-import { TypeRegistry } from '../../type_registry';
 import { actionTypeCompare } from '../../lib/action_type_compare';
 import { checkActionFormActionTypeEnabled } from '../../lib/check_action_type_enabled';
 import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants';
@@ -55,7 +55,7 @@ interface ActionAccordionFormProps {
   setAlertProperty: (actions: AlertAction[]) => void;
   setActionParamsProperty: (key: string, value: any, index: number) => void;
   http: HttpSetup;
-  actionTypeRegistry: TypeRegistry<ActionTypeModel>;
+  actionTypeRegistry: ActionTypeRegistryContract;
   toastNotifications: ToastsSetup;
   docLinks: DocLinksStart;
   actionTypes?: ActionType[];

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

@@ -33,7 +33,7 @@ describe('connector_add_flyout', () => {
           show: true,
         },
       },
-      actionTypeRegistry: actionTypeRegistry as any,
+      actionTypeRegistry,
       docLinks: { ELASTIC_WEBSITE_URL: '', DOC_LINK_VERSION: '' },
     };
   });