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]>
elastic · Feb 4, 2020 · b458b3b · b458b3b
1 parent b92e8e2
commit b458b3b
Show file tree

Hide file tree

Showing 47 changed files with 3,160 additions and 1,661 deletions.
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/app.tsx b/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';

diff --git a/...ers_actions_ui/np_ready/public/application/components/builtin_action_types/email.test.tsx b/...ers_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();
   });