[Visualizations] Remove charts - editor plugins cyclic dependencies (#…

…84887)

* Remove charts - editor cyclic dependencies

* Move translations from the charts plugin to the editor plugin

* Remove the dependency from the script as it is gone

* Fix types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/dev/run_find_plugins_with_circular_deps.ts

@@ -32,7 +32,6 @@ type CircularDepList = Set<string>;
 
 const allowedList: CircularDepList = new Set([
   'src/plugins/charts -> src/plugins/discover',
-  'src/plugins/charts -> src/plugins/vis_default_editor',
   'src/plugins/vis_default_editor -> src/plugins/visualizations',
   'src/plugins/vis_default_editor -> src/plugins/visualize',
   'src/plugins/visualizations -> src/plugins/visualize',

src/plugins/charts/kibana.json

@@ -3,6 +3,5 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["expressions"],
-  "requiredBundles": ["visDefaultEditor"]
+  "requiredPlugins": ["expressions"]
 }

src/plugins/charts/public/static/components/index.ts

@@ -17,17 +17,8 @@
  * under the License.
  */
 
-export { BasicOptions } from './basic_options';
 export { ColorMode, LabelRotation, defaultCountLabel } from './collections';
-export { ColorRanges, SetColorRangeValue } from './color_ranges';
-export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
 export { ColorSchemaParams, Labels, Style } from './types';
-export { NumberInputOption } from './number_input';
-export { RangeOption } from './range';
-export { RequiredNumberInputOption } from './required_number_input';
-export { SelectOption } from './select';
-export { SwitchOption } from './switch';
-export { TextInputOption } from './text_input';
 export { LegendToggle } from './legend_toggle';
 export { ColorPicker } from './color_picker';
 export { CurrentTime } from './current_time';

src/plugins/maps_legacy/kibana.json

@@ -6,5 +6,5 @@
   "ui": true,
   "server": true,
   "extraPublicDirs": ["common"],
-  "requiredBundles": ["kibanaReact", "charts"]
+  "requiredBundles": ["kibanaReact", "visDefaultEditor"]
 }

