Merge branch 'master' into chore/upgrade-markdown-it

package.json

@@ -85,7 +85,8 @@
     "**/typescript": "3.7.2",
     "**/graphql-toolkit/lodash": "^4.17.13",
     "**/isomorphic-git/**/base64-js": "^1.2.1",
-    "**/image-diff/gm/debug": "^2.6.9"
+    "**/image-diff/gm/debug": "^2.6.9",
+    "**/deepmerge": "^4.2.2"
   },
   "workspaces": {
     "packages": [
@@ -155,6 +156,7 @@
     "custom-event-polyfill": "^0.3.0",
     "d3": "3.5.17",
     "d3-cloud": "1.2.5",
+    "deepmerge": "^4.2.2",
     "del": "^5.1.0",
     "elasticsearch": "^16.5.0",
     "elasticsearch-browser": "^16.5.0",

src/dev/precommit_hook/casing_check_config.js

@@ -167,7 +167,6 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'x-pack/legacy/plugins/index_management/public/lib/editSettings.js',
   'x-pack/legacy/plugins/license_management/public/store/reducers/licenseManagement.js',
   'x-pack/legacy/plugins/monitoring/public/components/sparkline/__mocks__/plugins/xpack_main/jquery_flot.js',
-  'x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/email-influencers.html',
   'x-pack/legacy/plugins/monitoring/public/icons/alert-blue.svg',
   'x-pack/legacy/plugins/monitoring/public/icons/health-gray.svg',
   'x-pack/legacy/plugins/monitoring/public/icons/health-green.svg',

src/legacy/ui/public/management/components/sidebar_nav.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EuiIcon, EuiSideNav, IconType } from '@elastic/eui';
+import { EuiIcon, EuiSideNav, IconType, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
@@ -72,17 +72,26 @@ export class SidebarNav extends React.Component<SidebarNavProps, SidebarNavState
   }
 
   public render() {
+    const HEADER_ID = 'management-nav-header';
+
     return (
-      <EuiSideNav
-        aria-label={i18n.translate('common.ui.management.nav.label', {
-          defaultMessage: 'Management',
-        })}
-        mobileTitle={this.renderMobileTitle()}
-        isOpenOnMobile={this.state.isSideNavOpenOnMobile}
-        toggleOpenOnMobile={this.toggleOpenOnMobile}
-        items={sideNavItems(this.props.sections, this.props.selectedId)}
-        className="mgtSideBarNav"
-      />
+      <>
+        <EuiScreenReaderOnly>
+          <h2 id={HEADER_ID}>
+            {i18n.translate('common.ui.management.nav.label', {
+              defaultMessage: 'Management',
+            })}
+          </h2>
+        </EuiScreenReaderOnly>
+        <EuiSideNav
+          aria-labelledby={HEADER_ID}
+          mobileTitle={this.renderMobileTitle()}
+          isOpenOnMobile={this.state.isSideNavOpenOnMobile}
+          toggleOpenOnMobile={this.toggleOpenOnMobile}
+          items={sideNavItems(this.props.sections, this.props.selectedId)}
+          className="mgtSideBarNav"
+        />
+      </>
     );
   }
 

src/plugins/es_ui_shared/static/forms/components/field.tsx

@@ -29,20 +29,26 @@ interface Props {
 
 import {
   TextField,
+  TextAreaField,
   NumericField,
   CheckBoxField,
   ComboBoxField,
   MultiSelectField,
+  RadioGroupField,
+  RangeField,
   SelectField,
   ToggleField,
 } from './fields';
 
 const mapTypeToFieldComponent = {
   [FIELD_TYPES.TEXT]: TextField,
+  [FIELD_TYPES.TEXTAREA]: TextAreaField,
   [FIELD_TYPES.NUMBER]: NumericField,
   [FIELD_TYPES.CHECKBOX]: CheckBoxField,
   [FIELD_TYPES.COMBO_BOX]: ComboBoxField,
   [FIELD_TYPES.MULTI_SELECT]: MultiSelectField,
+  [FIELD_TYPES.RADIO_GROUP]: RadioGroupField,
+  [FIELD_TYPES.RANGE]: RangeField,
   [FIELD_TYPES.SELECT]: SelectField,
   [FIELD_TYPES.TOGGLE]: ToggleField,
 };

src/plugins/es_ui_shared/static/forms/components/fields/checkbox_field.tsx

@@ -21,8 +21,7 @@ import React from 'react';
 import { EuiFormRow, EuiCheckbox } from '@elastic/eui';
 import uuid from 'uuid';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx

@@ -82,6 +82,7 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) =>
   return (
     <EuiFormRow
       label={field.label}
+      labelAppend={field.labelAppend}
       helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}

src/plugins/es_ui_shared/static/forms/components/fields/index.ts

@@ -22,6 +22,8 @@ export * from './numeric_field';
 export * from './checkbox_field';
 export * from './combobox_field';
 export * from './multi_select_field';
+export * from './radio_group_field';
+export * from './range_field';
 export * from './select_field';
 export * from './toggle_field';
 export * from './text_area_field';

src/plugins/es_ui_shared/static/forms/components/fields/multi_select_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSelectable, EuiPanel } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/numeric_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/radio_group_field.tsx

