[Vis: Default editor] EUIficate coordinate map (tile map) options tab (…

…#42517) (#42671)

* EUIficate tile_map_vis_options

* Add basic options

* Get rid of vislib_basic_options

* Move wms_options directive to region_map

* Get rid if TileMapVisParams directive

* Update region_map namespaces

* Support of injecting of any dependency

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/range.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 React from 'react';
+import { EuiFormRow, EuiRange } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+
+interface RangeOptionProps {
+  label: string;
+  max: number;
+  min: number;
+  paramName: string;
+  step?: number;
+  value: string | number;
+  setValue: VisOptionsSetValue;
+}
+
+function RangeOption({ label, max, min, step, paramName, value, setValue }: RangeOptionProps) {
+  return (
+    <EuiFormRow label={label} fullWidth={true} compressed>
+      <EuiRange
+        fullWidth
+        showValue
+        max={max}
+        min={min}
+        step={step}
+        value={value}
+        onChange={ev => setValue(paramName, ev.target.value)}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { RangeOption };

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/switch.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
+import { EuiSwitch, EuiToolTip } from '@elastic/eui';
 import { VisOptionsSetValue } from 'ui/vis/editors/default';
 
 interface SwitchOptionProps {
@@ -42,7 +42,7 @@ function SwitchOption({
   setValue,
 }: SwitchOptionProps) {
   return (
-    <EuiFormRow fullWidth={true} compressed>
+    <div className="visEditorSidebar__switchOptionFormRow">
       <EuiToolTip content={tooltip} delay="long" position="right">
         <EuiSwitch
           label={label}
@@ -52,7 +52,7 @@ function SwitchOption({
           onChange={ev => setValue(paramName, ev.target.checked)}
         />
       </EuiToolTip>
-    </EuiFormRow>
+    </div>
   );
 }
 

src/legacy/core_plugins/tile_map/public/shim/tile_map_legacy_module.ts → src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/text_input.tsx

@@ -17,22 +17,30 @@
  * under the License.
  */
 
-import { once } from 'lodash';
-// @ts-ignore
-import { uiModules } from 'ui/modules';
+import React from 'react';
+import { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
 
-import 'ui/vis/map/service_settings';
-import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
+interface TextInputOptionProps {
+  helpText?: React.ReactNode;
+  label?: React.ReactNode;
+  paramName: string;
+  value?: string;
+  setValue: VisOptionsSetValue;
+}
 
-// @ts-ignore
-import { TileMapVisParams } from '../editors/tile_map_vis_params';
-// @ts-ignore
-import { WmsOptions } from '../editors/wms_options';
+function TextInputOption({
+  helpText,
+  label,
+  paramName,
+  value = '',
+  setValue,
+}: TextInputOptionProps) {
+  return (
+    <EuiFormRow helpText={helpText} label={label} fullWidth compressed>
+      <EuiFieldText fullWidth value={value} onChange={ev => setValue(paramName, ev.target.value)} />
+    </EuiFormRow>
+  );
+}
 
-/** @internal */
-export const initTileMapLegacyModule = once((): void => {
-  uiModules
-    .get('kibana/tile_map', ['kibana'])
-    .directive('tileMapVisParams', TileMapVisParams)
-    .directive('wmsOptions', WmsOptions);
-});
+export { TextInputOption };

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.js → src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/with_injected_dependencies.tsx

@@ -17,14 +17,19 @@
  * under the License.
  */
 
-import { uiModules } from 'ui/modules';
-import vislibBasicOptionsTemplate from './vislib_basic_options.html';
-const module = uiModules.get('kibana');
+import React from 'react';
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import { ServiceSettings } from 'ui/vis/map/service_settings';
 
-module.directive('vislibBasicOptions', function () {
-  return {
-    restrict: 'E',
-    template: vislibBasicOptionsTemplate,
-    replace: true
-  };
-});
+export interface InjectedDependencies {
+  serviceSettings: ServiceSettings;
+}
+
+export type ExtendedVisOptionsProps = VisOptionsProps & InjectedDependencies;
+
+const withInjectedDependencies = (
+  Component: React.ComponentType<ExtendedVisOptionsProps>,
+  dependencies: InjectedDependencies
+) => (props: VisOptionsProps) => <Component {...props} {...dependencies} />;
+
+export { withInjectedDependencies };

src/legacy/core_plugins/region_map/public/shim/region_map_legacy_module.ts

@@ -22,16 +22,18 @@ import { once } from 'lodash';
 import { uiModules } from 'ui/modules';
 
 import 'ui/vis/map/service_settings';
-import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
 
 // @ts-ignore
 import { RegionMapVisParams } from '../region_map_vis_params';
+// @ts-ignore
+import { WmsOptions } from '../wms_options';
 
 /** @internal */
 export const initTileMapLegacyModule = once((): void => {
   uiModules
     // TODO: Region Map Plugin uses wmsOptions directive from the kibana/tile_map module.
     // in future this reference should be removed
-    .get('kibana/region_map', ['kibana', 'kibana/tile_map'])
-    .directive('regionMapVisParams', RegionMapVisParams);
+    .get('kibana/region_map', ['kibana'])
+    .directive('regionMapVisParams', RegionMapVisParams)
+    .directive('wmsOptions', WmsOptions);
 });

src/legacy/core_plugins/tile_map/public/editors/wms_options.js → src/legacy/core_plugins/region_map/public/wms_options/index.js

@@ -30,7 +30,7 @@ export function WmsOptions(serviceSettings) {
       collections: '=',
     },
     link: function ($scope) {
-      $scope.wmsLinkText = i18n.translate('tileMap.wmsOptions.wmsLinkText', { defaultMessage: 'here' });
+      $scope.wmsLinkText = i18n.translate('regionMap.wmsOptions.wmsLinkText', { defaultMessage: 'here' });
 
       new Promise((resolve, reject) => {
         serviceSettings

src/legacy/core_plugins/tile_map/public/editors/wms_options.html → src/legacy/core_plugins/region_map/public/wms_options/wms_options.html

@@ -4,8 +4,8 @@
   <div class="visEditorSidebar__section">
     <div class="visEditorSidebar__sectionTitle">
       <div
-        i18n-id="tileMap.wmsOptions.baseLayerSettingsTitle"
-        i18n-default-message="Base Layer Settings"
+        i18n-id="regionMap.wmsOptions.baseLayerSettingsTitle"
+        i18n-default-message="Base layer settings"
       ></div>
     </div>
 
@@ -14,7 +14,7 @@
       <label
         class="visEditorSidebar__formLabel"
         for="tmsLayers"
-        i18n-id="tileMap.wmsOptions.layersLabel"
+        i18n-id="regionMap.wmsOptions.layersLabel"
         i18n-default-message="Layers"
       ></label>
       <div class="visEditorSidebar__formControl">
@@ -31,7 +31,7 @@
       <label
         class="visEditorSidebar__formLabel"
         for="wmsCompliantMapServer"
-        i18n-id="tileMap.wmsOptions.wmsMapServerLabel"
+        i18n-id="regionMap.wmsOptions.wmsMapServerLabel"
         i18n-default-message="WMS map server"
       ></label>
 
@@ -44,7 +44,7 @@
         >
         &nbsp;
         <icon-tip
-          content="::'tileMap.wmsOptions.useWMSCompliantMapTileServerTip' | i18n: {
+          content="::'regionMap.wmsOptions.useWMSCompliantMapTileServerTip' | i18n: {
             defaultMessage: 'Use WMS compliant map tile server. For advanced users only.'
           }"
           position="'right'"
@@ -55,7 +55,7 @@
     <div ng-show="options.enabled">
       <div class="form-group">
         <p
-          i18n-id="tileMap.wmsOptions.wmsDescription"
+          i18n-id="regionMap.wmsOptions.wmsDescription"
           i18n-default-message="WMS is an OGC standard for map image services. For more information, go {wmsLink}."
           i18n-values="{
             html_wmsLink:  '<a href=\'http://www.opengeospatial.org/standards/wms\'>' + wmsLinkText + '</a>'
@@ -64,11 +64,11 @@
 		<br>
         <label>
           <span
-            i18n-id="tileMap.wmsOptions.wmsUrlLabel"
+            i18n-id="regionMap.wmsOptions.wmsUrlLabel"
             i18n-default-message="WMS url*"
           ></span>
           <icon-tip
-            content="::'tileMap.wmsOptions.urlOfWMSWebServiceTip' | i18n: {
+            content="::'regionMap.wmsOptions.urlOfWMSWebServiceTip' | i18n: {
               defaultMessage: 'The URL of the WMS web service'
             }"
             position="'right'"
@@ -82,11 +82,11 @@
       <div class="form-group">
         <label>
           <span
-            i18n-id="tileMap.wmsOptions.wmsLayersLabel"
+            i18n-id="regionMap.wmsOptions.wmsLayersLabel"
             i18n-default-message="WMS layers*"
           ></span>
           <icon-tip
-            content="::'tileMap.wmsOptions.listOfLayersToUseTip' | i18n: {
+            content="::'regionMap.wmsOptions.listOfLayersToUseTip' | i18n: {
               defaultMessage: 'A comma separated list of layers to use'
             }"
             position="'right'"
@@ -101,11 +101,11 @@
       <div class="form-group">
         <label>
           <span
-            i18n-id="tileMap.wmsOptions.wmsVersionLabel"
+            i18n-id="regionMap.wmsOptions.wmsVersionLabel"
             i18n-default-message="WMS version*"
           ></span>
           <icon-tip
-            content="::'tileMap.wmsOptions.versionOfWMSserverSupportsTip' | i18n: {
+            content="::'regionMap.wmsOptions.versionOfWMSserverSupportsTip' | i18n: {
               defaultMessage: 'The version of WMS the server supports'
             }"
             position="'right'"
@@ -119,11 +119,11 @@
       <div class="form-group">
         <label>
           <span
-            i18n-id="tileMap.wmsOptions.wmsFormatLabel"
+            i18n-id="regionMap.wmsOptions.wmsFormatLabel"
             i18n-default-message="WMS format*"
           ></span>
           <icon-tip
-            content="::'tileMap.wmsOptions.imageFormatToUseTip' | i18n: {
+            content="::'regionMap.wmsOptions.imageFormatToUseTip' | i18n: {
               defaultMessage: 'Usually image/png or image/jpeg. Use png if the server will return transparent layers.'
             }"
             position="'right'"
@@ -137,11 +137,11 @@
       <div class="form-group">
         <label>
           <span
-            i18n-id="tileMap.wmsOptions.wmsAttributionLabel"
+            i18n-id="regionMap.wmsOptions.wmsAttributionLabel"
             i18n-default-message="WMS attribution"
           ></span>
           <icon-tip
-            content="::'tileMap.wmsOptions.attributionStringTip' | i18n: {
+            content="::'regionMap.wmsOptions.attributionStringTip' | i18n: {
               defaultMessage: 'Attribution string for the lower right corner'
             }"
             position="'right'"
@@ -155,11 +155,11 @@
       <div class="form-group">
         <label>
           <span
-            i18n-id="tileMap.wmsOptions.wmsStylesLabel"
+            i18n-id="regionMap.wmsOptions.wmsStylesLabel"
             i18n-default-message="WMS styles*"
           ></span>
           <icon-tip
-            content="::'tileMap.wmsOptions.wmsServerSupportedStylesListTip' | i18n: {
+            content="::'regionMap.wmsOptions.wmsServerSupportedStylesListTip' | i18n: {
               defaultMessage: 'A comma separated list of WMS server supported styles to use. Blank in most cases.'
             }"
             position="'right'"
@@ -171,7 +171,7 @@
       </div>
 
       <p
-        i18n-id="tileMap.wmsOptions.mapLoadFailDescription"
+        i18n-id="regionMap.wmsOptions.mapLoadFailDescription"
         i18n-default-message="* if this parameter is incorrect, maps will fail to load."
       ></p>