[ML] Converts Recognizer job page to React (#47429) (#47804)

* [ML] wip recognize job

* [ML] error handling

* [ML] layout enhancements

* [ML] errors handling

* [ML] fix badges alignment and error message

* [ML] components split

* [ML] load module from the component, reset support

* [ML] validators

* [ML] check view route and resolver

* [ML] validation

* [ML] remove angular code

* [ML] change layout, fix patterns

* [ML] job response fix

* [ML] directive test

* [ML] directive test

* [ML] remove lookbehind regexp

* [ML] fix IE11 layout issues

* [ML] remove form tag, refactor to formState

* [ML] aria labels, remove unused i18n

* [ML] align kibana objects and reset button

* [ML] column layout for jobs response

* [ML] align icons and buttons

* [ML] check existing kibana objects

* [ML] don't display kibana objects panel if empty

* [ML] result and reset button order

* [ML] add EuiHorizontalRule

* [ML] use time range and full index dat

* [ML] no check icon for existing objects

* [ML] toast for exception during a jobs setup

* [ML] disable panels growth, advanced settings with described form

* [ML] fix timeRange for results url

* [ML] fix i18n

* [ML] use EuiSwitch

* [ML] PR remarks

* [ML] job settings form component

* [ML] i18n

* [ML] onChange fix

* [ML] custom hook for partial state update

* [ML] jobGroups update

* [ML] PR remarks

* [ML] fix imports

x-pack/legacy/plugins/ml/common/types/modules.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 { Datafeed, Job } from '../../public/jobs/new_job_new/common/job_creator/configs';
+import { SavedObjectAttributes } from '../../../../../../target/types/core/server';
+
+export interface ModuleJob {
+  id: string;
+  config: Omit<Job, 'job_id'>;
+}
+
+export interface KibanaObjectConfig extends SavedObjectAttributes {
+  description: string;
+  title: string;
+  version: number;
+}
+
+export interface KibanaObject {
+  id: string;
+  title: string;
+  config: KibanaObjectConfig;
+}
+
+export interface KibanaObjects {
+  [objectType: string]: KibanaObject[] | undefined;
+}
+
+/**
+ * Interface for get_module endpoint response.
+ */
+export interface Module {
+  id: string;
+  title: string;
+  description: string;
+  type: string;
+  logoFile: string;
+  defaultIndexPattern: string;
+  query: any;
+  jobs: ModuleJob[];
+  datafeeds: Datafeed[];
+  kibana: KibanaObjects;
+}
+
+export interface KibanaObjectResponse {
+  exists?: boolean;
+  success?: boolean;
+  id: string;
+}
+
+export interface SetupError {
+  body: string;
+  msg: string;
+  path: string;
+  query: {};
+  response: string;
+  statusCode: number;
+}
+
+export interface DatafeedResponse {
+  id: string;
+  success: boolean;
+  started: boolean;
+  error?: SetupError;
+}
+
+export interface JobResponse {
+  id: string;
+  success: boolean;
+  error?: SetupError;
+}
+
+export interface DataRecognizerConfigResponse {
+  datafeeds: DatafeedResponse[];
+  jobs: JobResponse[];
+  kibana: {
+    search: KibanaObjectResponse;
+    visualization: KibanaObjectResponse;
+    dashboard: KibanaObjectResponse;
+  };
+}

x-pack/legacy/plugins/ml/common/util/validators.ts

@@ -21,3 +21,38 @@ export function maxLengthValidator(
         }
       : null;
 }
+
+/**
+ * Provides a validator function for checking against pattern.
+ * @param pattern
+ */
+export function patternValidator(
+  pattern: RegExp
+): (value: string) => { pattern: { matchPattern: string } } | null {
+  return value =>
+    pattern.test(value)
+      ? null
+      : {
+          pattern: {
+            matchPattern: pattern.toString(),
+          },
+        };
+}
+
+/**
+ * Composes multiple validators into a single function
+ * @param validators
+ */
+export function composeValidators(
+  ...validators: Array<(value: string) => { [key: string]: any } | null>
+): (value: string) => { [key: string]: any } | null {
+  return value => {
+    const validationResult = validators.reduce((acc, validator) => {
+      return {
+        ...acc,
+        ...(validator(value) || {}),
+      };
+    }, {});
+    return Object.keys(validationResult).length > 0 ? validationResult : null;
+  };
+}

x-pack/legacy/plugins/ml/public/jobs/new_job/simple/recognize/index.js → x-pack/legacy/plugins/ml/public/components/custom_hooks/index.ts

@@ -4,6 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
-import './create_job';
+export { usePartialState } from './use_partial_state';

x-pack/legacy/plugins/ml/public/components/custom_hooks/use_partial_state.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { useState } from 'react';
+
+/**
+ * Custom hook for partial state update.
+ */
+export function usePartialState<T>(initialValue: T): [T, (update: Partial<T>) => void] {
+  const [state, setState] = useState<T>(initialValue);
+  const setFormStateCallback = (update: Partial<T>) => {
+    setState({
+      ...state,
+      ...update,
+    });
+  };
+  return [state, setFormStateCallback];
+}

x-pack/legacy/plugins/ml/public/components/json_tooltip/tooltips.js

@@ -189,16 +189,6 @@ export const getTooltips = () => {
         defaultMessage: 'Advanced option. Select to retrieve unfiltered _source document, instead of specified fields.'
       })
     },
-    new_job_advanced_settings: {
-      text: i18n.translate('xpack.ml.tooltips.newJobAdvancedSettingsTooltip', {
-        defaultMessage: 'Advanced options'
-      })
-    },
-    new_job_dedicated_index: {
-      text: i18n.translate('xpack.ml.tooltips.newJobDedicatedIndexTooltip', {
-        defaultMessage: 'Select to store results in a separate index for this job.'
-      })
-    },
     new_job_enable_model_plot: {
       text: i18n.translate('xpack.ml.tooltips.newJobEnableModelPlotTooltip', {
         defaultMessage: 'Select to enable model plot. Stores model information along with results. ' +

x-pack/legacy/plugins/ml/public/jobs/index.js

@@ -11,6 +11,5 @@ import './new_job/advanced';
 import './new_job/simple/single_metric';
 import './new_job/simple/multi_metric';
 import './new_job/simple/population';
-import './new_job/simple/recognize';
 import 'plugins/ml/components/validate_job';
 import './new_job_new';

x-pack/legacy/plugins/ml/public/jobs/new_job/simple/_index.scss

@@ -10,5 +10,4 @@
 
 @import 'multi_metric/index'; // SASSTODO: Needs some rewriting
 @import 'population/index'; // SASSTODO: Needs some rewriting
-@import 'recognize/index'; // SASSTODO: Needs some rewriting
 @import 'single_metric/index'; // SASSTODO: Needs some rewriting