Merge branch '7.x' into backport/7.x/pr-59443

docs/settings/reporting-settings.asciidoc

@@ -95,6 +95,8 @@ index for any pending Reporting jobs. Defaults to `3000` (3 seconds).
 [[xpack-reporting-q-timeout]]`xpack.reporting.queue.timeout`::
 How long each worker has to produce a report. If your machine is slow or under
 heavy load, you might need to increase this timeout. Specified in milliseconds.
+If a Reporting job execution time goes over this time limit, the job will be
+marked as a failure and there will not be a download available.
 Defaults to `120000` (two minutes).
 
 [float]
@@ -104,6 +106,26 @@ Defaults to `120000` (two minutes).
 Reporting works by capturing screenshots from Kibana. The following settings
 control the capturing process.
 
+`xpack.reporting.capture.timeouts.openUrl`::
+How long to allow the Reporting browser to wait for the initial data of the
+Kibana page to load. Defaults to `30000` (30 seconds).
+
+`xpack.reporting.capture.timeouts.waitForElements`::
+How long to allow the Reporting browser to wait for the visualization panels to
+load on the Kibana page. Defaults to `30000` (30 seconds).
+
+`xpack.reporting.capture.timeouts.renderComplete`::
+How long to allow the Reporting brwoser to wait for each visualization to
+signal that it is done renderings. Defaults to `30000` (30 seconds).
+
+[NOTE]
+============
+If any timeouts from `xpack.reporting.capture.timeouts.*` settings occur when
+running a report job, Reporting will log the error and try to continue
+capturing the page with a screenshot. As a result, a download will be
+available, but there will likely be errors in the visualizations in the report.
+============
+
 `xpack.reporting.capture.maxAttempts`::
 If capturing a report fails for any reason, Kibana will re-attempt othe reporting
 job, as many times as this setting. Defaults to `3`.

package.json

@@ -125,7 +125,7 @@
     "@elastic/charts": "^17.1.1",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.4.0",

packages/kbn-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "abortcontroller-polyfill": "^1.4.0",
-    "@elastic/eui": "19.0.0",
+    "@elastic/eui": "20.0.2",
     "@kbn/babel-preset": "1.0.0",
     "@elastic/charts": "^17.1.1",
     "@kbn/dev-utils": "1.0.0",

src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.tsx

@@ -22,13 +22,13 @@ import React, { Component } from 'react';
 import { InjectedIntlProps } from 'react-intl';
 
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { IIndexPattern, IFieldType } from '../../../../../../plugins/data/public';
 
 interface FieldSelectUiState {
   isLoading: boolean;
-  fields: Array<EuiComboBoxOptionProps<string>>;
+  fields: Array<EuiComboBoxOptionOption<string>>;
   indexPatternId: string;
 }
 
@@ -105,7 +105,7 @@ class FieldSelectUi extends Component<FieldSelectUiProps, FieldSelectUiState> {
     }
 
     const fieldsByTypeMap = new Map<string, string[]>();
-    const fields: Array<EuiComboBoxOptionProps<string>> = [];
+    const fields: Array<EuiComboBoxOptionOption<string>> = [];
     indexPattern.fields
       .filter(this.props.filterField ?? (() => true))
       .forEach((field: IFieldType) => {
@@ -135,7 +135,7 @@ class FieldSelectUi extends Component<FieldSelectUiProps, FieldSelectUiState> {
     });
   }, 300);
 
-  onChange = (selectedOptions: Array<EuiComboBoxOptionProps<any>>) => {
+  onChange = (selectedOptions: Array<EuiComboBoxOptionOption<any>>) => {
     this.props.onChange(_.get(selectedOptions, '0.value'));
   };
 

src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx

@@ -76,7 +76,7 @@ class ListControlUi extends PureComponent<ListControlUiProps, ListControlUiState
     this.isMounted = false;
   };
 
