[Vis: Default editor] EUIficate tag cloud options tab

package.json

@@ -196,7 +196,6 @@
     "moment-timezone": "^0.5.14",
     "mustache": "2.3.2",
     "ngreact": "0.5.1",
-    "no-ui-slider": "1.2.0",
     "node-fetch": "1.7.3",
     "opn": "^5.4.0",
     "oppsy": "^2.0.0",

src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js

@@ -50,19 +50,32 @@ export default function HistogramVisType(Private) {
     },
     editorConfig: {
       collections: {
-        legendPositions: [{
-          value: 'left',
-          text: 'left',
-        }, {
-          value: 'right',
-          text: 'right',
-        }, {
-          value: 'top',
-          text: 'top',
-        }, {
-          value: 'bottom',
-          text: 'bottom',
-        }],
+        legendPositions: [
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.leftText', {
+              defaultMessage: 'Left'
+            }),
+            value: 'left'
+          },
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.rightText', {
+              defaultMessage: 'Right'
+            }),
+            value: 'right'
+          },
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.topText', {
+              defaultMessage: 'Top'
+            }),
+            value: 'top'
+          },
+          {
+            text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.bottomText', {
+              defaultMessage: 'Bottom'
+            }),
+            value: 'bottom'
+          },
+        ],
       },
       optionsTemplate: PieOptions,
       schemas: new Schemas([

src/legacy/core_plugins/tagcloud/public/_tag_cloud.scss

@@ -12,15 +12,3 @@
   text-align: center;
   font-weight: $euiFontWeightBold;
 }
-
-.tgcFontSizeSlider {
-  margin: $euiSize;
-
-  .noUi-connect {
-    background: $euiColorLightShade;
-  }
-}
-
-.tgcFontSizeSlider__input {
-  width: $euiSizeXXL * 2;
-}

src/legacy/core_plugins/tagcloud/public/tag_cloud_vis.js

@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import './tag_cloud_vis_params';
 import { i18n } from '@kbn/i18n';
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
 import { TagCloudVisualization } from './tag_cloud_visualization';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import { Status } from 'ui/vis/update_status';
+import { TagCloudOptions } from './tag_cloud_vis_options';
 
 VisTypesRegistryProvider.register(function (Private) {
 
@@ -49,10 +49,48 @@ VisTypesRegistryProvider.register(function (Private) {
     visualization: TagCloudVisualization,
     editorConfig: {
       collections: {
-        scales: ['linear', 'log', 'square root'],
-        orientations: ['single', 'right angled', 'multiple'],
+        scales: [
+          {
+            text: i18n.translate('tagCloud.vis.editorConfig.scales.linearText', {
+              defaultMessage: 'Linear'
+            }),
+            value: 'linear'
+          },
+          {
+            text: i18n.translate('tagCloud.vis.editorConfig.scales.logText', {
+              defaultMessage: 'Log'
+            }),
+            value: 'log'
+          },
+          {
+            text: i18n.translate('tagCloud.vis.editorConfig.scales.squareRootText', {
+              defaultMessage: 'Square root'
+            }),
+            value: 'square root'
+          },
+        ],
+        orientations: [
+          {
+            text: i18n.translate('tagCloud.vis.editorConfig.orientations.singleText', {
+              defaultMessage: 'Single'
+            }),
+            value: 'single'
+          },
+          {
+            text: i18n.translate('tagCloud.vis.editorConfig.orientations.rightAngledText', {
+              defaultMessage: 'Right angled'
+            }),
+            value: 'right angled'
+          },
+          {
+            text: i18n.translate('tagCloud.vis.editorConfig.orientations.multipleText', {
+              defaultMessage: 'Multiple'
+            }),
+            value: 'multiple'
+          },
+        ],
       },
-      optionsTemplate: '<tagcloud-vis-params></tagcloud-vis-params>',
+      optionsTemplate: TagCloudOptions,
       schemas: new Schemas([
         {
           group: 'metrics',

src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_options.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 { EuiPanel } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { ValidatedDualRange } from 'ui/validated_range';
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import { SelectOption } from '../../kbn_vislib_vis_types/public/controls/select';
+import { SwitchOption } from '../../kbn_vislib_vis_types/public/controls/switch';
+
+function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps) {
+  const handleFontSizeChange = ([minFontSize, maxFontSize]: string[]) => {
+    setValue('minFontSize', minFontSize);
+    setValue('maxFontSize', maxFontSize);
+  };
+  const fontSizeRangeLabel = i18n.translate('tagCloud.visParams.fontSizeLabel', {
+    defaultMessage: 'Font size range (pixels)',
+  });
+
+  return (
+    <EuiPanel paddingSize="s">
+      <SelectOption
+        label={i18n.translate('tagCloud.visParams.textScaleLabel', {
+          defaultMessage: 'Text scale',
+        })}
+        options={vis.type.editorConfig.collections.scales}
+        paramName="scale"
+        value={stateParams.scale}
+        setValue={setValue}
+      />
+
+      <SelectOption
+        label={i18n.translate('tagCloud.visParams.orientationsLabel', {
+          defaultMessage: 'Orientations',
+        })}
+        options={vis.type.editorConfig.collections.orientations}
+        paramName="orientation"
+        value={stateParams.orientation}
+        setValue={setValue}
+      />
+
+      <ValidatedDualRange
+        allowEmptyRange={false}
+        aria-label={fontSizeRangeLabel}
+        compressed={true}
+        fullWidth={true}
+        label={fontSizeRangeLabel}
+        max={100}
+        min={1}
+        value={[stateParams.minFontSize, stateParams.maxFontSize]}
+        onChange={handleFontSizeChange}
+        showInput
+      />
+
+      <SwitchOption
+        label={i18n.translate('tagCloud.visParams.showLabelToggleLabel', {
+          defaultMessage: 'Show label',
+        })}
+        paramName="showLabel"
+        value={stateParams.showLabel}
+        setValue={setValue}
+      />
+    </EuiPanel>
+  );
+}
+
+export { TagCloudOptions };

src/legacy/ui/public/validated_range/index.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { EuiRangeProps } from '@elastic/eui';
+
+export class ValidatedDualRange<EuiRangeProps> extends React.Component<EuiRangeProps> {
+  allowEmptyRange?: boolean;
+}