Implement UI for Create Alert form (#55232)

* Updated Alert ui model, fixed form validation and small issues

* Fixed error messages and validation for action params forms

* Fixed typecheck error

* Moved alert add/edit common fields to alert form

* Fixed type checks

* Refactored alert add flyout by splitting it to the form and flyout components, added some unit tests

* Refactored connector add/edit flyouts and created add connector modal

* Refactored add/edit flyout tests

* Fixed test

* Removed orig files

* Removed orig file

* Added unit tests for add connector modal dialog

* Action Groups idea of implementation

* Removed action group tabs and set only first action group as default (temporary till design will be ready for support multiple groups)

* Added missing unit tests

* Changed design of the email params form

* Fixed actions params forms according to latest mockups

* Fixed options list for available actions connectors

* Fixed modal dialog update on action delete

* fixed build fail

* Added functionality for action types with Message field to Add variables

* Added alertReducer unit tests

* Added create alert functional test

* Added types for Params

* Some design fixes

* alerts empty prompt

* Fixed failing app on save alert and added possibility to hide Change trigger button

* Fixed type check issues

* Added connector config types

* fixed type check

* Fixed merge issues

* Fixed type checks

* Fixed functional tests and error expression message

* Fixed jest tests

* Review changes

Co-authored-by: [email protected] <[email protected]>

Author: YulNaumenko

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

@@ -48,7 +48,7 @@ export const App = (appDeps: AppDeps) => {
   );
 };
 
-export const AppWithoutRouter = ({ sectionsRegex }: any) => {
+export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) => {
   const { capabilities } = useAppDependencies();
   const canShowAlerts = hasShowAlertsCapability(capabilities);
   const DEFAULT_SECTION: Section = canShowAlerts ? 'alerts' : 'connectors';

x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.test.tsx

@@ -3,11 +3,12 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { TypeRegistry } from '../../type_registry';
 import { registerBuiltInActionTypes } from './index';
-import { ActionTypeModel, ActionConnector } from '../../../types';
+import { ActionTypeModel, ActionParamsProps } from '../../../types';
+import { EmailActionParams, EmailActionConnector } from './types';
 
 const ACTION_TYPE_ID = '.email';
 let actionTypeModel: ActionTypeModel;
@@ -40,43 +41,15 @@ describe('connector validation', () => {
       name: 'email',
       config: {
         from: '[email protected]',
-        port: '2323',
+        port: 2323,
         host: 'localhost',
         test: 'test',
       },
-    } as ActionConnector;
+    } as EmailActionConnector;
 
     expect(actionTypeModel.validateConnector(actionConnector)).toEqual({
       errors: {
         from: [],
-        service: [],
-        port: [],
-        host: [],
-        user: [],
-        password: [],
-      },
-    });
-
-    delete actionConnector.config.test;
-    actionConnector.config.host = 'elastic.co';
-    actionConnector.config.port = 8080;
-    expect(actionTypeModel.validateConnector(actionConnector)).toEqual({
-      errors: {
-        from: [],
-        service: [],
-        port: [],
-        host: [],
-        user: [],
-        password: [],
-      },
-    });
-    delete actionConnector.config.host;
-    delete actionConnector.config.port;
-    actionConnector.config.service = 'testService';
-    expect(actionTypeModel.validateConnector(actionConnector)).toEqual({
-      errors: {
-        from: [],
-        service: [],
         port: [],
         host: [],
         user: [],
@@ -97,12 +70,11 @@ describe('connector validation', () => {
       config: {
         from: '[email protected]',
       },
-    } as ActionConnector;
+    } as EmailActionConnector;
 
     expect(actionTypeModel.validateConnector(actionConnector)).toEqual({
       errors: {
         from: [],
-        service: ['Service is required.'],
         port: ['Port is required.'],
         host: ['Host is required.'],
         user: [],
@@ -168,14 +140,13 @@ describe('EmailActionConnectorFields renders', () => {
       config: {
         from: '[email protected]',
       },
-    } as ActionConnector;
+    } as EmailActionConnector;
     const wrapper = mountWithIntl(
       <ConnectorFields
         action={actionConnector}
-        errors={{ from: [], service: [], port: [], host: [], user: [], password: [] }}
+        errors={{ from: [], port: [], host: [], user: [], password: [] }}
         editActionConfig={() => {}}
         editActionSecrets={() => {}}
-        hasErrors={false}
       />
     );
     expect(wrapper.find('[data-test-subj="emailFromInput"]').length > 0).toBeTruthy();
@@ -198,19 +169,22 @@ describe('EmailParamsFields renders', () => {
     if (!actionTypeModel.actionParamsFields) {
       return;
     }
-    const ParamsFields = actionTypeModel.actionParamsFields;
+    const ParamsFields = actionTypeModel.actionParamsFields as FunctionComponent<
+      ActionParamsProps<EmailActionParams>
+    >;
     const actionParams = {
+      cc: [],
+      bcc: [],
       to: ['[email protected]'],
       subject: 'test',
       message: 'test message',
     };
     const wrapper = mountWithIntl(
       <ParamsFields
-        action={actionParams}
-        errors={{}}
+        actionParams={actionParams}
+        errors={{ to: [], cc: [], bcc: [], subject: [], message: [] }}
         editAction={() => {}}
         index={0}
-        hasErrors={false}
       />
     );
     expect(wrapper.find('[data-test-subj="toEmailAddressInput"]').length > 0).toBeTruthy();
@@ -220,8 +194,6 @@ describe('EmailParamsFields renders', () => {
         .first()
         .prop('selectedOptions')
     ).toStrictEqual([{ label: '[email protected]' }]);
-    expect(wrapper.find('[data-test-subj="ccEmailAddressInput"]').length > 0).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="bccEmailAddressInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="emailSubjectInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="emailMessageInput"]').length > 0).toBeTruthy();
   });