src/plugins/maps_legacy/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 '../../../charts/public';
+import { TextInputOption } from '../../../vis_default_editor/public';
 import { WMSOptions } from '../common/types/external_basemap_types';
 
 interface WmsInternalOptions {

src/plugins/maps_legacy/public/components/wms_options.tsx

@@ -24,7 +24,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { TmsLayer } from '../index';
 import { Vis } from '../../../visualizations/public';
 import { RegionMapVisParams } from '../common/types/region_map_types';
-import { SelectOption, SwitchOption } from '../../../charts/public';
+import { SelectOption, SwitchOption } from '../../../vis_default_editor/public';
 import { WmsInternalOptions } from './wms_internal_options';
 import { WMSOptions, TileMapVisParams } from '../common/types/external_basemap_types';
 

src/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 { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { FileLayerField, VectorLayer, IServiceSettings } from '../../../maps_legacy/public';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../../charts/public';
+import { SelectOption, SwitchOption, NumberInputOption } from '../../../vis_default_editor/public';
 import { RegionMapVisParams, WmsOptions } from '../../../maps_legacy/public';
 
 const mapLayerForOption = ({ layerId, name }: VectorLayer) => ({

src/plugins/tile_map/public/components/tile_map_options.tsx

@@ -21,8 +21,13 @@ import React, { useEffect } from 'react';
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { BasicOptions, RangeOption, SelectOption, SwitchOption } from '../../../charts/public';
+import {
+  VisOptionsProps,
+  BasicOptions,
+  SelectOption,
+  SwitchOption,
+  RangeOption,
+} from '../../../vis_default_editor/public';
 import { WmsOptions, TileMapVisParams, MapTypes } from '../../../maps_legacy/public';
 
 export type TileMapOptionsProps = VisOptionsProps<TileMapVisParams>;

src/plugins/charts/public/static/components/basic_options.tsx → src/plugins/vis_default_editor/public/components/options/basic_options.tsx

@@ -21,8 +21,7 @@ import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from '../../../../vis_default_editor/public';
-
+import { VisOptionsProps } from '../../vis_options_props';
 import { SwitchOption } from './switch';
 import { SelectOption } from './select';
 
@@ -39,7 +38,7 @@ function BasicOptions<VisParams extends BasicOptionsParams>({
   return (
     <>
       <SelectOption
-        label={i18n.translate('charts.controls.vislibBasicOptions.legendPositionLabel', {
+        label={i18n.translate('visDefaultEditor.options.vislibBasicOptions.legendPositionLabel', {
           defaultMessage: 'Legend position',
         })}
         options={vis.type.editorConfig.collections.legendPositions}
@@ -48,7 +47,7 @@ function BasicOptions<VisParams extends BasicOptionsParams>({
         setValue={setValue}
       />
       <SwitchOption
-        label={i18n.translate('charts.controls.vislibBasicOptions.showTooltipLabel', {
+        label={i18n.translate('visDefaultEditor.options.vislibBasicOptions.showTooltipLabel', {
           defaultMessage: 'Show tooltip',
         })}
         paramName="addTooltip"

src/plugins/charts/public/static/components/color_ranges.tsx → src/plugins/vis_default_editor/public/components/options/color_ranges.tsx

@@ -22,7 +22,7 @@ import { last } from 'lodash';
 
 import { i18n } from '@kbn/i18n';
 
-import { RangeValues, RangesParamEditor } from '../../../../vis_default_editor/public';
+import { RangeValues, RangesParamEditor } from '../controls/ranges';
 
 export type SetColorRangeValue = (paramName: string, value: RangeValues[]) => void;
 
@@ -71,7 +71,7 @@ function ColorRanges({
   return (
     <RangesParamEditor
       data-test-subj={dataTestSubj}
-      error={i18n.translate('charts.controls.colorRanges.errorText', {
+      error={i18n.translate('visDefaultEditor.options.colorRanges.errorText', {
         defaultMessage: 'Each range should be greater than previous.',
       })}
       hidePlaceholders={true}

src/plugins/charts/public/static/components/color_schema.tsx → src/plugins/vis_default_editor/public/components/options/color_schema.tsx

@@ -22,11 +22,10 @@ import { i18n } from '@kbn/i18n';
 import { EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { ColorSchemaParams, ColorSchema } from 'src/plugins/charts/public';
+import { VisOptionsProps } from '../../vis_options_props';
 import { SelectOption } from './select';
 import { SwitchOption } from './switch';
-import { ColorSchemaParams } from './types';
-import { ColorSchema } from '../color_maps';
 
 export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaParams>(
   paramName: T,
@@ -67,7 +66,7 @@ function ColorSchemaOptions({
         }}
       >
         <FormattedMessage
-          id="charts.controls.colorSchema.resetColorsButtonLabel"
+          id="visDefaultEditor.options.colorSchema.resetColorsButtonLabel"
           defaultMessage="Reset colors"
         />
       </EuiLink>
@@ -80,11 +79,11 @@ function ColorSchemaOptions({
         disabled={disabled}
         helpText={
           showHelpText &&
-          i18n.translate('charts.controls.colorSchema.howToChangeColorsDescription', {
+          i18n.translate('visDefaultEditor.options.colorSchema.howToChangeColorsDescription', {
             defaultMessage: 'Individual colors can be changed in the legend.',
           })
         }
-        label={i18n.translate('charts.controls.colorSchema.colorSchemaLabel', {
+        label={i18n.translate('visDefaultEditor.options.colorSchema.colorSchemaLabel', {
           defaultMessage: 'Color schema',
         })}
         labelAppend={isCustomColors && resetColorsButton}
@@ -96,7 +95,7 @@ function ColorSchemaOptions({
 
       <SwitchOption
         disabled={disabled}
-        label={i18n.translate('charts.controls.colorSchema.reverseColorSchemaLabel', {
+        label={i18n.translate('visDefaultEditor.options.colorSchema.reverseColorSchemaLabel', {
           defaultMessage: 'Reverse schema',
         })}
         paramName="invertColors"

src/plugins/vis_default_editor/public/components/options/index.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export { BasicOptions } from './basic_options';
+export { SwitchOption } from './switch';
+export { SelectOption } from './select';
+export { ColorRanges, SetColorRangeValue } from './color_ranges';
+export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
+export { NumberInputOption } from './number_input';
+export { RangeOption } from './range';
+export { RequiredNumberInputOption } from './required_number_input';
+export { TextInputOption } from './text_input';

src/plugins/charts/public/static/components/range.tsx → src/plugins/vis_default_editor/public/components/options/range.tsx

@@ -49,7 +49,7 @@ function RangeOption<ParamName extends string>({
   const [stateValue, setStateValue] = useState(value);
   const [isValidState, setIsValidState] = useState(true);
 
-  const error = i18n.translate('charts.controls.rangeErrorMessage', {
+  const error = i18n.translate('visDefaultEditor.options.rangeErrorMessage', {
     defaultMessage: 'Values must be on or between {min} and {max}',
     values: { min, max },
   });

src/plugins/vis_default_editor/public/index.ts

@@ -19,6 +19,7 @@
 
 export { DefaultEditorController } from './default_editor_controller';
 export { useValidation } from './components/controls/utils';
+export * from './components/options';
 export { RangesParamEditor, RangeValues } from './components/controls/ranges';
 export * from './editor_size';
 export * from './vis_options_props';

src/plugins/vis_type_markdown/kibana.json

@@ -4,5 +4,5 @@
     "ui": true,
     "server": true,
     "requiredPlugins": ["expressions", "visualizations"],
-    "requiredBundles": ["kibanaReact", "charts", "visualizations", "expressions", "visDefaultEditor"]
+    "requiredBundles": ["kibanaReact", "visualizations", "expressions", "visDefaultEditor"]
 }

src/plugins/vis_type_markdown/public/settings_options.tsx

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

src/plugins/vis_type_metric/public/components/metric_vis_options.tsx

@@ -29,16 +29,16 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import {
-  ColorMode,
   ColorRanges,
-  ColorSchemaOptions,
+  SetColorRangeValue,
+  VisOptionsProps,
   SwitchOption,
-  RangeOption,
   SetColorSchemaOptionsValue,
-  SetColorRangeValue,
-} from '../../../charts/public';
+  ColorSchemaOptions,
+  RangeOption,
+} from '../../../vis_default_editor/public';
+import { ColorMode } from '../../../charts/public';
 import { MetricVisParam, VisParams } from '../types';
 
 function MetricVisOptions({

src/plugins/vis_type_table/kibana.json

@@ -13,7 +13,6 @@
     "kibanaUtils",
     "kibanaReact",
     "share",
-    "charts",
     "visDefaultEditor"
   ],
   "optionalPlugins": ["usageCollection"]

src/plugins/vis_type_table/public/components/table_vis_options.tsx

@@ -23,9 +23,13 @@ import { EuiIconTip, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { search } from '../../../data/public';
-import { SwitchOption, SelectOption, NumberInputOption } from '../../../charts/public';
+import {
+  SwitchOption,
+  SelectOption,
+  NumberInputOption,
+  VisOptionsProps,
+} from '../../../vis_default_editor/public';
 import { TableVisParams } from '../types';
 import { totalAggregations } from './utils';
 

src/plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx

@@ -20,9 +20,8 @@
 import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { VisOptionsProps } from '../../../vis_default_editor/public';
+import { VisOptionsProps, SelectOption, SwitchOption } from '../../../vis_default_editor/public';
 import { ValidatedDualRange } from '../../../kibana_react/public';
-import { SelectOption, SwitchOption } from '../../../charts/public';
 import { TagCloudVisParams } from '../types';
 
 function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps<TagCloudVisParams>) {

src/plugins/vis_type_vislib/public/editor/components/gauge/labels_panel.tsx

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

src/plugins/vis_type_vislib/public/editor/components/gauge/ranges_panel.tsx

@@ -21,15 +21,13 @@ import React, { useCallback } from 'react';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-
 import {
   ColorRanges,
-  ColorSchemaOptions,
-  ColorSchemaParams,
   SetColorRangeValue,
   SwitchOption,
-  ColorSchemas,
-} from '../../../../../charts/public';
+  ColorSchemaOptions,
+} from '../../../../../vis_default_editor/public';
+import { ColorSchemaParams, ColorSchemas } from '../../../../../charts/public';
 import { GaugeOptionsInternalProps } from '../gauge';
 import { Gauge } from '../../../gauge';
 

src/plugins/vis_type_vislib/public/editor/components/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 '../../../../../charts/public';
+import { SelectOption } from '../../../../../vis_default_editor/public';
 import { GaugeOptionsInternalProps } from '../gauge';
 import { AggGroupNames } from '../../../../../data/public';
 

src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx

@@ -23,18 +23,18 @@ 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 { ValueAxis } from '../../../../../vis_type_xy/public';
 import {
+  VisOptionsProps,
   BasicOptions,
-  ColorRanges,
-  ColorSchemaOptions,
-  NumberInputOption,
   SelectOption,
   SwitchOption,
-  SetColorSchemaOptionsValue,
+  ColorRanges,
   SetColorRangeValue,
-} from '../../../../../charts/public';
+  SetColorSchemaOptionsValue,
+  ColorSchemaOptions,
+  NumberInputOption,
+} from '../../../../../vis_default_editor/public';
 
 import { HeatmapVisParams } from '../../../heatmap';
 import { LabelsPanel } from './labels_panel';

src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx

@@ -23,8 +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 { SwitchOption } from '../../../../../charts/public';
+import { VisOptionsProps, SwitchOption } from '../../../../../vis_default_editor/public';
 import { ValueAxis } from '../../../../../vis_type_xy/public';
 
 import { HeatmapVisParams } from '../../../heatmap';

src/plugins/vis_type_vislib/public/editor/components/pie.tsx

@@ -22,8 +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 { BasicOptions, SwitchOption } from '../../../../charts/public';
+import { BasicOptions, SwitchOption, VisOptionsProps } from '../../../../vis_default_editor/public';
 import { TruncateLabelsOption } from '../../../../vis_type_xy/public';
 
 import { PieVisParams } from '../../pie';

src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx

@@ -24,8 +24,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { Position } from '@elastic/charts';
 
-import { SelectOption, SwitchOption } from '../../../../../../charts/public';
-import { VisOptionsProps } from '../../../../../../vis_default_editor/public';
+import {
+  SelectOption,
+  SwitchOption,
+  VisOptionsProps,
+} from '../../../../../../vis_default_editor/public';
 
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { CategoryAxis } from '../../../../types';