Move shared vislib components into Charts plugin (#62957) (#63446)

* Closes #56310

Move shared vislib components into Charts plugin

* Fixed imports in tests

* Changed i18n IDs to match charts namespace

* Renamed ColorSchemaVislibParams to ColorSchemaParams, added enums and got rid of useValidation function

* Renamed ColorSchemaVislibParams to ColorSchemaParams and got rid of useValidation function

* Fixed merge conflict

* Replaced enums with objects again

Co-authored-by: DianaDerevyankina <[email protected]>

src/legacy/core_plugins/region_map/public/components/region_map_options.tsx

@@ -24,7 +24,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { FileLayerField, VectorLayer, ServiceSettings } from 'ui/vis/map/service_settings';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
+import {
+  NumberInputOption,
+  SelectOption,
+  SwitchOption,
+} from '../../../../../plugins/charts/public';
 import { WmsOptions } from '../../../tile_map/public/components/wms_options';
 import { RegionMapVisParams } from '../types';
 

src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx

@@ -27,7 +27,7 @@ import {
   RangeOption,
   SelectOption,
   SwitchOption,
-} from '../../../vis_type_vislib/public';
+} from '../../../../../plugins/charts/public';
 import { WmsOptions } from './wms_options';
 import { TileMapVisParams } from '../types';
 import { MapTypes } from '../map_types';

