[Vis: Default editor] EUIficate pie chart options tab (#41901)

* EUIficate pie chart options tab

* Fix tests

* Size titles down to xs

* Use FormattedMessage

src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js

@@ -42,7 +42,7 @@ describe('OptionsTab', () => {
   it('should renders OptionsTab', () => {
     const component = shallow(<OptionsTab {...props} />);
 
-    expect(component).toMatchSnapshot(); // eslint-disable-line
+    expect(component).toMatchSnapshot();
   });
 
   it('should update updateFiltersOnChange', () => {

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

@@ -0,0 +1,51 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import { SwitchOption } from './switch';
+import { SelectOption } from './select';
+
+function BasicOptions({ stateParams, setValue, vis }: VisOptionsProps) {
+  return (
+    <>
+      <SelectOption
+        label={i18n.translate('kbnVislibVisTypes.controls.vislibBasicOptions.legendPositionLabel', {
+          defaultMessage: 'Legend position',
+        })}
+        options={vis.type.editorConfig.collections.legendPositions}
+        paramName="legendPosition"
+        value={stateParams.legendPosition}
+        setValue={setValue}
+      />
+      <SwitchOption
+        label={i18n.translate('kbnVislibVisTypes.controls.vislibBasicOptions.showTooltipLabel', {
+          defaultMessage: 'Show tooltip',
+        })}
+        paramName="addTooltip"
+        value={stateParams.addTooltip}
+        setValue={setValue}
+      />
+    </>
+  );
+}
+
+export { BasicOptions };

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

@@ -0,0 +1,45 @@
+/*
+ * 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, EuiSelect } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+
+interface SelectOptionProps {
+  label: string;
+  options: Array<{ value: string; text: string }>;
+  paramName: string;
+  value: string;
+  setValue: VisOptionsSetValue;
+}
+
+function SelectOption({ label, options, paramName, value, setValue }: SelectOptionProps) {
+  return (
+    <EuiFormRow label={label} fullWidth={true} compressed>
+      <EuiSelect
+        options={options}
+        value={value}
+        onChange={ev => setValue(paramName, ev.target.value)}
+        fullWidth={true}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { SelectOption };

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

@@ -0,0 +1,59 @@
+/*
+ * 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, EuiSwitch, EuiToolTip } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+
+interface SwitchOptionProps {
+  dataTestSubj?: string;
+  label?: string;
+  tooltip?: string;
+  disabled?: boolean;
+  value?: boolean;
+  paramName: string;
+  setValue: VisOptionsSetValue;
+}
+
+function SwitchOption({
+  dataTestSubj,
+  tooltip,
+  label,
+  disabled,
+  paramName,
+  value = false,
+  setValue,
+}: SwitchOptionProps) {
+  return (
+    <EuiFormRow fullWidth={true} compressed>
+      <EuiToolTip content={tooltip} delay="long" position="right">
+        <EuiSwitch
+          label={label}
+          checked={value}
+          disabled={disabled}
+          data-test-subj={dataTestSubj}
+          onChange={ev => setValue(paramName, ev.target.checked)}
+        />
+      </EuiToolTip>
+    </EuiFormRow>
+  );
+}
+
+export { SwitchOption };

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

@@ -0,0 +1,47 @@
+/*
+ * 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, { ChangeEvent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+
+interface TruncateLabelsOptionProps {
+  value: number | null;
+  setValue: VisOptionsSetValue;
+}
+
+function TruncateLabelsOption({ value, setValue }: TruncateLabelsOptionProps) {
+  const onChange = (ev: ChangeEvent<HTMLInputElement>) =>
+    setValue('truncate', ev.target.value === '' ? null : parseFloat(ev.target.value));
+
+  return (
+    <EuiFormRow
+      label={i18n.translate('kbnVislibVisTypes.controls.truncateLabel', {
+        defaultMessage: 'Truncate',
+      })}
+      fullWidth={true}
+      compressed
+    >
+      <EuiFieldNumber value={value === null ? '' : value} onChange={onChange} fullWidth={true} />
+    </EuiFormRow>
+  );
+}
+
+export { TruncateLabelsOption };

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html

@@ -4,7 +4,7 @@
       class="visEditorSidebar__formLabel"
       for="visualizeBasicSettingsLegendPosition"
       i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.legendPositionLabel"
-      i18n-default-message="Legend Position"
+      i18n-default-message="Legend position"
     ></label>
     <div class="visEditorSidebar__formControl">
       <select
@@ -22,7 +22,7 @@
       class="visEditorSidebar__formLabel"
       for="showTooltip"
       i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.showTooltipLabel"
-      i18n-default-message="Show Tooltip"
+      i18n-default-message="Show tooltip"
     ></label>
     <div class="visEditorSidebar__formControl">
       <input id="showTooltip" type="checkbox" ng-model="editorState.params.addTooltip">