[Controls] Options List Redux & Selection Management (#115122)

* Ported options list to use Redux. added selection management and selection clear buttons to options list. Options list clears selections when field or index pattern change. Design cleanups and updates

Co-authored-by: Andrea Del Rio <[email protected]>

src/plugins/presentation_util/public/components/controls/__stories__/controls_service_stub.ts

@@ -8,16 +8,16 @@
 
 import { ControlsService } from '../controls_service';
 import { InputControlFactory } from '../../../services/controls';
-import { flightFields, getEuiSelectableOptions } from './flights';
+import { flightFields, getFlightSearchOptions } from './flights';
 import { OptionsListEmbeddableFactory } from '../control_types/options_list';
 
 export const getControlsServiceStub = () => {
   const controlsServiceStub = new ControlsService();
 
   const optionsListFactoryStub = new OptionsListEmbeddableFactory(
     ({ field, search }) =>
-      new Promise((r) => setTimeout(() => r(getEuiSelectableOptions(field, search)), 500)),
-    () => Promise.resolve(['demo data flights']),
+      new Promise((r) => setTimeout(() => r(getFlightSearchOptions(field.name, search)), 120)),
+    () => Promise.resolve([{ title: 'demo data flights', fields: [] }]),
     () => Promise.resolve(flightFields)
   );
 

src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx

@@ -11,8 +11,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Story } from '@storybook/react';
 
 const bar = '#c5ced8';
-const panel = '#f7f9fa';
-const background = '#e0e6ec';
+const panel = '#ffff';
+const background = '#FAFBFD';
 const minHeight = 60;
 
 const panelStyle = {
@@ -23,12 +23,10 @@ const panelStyle = {
 
 const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };
 
-const inputBarStyle = { background: '#fff', padding: 4 };
-
 const layout = (OptionStory: Story) => (
   <EuiFlexGroup style={{ background }} direction="column">
     <EuiFlexItem style={kqlBarStyle}>KQL Bar</EuiFlexItem>
-    <EuiFlexItem style={inputBarStyle}>
+    <EuiFlexItem>
       <OptionStory />
     </EuiFlexItem>
     <EuiFlexItem>

src/plugins/presentation_util/public/components/controls/__stories__/flights.ts

@@ -7,22 +7,17 @@
  */
 
 import { map, uniq } from 'lodash';
-import { EuiSelectableOption } from '@elastic/eui';
-
 import { flights } from '../../fixtures/flights';
 
 export type Flight = typeof flights[number];
 export type FlightField = keyof Flight;
 
-export const getOptions = (field: string) => uniq(map(flights, field)).sort();
+export const getFlightOptions = (field: string) => uniq(map(flights, field)).sort();
 
-export const getEuiSelectableOptions = (field: string, search?: string): EuiSelectableOption[] => {
-  const options = getOptions(field)
-    .map((option) => ({
-      label: option + '',
-      searchableLabel: option + '',
-    }))
-    .filter((option) => !search || option.label.toLowerCase().includes(search.toLowerCase()));
+export const getFlightSearchOptions = (field: string, search?: string): string[] => {
+  const options = getFlightOptions(field)
+    .map((option) => option + '')
+    .filter((option) => !search || option.toLowerCase().includes(search.toLowerCase()));
   if (options.length > 10) options.length = 10;
   return options;
 };
@@ -57,4 +52,8 @@ export const flightFieldLabels: Record<FlightField, string> = {
   timestamp: 'Timestamp',
 };
 
-export const flightFields = Object.keys(flightFieldLabels) as FlightField[];
+export const flightFields = Object.keys(flightFieldLabels).map((field) => ({
+  name: field,
+  type: 'string',
+  aggregatable: true,
+}));

src/plugins/presentation_util/public/components/controls/__stories__/input_controls.stories.tsx

@@ -64,9 +64,15 @@ export const ConfiguredControlGroupStory = () => (
         explicitInput: {
           title: 'Origin City',
           id: 'optionsList1',
-          indexPattern: 'demo data flights',
-          field: 'OriginCityName',
-          defaultSelections: ['Toronto'],
+          indexPattern: {
+            title: 'demo data flights',
+          },
+          field: {
+            name: 'OriginCityName',
+            type: 'string',
+            aggregatable: true,
+          },
+          selectedOptions: ['Toronto'],
         } as OptionsListEmbeddableInput,
       },
       optionsList2: {
@@ -76,9 +82,15 @@ export const ConfiguredControlGroupStory = () => (
         explicitInput: {
           title: 'Destination City',
           id: 'optionsList2',
-          indexPattern: 'demo data flights',
-          field: 'DestCityName',
-          defaultSelections: ['London'],
+          indexPattern: {
+            title: 'demo data flights',
+          },
+          field: {
+            name: 'DestCityName',
+            type: 'string',
+            aggregatable: true,
+          },
+          selectedOptions: ['London'],
         } as OptionsListEmbeddableInput,
       },
       optionsList3: {
@@ -88,8 +100,14 @@ export const ConfiguredControlGroupStory = () => (
         explicitInput: {
           title: 'Carrier',
           id: 'optionsList3',
-          indexPattern: 'demo data flights',
-          field: 'Carrier',
+          indexPattern: {
+            title: 'demo data flights',
+          },
+          field: {
+            name: 'Carrier',
+            type: 'string',
+            aggregatable: true,
+          },
         } as OptionsListEmbeddableInput,
       },
     }}

src/plugins/presentation_util/public/components/controls/__stories__/storybook_control_factories.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { flightFields, getEuiSelectableOptions } from './flights';
+import { flightFields, getFlightSearchOptions } from './flights';
 import { OptionsListEmbeddableFactory } from '../control_types/options_list';
 import { InputControlFactory, PresentationControlsService } from '../../../services/controls';
 
@@ -15,8 +15,14 @@ export const populateStorybookControlFactories = (
 ) => {
   const optionsListFactoryStub = new OptionsListEmbeddableFactory(
     ({ field, search }) =>
-      new Promise((r) => setTimeout(() => r(getEuiSelectableOptions(field, search)), 500)),
-    () => Promise.resolve(['demo data flights']),
+      new Promise((r) => setTimeout(() => r(getFlightSearchOptions(field.name, search)), 120)),
+    () =>
+      Promise.resolve([
+        {
+          title: 'demo data flights',
+          fields: [],
+        },
+      ]),
     () => Promise.resolve(flightFields)
   );
 

src/plugins/presentation_util/public/components/controls/control_group/component/control_frame_component.tsx

@@ -21,6 +21,7 @@ import { EditControlButton } from '../editor/edit_control';
 import { useChildEmbeddable } from '../../hooks/use_child_embeddable';
 import { useReduxContainerContext } from '../../../redux_embeddables/redux_embeddable_context';
 import { ControlGroupStrings } from '../control_group_strings';
+import { pluginServices } from '../../../../services';
 
 export interface ControlFrameProps {
   customPrepend?: JSX.Element;
@@ -36,6 +37,10 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
   } = useReduxContainerContext<ControlGroupInput>();
   const { controlStyle } = useEmbeddableSelector((state) => state);
 
+  // Presentation Services Context
+  const { overlays } = pluginServices.getHooks();
+  const { openConfirm } = overlays.useService();
+
   const embeddable = useChildEmbeddable({ untilEmbeddableLoaded, embeddableId });
 
   const [title, setTitle] = useState<string>();
@@ -52,9 +57,9 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
 
   const floatingActions = (
     <div
-      className={classNames('controlFrame--floatingActions', {
-        'controlFrame--floatingActions-twoLine': usingTwoLineLayout,
-        'controlFrame--floatingActions-oneLine': !usingTwoLineLayout,
+      className={classNames('controlFrameFloatingActions', {
+        'controlFrameFloatingActions--twoLine': usingTwoLineLayout,
+        'controlFrameFloatingActions--oneLine': !usingTwoLineLayout,
       })}
     >
       <EuiToolTip content={ControlGroupStrings.floatingActions.getEditButtonTitle()}>
@@ -63,7 +68,18 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
       <EuiToolTip content={ControlGroupStrings.floatingActions.getRemoveButtonTitle()}>
         <EuiButtonIcon
           aria-label={ControlGroupStrings.floatingActions.getRemoveButtonTitle()}
-          onClick={() => removeEmbeddable(embeddableId)}
+          onClick={() =>
+            openConfirm(ControlGroupStrings.management.deleteControls.getSubtitle(), {
+              confirmButtonText: ControlGroupStrings.management.deleteControls.getConfirm(),
+              cancelButtonText: ControlGroupStrings.management.deleteControls.getCancel(),
+              title: ControlGroupStrings.management.deleteControls.getDeleteTitle(),
+              buttonColor: 'danger',
+            }).then((confirmed) => {
+              if (confirmed) {
+                removeEmbeddable(embeddableId);
+              }
+            })
+          }
           iconType="cross"
           color="danger"
         />
@@ -73,21 +89,21 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
 
   const form = (
     <EuiFormControlLayout
-      className={'controlFrame--formControlLayout'}
+      className={'controlFrame__formControlLayout'}
       fullWidth
       prepend={
         <>
           {customPrepend ?? null}
           {usingTwoLineLayout ? undefined : (
-            <EuiFormLabel className="controlFrame--formControlLayout__label" htmlFor={embeddableId}>
+            <EuiFormLabel className="controlFrame__formControlLayoutLabel" htmlFor={embeddableId}>
               {title}
             </EuiFormLabel>
           )}
         </>
       }
     >
       <div
-        className={classNames('controlFrame--control', {
+        className={classNames('controlFrame__control', {
           'controlFrame--twoLine': controlStyle === 'twoLine',
           'controlFrame--oneLine': controlStyle === 'oneLine',
         })}