src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { EuiLink, EuiSpacer, EuiText, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { TextInputOption } from '../../../vis_type_vislib/public';
+import { TextInputOption } from '../../../../../plugins/charts/public';
 import { WMSOptions } from '../types';
 
 interface WmsInternalOptions {

src/legacy/core_plugins/tile_map/public/components/wms_options.tsx

@@ -25,7 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { TmsLayer } from 'ui/vis/map/service_settings';
 import { Vis } from '../../../../../plugins/visualizations/public';
 import { RegionMapVisParams } from '../../../region_map/public/types';
-import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
+import { SelectOption, SwitchOption } from '../../../../../plugins/charts/public';
 import { WmsInternalOptions } from './wms_internal_options';
 import { WMSOptions, TileMapVisParams } from '../types';
 

src/legacy/core_plugins/vis_type_markdown/public/settings_options.tsx

@@ -22,7 +22,7 @@ import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { RangeOption, SwitchOption } from '../../vis_type_vislib/public';
+import { RangeOption, SwitchOption } from '../../../../plugins/charts/public';
 import { MarkdownVisParams } from './types';
 
 function SettingsOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx

@@ -37,9 +37,9 @@ import {
   SwitchOption,
   RangeOption,
   SetColorSchemaOptionsValue,
-} from '../../../vis_type_vislib/public';
+  SetColorRangeValue,
+} from '../../../../../plugins/charts/public';
 import { MetricVisParam, VisParams } from '../types';
-import { SetColorRangeValue } from '../../../vis_type_vislib/public/components/common/color_ranges';
 
 function MetricVisOptions({
   stateParams,

src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts

@@ -26,9 +26,8 @@ import {
   Render,
   Style,
 } from '../../../../plugins/expressions/public';
-import { ColorModes } from '../../vis_type_vislib/public';
 import { visType, DimensionsVisParam, VisParams } from './types';
-import { ColorSchemas, vislibColorMaps } from '../../../../plugins/charts/public';
+import { ColorSchemas, vislibColorMaps, ColorModes } from '../../../../plugins/charts/public';
 
 export type Input = KibanaDatatable;
 

src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts

@@ -21,8 +21,7 @@ import { i18n } from '@kbn/i18n';
 
 import { MetricVisComponent } from './components/metric_vis_component';
 import { MetricVisOptions } from './components/metric_vis_options';
-import { ColorModes } from '../../vis_type_vislib/public';
-import { ColorSchemas, colorSchemas } from '../../../../plugins/charts/public';
+import { ColorSchemas, colorSchemas, ColorModes } from '../../../../plugins/charts/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
 import { Schemas } from '../../../../plugins/vis_default_editor/public';
 

src/legacy/core_plugins/vis_type_metric/public/types.ts

@@ -19,8 +19,7 @@
 
 import { Range } from '../../../../plugins/expressions/public';
 import { SchemaConfig } from '../../../../plugins/visualizations/public';
-import { ColorModes, Labels, Style } from '../../vis_type_vislib/public';
-import { ColorSchemas } from '../../../../plugins/charts/public';
+import { ColorModes, ColorSchemas, Labels, Style } from '../../../../plugins/charts/public';
 
 export const visType = 'metric';
 

src/legacy/core_plugins/vis_type_table/public/components/table_vis_options.tsx

@@ -25,7 +25,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { search } from '../../../../../plugins/data/public';
-import { NumberInputOption, SwitchOption, SelectOption } from '../../../vis_type_vislib/public';
+import {
+  SwitchOption,
+  SelectOption,
+  NumberInputOption,
+} from '../../../../../plugins/charts/public';
 import { TableVisParams } from '../types';
 import { totalAggregations } from './utils';
 

src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx

@@ -22,7 +22,7 @@ import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { ValidatedDualRange } from '../../../../../../src/plugins/kibana_react/public';
-import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
+import { SelectOption, SwitchOption } from '../../../../../plugins/charts/public';
 import { TagCloudVisParams } from '../types';
 
 function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps<TagCloudVisParams>) {

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

@@ -33,13 +33,13 @@ import {
   AxisTypes,
   ScaleTypes,
   AxisModes,
-  Rotates,
   ThresholdLineStyles,
   getConfigCollections,
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
+import { Rotates } from '../../../../plugins/charts/public';
 
 export const createAreaVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'area',

src/legacy/core_plugins/vis_type_vislib/public/components/common/index.ts

@@ -17,13 +17,5 @@
  * under the License.
  */
 
-export { BasicOptions } from './basic_options';
-export { ColorRanges } from './color_ranges';
-export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
-export { NumberInputOption } from './number_input';
-export { RangeOption } from './range';
-export { SelectOption } from './select';
-export { SwitchOption } from './switch';
-export { TextInputOption } from './text_input';
 export { TruncateLabelsOption } from './truncate_labels';
 export { ValidationWrapper, ValidationVisOptionsProps } from './validation_wrapper';

src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx

@@ -22,7 +22,7 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { SwitchOption, TextInputOption } from '../../common';
+import { SwitchOption, TextInputOption } from '../../../../../../../plugins/charts/public';
 import { GaugeOptionsInternalProps } from '.';
 
 function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInternalProps) {

src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx

@@ -22,12 +22,16 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common';
+import {
+  ColorRanges,
+  ColorSchemaOptions,
+  ColorSchemaParams,
+  SetColorRangeValue,
+  SwitchOption,
+  ColorSchemas,
+} from '../../../../../../../plugins/charts/public';
 import { GaugeOptionsInternalProps } from '.';
-import { ColorSchemaVislibParams } from '../../../types';
 import { Gauge } from '../../../gauge';
-import { SetColorRangeValue } from '../../common/color_ranges';
-import { ColorSchemas } from '../../../../../../../plugins/charts/public';
 
 function RangesPanel({
   setGaugeValue,
@@ -39,7 +43,7 @@ function RangesPanel({
   vis,
 }: GaugeOptionsInternalProps) {
   const setColorSchemaOptions = useCallback(
-    <T extends keyof ColorSchemaVislibParams>(paramName: T, value: ColorSchemaVislibParams[T]) => {
+    <T extends keyof ColorSchemaParams>(paramName: T, value: ColorSchemaParams[T]) => {
       setGaugeValue(paramName, value as Gauge[T]);
       // set outline if color schema is changed to greys
       // if outline wasn't set explicitly yet

src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx

@@ -22,7 +22,7 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { SelectOption } from '../../common';
+import { SelectOption } from '../../../../../../../plugins/charts/public';
 import { GaugeOptionsInternalProps } from '.';
 import { AggGroupNames } from '../../../../../../../plugins/data/public';
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/index.tsx

@@ -31,12 +31,12 @@ import {
   NumberInputOption,
   SelectOption,
   SwitchOption,
-} from '../../common';
-import { SetColorSchemaOptionsValue } from '../../common/color_schema';
+  SetColorSchemaOptionsValue,
+  SetColorRangeValue,
+} from '../../../../../../../plugins/charts/public';
 import { HeatmapVisParams } from '../../../heatmap';
 import { ValueAxis } from '../../../types';
 import { LabelsPanel } from './labels_panel';
-import { SetColorRangeValue } from '../../common/color_ranges';
 
 function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
   const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props;

src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx

@@ -26,7 +26,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { ValueAxis } from '../../../types';
 import { HeatmapVisParams } from '../../../heatmap';
-import { SwitchOption } from '../../common';
+import { SwitchOption } from '../../../../../../../plugins/charts/public';
 
 const VERTICAL_ROTATION = 270;
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx

@@ -25,7 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { Axis } from '../../../types';
-import { SelectOption, SwitchOption } from '../../common';
+import { SelectOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { Positions } from '../../../utils/collections';
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx

@@ -25,7 +25,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { Vis } from '../../../../../../../plugins/visualizations/public';
 import { SeriesParam, ValueAxis } from '../../../types';
 import { ChartTypes } from '../../../utils/collections';
-import { SelectOption } from '../../common';
+import { SelectOption } from '../../../../../../../plugins/charts/public';
 import { LineOptions } from './line_options';
 import { SetParamByIndex, ChangeValueAxis } from './';
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx

@@ -21,7 +21,7 @@ import React, { useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { ValueAxis } from '../../../types';
-import { NumberInputOption, SwitchOption } from '../../common';
+import { NumberInputOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { YExtents } from './y_extents';
 import { SetScale } from './value_axis_options';
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx

@@ -24,8 +24,9 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { Axis } from '../../../types';
-import { SelectOption, SwitchOption, TruncateLabelsOption } from '../../common';
+import { TruncateLabelsOption } from '../../common';
 import { getRotateOptions } from '../../../utils/collections';
+import { SelectOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 
 export type SetAxisLabel = <T extends keyof Axis['labels']>(
   paramName: T,

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { LineOptions, LineOptionsParams } from './line_options';
-import { NumberInputOption } from '../../common';
+import { NumberInputOption } from '../../../../../../../plugins/charts/public';
 import { seriesParam, vis } from './mocks';
 
 jest.mock('ui/new_platform');

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx

@@ -24,7 +24,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { Vis } from '../../../../../../../plugins/visualizations/public';
 import { SeriesParam } from '../../../types';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../common';
+import {
+  NumberInputOption,
+  SelectOption,
+  SwitchOption,
+} from '../../../../../../../plugins/charts/public';
 import { SetChart } from './chart_options';
 
 export interface LineOptionsParams {

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts

@@ -18,7 +18,7 @@
  */
 
 import { Vis } from '../../../../../../../plugins/visualizations/public';
-import { Axis, ValueAxis, SeriesParam, Style } from '../../../types';
+import { Axis, ValueAxis, SeriesParam } from '../../../types';
 import {
   ChartTypes,
   ChartModes,
@@ -31,6 +31,7 @@ import {
   getPositions,
   getInterpolationModes,
 } from '../../../utils/collections';
+import { Style } from '../../../../../../../plugins/charts/public';
 
 const defaultValueAxisId = 'ValueAxis-1';
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
 import { ValueAxis } from '../../../types';
-import { TextInputOption } from '../../common';
+import { TextInputOption } from '../../../../../../../plugins/charts/public';
 import { LabelOptions } from './label_options';
 import { ScaleTypes, Positions } from '../../../utils/collections';
 import { valueAxis, vis } from './mocks';

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx

@@ -24,7 +24,11 @@ import { EuiSpacer, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
 import { Vis } from '../../../../../../../plugins/visualizations/public';
 import { ValueAxis } from '../../../types';
 import { Positions } from '../../../utils/collections';
-import { SelectOption, SwitchOption, TextInputOption } from '../../common';
+import {
+  SelectOption,
+  SwitchOption,
+  TextInputOption,
+} from '../../../../../../../plugins/charts/public';
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { CustomExtentsOptions } from './custom_extents_options';
 import { isAxisHorizontal } from './utils';

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { YExtents, YExtentsProps } from './y_extents';
 import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../common';
+import { NumberInputOption } from '../../../../../../../plugins/charts/public';
 
 jest.mock('ui/new_platform');
 

src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx

@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 
 import { Scale } from '../../../types';
 import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../common';
+import { NumberInputOption } from '../../../../../../../plugins/charts/public';
 import { SetScale } from './value_axis_options';
 
 const rangeError = i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage', {

src/legacy/core_plugins/vis_type_vislib/public/components/options/pie.tsx

@@ -23,7 +23,8 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { BasicOptions, TruncateLabelsOption, SwitchOption } from '../common';
+import { TruncateLabelsOption } from '../common';
+import { BasicOptions, SwitchOption } from '../../../../../../plugins/charts/public';
 import { PieVisParams } from '../../pie';
 
 function PieOptions(props: VisOptionsProps<PieVisParams>) {

src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx

@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { SelectOption, SwitchOption } from '../../common';
+import { SelectOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { BasicVislibParams, ValueAxis } from '../../../types';
 
 function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<BasicVislibParams>) {

src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx

@@ -21,7 +21,8 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { BasicOptions, SwitchOption, ValidationVisOptionsProps } from '../../common';
+import { ValidationVisOptionsProps } from '../../common';
+import { BasicOptions, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { GridPanel } from './grid_panel';
 import { ThresholdPanel } from './threshold_panel';
 import { BasicVislibParams } from '../../../types';

src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx

@@ -21,8 +21,12 @@ import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elas
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { SelectOption, SwitchOption, ValidationVisOptionsProps } from '../../common';
-import { NumberInputOption } from '../../common/required_number_input';
+import { ValidationVisOptionsProps } from '../../common';
+import {
+  SelectOption,
+  SwitchOption,
+  RequiredNumberInputOption,
+} from '../../../../../../../plugins/charts/public';
 import { BasicVislibParams } from '../../../types';
 
 function ThresholdPanel({
@@ -73,7 +77,7 @@ function ThresholdPanel({
 
       {stateParams.thresholdLine.show && (
         <>
-          <NumberInputOption
+          <RequiredNumberInputOption
             label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.valueLabel', {
               defaultMessage: 'Threshold value',
             })}
@@ -83,7 +87,7 @@ function ThresholdPanel({
             setValidity={setThresholdLineValidity}
           />
 
-          <NumberInputOption
+          <RequiredNumberInputOption
             label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.widthLabel', {
               defaultMessage: 'Line width',
             })}