[Vis: Default editor] EUIficate min doc count control (#34700)

* EUIficate min doc count control

* Add a common class name

* Move tooltip to the right

src/legacy/ui/public/agg_types/buckets/histogram.js

@@ -26,7 +26,7 @@ import chrome from '../../chrome';
 import { BucketAggType } from './_bucket_agg_type';
 import { createFilterHistogram } from './create_filter/histogram';
 import intervalTemplate from '../controls/number_interval.html';
-import minDocCountTemplate from '../controls/min_doc_count.html';
+import { MinDocCountParamEditor } from '../controls/min_doc_count';
 import extendedBoundsTemplate from '../controls/extended_bounds.html';
 import { i18n } from '@kbn/i18n';
 
@@ -148,8 +148,8 @@ export const histogramBucketAgg = new BucketAggType({
 
     {
       name: 'min_doc_count',
-      default: null,
-      editor: minDocCountTemplate,
+      default: false,
+      editorComponent: MinDocCountParamEditor,
       write: function (aggConfig, output) {
         if (aggConfig.params.min_doc_count) {
           output.params.min_doc_count = 0;

src/legacy/ui/public/agg_types/controls/drop_partials.tsx

@@ -46,7 +46,7 @@ function DropPartialsParamEditor({ agg, aggParam, value, setValue }: AggParamEdi
 
   return (
     <>
-      <EuiToolTip content={content} delay="long">
+      <EuiToolTip content={content} delay="long" position="right">
         <EuiSwitch
           label={label}
           checked={value}

src/legacy/ui/public/agg_types/controls/min_doc_count.html

@@ -1,17 +0,0 @@
-<div class="checkbox">
-  <label>
-    <input
-      ng-model="agg.params.min_doc_count"
-      type="checkbox"
-    >
-    <span
-      i18n-id="common.ui.aggTypes.showEmptyBucketsLabel"
-      i18n-default-message="Show empty buckets"
-    ></span>
-    &nbsp;
-    <icon-tip
-      position="'right'"
-      content="::'common.ui.aggTypes.showEmptyBucketsTooltip' | i18n: { defaultMessage: 'Show all buckets, not only the buckets with results' }"
-    ></icon-tip>
-  </label>
-</div>

src/legacy/ui/public/agg_types/controls/min_doc_count.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 { EuiSpacer, EuiSwitch, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+
+function MinDocCountParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+  const label = i18n.translate('common.ui.aggTypes.showEmptyBucketsLabel', {
+    defaultMessage: 'Show empty buckets',
+  });
+
+  const content = i18n.translate('common.ui.aggTypes.showEmptyBucketsTooltip', {
+    defaultMessage: 'Show all buckets, not only the buckets with results',
+  });
+
+  return (
+    <div className="visEditorSidebar__aggParamFormRow">
+      <EuiToolTip content={content} delay="long" position="right">
+        <EuiSwitch label={label} checked={value} onChange={ev => setValue(ev.target.checked)} />
+      </EuiToolTip>
+      <EuiSpacer size="s" />
+    </div>
+  );
+}
+
+export { MinDocCountParamEditor };