[Vis: Default editor] EUIficate other bucket control (elastic#34945) (e…

…lastic#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"`,
+      }),
+      type: 'string',
+      displayName: i18n.translate('common.ui.aggTypes.otherBucket.labelForMissingValuesLabel', {
+        defaultMessage: 'Label for missing values',
       }),
-      write: _.noop
+      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.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() {