Added validation to display an error when creating index action in al…

…ert with invalid document. (#75929)
elastic · Aug 31, 2020 · a8b2810 · a8b2810
1 parent de9b7a4
commit a8b2810
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 10 deletions.
diff --git a/..._actions_ui/public/application/components/builtin_action_types/es_index/es_index.test.tsx b/..._actions_ui/public/application/components/builtin_action_types/es_index/es_index.test.tsx
@@ -72,17 +72,31 @@ describe('index connector validation with minimal config', () => {
 describe('action params validation', () => {
   test('action params validation succeeds when action params is valid', () => {
     const actionParams = {
-      documents: ['test'],
+      documents: [{ test: 1234 }],
     };
 
     expect(actionTypeModel.validateParams(actionParams)).toEqual({
-      errors: {},
+      errors: {
+        documents: [],
+      },
     });
 
     const emptyActionParams = {};
 
     expect(actionTypeModel.validateParams(emptyActionParams)).toEqual({
-      errors: {},
+      errors: {
+        documents: ['Document is required and should be a valid JSON object.'],
+      },
+    });
+
+    const invalidDocumentActionParams = {
+      documents: [{}],
+    };
+
+    expect(actionTypeModel.validateParams(invalidDocumentActionParams)).toEqual({
+      errors: {
+        documents: ['Document is required and should be a valid JSON object.'],
+      },
     });
   });
 });
diff --git a/...ggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index.tsx b/...ggers_actions_ui/public/application/components/builtin_action_types/es_index/es_index.tsx
@@ -44,8 +44,23 @@ export function getActionType(): ActionTypeModel<EsIndexActionConnector, IndexAc
     },
     actionConnectorFields: lazy(() => import('./es_index_connector')),
     actionParamsFields: lazy(() => import('./es_index_params')),
-    validateParams: (): ValidationResult => {
-      return { errors: {} };
+    validateParams: (actionParams: IndexActionParams): ValidationResult => {
+      const validationResult = { errors: {} };
+      const errors = {
+        documents: new Array<string>(),
+      };
+      validationResult.errors = errors;
+      if (!actionParams.documents?.length || Object.keys(actionParams.documents[0]).length === 0) {
+        errors.documents.push(
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.error.requiredDocumentJson',
+            {
+              defaultMessage: 'Document is required and should be a valid JSON object.',
+            }
+          )
+        );
+      }
+      return validationResult;
     },
   };
 }
diff --git a/...ctions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx b/...ctions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx
@@ -17,15 +17,18 @@ export const IndexParamsFields = ({
   editAction,
   messageVariables,
   docLinks,
+  errors,
 }: ActionParamsProps<IndexActionParams>) => {
   const { documents } = actionParams;
 
   const onDocumentsChange = (updatedDocuments: string) => {
     try {
       const documentsJSON = JSON.parse(updatedDocuments);
       editAction('documents', [documentsJSON], index);
-      // eslint-disable-next-line no-empty
-    } catch (e) {}
+    } catch (e) {
+      // set document as empty to turn on the validation for non empty valid JSON object
+      editAction('documents', [{}], index);
+    }
   };
 
   return (
@@ -34,7 +37,7 @@ export const IndexParamsFields = ({
         messageVariables={messageVariables}
         paramsProperty={'documents'}
         inputTargetValue={
-          documents && documents.length > 0 ? ((documents[0] as unknown) as string) : ''
+          documents && documents.length > 0 ? ((documents[0] as unknown) as string) : undefined
         }
         label={i18n.translate(
           'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.documentsFieldLabel',
@@ -48,6 +51,7 @@ export const IndexParamsFields = ({
             defaultMessage: 'Code editor',
           }
         )}
+        errors={errors.documents as string[]}
         onDocumentsChange={onDocumentsChange}
         helpText={
           <EuiLink
@@ -60,6 +64,14 @@ export const IndexParamsFields = ({
             />
           </EuiLink>
         }
+        onBlur={() => {
+          if (
+            !(documents && documents.length > 0 ? ((documents[0] as unknown) as string) : undefined)
+          ) {
+            // set document as empty to turn on the validation for non empty valid JSON object
+            onDocumentsChange('{}');
+          }
+        }}
       />
     </>
   );

diff --git a/..._actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.tsx b/..._actions_ui/public/application/components/builtin_action_types/webhook/webhook_params.tsx
@@ -21,7 +21,7 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
     <JsonEditorWithMessageVariables
       messageVariables={messageVariables}
       paramsProperty={'body'}
-      inputTargetValue={body || ''}
+      inputTargetValue={body}
       label={i18n.translate(
         'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyFieldLabel',
         {
@@ -38,6 +38,11 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
       onDocumentsChange={(json: string) => {
         editAction('body', json, index);
       }}
+      onBlur={() => {
+        if (!body) {
+          editAction('body', '', index);
+        }
+      }}
     />
   );
 };

diff --git a/.../triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx b/.../triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
@@ -14,12 +14,13 @@ import { ActionVariable } from '../../types';
 interface Props {
   messageVariables?: ActionVariable[];
   paramsProperty: string;
-  inputTargetValue: string;
+  inputTargetValue?: string;
   label: string;
   errors?: string[];
   areaLabel?: string;
   onDocumentsChange: (data: string) => void;
   helpText?: JSX.Element;
+  onBlur?: () => void;
 }
 
 export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
@@ -31,6 +32,7 @@ export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
   areaLabel,
   onDocumentsChange,
   helpText,
+  onBlur,
 }) => {
   const [cursorPosition, setCursorPosition] = useState<any>(null);
 
@@ -84,6 +86,7 @@ export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
           onDocumentsChange(convertToJson(xjson));
         }}
         onCursorChange={(_value: any) => onClickWithMessageVariable(_value)}
+        onBlur={onBlur}
       />
     </EuiFormRow>
   );