[Controls] Allow wildcard searching in options list

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

@@ -40,6 +40,7 @@ export const ControlPanelDiffSystems: {
         hideExclude: hideExcludeA,
         selectedOptions: selectedA,
         singleSelect: singleSelectA,
+        searchTechnique: searchTechniqueA,
         existsSelected: existsSelectedA,
         runPastTimeout: runPastTimeoutA,
         ...inputA
@@ -52,6 +53,7 @@ export const ControlPanelDiffSystems: {
         hideExclude: hideExcludeB,
         selectedOptions: selectedB,
         singleSelect: singleSelectB,
+        searchTechnique: searchTechniqueB,
         existsSelected: existsSelectedB,
         runPastTimeout: runPastTimeoutB,
         ...inputB
@@ -65,6 +67,7 @@ export const ControlPanelDiffSystems: {
         Boolean(singleSelectA) === Boolean(singleSelectB) &&
         Boolean(existsSelectedA) === Boolean(existsSelectedB) &&
         Boolean(runPastTimeoutA) === Boolean(runPastTimeoutB) &&
+        isEqual(searchTechniqueA ?? 'prefix', searchTechniqueB ?? 'prefix') &&
         deepEqual(sortA ?? OPTIONS_LIST_DEFAULT_SORT, sortB ?? OPTIONS_LIST_DEFAULT_SORT) &&
         isEqual(selectedA ?? [], selectedB ?? []) &&
         deepEqual(inputA, inputB)

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

@@ -6,8 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { getDefaultControlGroupInput } from '..';
+import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common';
 import { ControlGroupInput } from './types';
+import { getDefaultControlGroupInput } from '..';
+import { ControlGroupContainerFactory } from '../../public';
 
 export const mockControlGroupInput = (partial?: Partial<ControlGroupInput>): ControlGroupInput => ({
   id: 'mocked_control_group',
@@ -45,3 +47,16 @@ export const mockControlGroupInput = (partial?: Partial<ControlGroupInput>): Con
   },
   ...(partial ?? {}),
 });
+
+export const mockControlGroupContainer = async (explicitInput?: Partial<ControlGroupInput>) => {
+  const controlGroupFactoryStub = new ControlGroupContainerFactory(
+    {} as unknown as EmbeddablePersistableStateService
+  );
+  const controlGroupContainer = await controlGroupFactoryStub.create({
+    id: 'mocked-control-group',
+    ...getDefaultControlGroupInput(),
+    ...explicitInput,
+  });
+
+  return controlGroupContainer;
+};

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

@@ -7,7 +7,7 @@
  */
 
 import { OptionsListEmbeddable, OptionsListEmbeddableFactory } from '../../public';
-import { OptionsListComponentState, OptionsListReduxState } from '../../public/options_list/types';
+import { OptionsListComponentState } from '../../public/options_list/types';
 import { ControlFactory, ControlOutput } from '../../public/types';
 import { OptionsListEmbeddableInput } from './types';
 
@@ -44,7 +44,10 @@ const mockOptionsListOutput = {
   loading: false,
 } as ControlOutput;
 
-export const mockOptionsListEmbeddable = async (partialState?: Partial<OptionsListReduxState>) => {
+export const mockOptionsListEmbeddable = async (partialState?: {
+  explicitInput?: Partial<OptionsListEmbeddableInput>;
+  componentState?: Partial<OptionsListComponentState>;
+}) => {
   const optionsListFactoryStub = new OptionsListEmbeddableFactory();
   const optionsListControlFactory = optionsListFactoryStub as unknown as ControlFactory;
   optionsListControlFactory.getDefaultInput = () => ({});

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

@@ -14,7 +14,10 @@ import type { DataControlInput } from '../types';
 
 export const OPTIONS_LIST_CONTROL = 'optionsListControl';
 
+export type OptionsListSearchTechnique = 'prefix' | 'wildcard';
+
 export interface OptionsListEmbeddableInput extends DataControlInput {
+  searchTechnique?: OptionsListSearchTechnique;
   sort?: OptionsListSortingType;
   selectedOptions?: string[];
   existsSelected?: boolean;
@@ -23,9 +26,9 @@ export interface OptionsListEmbeddableInput extends DataControlInput {
   hideActionBar?: boolean;
   hideExclude?: boolean;
   hideExists?: boolean;
+  placeholder?: string;
   hideSort?: boolean;
   exclude?: boolean;
-  placeholder?: string;
 }
 
 export type OptionsListSuggestions = Array<{ value: string; docCount?: number }>;
@@ -61,6 +64,7 @@ export type OptionsListRequest = Omit<
   OptionsListRequestBody,
   'filters' | 'fieldName' | 'fieldSpec' | 'textFieldName'
 > & {
+  searchTechnique?: OptionsListSearchTechnique;
   allowExpensiveQueries: boolean;
   timeRange?: TimeRange;
   runPastTimeout?: boolean;
@@ -75,6 +79,7 @@ export type OptionsListRequest = Omit<
  */
 export interface OptionsListRequestBody {
   runtimeFieldMap?: Record<string, RuntimeFieldSpec>;
+  searchTechnique?: OptionsListSearchTechnique;
   allowExpensiveQueries: boolean;
   sort?: OptionsListSortingType;
   filters?: Array<{ bool: BoolQuery }>;

src/plugins/controls/public/control_group/actions/edit_control_action.tsx

@@ -115,8 +115,6 @@ export class EditControlAction implements Action<EditControlActionContext> {
           flyout.close();
         },
         ownFocus: true,
-        // @ts-ignore - TODO: Remove this once https://github.com/elastic/eui/pull/6645 lands in Kibana
-        focusTrapProps: { scrollLock: true },
       }
     );
     setFlyoutRef(flyoutInstance);

src/plugins/controls/public/control_group/actions/edit_control_flyout.tsx

@@ -7,11 +7,16 @@
  */
 
 import { isEqual } from 'lodash';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { EmbeddableFactoryNotFoundError } from '@kbn/embeddable-plugin/public';
 
-import { DataControlInput, ControlEmbeddable, IEditableControlFactory } from '../../types';
+import {
+  DataControlInput,
+  ControlEmbeddable,
+  IEditableControlFactory,
+  DataControlEditorChanges,
+} from '../../types';
 import { pluginServices } from '../../services';
 import { ControlGroupStrings } from '../control_group_strings';
 import { useControlGroupContainer } from '../embeddable/control_group_container';
@@ -38,18 +43,14 @@ export const EditControlFlyout = ({
   const panels = controlGroup.select((state) => state.explicitInput.panels);
   const panel = panels[embeddable.id];
 
-  const [currentGrow, setCurrentGrow] = useState(panel.grow);
-  const [currentWidth, setCurrentWidth] = useState(panel.width);
-  const [inputToReturn, setInputToReturn] = useState<Partial<DataControlInput>>({});
-
-  const onCancel = () => {
+  const onCancel = (changes: DataControlEditorChanges) => {
     if (
       isEqual(panel.explicitInput, {
         ...panel.explicitInput,
-        ...inputToReturn,
+        ...changes.input,
       }) &&
-      currentGrow === panel.grow &&
-      currentWidth === panel.width
+      changes.grow === panel.grow &&
+      changes.width === panel.width
     ) {
       closeFlyout();
       return;
@@ -66,22 +67,28 @@ export const EditControlFlyout = ({
     });
   };
 
-  const onSave = async (type?: string) => {
+  const onSave = async (changes: DataControlEditorChanges, type?: string) => {
     if (!type) {
       closeFlyout();
       return;
     }
-
     const factory = getControlFactory(type) as IEditableControlFactory;
     if (!factory) throw new EmbeddableFactoryNotFoundError(type);
+    let inputToReturn = changes.input;
     if (factory.presaveTransformFunction) {
-      setInputToReturn(factory.presaveTransformFunction(inputToReturn, embeddable));
+      inputToReturn = factory.presaveTransformFunction(inputToReturn, embeddable);
     }
 
-    if (currentWidth !== panel.width)
-      controlGroup.dispatch.setControlWidth({ width: currentWidth, embeddableId: embeddable.id });
-    if (currentGrow !== panel.grow)
-      controlGroup.dispatch.setControlGrow({ grow: currentGrow, embeddableId: embeddable.id });
+    if (changes.width && changes.width !== panel.width)
+      controlGroup.dispatch.setControlWidth({
+        width: changes.width,
+        embeddableId: embeddable.id,
+      });
+    if (changes.grow && changes.grow !== panel.grow)
+      controlGroup.dispatch.setControlGrow({
+        grow: changes.grow,
+        embeddableId: embeddable.id,
+      });
 
     closeFlyout();
     await controlGroup.replaceEmbeddable(embeddable.id, inputToReturn, type);
@@ -93,16 +100,9 @@ export const EditControlFlyout = ({
       width={panel.width}
       grow={panel.grow}
       embeddable={embeddable}
-      title={embeddable.getTitle()}
-      onCancel={() => onCancel()}
-      updateTitle={(newTitle) => (inputToReturn.title = newTitle)}
+      onCancel={onCancel}
       setLastUsedDataViewId={(lastUsed) => controlGroup.setLastUsedDataViewId(lastUsed)}
-      updateWidth={(newWidth) => setCurrentWidth(newWidth)}
-      updateGrow={(newGrow) => setCurrentGrow(newGrow)}
-      onTypeEditorChange={(partialInput) => {
-        setInputToReturn({ ...inputToReturn, ...partialInput });
-      }}
-      onSave={(type) => onSave(type)}
+      onSave={onSave}
       removeControl={() => {
         closeFlyout();
         removeControl();

src/plugins/controls/public/control_group/control_group_strings.ts

@@ -41,30 +41,73 @@ export const ControlGroupStrings = {
       i18n.translate('controls.controlGroup.manageControl.editFlyoutTitle', {
         defaultMessage: 'Edit control',
       }),
-    getDataViewTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.dataViewTitle', {
-        defaultMessage: 'Data view',
-      }),
-    getFieldTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.fielditle', {
-        defaultMessage: 'Field',
-      }),
-    getTitleInputTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.titleInputTitle', {
-        defaultMessage: 'Label',
-      }),
-    getControlTypeTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.controlTypesTitle', {
-        defaultMessage: 'Control type',
-      }),
-    getWidthInputTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.widthInputTitle', {
-        defaultMessage: 'Minimum width',
-      }),
-    getControlSettingsTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.controlSettingsTitle', {
-        defaultMessage: 'Additional settings',
-      }),
+    dataSource: {
+      getFormGroupTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.formGroupTitle', {
+          defaultMessage: 'Data source',
+        }),
+      getFormGroupDescription: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.formGroupDescription', {
+          defaultMessage: 'Select the data view and field that you want to create a control for.',
+        }),
+      getSelectDataViewMessage: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.selectDataViewMessage', {
+          defaultMessage: 'Please select a data view',
+        }),
+      getDataViewTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.dataViewTitle', {
+          defaultMessage: 'Data view',
+        }),
+      getSelectFieldMessage: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.selectFieldMessage', {
+          defaultMessage: 'Please select a field',
+        }),
+      getFieldTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.fieldTitle', {
+          defaultMessage: 'Field',
+        }),
+      getControlTypeTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.dataSource.controlTypesTitle', {
+          defaultMessage: 'Control type',
+        }),
+    },
+    displaySettings: {
+      getFormGroupTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.displaySettings.formGroupTitle', {
+          defaultMessage: 'Display settings',
+        }),
+      getFormGroupDescription: () =>
+        i18n.translate('controls.controlGroup.manageControl.displaySettings.formGroupDescription', {
+          defaultMessage: 'Change how the control will appear on your dashboard.',
+        }),
+      getTitleInputTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.displaySettings.titleInputTitle', {
+          defaultMessage: 'Label',
+        }),
+      getWidthInputTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.displaySettings.widthInputTitle', {
+          defaultMessage: 'Minimum width',
+        }),
+      getGrowSwitchTitle: () =>
+        i18n.translate('controls.controlGroup.manageControl.displaySettings.growSwitchTitle', {
+          defaultMessage: 'Expand width to fit available space',
+        }),
+    },
+    controlTypeSettings: {
+      getFormGroupTitle: (type: string) =>
+        i18n.translate('controls.controlGroup.manageControl.controlTypeSettings.formGroupTitle', {
+          defaultMessage: '{controlType} settings',
+          values: { controlType: type },
+        }),
+      getFormGroupDescription: (type: string) =>
+        i18n.translate(
+          'controls.controlGroup.manageControl.controlTypeSettings.formGroupDescription',
+          {
+            defaultMessage: 'Custom settings for your {controlType} control.',
+            values: { controlType: type.toLocaleLowerCase() },
+          }
+        ),
+    },
     getSaveChangesTitle: () =>
       i18n.translate('controls.controlGroup.manageControl.saveChangesTitle', {
         defaultMessage: 'Save and close',
@@ -73,18 +116,6 @@ export const ControlGroupStrings = {
       i18n.translate('controls.controlGroup.manageControl.cancelTitle', {
         defaultMessage: 'Cancel',
       }),
-    getSelectFieldMessage: () =>
-      i18n.translate('controls.controlGroup.manageControl.selectFieldMessage', {
-        defaultMessage: 'Please select a field',
-      }),
-    getSelectDataViewMessage: () =>
-      i18n.translate('controls.controlGroup.manageControl.selectDataViewMessage', {
-        defaultMessage: 'Please select a data view',
-      }),
-    getGrowSwitchTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.growSwitchTitle', {
-        defaultMessage: 'Expand width to fit available space',
-      }),
   },
   management: {
     getAddControlTitle: () =>