[TSVB] Type public code. Step 2 - panel configs (#94403) (#95160)

* Remove request facade and update search strategies

* Use typescript

* Type files

* Update structure

* Update tests

* Type annotations

* Fix type for infra

* Type editor_controller

* Type vis_editor

* Type vis_picker

* Fix types

* Type panel_config

* Fix vis data type

* Enhance types

* Remove generics

* Use constant

* Update docs

* Use empty object as default data

* Convert yes_no component to typescript

* Type color rules

* Type panel configs

* Type helpers

* Type color rules

* Type collection actions

* Get rid of create_text_handler

* Fix collection actions types

* Revert get_request_params changes, do some code refactoring, type create_number_handler and get rid of detect_ie

Co-authored-by: Daniil Suleiman <daniil_suleiman@epam.com>
Co-authored-by: Diana Derevyankina <dziyana_dzeraviankina@epam.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Daniil <sul-dan@mail.ru>
Co-authored-by: Daniil Suleiman <daniil_suleiman@epam.com>
Co-authored-by: Diana Derevyankina <dziyana_dzeraviankina@epam.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_type_timeseries/common/vis_schema.ts

@@ -10,6 +10,7 @@ import { schema } from '@kbn/config-schema';
 import { TypeOptions } from '@kbn/config-schema/target/types/types';
 
 const stringOptionalNullable = schema.maybe(schema.nullable(schema.string()));
+const stringOptional = schema.maybe(schema.string());
 
 const stringRequired = schema.string();
 
@@ -205,23 +206,15 @@ export const panel = schema.object({
   background_color_rules: schema.maybe(schema.arrayOf(backgroundColorRulesItems)),
   default_index_pattern: stringOptionalNullable,
   default_timefield: stringOptionalNullable,
-  drilldown_url: stringOptionalNullable,
+  drilldown_url: stringOptional,
   drop_last_bucket: numberIntegerOptional,
-  filter: schema.nullable(
-    schema.oneOf([
-      stringOptionalNullable,
-      schema.object({
-        language: stringOptionalNullable,
-        query: stringOptionalNullable,
-      }),
-    ])
-  ),
+  filter: schema.maybe(queryObject),
   gauge_color_rules: schema.maybe(schema.arrayOf(gaugeColorRulesItems)),
   gauge_width: schema.nullable(schema.oneOf([stringOptionalNullable, numberOptional])),
   gauge_inner_color: stringOptionalNullable,
   gauge_inner_width: stringOrNumberOptionalNullable,
   gauge_style: stringOptionalNullable,
-  gauge_max: stringOrNumberOptionalNullable,
+  gauge_max: numberOptionalOrEmptyString,
   id: stringRequired,
   ignore_global_filters: numberOptional,
   ignore_global_filter: numberOptional,

src/plugins/vis_type_timeseries/public/application/components/aggs/aggs.tsx

@@ -13,7 +13,6 @@ import { EuiDraggable, EuiDroppable } from '@elastic/eui';
 import { Agg } from './agg';
 // @ts-ignore
 import { seriesChangeHandler } from '../lib/series_change_handler';
-// @ts-ignore
 import { handleAdd, handleDelete } from '../lib/collection_actions';
 import { newMetricAggFn } from '../lib/new_metric_agg_fn';
 import { PanelSchema, SeriesItemsSchema } from '../../../../common/types';
@@ -23,10 +22,12 @@ import { IFieldType } from '../../../../../data/common/index_patterns/fields';
 const DROPPABLE_ID = 'aggs_dnd';
 
 export interface AggsProps {
+  name: keyof SeriesItemsSchema;
   panel: PanelSchema;
   model: SeriesItemsSchema;
   fields: IFieldType[];
   uiRestrictions: TimeseriesUIRestrictions;
+  onChange(): void;
 }
 
 export class Aggs extends PureComponent<AggsProps> {

src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.tsx

@@ -21,7 +21,7 @@ interface FieldSelectProps {
   type: string;
   fields: Record<string, SanitizedFieldType[]>;
   indexPattern: string;
-  value: string;
+  value?: string | null;
   onChange: (options: Array<EuiComboBoxOptionOption<string>>) => void;
   disabled?: boolean;
   restrict?: string[];

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_hdr.tsx

@@ -12,7 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 export interface PercentileHdrProps {
   value: number | undefined;
-  onChange: () => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const PercentileHdr = ({ value, onChange }: PercentileHdrProps) => (

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx

@@ -17,19 +17,16 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AggSelect } from '../agg_select';
-// @ts-ignore
 import { FieldSelect } from '../field_select';
 // @ts-ignore
 import { createChangeHandler } from '../../lib/create_change_handler';
-// @ts-ignore
 import { createSelectHandler } from '../../lib/create_select_handler';
-// @ts-ignore
 import { createNumberHandler } from '../../lib/create_number_handler';
 
 import { AggRow } from '../agg_row';
 import { PercentileRankValues } from './percentile_rank_values';
 
-import { KBN_FIELD_TYPES } from '../../../../../../../plugins/data/public';
+import { KBN_FIELD_TYPES } from '../../../../../../data/public';
 import { MetricsItemsSchema, PanelSchema, SanitizedFieldType } from '../../../../../common/types';
 import { DragHandleProps } from '../../../../types';
 import { PercentileHdr } from '../percentile_hdr';

src/plugins/vis_type_timeseries/public/application/components/color_picker.tsx

@@ -26,7 +26,7 @@ interface ColorProps {
 
 export interface ColorPickerProps {
   name: string;
-  value: string | null;
+  value?: string | null;
   disableTrash?: boolean;
   onChange: (props: ColorProps) => void;
 }
@@ -39,16 +39,12 @@ export function ColorPicker({ name, value, disableTrash = false, onChange }: Col
 
   const handleColorChange: EuiColorPickerProps['onChange'] = (text: string, { rgba, hex }) => {
     setColor(text);
-    const part: ColorProps = {};
-    part[name] = hex ? `rgba(${rgba.join(',')})` : '';
-    onChange(part);
+    onChange({ [name]: hex ? `rgba(${rgba.join(',')})` : '' });
   };
 
   const handleClear = () => {
     setColor('');
-    const part: ColorProps = {};
-    part[name] = null;
-    onChange(part);
+    onChange({ [name]: null });
   };
 
   const label = value

src/plugins/vis_type_timeseries/public/application/components/color_rules.test.js → src/plugins/vis_type_timeseries/public/application/components/color_rules.test.tsx

@@ -7,59 +7,58 @@
  */
 
 import React from 'react';
-import { collectionActions } from './lib/collection_actions';
-import { ColorRules } from './color_rules';
 import { keys } from '@elastic/eui';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { mountWithIntl } from '@kbn/test/jest';
 
+import { collectionActions } from './lib/collection_actions';
+import { ColorRules, ColorRulesProps } from './color_rules';
+
 describe('src/legacy/core_plugins/metrics/public/components/color_rules.test.js', () => {
-  let defaultProps;
-  beforeAll(() => {
-    defaultProps = {
-      name: 'gauge_color_rules',
-      model: {
-        gauge_color_rules: [
-          {
-            gauge: null,
-            value: 0,
-            id: 'unique value',
-          },
-        ],
-      },
-      onChange: jest.fn(),
-    };
-  });
+  const defaultProps = ({
+    name: 'gauge_color_rules',
+    model: {
+      gauge_color_rules: [
+        {
+          gauge: null,
+          value: 0,
+          id: 'unique value',
+        },
+      ],
+    },
+    onChange: jest.fn(),
+  } as unknown) as ColorRulesProps;
+
   describe('ColorRules', () => {
     it('should render empty <div/> node', () => {
-      const emptyProps = {
+      const emptyProps = ({
         name: 'gauge_color_rules',
         model: {},
         onChange: jest.fn(),
-      };
-      const wrapper = mountWithIntl(<ColorRules.WrappedComponent {...emptyProps} />);
+      } as unknown) as ColorRulesProps;
+      const wrapper = mountWithIntl(<ColorRules {...emptyProps} />);
       const isNode = wrapper.find('div').children().exists();
       expect(isNode).toBeFalsy();
     });
 
     it('should render non-empty <div/> node', () => {
-      const wrapper = mountWithIntl(<ColorRules.WrappedComponent {...defaultProps} />);
+      const wrapper = mountWithIntl(<ColorRules {...defaultProps} />);
       const isNode = wrapper.find('div.tvbColorPicker').exists();
 
       expect(isNode).toBeTruthy();
     });
     it('should handle change of operator and value correctly', () => {
       collectionActions.handleChange = jest.fn();
-      const wrapper = mountWithIntl(<ColorRules.WrappedComponent {...defaultProps} />);
+      const wrapper = mountWithIntl(<ColorRules {...defaultProps} />);
       const operatorInput = findTestSubject(wrapper, 'colorRuleOperator');
       operatorInput.simulate('keyDown', { key: keys.ARROW_DOWN });
       operatorInput.simulate('keyDown', { key: keys.ARROW_DOWN });
       operatorInput.simulate('keyDown', { key: keys.ENTER });
-      expect(collectionActions.handleChange.mock.calls[0][1].operator).toEqual('gt');
+      expect((collectionActions.handleChange as jest.Mock).mock.calls[0][1].operator).toEqual('gt');
 
       const numberInput = findTestSubject(wrapper, 'colorRuleValue');
       numberInput.simulate('change', { target: { value: '123' } });
-      expect(collectionActions.handleChange.mock.calls[1][1].value).toEqual(123);
+      expect((collectionActions.handleChange as jest.Mock).mock.calls[1][1].value).toEqual(123);
     });
   });
 });