[Alerting] Fix validation support for nested IErrorObjects (#62833) (#…

…62994)

* [Alerting] Add validation support for nested IErrorObjects

* Typecheck fix

* Fix recursion crash when errors are strings

* Typecheck fix

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useCallback, useReducer, useState } from 'react';
+import { isObject } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiTitle,
@@ -83,7 +84,7 @@ export const AlertAdd = ({
     ...(alertType ? alertType.validate(alert.params).errors : []),
     ...validateBaseProperties(alert).errors,
   } as IErrorObject;
-  const hasErrors = !!Object.keys(errors).find(errorKey => errors[errorKey].length >= 1);
+  const hasErrors = parseErrors(errors);
 
   const actionsErrors: Array<{
     errors: IErrorObject;
@@ -213,3 +214,9 @@ export const AlertAdd = ({
     </EuiPortal>
   );
 };
+
+const parseErrors: (errors: IErrorObject) => boolean = errors =>
+  !!Object.values(errors).find(errorList => {
+    if (isObject(errorList)) return parseErrors(errorList as IErrorObject);
+    return errorList.length >= 1;
+  });

x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx

@@ -17,13 +17,14 @@ import {
 } from '@elastic/eui';
 import { builtInAggregationTypes } from '../constants';
 import { AggregationType } from '../types';
+import { IErrorObject } from '../../types';
 import { ClosablePopoverTitle } from './components';
 import './of.scss';
 
 interface OfExpressionProps {
   aggType: string;
   aggField?: string;
-  errors: { [key: string]: string[] };
+  errors: IErrorObject;
   onChangeSelectedAggField: (selectedAggType?: string) => void;
   fields: Record<string, any>;
   customAggTypesOptions?: {

x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx

@@ -18,11 +18,12 @@ import {
 } from '@elastic/eui';
 import { builtInComparators } from '../constants';
 import { Comparator } from '../types';
+import { IErrorObject } from '../../types';
 import { ClosablePopoverTitle } from './components';
 
 interface ThresholdExpressionProps {
   thresholdComparator: string;
-  errors: { [key: string]: string[] };
+  errors: IErrorObject;
   onChangeSelectedThresholdComparator: (selectedThresholdComparator?: string) => void;
   onChangeSelectedThreshold: (selectedThreshold?: number[]) => void;
   customComparators?: {

x-pack/plugins/triggers_actions_ui/public/types.ts

@@ -112,5 +112,5 @@ export interface AlertTypeModel {
 }
 
 export interface IErrorObject {
-  [key: string]: string[];
+  [key: string]: string | string[] | IErrorObject;
 }