[Vis: Default editor] EUIficate other bucket control (#34945) (#35781)

* EUIficate other_bucket control

* Filter invalid string params

* Fix functional tests

* Fix browser tests

src/legacy/ui/public/agg_types/buckets/migrate_include_exclude_format.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { AggConfig } from 'ui/vis/agg_config';
+
+export function isStringType(type: AggConfig): boolean;

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

@@ -25,11 +25,12 @@ import { Schemas } from '../../vis/editors/default/schemas';
 import { createFilterTerms } from './create_filter/terms';
 import orderAggTemplate from '../controls/order_agg.html';
 import orderAndSizeTemplate from '../controls/order_and_size.html';
-import otherBucketTemplate from '../controls/other_bucket.html';
 import { i18n } from '@kbn/i18n';
 
 import { getRequestInspectorStats, getResponseInspectorStats } from '../../courier/utils/courier_inspector_utils';
 import { buildOtherBucketAgg, mergeOtherBucketAggResponse, updateMissingBucket } from './_terms_other_bucket_helper';
+import { MissingBucketParamEditor } from '../controls/missing_bucket';
+import { OtherBucketParamEditor } from '../controls/other_bucket';
 import { isStringType, migrateIncludeExcludeFormat } from './migrate_include_exclude_format';
 
 const aggFilter = [
@@ -266,27 +267,40 @@ export const termsBucketAgg = new BucketAggType({
     {
       name: 'otherBucket',
       default: false,
-      editor: otherBucketTemplate,
-      write: _.noop
-    }, {
+      editorComponent: OtherBucketParamEditor,
+      write: _.noop,
+    },
+    {
       name: 'otherBucketLabel',
+      type: 'string',
       default: i18n.translate('common.ui.aggTypes.buckets.terms.otherBucketLabel', {
         defaultMessage: 'Other',
       }),
-      write: _.noop
-    }, {
+      displayName: i18n.translate('common.ui.aggTypes.otherBucket.labelForOtherBucketLabel', {
+        defaultMessage: 'Label for other bucket',
+      }),
+      shouldShow: agg => agg.params.otherBucket,
+      write: _.noop,
+    },
+    {
       name: 'missingBucket',
       default: false,
-      write: _.noop
-    }, {
+      editorComponent: MissingBucketParamEditor,
+      write: _.noop,
+    },
+    {
       name: 'missingBucketLabel',
       default: i18n.translate('common.ui.aggTypes.buckets.terms.missingBucketLabel', {
         defaultMessage: 'Missing',
-        description: `Default label used inside of charts for documents missing a specific field.
-          Can be seen when creating a chart with a terms aggregation and select the "Show missing values"
-          checkbox.`
+        description: `Default label used in charts when documents are missing a field.
+          Visible when you create a chart with a terms aggregation and enable "Show missing values"`,
       }),
-      write: _.noop
+      type: 'string',
+      displayName: i18n.translate('common.ui.aggTypes.otherBucket.labelForMissingValuesLabel', {
+        defaultMessage: 'Label for missing values',
+      }),
+      shouldShow: agg => agg.params.missingBucket,
+      write: _.noop,
     },
     {
       name: 'exclude',

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

@@ -0,0 +1,46 @@
+/*
+ * 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 { AggParamEditorProps } from 'ui/vis/editors/default';
+import { SwitchParamEditor } from './switch';
+import { isStringType } from '../buckets/migrate_include_exclude_format';
+
+function MissingBucketParamEditor(props: AggParamEditorProps<boolean>) {
+  return (
+    <SwitchParamEditor
+      dataTestSubj="missingBucketSwitch"
+      displayLabel={i18n.translate('common.ui.aggTypes.otherBucket.showMissingValuesLabel', {
+        defaultMessage: 'Show missing values',
+      })}
+      displayToolTip={i18n.translate('common.ui.aggTypes.otherBucket.showMissingValuesTooltip', {
+        defaultMessage:
+          'Only works for fields of type "string". When enabled, include documents with missing ' +
+          'values in the search. If this bucket is in the top N, it appears in the chart. ' +
+          'If not in the top N, and you enable "Group other values in separate bucket", ' +
+          'Elasticsearch adds the missing values to the "other" bucket.',
+      })}
+      disabled={!isStringType(props.agg)}
+      {...props}
+    />
+  );
+}
+
+export { MissingBucketParamEditor };

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

@@ -1,74 +0,0 @@
-<div>
-  <div class="visEditorAgg__formRow--flex">
-    <div class="form-group">
-      <label>
-        <input
-          type="checkbox"
-          class="kuiCheckBox"
-          name="showOther"
-          ng-model="agg.params.otherBucket"
-        >
-        <span
-          i18n-id="common.ui.aggTypes.otherBucket.groupValuesLabel"
-          i18n-default-message="Group other values in separate bucket"
-        ></span>
-        <icon-tip
-          position="'right'"
-          content="::'common.ui.aggTypes.otherBucket.groupValuesTooltip' | i18n: { defaultMessage: 'Values not in the top N are grouped in this bucket. To include documents with missing values, enable \'Show missing values\'.' }"
-        ></icon-tip>
-      </label>
-    </div>
-  </div>
-  <div class="visEditorAgg__formRow--flex" ng-if="agg.params.otherBucket">
-    <div class="form-group">
-      <label
-        i18n-id="common.ui.aggTypes.otherBucket.labelForOtherBucketLabel"
-        i18n-default-message="Label for other bucket"
-      ></label>
-      <div>
-        <input
-          type="text"
-          ng-model="agg.params.otherBucketLabel"
-          class="form-control visEditorSidebar__input"
-        >
-      </div>
-    </div>
-  </div>
-  <div class="visEditorAgg__formRow--flex">
-    <div class="form-group">
-      <label>
-        <input
-          type="checkbox"
-          class="kuiCheckBox"
-          name="showMissing"
-          ng-model="agg.params.missingBucket"
-          ng-disabled="agg.params.field.type !== 'string'"
-        >
-        <span
-          i18n-id="common.ui.aggTypes.otherBucket.showMissingValuesLabel"
-          i18n-default-message="Show missing values"
-        ></span>
-        <icon-tip
-          position="'right'"
-          content="::'common.ui.aggTypes.otherBucket.showMissingValuesTooltip' | i18n: { defaultMessage: 'Only works for fields of type \'string\'. When enabled, include documents with missing values in the search. If this bucket is in the top N, it appears in the chart. If not in the top N, and you enable \'Group other values in separate bucket\', Elasticsearch adds the missing values to the \'other\' bucket.' }"
-        ></icon-tip>
-      </label>
-    </div>
-  </div>
-  <div class="visEditorAgg__formRow--flex" ng-show="agg.params.missingBucket">
-    <div class="form-group">
-      <label
-        i18n-id="common.ui.aggTypes.otherBucket.labelForMissingValuesLabel"
-        i18n-default-message="Label for missing values"
-      ></label>
-      <div>
-        <input
-          type="text"
-          ng-model="agg.params.missingBucketLabel"
-          class="form-control visEditorSidebar__input"
-          ng-disabled="agg.params.field.type !== 'string'"
-        >
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -0,0 +1,42 @@
+/*
+ * 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 { AggParamEditorProps } from 'ui/vis/editors/default';
+import { SwitchParamEditor } from './switch';
+
+function OtherBucketParamEditor(props: AggParamEditorProps<boolean>) {
+  return (
+    <SwitchParamEditor
+      dataTestSubj="otherBucketSwitch"
+      displayLabel={i18n.translate('common.ui.aggTypes.otherBucket.groupValuesLabel', {
+        defaultMessage: 'Group other values in separate bucket',
+      })}
+      displayToolTip={i18n.translate('common.ui.aggTypes.otherBucket.groupValuesTooltip', {
+        defaultMessage:
+          'Values not in the top N are grouped in this bucket. ' +
+          "To include documents with missing values, enable 'Show missing values'.",
+      })}
+      {...props}
+    />
+  );
+}
+
+export { OtherBucketParamEditor };

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

@@ -0,0 +1,56 @@
+/*
+ * 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 { EuiSwitch, EuiToolTip, EuiSpacer } from '@elastic/eui';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+
+interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
+  dataTestSubj?: string;
+  displayLabel?: string;
+  displayToolTip?: string;
+  disabled?: boolean;
+}
+
+function SwitchParamEditor({
+  value,
+  setValue,
+  dataTestSubj,
+  displayToolTip,
+  displayLabel,
+  disabled,
+}: SwitchParamEditorProps) {
+  return (
+    <div className="visEditorSidebar__aggParamFormRow">
+      <EuiToolTip content={displayToolTip} delay="long" position="right">
+        <EuiSwitch
+          label={displayLabel}
+          checked={value}
+          disabled={disabled}
+          data-test-subj={dataTestSubj}
+          onChange={ev => setValue(ev.target.checked)}
+        />
+      </EuiToolTip>
+      <EuiSpacer size="s" />
+    </div>
+  );
+}
+
+export { SwitchParamEditor };

test/functional/apps/visualize/_inspector.js

@@ -58,7 +58,7 @@ export default function ({ getService, getPageObjects }) {
           await PageObjects.visualize.selectAggregation('Terms');
           await PageObjects.visualize.selectField('machine.os.raw');
           await PageObjects.visualize.setSize(2);
-          await PageObjects.visualize.toggleOtherBucket();
+          await PageObjects.visualize.toggleOtherBucket(3);
           await PageObjects.visualize.clickGo();
         });
 

test/functional/apps/visualize/_pie_chart.js

@@ -92,8 +92,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.selectAggregation('Terms');
         log.debug('Click field machine.os.raw');
         await PageObjects.visualize.selectField('machine.os.raw');
-        await PageObjects.visualize.toggleOtherBucket();
-        await PageObjects.visualize.toggleMissingBucket();
+        await PageObjects.visualize.toggleOtherBucket(2);
+        await PageObjects.visualize.toggleMissingBucket(2);
         log.debug('clickGo');
         await PageObjects.visualize.clickGo();
         await pieChart.expectPieChartLabels(expectedTableData);
@@ -131,8 +131,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.selectAggregation('Terms');
         log.debug('Click field geo.src');
         await PageObjects.visualize.selectField('geo.src');
-        await PageObjects.visualize.toggleOtherBucket();
-        await PageObjects.visualize.toggleMissingBucket();
+        await PageObjects.visualize.toggleOtherBucket(3);
+        await PageObjects.visualize.toggleMissingBucket(3);
         log.debug('clickGo');
         await PageObjects.visualize.clickGo();
         await pieChart.expectPieChartLabels(expectedTableData);

test/functional/page_objects/visualize_page.js

@@ -615,12 +615,12 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
       await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
-    async toggleOtherBucket() {
-      return await find.clickByCssSelector('vis-editor-agg-params:not(.ng-hide) input[name="showOther"]');
+    async toggleOtherBucket(agg = 2) {
+      return await testSubjects.click(`aggregationEditor${agg} otherBucketSwitch`);
     }
 
-    async toggleMissingBucket() {
-      return await find.clickByCssSelector('vis-editor-agg-params:not(.ng-hide) input[name="showMissing"]');
+    async toggleMissingBucket(agg = 2) {
+      return await testSubjects.click(`aggregationEditor${agg} missingBucketSwitch`);
     }
 
     async isApplyEnabled() {