[Dashboard] [Controls] Allow options list suggestions to be sorted

src/plugins/controls/common/control_group/control_group_panel_diff_system.ts

@@ -8,6 +8,7 @@
 
 import deepEqual from 'fast-deep-equal';
 import { omit, isEqual } from 'lodash';
+import { DEFAULT_SORT } from '../options_list/suggestions_sorting';
 import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from '../options_list/types';
 
 import { ControlPanelState } from './types';
@@ -32,7 +33,9 @@ export const ControlPanelDiffSystems: {
       }
 
       const {
+        sort: sortA,
         exclude: excludeA,
+        hideSort: hideSortA,
         hideExists: hideExistsA,
         hideExclude: hideExcludeA,
         selectedOptions: selectedA,
@@ -42,7 +45,9 @@ export const ControlPanelDiffSystems: {
         ...inputA
       }: Partial<OptionsListEmbeddableInput> = initialInput.explicitInput;
       const {
+        sort: sortB,
         exclude: excludeB,
+        hideSort: hideSortB,
         hideExists: hideExistsB,
         hideExclude: hideExcludeB,
         selectedOptions: selectedB,
@@ -54,11 +59,13 @@ export const ControlPanelDiffSystems: {
 
       return (
         Boolean(excludeA) === Boolean(excludeB) &&
+        Boolean(hideSortA) === Boolean(hideSortB) &&
         Boolean(hideExistsA) === Boolean(hideExistsB) &&
         Boolean(hideExcludeA) === Boolean(hideExcludeB) &&
         Boolean(singleSelectA) === Boolean(singleSelectB) &&
         Boolean(existsSelectedA) === Boolean(existsSelectedB) &&
         Boolean(runPastTimeoutA) === Boolean(runPastTimeoutB) &&
+        deepEqual(sortA ?? DEFAULT_SORT, sortB ?? DEFAULT_SORT) &&
         isEqual(selectedA ?? [], selectedB ?? []) &&
         deepEqual(inputA, inputB)
       );

src/plugins/controls/common/options_list/mocks.tsx

@@ -10,17 +10,20 @@ import { createReduxEmbeddableTools } from '@kbn/presentation-util-plugin/public
 
 import { OptionsListEmbeddable, OptionsListEmbeddableFactory } from '../../public';
 import { OptionsListComponentState, OptionsListReduxState } from '../../public/options_list/types';
-import { optionsListReducers } from '../../public/options_list/options_list_reducers';
+import {
+  getDefaultComponentState,
+  optionsListReducers,
+} from '../../public/options_list/options_list_reducers';
 import { ControlFactory, ControlOutput } from '../../public/types';
 import { OptionsListEmbeddableInput } from './types';
 
 const mockOptionsListComponentState = {
+  ...getDefaultComponentState(),
   field: undefined,
   totalCardinality: 0,
   availableOptions: ['woof', 'bark', 'meow', 'quack', 'moo'],
   invalidSelections: [],
   validSelections: [],
-  searchString: { value: '', valid: true },
 } as OptionsListComponentState;
 
 const mockOptionsListEmbeddableInput = {

src/plugins/controls/common/options_list/suggestions_sorting.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Direction } from '@elastic/eui';
+
+export type OptionsListSortBy = '_count' | '_key';
+
+export const DEFAULT_SORT: SortingType = { by: '_count', direction: 'desc' };
+
+export const sortDirections: Readonly<Direction[]> = ['asc', 'desc'] as const;
+export type SortDirection = typeof sortDirections[number];
+export interface SortingType {
+  by: OptionsListSortBy;
+  direction: SortDirection;
+}
+
+export const getCompatibleSortingTypes = (type?: string): OptionsListSortBy[] => {
+  switch (type) {
+    case 'ip': {
+      return ['_count'];
+    }
+    default: {
+      return ['_count', '_key'];
+    }
+  }
+};

src/plugins/controls/common/options_list/types.ts

@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
-import type { Filter, Query, BoolQuery, TimeRange } from '@kbn/es-query';
 import { FieldSpec, DataView, RuntimeFieldSpec } from '@kbn/data-views-plugin/common';
+import type { Filter, Query, BoolQuery, TimeRange } from '@kbn/es-query';
 
+import { SortingType } from './suggestions_sorting';
 import { DataControlInput } from '../types';
 
 export const OPTIONS_LIST_CONTROL = 'optionsListControl';
@@ -20,6 +21,8 @@ export interface OptionsListEmbeddableInput extends DataControlInput {
   singleSelect?: boolean;
   hideExclude?: boolean;
   hideExists?: boolean;
+  hideSort?: boolean;
+  sort?: SortingType;
   exclude?: boolean;
 }
 
@@ -65,5 +68,6 @@ export interface OptionsListRequestBody {
   textFieldName?: string;
   searchString?: string;
   fieldSpec?: FieldSpec;
+  sort?: SortingType;
   fieldName: string;
 }

src/plugins/controls/public/control_group/editor/control_editor.tsx

@@ -243,34 +243,41 @@ export const ControlEditor = ({
             />
           </EuiFormRow>
           <EuiFormRow label={ControlGroupStrings.manageControl.getWidthInputTitle()}>
-            <EuiButtonGroup
-              color="primary"
-              legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
-              options={CONTROL_WIDTH_OPTIONS}
-              idSelected={currentWidth}
-              onChange={(newWidth: string) => {
-                setCurrentWidth(newWidth as ControlWidth);
-                updateWidth(newWidth as ControlWidth);
-              }}
-            />
-          </EuiFormRow>
-          {updateGrow ? (
-            <EuiFormRow>
-              <EuiSwitch
-                label={ControlGroupStrings.manageControl.getGrowSwitchTitle()}
+            <>
+              <EuiButtonGroup
                 color="primary"
-                checked={currentGrow}
-                onChange={() => {
-                  setCurrentGrow(!currentGrow);
-                  updateGrow(!currentGrow);
+                legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
+                options={CONTROL_WIDTH_OPTIONS}
+                idSelected={currentWidth}
+                onChange={(newWidth: string) => {
+                  setCurrentWidth(newWidth as ControlWidth);
+                  updateWidth(newWidth as ControlWidth);
                 }}
-                data-test-subj="control-editor-grow-switch"
               />
-            </EuiFormRow>
-          ) : null}
+              {updateGrow && (
+                <>
+                  <EuiSpacer size="s" />
+                  <EuiSwitch
+                    label={ControlGroupStrings.manageControl.getGrowSwitchTitle()}
+                    color="primary"
+                    checked={currentGrow}
+                    onChange={() => {
+                      setCurrentGrow(!currentGrow);
+                      updateGrow(!currentGrow);
+                    }}
+                    data-test-subj="control-editor-grow-switch"
+                  />
+                </>
+              )}
+            </>
+          </EuiFormRow>
           {CustomSettings && (factory as IEditableControlFactory).controlEditorOptionsComponent && (
             <EuiFormRow label={ControlGroupStrings.manageControl.getControlSettingsTitle()}>
-              <CustomSettings onChange={onTypeEditorChange} initialInput={embeddable?.getInput()} />
+              <CustomSettings
+                onChange={onTypeEditorChange}
+                initialInput={embeddable?.getInput()}
+                fieldType={fieldRegistry[selectedField].field.type}
+              />
             </EuiFormRow>
           )}
           {removeControl && (

src/plugins/controls/public/options_list/components/options_list.scss

@@ -87,3 +87,11 @@
 .optionsList--filterGroup {
   width: 100%;
 }
+
+.optionsList--hiddenEditorForm {
+  margin-left: $euiSizeXXL + $euiSizeM;
+}
+
+.optionsList--sortPopover {
+  width: $euiSizeXL * 7;
+}