[NP] Vis Default Editor plugin (#62475) (#62918)

* Move the default_editor to NP

* Fix paths

* Import styles through the visualize

* Other fixes

* Fix ip_ranges exhaustive-deps array

* Fix filters and extend bounds

* Other fixes

* Fix date_ranges tests

* Use useMount on first render

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

.eslintrc.js

@@ -69,26 +69,6 @@ module.exports = {
         'jsx-a11y/no-onchange': 'off',
       },
     },
-    {
-      files: ['src/legacy/core_plugins/expressions/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
-    {
-      files: [
-        'src/legacy/core_plugins/vis_default_editor/public/components/controls/**/*.{ts,tsx}',
-      ],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
-    {
-      files: ['src/legacy/ui/public/vis/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
     {
       files: ['src/plugins/es_ui_shared/**/*.{js,ts,tsx}'],
       rules: {

.i18nrc.json

@@ -43,7 +43,7 @@
     "tileMap": "src/legacy/core_plugins/tile_map",
     "timelion": ["src/legacy/core_plugins/timelion", "src/legacy/core_plugins/vis_type_timelion", "src/plugins/timelion"],
     "uiActions": "src/plugins/ui_actions",
-    "visDefaultEditor": "src/legacy/core_plugins/vis_default_editor",
+    "visDefaultEditor": "src/plugins/vis_default_editor",
     "visTypeMarkdown": "src/legacy/core_plugins/vis_type_markdown",
     "visTypeMetric": "src/legacy/core_plugins/vis_type_metric",
     "visTypeTable": "src/legacy/core_plugins/vis_type_table",

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

@@ -30,7 +30,7 @@ import {
   EuiSelect,
 } from '@elastic/eui';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { IIndexPattern } from 'src/plugins/data/public';
 import { ControlEditor } from './control_editor';
 import {

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

@@ -23,7 +23,7 @@ import { EuiForm, EuiFormRow, EuiSwitch } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSwitchEvent } from '@elastic/eui';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 
 interface OptionsTabParams {
   updateFiltersOnChange: boolean;

src/legacy/core_plugins/kibana/public/visualize/_index.scss

@@ -1,2 +1,5 @@
 // Visualize plugin styles
 @import 'np_ready/index';
+
+// should be removed while moving the visualize into NP
+@import '../../../../../plugins/vis_default_editor/public/index'

src/legacy/core_plugins/kibana/public/visualize/kibana_services.ts

@@ -36,7 +36,7 @@ import { VisualizationsStart } from '../../../../../plugins/visualizations/publi
 import { SavedVisualizations } from './np_ready/types';
 import { UsageCollectionSetup } from '../../../../../plugins/usage_collection/public';
 import { KibanaLegacyStart } from '../../../../../plugins/kibana_legacy/public';
-import { DefaultEditorController } from '../../../vis_default_editor/public';
+import { DefaultEditorController } from '../../../../../plugins/vis_default_editor/public';
 
 export interface VisualizeKibanaServices {
   pluginInitializerContext: PluginInitializerContext;

src/legacy/core_plugins/kibana/public/visualize/plugin.ts

@@ -51,7 +51,7 @@ import {
   HomePublicPluginSetup,
 } from '../../../../../plugins/home/public';
 import { UsageCollectionSetup } from '../../../../../plugins/usage_collection/public';
-import { DefaultEditorController } from '../../../vis_default_editor/public';
+import { DefaultEditorController } from '../../../../../plugins/vis_default_editor/public';
 
 export interface VisualizePluginStartDependencies {
   data: DataPublicPluginStart;

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

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

src/legacy/core_plugins/region_map/public/region_map_type.js

@@ -22,7 +22,7 @@ import { mapToLayerWithId } from './util';
 import { createRegionMapVisualization } from './region_map_visualization';
 import { RegionMapOptions } from './components/region_map_options';
 import { truncatedColorSchemas } from '../../../../plugins/charts/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 
 // TODO: reference to TILE_MAP plugin should be removed
 import { ORIGIN } from '../../tile_map/common/origin';

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

@@ -21,7 +21,7 @@ import React, { useEffect } from 'react';
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import {
   BasicOptions,
   RangeOption,

src/legacy/core_plugins/tile_map/public/tile_map_type.js

@@ -22,7 +22,7 @@ import { i18n } from '@kbn/i18n';
 
 import { convertToGeoJson } from 'ui/vis/map/convert_to_geojson';
 
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import { createTileMapVisualization } from './tile_map_visualization';
 import { TileMapOptions } from './components/tile_map_options';
 import { MapTypes } from './map_types';

src/legacy/core_plugins/vis_default_editor/index.ts

@@ -1,42 +0,0 @@
-/*
- * 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 { resolve } from 'path';
-import { Legacy } from 'kibana';
-
-import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy/types';
-
-const vidDefaultEditorPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
-  new Plugin({
-    id: 'vis_default_editor',
-    require: [],
-    publicDir: resolve(__dirname, 'public'),
-    uiExports: {
-      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
-    },
-    init: (server: Legacy.Server) => ({}),
-    config(Joi: any) {
-      return Joi.object({
-        enabled: Joi.boolean().default(true),
-      }).default();
-    },
-  } as Legacy.PluginSpecOptions);
-
-// eslint-disable-next-line import/no-default-export
-export default vidDefaultEditorPluginInitializer;

src/legacy/core_plugins/vis_default_editor/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "vis_default_editor",
-  "version": "kibana"
-}

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

@@ -30,7 +30,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { MarkdownVisParams } from './types';
 
 function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {

src/legacy/core_plugins/vis_type_markdown/public/markdown_vis.ts

@@ -22,7 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { MarkdownVisWrapper } from './markdown_vis_controller';
 import { MarkdownOptions } from './markdown_options';
 import { SettingsOptions } from './settings_options';
-import { DefaultEditorSize } from '../../vis_default_editor/public';
+import { DefaultEditorSize } from '../../../../plugins/vis_default_editor/public';
 
 export const markdownVisDefinition = {
   name: 'markdown',

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

@@ -21,7 +21,7 @@ import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { RangeOption, SwitchOption } from '../../vis_type_vislib/public';
 import { MarkdownVisParams } from './types';
 

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

@@ -29,7 +29,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import {
   ColorModes,
   ColorRanges,

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

@@ -23,10 +23,6 @@ import { functionWrapper } from '../../../../plugins/expressions/common/expressi
 
 jest.mock('ui/new_platform');
 
-jest.mock('../../vis_default_editor/public', () => ({
-  Schemas: class {},
-}));
-
 describe('interpreter/functions#metric', () => {
   const fn = functionWrapper(createMetricVisFn());
   const context = {

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

@@ -22,10 +22,6 @@ import { MetricVisComponent } from './components/metric_vis_component';
 
 jest.mock('ui/new_platform');
 
-jest.mock('../../vis_default_editor/public', () => ({
-  Schemas: class {},
-}));
-
 describe('metric_vis - createMetricVisTypeDefinition', () => {
   it('has metric vis component set', () => {
     const def = createMetricVisTypeDefinition();

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

@@ -24,7 +24,7 @@ import { MetricVisOptions } from './components/metric_vis_options';
 import { ColorModes } from '../../vis_type_vislib/public';
 import { ColorSchemas, colorSchemas } from '../../../../plugins/charts/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 
 export const createMetricVisTypeDefinition = () => ({
   name: 'metric',

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

@@ -23,7 +23,7 @@ import { EuiIconTip, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+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 { TableVisParams } from '../types';

src/legacy/core_plugins/vis_type_table/public/table_vis_type.ts

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import { Vis } from '../../../../plugins/visualizations/public';
 import { tableVisResponseHandler } from './table_vis_response_handler';
 // @ts-ignore

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

@@ -20,8 +20,8 @@
 import React from 'react';
 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 { VisOptionsProps } from '../../../vis_default_editor/public';
 import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
 import { TagCloudVisParams } from '../types';
 

src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 
 import { TagCloudOptions } from './components/tag_cloud_options';
 

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

@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 
 import { search } from '../../../../../plugins/data/public';
 const { isValidEsInterval } = search.aggs;
-import { useValidation } from '../../../vis_default_editor/public';
+import { useValidation } from '../../../../../plugins/vis_default_editor/public';
 
 const intervalOptions = [
   {

src/legacy/core_plugins/vis_type_timelion/public/timelion_options.tsx

@@ -20,9 +20,9 @@
 import React, { useCallback } from 'react';
 import { EuiPanel } from '@elastic/eui';
 
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { VisParams } from './timelion_vis_fn';
 import { TimelionInterval, TimelionExpressionInput } from './components';
-import { VisOptionsProps } from '../../vis_default_editor/public';
 
 function TimelionOptions({ stateParams, setValue, setValidity }: VisOptionsProps<VisParams>) {
   const setInterval = useCallback((value: VisParams['interval']) => setValue('interval', value), [

src/legacy/core_plugins/vis_type_timelion/public/timelion_vis_type.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { KibanaContextProvider } from '../../../../plugins/kibana_react/public';
-import { DefaultEditorSize } from '../../vis_default_editor/public';
+import { DefaultEditorSize } from '../../../../plugins/vis_default_editor/public';
 import { getTimelionRequestHandler } from './helpers/timelion_request_handler';
 import { TimelionVisComponent, TimelionVisComponentProp } from './components';
 import { TimelionOptions } from './timelion_options';

src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx

@@ -24,11 +24,11 @@ import compactStringify from 'json-stringify-pretty-compact';
 import hjson from 'hjson';
 import { i18n } from '@kbn/i18n';
 
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { getNotifications } from '../services';
 import { VisParams } from '../vega_fn';
 import { VegaHelpMenu } from './vega_help_menu';
 import { VegaActionsMenu } from './vega_actions_menu';
-import { VisOptionsProps } from '../../../vis_default_editor/public';
 
 const aceOptions = {
   maxLines: Infinity,

src/legacy/core_plugins/vis_type_vega/public/vega_type.ts

@@ -18,8 +18,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { DefaultEditorSize } from '../../vis_default_editor/public';
+import { DefaultEditorSize } from '../../../../plugins/vis_default_editor/public';
 import { VegaVisualizationDependencies } from './plugin';
 import { VegaVisEditor } from './components';
 import { defaultFeedbackMessage } from '../../../../plugins/kibana_utils/common';

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

@@ -24,7 +24,7 @@ import { palettes } from '@elastic/eui/lib/services';
 import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
 
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import {
   Positions,
   ChartTypes,

src/legacy/core_plugins/vis_type_vislib/public/components/common/basic_options.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from '../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { SwitchOption } from './switch';
 import { SelectOption } from './select';
 

src/legacy/core_plugins/vis_type_vislib/public/components/common/color_ranges.tsx

@@ -22,7 +22,10 @@ import { last } from 'lodash';
 
 import { i18n } from '@kbn/i18n';
 
-import { RangeValues, RangesParamEditor } from '../../../../vis_default_editor/public';
+import {
+  RangeValues,
+  RangesParamEditor,
+} from '../../../../../../plugins/vis_default_editor/public';
 
 export type SetColorRangeValue = (paramName: string, value: RangeValues[]) => void;
 

src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx

@@ -22,7 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from '../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { SelectOption } from './select';
 import { SwitchOption } from './switch';
 import { ColorSchemaVislibParams } from '../../types';

src/legacy/core_plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx

@@ -19,7 +19,7 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 
-import { VisOptionsProps } from '../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 
 export interface ValidationVisOptionsProps<T> extends VisOptionsProps<T> {
   setMultipleValidity(paramName: string, isValid: boolean): void;

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

@@ -20,7 +20,7 @@
 import React, { useCallback } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 
-import { VisOptionsProps } from '../../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { GaugeVisParams } from '../../../gauge';
 import { RangesPanel } from './ranges_panel';
 import { StylePanel } from './style_panel';

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

@@ -23,7 +23,7 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from '../../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import {
   BasicOptions,
   ColorRanges,

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

@@ -23,7 +23,7 @@ import { EuiColorPicker, EuiFormRow, EuiPanel, EuiSpacer, EuiTitle } from '@elas
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from '../../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { ValueAxis } from '../../../types';
 import { HeatmapVisParams } from '../../../heatmap';
 import { SwitchOption } from '../../common';

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

@@ -23,7 +23,7 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { Axis } from '../../../types';
 import { SelectOption, SwitchOption } from '../../common';
 import { LabelOptions, SetAxisLabel } from './label_options';

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

@@ -22,7 +22,7 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from '../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { BasicOptions, TruncateLabelsOption, SwitchOption } from '../common';
 import { PieVisParams } from '../../pie';
 

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

@@ -22,7 +22,7 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from '../../../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { SelectOption, SwitchOption } from '../../common';
 import { BasicVislibParams, ValueAxis } from '../../../types';
 

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

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { RangeValues, Schemas } from '../../vis_default_editor/public';
+import { RangeValues, Schemas } from '../../../../plugins/vis_default_editor/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
 import { GaugeOptions } from './components/options';
 import { getGaugeCollections, Alignments, ColorModes, GaugeTypes } from './utils/collections';

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

@@ -25,7 +25,7 @@ import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
 import { ColorSchemas } from '../../../../plugins/charts/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 
 export const createGoalVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'goal',

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

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { RangeValues, Schemas } from '../../vis_default_editor/public';
+import { RangeValues, Schemas } from '../../../../plugins/vis_default_editor/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
 import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils/collections';
 import { HeatmapOptions } from './components/options';

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

@@ -24,7 +24,7 @@ import { palettes } from '@elastic/eui/lib/services';
 import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
 
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import {
   Positions,
   ChartTypes,

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

@@ -24,7 +24,7 @@ import { palettes } from '@elastic/eui/lib/services';
 import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
 
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import {
   Positions,
   ChartTypes,

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

@@ -24,7 +24,7 @@ import { palettes } from '@elastic/eui/lib/services';
 import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
 
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import {
   Positions,
   ChartTypes,

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

@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 
 import { AggGroupNames } from '../../../../plugins/data/public';
-import { Schemas } from '../../vis_default_editor/public';
+import { Schemas } from '../../../../plugins/vis_default_editor/public';
 import { PieOptions } from './components/options';
 import { getPositions, Positions } from './utils/collections';
 import { createVislibVisController } from './vis_controller';

src/legacy/core_plugins/vis_type_vislib/public/utils/common_config.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from '../../../vis_default_editor/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { PointSeriesOptions, MetricsAxisOptions } from '../components/options';
 import { ValidationWrapper } from '../components/common';
 import { BasicVislibParams } from '../types';

src/plugins/vis_default_editor/README.md

@@ -0,0 +1,16 @@
+# Visualization Deafult Editor plugin
+
+The default editor is used in most primary visualizations, e.x. `Area`, `Data table`, `Pie`, etc.
+It acts as a container for a particular visualization and options tabs. Contains the default "Data" tab in `public/components/sidebar/data_tab.tsx`.
+The plugin exposes the static `DefaultEditorController` class to consume.
+
+```ts
+import { DefaultEditorController } from '../../vis_default_editor/public';
+
+const editor = new DefaultEditorController(
+  element,
+  vis,
+  eventEmitter,
+  embeddableHandler
+);
+```

src/plugins/vis_default_editor/public/components/agg.tsx

@@ -28,14 +28,13 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { IAggConfig } from 'src/plugins/data/public';
+import { IAggConfig, TimeRange } from 'src/plugins/data/public';
 import { DefaultEditorAggParams } from './agg_params';
 import { DefaultEditorAggCommonProps } from './agg_common_props';
 import { AGGS_ACTION_KEYS, AggsAction } from './agg_group_state';
 import { RowsOrColumnsControl } from './controls/rows_or_columns';
 import { RadiusRatioOptionControl } from './controls/radius_ratio_option';
 import { getSchemaByName } from '../schemas';
-import { TimeRange } from '../../../../../plugins/data/public';
 import { buildAggDescription } from './agg_params_helper';
 
 export interface DefaultEditorAggProps extends DefaultEditorAggCommonProps {

src/plugins/vis_default_editor/public/components/agg_add.tsx

@@ -29,7 +29,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { IAggConfig, AggGroupNames } from '../../../../../plugins/data/public';
+import { IAggConfig, AggGroupNames } from '../../../data/public';
 import { Schema } from '../schemas';
 
 interface DefaultEditorAggAddProps {

src/plugins/vis_default_editor/public/components/agg_group.tsx

@@ -30,7 +30,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { AggGroupNames, search, IAggConfig } from '../../../../../plugins/data/public';
+import { AggGroupNames, search, IAggConfig, TimeRange } from '../../../data/public';
 import { DefaultEditorAgg } from './agg';
 import { DefaultEditorAggAdd } from './agg_add';
 import { AddSchema, ReorderAggs, DefaultEditorAggCommonProps } from './agg_common_props';
@@ -42,7 +42,6 @@ import {
 } from './agg_group_helper';
 import { aggGroupReducer, initAggsState, AGGS_ACTION_KEYS } from './agg_group_state';
 import { Schema } from '../schemas';
-import { TimeRange } from '../../../../../plugins/data/public';
 
 export interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps {
   schemas: Schema[];

src/plugins/vis_default_editor/public/components/agg_params.test.tsx

@@ -25,8 +25,8 @@ import {
   DefaultEditorAggParams as PureDefaultEditorAggParams,
   DefaultEditorAggParamsProps,
 } from './agg_params';
-import { KibanaContextProvider } from '../../../../../plugins/kibana_react/public';
-import { dataPluginMock } from '../../../../../plugins/data/public/mocks';
+import { KibanaContextProvider } from '../../../kibana_react/public';
+import { dataPluginMock } from '../../../data/public/mocks';
 import { EditorVisState } from './sidebar/state/reducers';
 
 const mockEditorConfig = {

src/plugins/vis_default_editor/public/components/agg_params.tsx

@@ -22,7 +22,7 @@ import { EuiForm, EuiAccordion, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import useUnmount from 'react-use/lib/useUnmount';
 
-import { IAggConfig, IndexPattern, AggGroupNames } from '../../../../../plugins/data/public';
+import { IAggConfig, IndexPattern, AggGroupNames } from '../../../data/public';
 
 import { DefaultEditorAggSelect } from './agg_select';
 import { DefaultEditorAggParam } from './agg_param';
@@ -40,7 +40,7 @@ import {
 import { DefaultEditorCommonProps } from './agg_common_props';
 import { EditorParamConfig, TimeIntervalParam, FixedParam, getEditorConfig } from './utils';
 import { Schema, getSchemaByName } from '../schemas';
-import { useKibana } from '../../../../../plugins/kibana_react/public';
+import { useKibana } from '../../../kibana_react/public';
 import { VisDefaultEditorKibanaServices } from '../types';
 
 const FIXED_VALUE_PROP = 'fixedValue';

src/plugins/vis_default_editor/public/components/agg_params_helper.ts

@@ -34,7 +34,7 @@ import { AggParamEditorProps } from './agg_param_props';
 import { aggParamsMap } from './agg_params_map';
 import { EditorConfig } from './utils';
 import { Schema, getSchemaByName } from '../schemas';
-import { search } from '../../../../../plugins/data/public';
+import { search } from '../../../data/public';
 import { EditorVisState } from './sidebar/state/reducers';
 
 interface ParamInstanceBase {

src/plugins/vis_default_editor/public/components/agg_params_map.ts

@@ -18,12 +18,7 @@
  */
 
 import * as controls from './controls';
-import {
-  AggGroupNames,
-  BUCKET_TYPES,
-  METRIC_TYPES,
-  search,
-} from '../../../../../plugins/data/public';
+import { AggGroupNames, BUCKET_TYPES, METRIC_TYPES, search } from '../../../data/public';
 import { wrapWithInlineComp } from './controls/utils';
 
 const { siblingPipelineType, parentPipelineType } = search.aggs;

src/plugins/vis_default_editor/public/components/agg_select.tsx

@@ -24,7 +24,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { IAggType, IndexPattern } from 'src/plugins/data/public';
-import { useKibana } from '../../../../../plugins/kibana_react/public';
+import { useKibana } from '../../../kibana_react/public';
 import { ComboBoxGroupedOptions } from '../utils';
 import { AGG_TYPE_ACTION_KEYS, AggTypeAction } from './agg_params_state';
 

src/plugins/vis_default_editor/public/components/controls/components/from_to_list.tsx

@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EuiFieldText, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { Ipv4Address } from '../../../../../../../plugins/kibana_utils/public';
+import { Ipv4Address } from '../../../../../kibana_utils/public';
 import { InputList, InputListConfig, InputModel, InputObject, InputItem } from './input_list';
 
 const EMPTY_STRING = '';
@@ -44,38 +44,42 @@ interface FromToListProps {
   setValidity(isValid: boolean): void;
 }
 
-function FromToList({ showValidation, onBlur, ...rest }: FromToListProps) {
-  const fromToListConfig: InputListConfig = {
-    defaultValue: {
-      from: { value: '0.0.0.0', model: '0.0.0.0', isInvalid: false },
-      to: { value: '255.255.255.255', model: '255.255.255.255', isInvalid: false },
+const defaultConfig = {
+  defaultValue: {
+    from: { value: '0.0.0.0', model: '0.0.0.0', isInvalid: false },
+    to: { value: '255.255.255.255', model: '255.255.255.255', isInvalid: false },
+  },
+  validateClass: Ipv4Address,
+  getModelValue: (item: FromToObject = {}) => ({
+    from: {
+      value: item.from || EMPTY_STRING,
+      model: item.from || EMPTY_STRING,
+      isInvalid: false,
     },
-    validateClass: Ipv4Address,
-    getModelValue: (item: FromToObject = {}) => ({
-      from: {
-        value: item.from || EMPTY_STRING,
-        model: item.from || EMPTY_STRING,
-        isInvalid: false,
-      },
-      to: { value: item.to || EMPTY_STRING, model: item.to || EMPTY_STRING, isInvalid: false },
+    to: { value: item.to || EMPTY_STRING, model: item.to || EMPTY_STRING, isInvalid: false },
+  }),
+  getRemoveBtnAriaLabel: (item: FromToModel) =>
+    i18n.translate('visDefaultEditor.controls.ipRanges.removeRangeAriaLabel', {
+      defaultMessage: 'Remove the range of {from} to {to}',
+      values: { from: item.from.value || '*', to: item.to.value || '*' },
     }),
-    getRemoveBtnAriaLabel: (item: FromToModel) =>
-      i18n.translate('visDefaultEditor.controls.ipRanges.removeRangeAriaLabel', {
-        defaultMessage: 'Remove the range of {from} to {to}',
-        values: { from: item.from.value || '*', to: item.to.value || '*' },
-      }),
-    onChangeFn: ({ from, to }: FromToModel) => {
-      const result: FromToObject = {};
-      if (from.model) {
-        result.from = from.model;
-      }
-      if (to.model) {
-        result.to = to.model;
-      }
-      return result;
-    },
-    hasInvalidValuesFn: ({ from, to }: FromToModel) => from.isInvalid || to.isInvalid,
-    renderInputRow: (item: FromToModel, index, onChangeValue) => (
+  onChangeFn: ({ from, to }: FromToModel) => {
+    const result: FromToObject = {};
+    if (from.model) {
+      result.from = from.model;
+    }
+    if (to.model) {
+      result.to = to.model;
+    }
+    return result;
+  },
+  hasInvalidValuesFn: ({ from, to }: FromToModel) => from.isInvalid || to.isInvalid,
+  modelNames: ['from', 'to'],
+};
+
+function FromToList({ showValidation, onBlur, ...rest }: FromToListProps) {
+  const renderInputRow = useCallback(
+    (item: FromToModel, index, onChangeValue) => (
       <>
         <EuiFlexItem>
           <EuiFieldText
@@ -114,7 +118,11 @@ function FromToList({ showValidation, onBlur, ...rest }: FromToListProps) {
         </EuiFlexItem>
       </>
     ),
-    modelNames: ['from', 'to'],
+    [onBlur, showValidation]
+  );
+  const fromToListConfig: InputListConfig = {
+    ...defaultConfig,
+    renderInputRow,
   };
 
   return <InputList config={fromToListConfig} {...rest} />;

src/plugins/vis_default_editor/public/components/controls/components/input_list.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect, Fragment, useCallback } from 'react';
 import { isEmpty, isEqual, mapValues, omit, pick } from 'lodash';
 import {
   EuiButtonIcon,
@@ -70,7 +70,10 @@ interface InputListProps {
 }
 
 const generateId = htmlIdGenerator();
-const validateValue = (inputValue: string | undefined, config: InputListConfig) => {
+const validateValue = (
+  inputValue: string | undefined,
+  InputObject: InputListConfig['validateClass']
+) => {
   const result = {
     model: inputValue || '',
     isInvalid: false,
@@ -80,7 +83,6 @@ const validateValue = (inputValue: string | undefined, config: InputListConfig)
     return result;
   }
   try {
-    const InputObject = config.validateClass;
     result.model = new InputObject(inputValue).toString();
     result.isInvalid = false;
     return result;
@@ -91,47 +93,60 @@ const validateValue = (inputValue: string | undefined, config: InputListConfig)
 };
 
 function InputList({ config, list, onChange, setValidity }: InputListProps) {
+  const { defaultValue, getModelValue, modelNames, onChangeFn, validateClass } = config;
   const [models, setModels] = useState(() =>
     list.map(
       item =>
         ({
           id: generateId(),
-          ...config.getModelValue(item),
+          ...getModelValue(item),
         } as InputModel)
     )
   );
   const hasInvalidValues = models.some(config.hasInvalidValuesFn);
 
-  const updateValues = (modelList: InputModel[]) => {
-    setModels(modelList);
-    onChange(modelList.map(config.onChangeFn));
-  };
-  const onChangeValue = (index: number, value: string, modelName: string) => {
-    const { model, isInvalid } = validateValue(value, config);
-    updateValues(
-      models.map((range, arrayIndex) =>
-        arrayIndex === index
-          ? {
-              ...range,
-              [modelName]: {
-                value,
-                model,
-                isInvalid,
-              },
-            }
-          : range
-      )
-    );
-  };
-  const onDelete = (id: string) => updateValues(models.filter(model => model.id !== id));
-  const onAdd = () =>
-    updateValues([
-      ...models,
-      {
-        id: generateId(),
-        ...config.getModelValue(),
-      } as InputModel,
-    ]);
+  const updateValues = useCallback(
+    (modelList: InputModel[]) => {
+      setModels(modelList);
+      onChange(modelList.map(onChangeFn));
+    },
+    [onChangeFn, onChange]
+  );
+  const onChangeValue = useCallback(
+    (index: number, value: string, modelName: string) => {
+      const { model, isInvalid } = validateValue(value, validateClass);
+      updateValues(
+        models.map((range, arrayIndex) =>
+          arrayIndex === index
+            ? {
+                ...range,
+                [modelName]: {
+                  value,
+                  model,
+                  isInvalid,
+                },
+              }
+            : range
+        )
+      );
+    },
+    [models, updateValues, validateClass]
+  );
+  const onDelete = useCallback(
+    (id: string) => updateValues(models.filter(model => model.id !== id)),
+    [models, updateValues]
+  );
+  const onAdd = useCallback(
+    () =>
+      updateValues([
+        ...models,
+        {
+          id: generateId(),
+          ...getModelValue(),
+        } as InputModel,
+      ]),
+    [getModelValue, models, updateValues]
+  );
 
   useEffect(() => {
     // resposible for setting up an initial value when there is no default value
@@ -139,15 +154,15 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) {
       updateValues([
         {
           id: generateId(),
-          ...config.defaultValue,
+          ...defaultValue,
         } as InputModel,
       ]);
     }
-  }, []);
+  }, [defaultValue, list.length, updateValues]);
 
   useEffect(() => {
     setValidity(!hasInvalidValues);
-  }, [hasInvalidValues]);
+  }, [hasInvalidValues, setValidity]);
 
   useEffect(() => {
     // responsible for discarding changes
@@ -155,7 +170,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) {
       list.length !== models.length ||
       list.some((item, index) => {
         // make model to be the same shape as stored value
-        const model: InputObject = mapValues(pick(models[index], config.modelNames), 'model');
+        const model: InputObject = mapValues(pick(models[index], modelNames), 'model');
 
         // we need to skip empty values since they are not stored in saved object
         return !isEqual(item, omit(model, isEmpty));
@@ -166,12 +181,12 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) {
           item =>
             ({
               id: generateId(),
-              ...config.getModelValue(item),
+              ...getModelValue(item),
             } as InputModel)
         )
       );
     }
-  }, [list]);
+  }, [getModelValue, list, modelNames, models]);
 
   return (
     <>

src/plugins/vis_default_editor/public/components/controls/components/mask_list.tsx

@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EuiFieldText, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { InputList, InputListConfig, InputObject, InputModel, InputItem } from './input_list';
-import { search } from '../../../../../../../plugins/data/public';
+import { search } from '../../../../../data/public';
 
 const EMPTY_STRING = '';
 
@@ -42,36 +42,40 @@ interface MaskListProps {
   setValidity(isValid: boolean): void;
 }
 
+const defaultConfig = {
+  defaultValue: {
+    mask: { model: '0.0.0.0/1', value: '0.0.0.0/1', isInvalid: false },
+  },
+  validateClass: search.aggs.CidrMask,
+  getModelValue: (item: MaskObject = {}) => ({
+    mask: {
+      model: item.mask || EMPTY_STRING,
+      value: item.mask || EMPTY_STRING,
+      isInvalid: false,
+    },
+  }),
+  getRemoveBtnAriaLabel: (item: MaskModel) =>
+    item.mask.value
+      ? i18n.translate('visDefaultEditor.controls.ipRanges.removeCidrMaskButtonAriaLabel', {
+          defaultMessage: 'Remove the CIDR mask value of {mask}',
+          values: { mask: item.mask.value },
+        })
+      : i18n.translate('visDefaultEditor.controls.ipRanges.removeEmptyCidrMaskButtonAriaLabel', {
+          defaultMessage: 'Remove the CIDR mask default value',
+        }),
+  onChangeFn: ({ mask }: MaskModel) => {
+    if (mask.model) {
+      return { mask: mask.model };
+    }
+    return {};
+  },
+  hasInvalidValuesFn: ({ mask }: MaskModel) => mask.isInvalid,
+  modelNames: 'mask',
+};
+
 function MaskList({ showValidation, onBlur, ...rest }: MaskListProps) {
-  const maskListConfig: InputListConfig = {
-    defaultValue: {
-      mask: { model: '0.0.0.0/1', value: '0.0.0.0/1', isInvalid: false },
-    },
-    validateClass: search.aggs.CidrMask,
-    getModelValue: (item: MaskObject = {}) => ({
-      mask: {
-        model: item.mask || EMPTY_STRING,
-        value: item.mask || EMPTY_STRING,
-        isInvalid: false,
-      },
-    }),
-    getRemoveBtnAriaLabel: (item: MaskModel) =>
-      item.mask.value
-        ? i18n.translate('visDefaultEditor.controls.ipRanges.removeCidrMaskButtonAriaLabel', {
-            defaultMessage: 'Remove the CIDR mask value of {mask}',
-            values: { mask: item.mask.value },
-          })
-        : i18n.translate('visDefaultEditor.controls.ipRanges.removeEmptyCidrMaskButtonAriaLabel', {
-            defaultMessage: 'Remove the CIDR mask default value',
-          }),
-    onChangeFn: ({ mask }: MaskModel) => {
-      if (mask.model) {
-        return { mask: mask.model };
-      }
-      return {};
-    },
-    hasInvalidValuesFn: ({ mask }) => mask.isInvalid,
-    renderInputRow: ({ mask }: MaskModel, index, onChangeValue) => (
+  const renderInputRow = useCallback(
+    ({ mask }: MaskModel, index, onChangeValue) => (
       <EuiFlexItem>
         <EuiFieldText
           aria-label={i18n.translate('visDefaultEditor.controls.ipRanges.cidrMaskAriaLabel', {
@@ -90,7 +94,11 @@ function MaskList({ showValidation, onBlur, ...rest }: MaskListProps) {
         />
       </EuiFlexItem>
     ),
-    modelNames: 'mask',
+    [onBlur, showValidation]
+  );
+  const maskListConfig: InputListConfig = {
+    ...defaultConfig,
+    renderInputRow,
   };
 
   return <InputList config={maskListConfig} {...rest} />;

src/plugins/vis_default_editor/public/components/controls/components/number_list/number_list.tsx

@@ -79,7 +79,7 @@ function NumberList({
     if (!numberArray.length) {
       onChange([models[0].value as number]);
     }
-  }, []);
+  }, [models, numberArray.length, onChange]);
 
   const isValid = !hasInvalidValues(models);
   useValidation(setValidity, isValid);
@@ -109,7 +109,7 @@ function NumberList({
         })
       );
     },
-    [numberRange, models, onUpdate]
+    [models, onUpdate]
   );
 
   // Add an item to the end of the list

src/plugins/vis_default_editor/public/components/controls/components/number_list/range.test.ts

@@ -108,7 +108,6 @@ describe('Range parsing utility', () => {
   };
 
   forOwn(tests, (spec, str: any) => {
-    // eslint-disable-next-line jest/valid-describe
     describe(str, () => {
       const range = parseRange(str);
 

src/plugins/vis_default_editor/public/components/controls/date_ranges.test.tsx

@@ -20,8 +20,8 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DateRangesParamEditor } from './date_ranges';
-import { KibanaContextProvider } from '../../../../../../plugins/kibana_react/public';
-import { docLinksServiceMock } from '../../../../../../core/public/mocks';
+import { KibanaContextProvider } from '../../../../kibana_react/public';
+import { docLinksServiceMock } from '../../../../../core/public/mocks';
 
 describe('DateRangesParamEditor component', () => {
   let setValue: jest.Mock;

src/plugins/vis_default_editor/public/components/controls/date_ranges.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
 import {
   htmlIdGenerator,
   EuiButtonIcon,
@@ -36,8 +36,9 @@ import dateMath from '@elastic/datemath';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { isEqual, omit } from 'lodash';
+import { useMount } from 'react-use';
 
-import { useKibana } from '../../../../../../plugins/kibana_react/public';
+import { useKibana } from '../../../../kibana_react/public';
 import { AggParamEditorProps } from '../agg_param_props';
 
 const FROM_PLACEHOLDER = '\u2212\u221E';
@@ -72,12 +73,26 @@ function DateRangesParamEditor({
     ({ from, to }) => (!from && !to) || !validateDateMath(from) || !validateDateMath(to)
   );
 
-  // set up an initial range when there is no default range
-  useEffect(() => {
+  const updateRanges = useCallback(
+    (rangeValues: DateRangeValuesModel[]) => {
+      // do not set internal id parameter into saved object
+      setValue(rangeValues.map(range => omit(range, 'id')));
+      setRanges(rangeValues);
+    },
+    [setValue]
+  );
+
+  const onAddRange = useCallback(() => updateRanges([...ranges, { id: generateId() }]), [
+    ranges,
+    updateRanges,
+  ]);
+
+  useMount(() => {
+    // set up an initial range when there is no default range
     if (!value.length) {
       onAddRange();
     }
-  }, []);
+  });
 
   useEffect(() => {
     // responsible for discarding changes
@@ -87,18 +102,12 @@ function DateRangesParamEditor({
     ) {
       setRanges(value.map(range => ({ ...range, id: generateId() })));
     }
-  }, [value]);
+  }, [ranges, value]);
 
   useEffect(() => {
     setValidity(!hasInvalidRange);
-  }, [hasInvalidRange]);
+  }, [hasInvalidRange, setValidity]);
 
-  const updateRanges = (rangeValues: DateRangeValuesModel[]) => {
-    // do not set internal id parameter into saved object
-    setValue(rangeValues.map(range => omit(range, 'id')));
-    setRanges(rangeValues);
-  };
-  const onAddRange = () => updateRanges([...ranges, { id: generateId() }]);
   const onRemoveRange = (id: string) => updateRanges(ranges.filter(range => range.id !== id));
   const onChangeRange = (id: string, key: string, newValue: string) =>
     updateRanges(