Elasticsearch: Replace term size dropdown with text input (#99718)

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.test.tsx

@@ -1,12 +1,15 @@
-import { screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import selectEvent from 'react-select-event';
 
+import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { renderWithESProvider } from '../../../../test-helpers/render';
 import { ElasticsearchQuery, Terms, Average, Derivative, TopMetrics } from '../../../../types';
 import { describeMetric } from '../../../../utils';
 
 import { TermsSettingsEditor } from './TermsSettingsEditor';
 
+jest.mock('../../../../hooks/useStatelessReducer');
+
 describe('Terms Settings Editor', () => {
   it('Pipeline aggregations should not be in "order by" options', () => {
     const termsAgg: Terms = {
@@ -37,4 +40,38 @@ describe('Terms Settings Editor', () => {
     // All other metric aggregations can be used in order by
     expect(screen.getByText(describeMetric(avg))).toBeInTheDocument();
   });
+
+  describe('Handling change', () => {
+    let dispatch = jest.fn();
+    beforeEach(() => {
+      dispatch.mockClear();
+      jest.mocked(useDispatch).mockReturnValue(dispatch);
+    });
+
+    test('updating size', async () => {
+      const termsAgg: Terms = {
+        id: '1',
+        type: 'terms',
+      };
+      const avg: Average = { id: '2', type: 'avg', field: '@value' };
+      const derivative: Derivative = { id: '3', field: avg.id, type: 'derivative' };
+      const topMetrics: TopMetrics = { id: '4', type: 'top_metrics' };
+      const query: ElasticsearchQuery = {
+        refId: 'A',
+        query: '',
+        bucketAggs: [termsAgg],
+        metrics: [avg, derivative, topMetrics],
+      };
+
+      renderWithESProvider(<TermsSettingsEditor bucketAgg={termsAgg} />, { providerProps: { query } });
+
+      const sizeInput = screen.getByLabelText('Size');
+      fireEvent.change(sizeInput, { target: { value: '30' } });
+      fireEvent.blur(sizeInput);
+
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch.mock.calls[0][0].payload.settingName).toBe('size');
+      expect(dispatch.mock.calls[0][0].payload.newValue).toBe('30');
+    });
+  });
 });

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx

@@ -7,11 +7,10 @@ import { InlineField, Select, Input } from '@grafana/ui';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { MetricAggregation, Percentiles, ExtendedStatMetaType, ExtendedStats, Terms } from '../../../../types';
 import { describeMetric } from '../../../../utils';
-import { useCreatableSelectPersistedBehaviour } from '../../../hooks/useCreatableSelectPersistedBehaviour';
 import { useQuery } from '../../ElasticsearchQueryContext';
 import { isPipelineAggregation } from '../../MetricAggregationsEditor/aggregations';
 import { changeBucketAggregationSetting } from '../state/actions';
-import { bucketAggregationConfig, orderByOptions, orderOptions, sizeOptions } from '../utils';
+import { bucketAggregationConfig, orderByOptions, orderOptions } from '../utils';
 
 import { inlineFieldProps } from '.';
 
@@ -23,6 +22,12 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
   const { metrics } = useQuery();
   const orderBy = createOrderByOptions(metrics);
   const { current: baseId } = useRef(uniqueId('es-terms-'));
+  let size = bucketAgg.settings?.size || bucketAggregationConfig.terms.defaultSettings?.size;
+  if (!size || size === '') {
+    size = '10';
+  } else if (size === '0') {
+    size = '500';
+  }
 
   const dispatch = useDispatch();
 
@@ -40,16 +45,12 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
       </InlineField>
 
       <InlineField label="Size" {...inlineFieldProps}>
-        <Select
-          inputId={`${baseId}-size`}
-          // TODO: isValidNewOption should only allow numbers & template variables
-          {...useCreatableSelectPersistedBehaviour({
-            options: sizeOptions,
-            value: bucketAgg.settings?.size || bucketAggregationConfig.terms.defaultSettings?.size,
-            onChange({ value }) {
-              dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'size', newValue: value }));
-            },
-          })}
+        <Input
+          id={`${baseId}-size`}
+          onBlur={(e) =>
+            dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'size', newValue: e.target.value }))
+          }
+          defaultValue={size}
         />
       </InlineField>
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/utils.ts

@@ -64,14 +64,3 @@ export const orderOptions: Array<SelectableValue<string>> = [
   { label: 'Top', value: 'desc' },
   { label: 'Bottom', value: 'asc' },
 ];
-
-export const sizeOptions = [
-  { label: 'No limit', value: '0' },
-  { label: '1', value: '1' },
-  { label: '2', value: '2' },
-  { label: '3', value: '3' },
-  { label: '5', value: '5' },
-  { label: '10', value: '10' },
-  { label: '15', value: '15' },
-  { label: '20', value: '20' },
-];