@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiRadioGroup } from '@elastic/eui';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps?: Record<string, any>;
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const RadioGroupField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiRadioGroup
+        idSelected={field.value as string}
+        options={[]}
+        onChange={field.setValue}
+        data-test-subj="input"
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};

src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx

@@ -0,0 +1,68 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useCallback } from 'react';
+import { EuiFormRow, EuiRange } from '@elastic/eui';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps?: Record<string, any>;
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const RangeField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => {
+      const event = ({ ...e, value: `${e.currentTarget.value}` } as unknown) as React.ChangeEvent<{
+        value: string;
+      }>;
+      field.onChange(event);
+    },
+    [field.onChange]
+  );
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiRange
+        value={field.value as number}
+        onChange={onChange}
+        max={10}
+        min={0}
+        showRange
+        showInput
+        fullWidth
+        data-test-subj="range"
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};

src/plugins/es_ui_shared/static/forms/components/fields/select_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;
@@ -49,10 +48,11 @@ export const SelectField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
         onChange={e => {
           field.setValue(e.target.value);
         }}
+        options={[]}
         hasNoInitialSelection={true}
         isInvalid={isInvalid}
         data-test-subj="select"
-        {...(euiFieldProps as { options: any; [key: string]: any })}
+        {...euiFieldProps}
       />
     </EuiFormRow>
   );

src/plugins/es_ui_shared/static/forms/components/fields/text_area_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiTextArea } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/text_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx

@@ -20,8 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
 
-import { FieldHook } from '../../hook_form_lib';
-import { getFieldValidityAndErrorMessage } from '../helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
 interface Props {
   field: FieldHook;

src/plugins/es_ui_shared/static/forms/hook_form_lib/constants.ts

@@ -20,10 +20,13 @@
 // Field types
 export const FIELD_TYPES = {
   TEXT: 'text',
+  TEXTAREA: 'textarea',
   NUMBER: 'number',
   TOGGLE: 'toggle',
   CHECKBOX: 'checkbox',
   COMBO_BOX: 'comboBox',
+  RADIO_GROUP: 'radioGroup',
+  RANGE: 'range',
   SELECT: 'select',
   MULTI_SELECT: 'multiSelect',
 };

src/plugins/es_ui_shared/static/forms/components/helpers.ts → src/plugins/es_ui_shared/static/forms/hook_form_lib/helpers.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { FieldHook } from '../hook_form_lib';
+import { FieldHook } from './types';
 
 export const getFieldValidityAndErrorMessage = (
   field: FieldHook

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -27,6 +27,7 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     type = FIELD_TYPES.TEXT,
     defaultValue = '',
     label = '',
+    labelAppend = '',
     helpText = '',
     validations = [],
     formatters = [],
@@ -382,6 +383,7 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     path,
     type,
     label,
+    labelAppend,
     helpText,
     value,
     errors,

src/plugins/es_ui_shared/static/forms/hook_form_lib/index.ts

@@ -20,6 +20,7 @@
 // Only export the useForm hook. The "useField" hook is for internal use
 // as the consumer of the library must use the <UseField /> component
 export { useForm } from './hooks';
+export { getFieldValidityAndErrorMessage } from './helpers';
 
 export * from './form_context';
 export * from './components';

src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts

@@ -71,6 +71,7 @@ export interface FormOptions {
 export interface FieldHook {
   readonly path: string;
   readonly label?: string;
+  readonly labelAppend?: string | ReactNode;
   readonly helpText?: string | ReactNode;
   readonly type: string;
   readonly value: unknown;
@@ -98,6 +99,7 @@ export interface FieldHook {
 export interface FieldConfig<T extends object = any> {
   readonly path?: string;
   readonly label?: string;
+  readonly labelAppend?: string | ReactNode;
   readonly helpText?: string | ReactNode;
   readonly type?: HTMLInputElement['type'];
   readonly defaultValue?: unknown;

x-pack/README.md

@@ -23,7 +23,7 @@ By default, this will also set the password for native realm accounts to the pas
 
 Examples:
   - Run the jest test case whose description matches 'filtering should skip values of null':
-    `cd x-pack && yarn test:jest -t 'filtering should skip values of null' plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.test.js`
+    `cd x-pack && yarn test:jest -t 'filtering should skip values of null' plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js`
   - Run the x-pack api integration test case whose description matches the given string:
     `node scripts/functional_tests_server --config x-pack/test/api_integration/config.js`
     `node scripts/functional_test_runner --config x-pack/test/api_integration/config.js --grep='apis Monitoring Beats list with restarted beat instance should load multiple clusters'`