-  setTextInputRef = (ref: HTMLElement) => {
+  setTextInputRef = (ref: HTMLInputElement | null) => {
     this.textInput = ref;
   };
 

src/legacy/core_plugins/input_control_vis/public/input_control_vis_type.ts

@@ -34,7 +34,7 @@ export function createInputControlVisTypeDefinition(deps: InputControlVisDepende
     title: i18n.translate('inputControl.register.controlsTitle', {
       defaultMessage: 'Controls',
     }),
-    icon: 'visControls',
+    icon: 'controlsHorizontal',
     description: i18n.translate('inputControl.register.controlsDescription', {
       defaultMessage: 'Create interactive controls for easy dashboard manipulation.',
     }),

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html

@@ -23,7 +23,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
 
   <main class="container-fluid">
     <div class="row">
-      <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar">
+      <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar" data-test-subj="discover-sidebar">
         <div class="dscFieldChooser">
           <disc-field-chooser
             columns="state.columns"

src/legacy/core_plugins/vis_default_editor/public/components/agg_select.tsx

@@ -19,7 +19,7 @@
 import { get, has } from 'lodash';
 import React, { useEffect, useCallback, useState } from 'react';
 
-import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -104,7 +104,7 @@ function DefaultEditorAggSelect({
   const isValid = !!value && !errors.length && !isDirty;
 
   const onChange = useCallback(
-    (options: EuiComboBoxOptionProps[]) => {
+    (options: EuiComboBoxOptionOption[]) => {
       const selectedOption = get(options, '0.target');
       if (selectedOption) {
         setValue(selectedOption as IAggType);

src/legacy/core_plugins/vis_default_editor/public/components/controls/field.test.tsx

@@ -29,7 +29,7 @@ import { FieldParamEditor, FieldParamEditorProps } from './field';
 import { IAggConfig } from '../../legacy_imports';
 
 function callComboBoxOnChange(comp: ReactWrapper, value: any = []) {
-  const comboBoxProps: EuiComboBoxProps<string> = comp.find(EuiComboBox).props();
+  const comboBoxProps = comp.find(EuiComboBox).props() as EuiComboBoxProps<any>;
   if (comboBoxProps.onChange) {
     comboBoxProps.onChange(value);
   }

src/legacy/core_plugins/vis_default_editor/public/components/controls/field.tsx

@@ -20,7 +20,7 @@
 import { get } from 'lodash';
 import React, { useEffect, useState, useCallback } from 'react';
 
-import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { IndexPatternField } from 'src/plugins/data/public';
@@ -55,7 +55,7 @@ function FieldParamEditor({
     ? [{ label: value.displayName || value.name, target: value }]
     : [];
 
-  const onChange = (options: EuiComboBoxOptionProps[]) => {
+  const onChange = (options: EuiComboBoxOptionOption[]) => {
     const selectedOption: IndexPatternField = get(options, '0.target');
     if (!(aggParam.required && !selectedOption)) {
       setValue(selectedOption);

src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx

@@ -19,14 +19,14 @@
 
 import { get, find } from 'lodash';
 import React, { useEffect } from 'react';
-import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { isValidInterval, AggParamOption } from '../../legacy_imports';
 import { AggParamEditorProps } from '../agg_param_props';
 
-interface ComboBoxOption extends EuiComboBoxOptionProps {
+interface ComboBoxOption extends EuiComboBoxOptionOption {
   key: string;
 }
 
@@ -105,7 +105,7 @@ function TimeIntervalParamEditor({
     }
   };
 
-  const onChange = (opts: EuiComboBoxOptionProps[]) => {
+  const onChange = (opts: EuiComboBoxOptionOption[]) => {
     const selectedOpt: ComboBoxOption = get(opts, '0');
     setValue(selectedOpt ? selectedOpt.key : '');
 

src/legacy/core_plugins/vis_type_timelion/public/components/timelion_interval.tsx

@@ -18,7 +18,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { isValidEsInterval } from '../../../../core_plugins/data/common';
@@ -90,7 +90,7 @@ function TimelionInterval({ value, setValue, setValidity }: TimelionIntervalProp
   );
 
   const onChange = useCallback(
-    (opts: Array<EuiComboBoxOptionProps<string>>) => {
+    (opts: Array<EuiComboBoxOptionOption<string>>) => {
       setValue((opts[0] && opts[0].value) || '');
     },
     [setValue]

src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts

@@ -44,7 +44,7 @@ export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibP
 export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'heatmap',
   title: i18n.translate('visTypeVislib.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
-  icon: 'visHeatmap',
+  icon: 'heatmap',
   description: i18n.translate('visTypeVislib.heatmap.heatmapDescription', {
     defaultMessage: 'Shade cells within a matrix',
   }),

src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx

@@ -363,7 +363,7 @@ describe('Field', () => {
         (component.instance() as Field).getImageAsBase64 = ({}: Blob) => Promise.resolve('');
 
         it('should be able to change value and cancel', async () => {
-          (component.instance() as Field).onImageChange([userValue]);
+          (component.instance() as Field).onImageChange(([userValue] as unknown) as FileList);
           expect(handleChange).toBeCalled();
           await wrapper.setProps({
             unsavedChanges: {
@@ -387,7 +387,9 @@ describe('Field', () => {
           const updated = wrapper.update();
           findTestSubject(updated, `advancedSetting-changeImage-${setting.name}`).simulate('click');
           const newUserValue = `${userValue}=`;
-          await (component.instance() as Field).onImageChange([newUserValue]);
+          await (component.instance() as Field).onImageChange(([
+            newUserValue,
+          ] as unknown) as FileList);
           expect(handleChange).toBeCalled();
         });
 

src/plugins/advanced_settings/public/management_app/components/field/field.tsx

@@ -90,7 +90,7 @@ export const getEditableValue = (
 };
 
 export class Field extends PureComponent<FieldProps> {
-  private changeImageForm: EuiFilePicker | undefined = React.createRef();
+  private changeImageForm = React.createRef<EuiFilePicker>();
 
   getDisplayedDefaultValue(
     type: UiSettingsType,
@@ -138,7 +138,7 @@ export class Field extends PureComponent<FieldProps> {
     }
   }
 
-  onCodeEditorChange = (value: UiSettingsType) => {
+  onCodeEditorChange = (value: string) => {
     const { defVal, type } = this.props.setting;
 
     let newUnsavedValue;
@@ -212,7 +212,9 @@ export class Field extends PureComponent<FieldProps> {
     });
   };
 
-  onImageChange = async (files: any[]) => {
+  onImageChange = async (files: FileList | null) => {
+    if (files == null) return;
+
     if (!files.length) {
       this.setState({
         unsavedValue: null,
@@ -278,9 +280,9 @@ export class Field extends PureComponent<FieldProps> {
   };
 
   cancelChangeImage = () => {
-    if (this.changeImageForm.current) {
-      this.changeImageForm.current.fileInput.value = null;
-      this.changeImageForm.current.handleChange({});
+    if (this.changeImageForm.current?.fileInput) {
+      this.changeImageForm.current.fileInput.value = '';
+      this.changeImageForm.current.handleChange();
     }
     if (this.props.clearChange) {
       this.props.clearChange(this.props.setting.name);
@@ -352,7 +354,6 @@ export class Field extends PureComponent<FieldProps> {
                 $blockScrolling: Infinity,
               }}
               showGutter={false}
-              fullWidth
             />
           </div>
         );