[Controls] Options List Redux & Selection Management

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

@@ -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>();
@@ -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',
         })}

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

@@ -8,7 +8,14 @@
 
 import '../control_group.scss';
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  EuiPanel,
+  EuiText,
+} from '@elastic/eui';
 import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import {
@@ -57,7 +64,7 @@ export const ControlGroup = () => {
   const dispatch = useEmbeddableDispatch();
 
   // current state
-  const { panels } = useEmbeddableSelector((state) => state);
+  const { panels, controlStyle } = useEmbeddableSelector((state) => state);
 
   const idsInOrder = useMemo(
     () =>
@@ -92,63 +99,97 @@ export const ControlGroup = () => {
     setDraggingId(null);
   };
 
+  const emptyState = !(idsInOrder && idsInOrder.length > 0);
+
   return (
-    <EuiFlexGroup wrap={false} direction="row" alignItems="center" className="superWrapper">
-      <EuiFlexItem>
-        <DndContext
-          onDragStart={({ active }) => setDraggingId(active.id)}
-          onDragEnd={onDragEnd}
-          onDragCancel={() => setDraggingId(null)}
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          layoutMeasuring={{
-            strategy: LayoutMeasuringStrategy.Always,
-          }}
-        >
-          <SortableContext items={idsInOrder} strategy={rectSortingStrategy}>
-            <EuiFlexGroup
-              className={classNames('controlGroup', { 'controlGroup-isDragging': draggingId })}
-              alignItems="center"
-              gutterSize={'m'}
-              wrap={true}
-            >
-              {idsInOrder.map(
-                (controlId, index) =>
-                  panels[controlId] && (
-                    <SortableControl
-                      dragInfo={{ index, draggingIndex }}
-                      embeddableId={controlId}
-                      key={controlId}
-                    />
-                  )
-              )}
-            </EuiFlexGroup>
-          </SortableContext>
-          <DragOverlay>{draggingId ? <ControlClone draggingId={draggingId} /> : null}</DragOverlay>
-        </DndContext>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup alignItems="center" direction="row" gutterSize="xs">
+    <EuiPanel
+      borderRadius="m"
+      className={classNames('controlsWrapper', {
+        'controlsWrapper--empty': emptyState,
+        'controlsWrapper--twoLine': controlStyle === 'twoLine',
+      })}
+    >
+      {idsInOrder.length > 0 ? (
+        <EuiFlexGroup gutterSize="m" wrap={false} direction="row" alignItems="center">
           <EuiFlexItem>
-            <EuiToolTip content={ControlGroupStrings.management.getManageButtonTitle()}>
-              <EuiButtonIcon
-                aria-label={ControlGroupStrings.management.getManageButtonTitle()}
-                iconType="gear"
-                color="text"
-                data-test-subj="inputControlsSortingButton"
-                onClick={() =>
-                  openFlyout(forwardAllContext(<EditControlGroup />, reduxContainerContext))
-                }
-              />
-            </EuiToolTip>
+            <DndContext
+              onDragStart={({ active }) => setDraggingId(active.id)}
+              onDragEnd={onDragEnd}
+              onDragCancel={() => setDraggingId(null)}
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              layoutMeasuring={{
+                strategy: LayoutMeasuringStrategy.Always,
+              }}
+            >
+              <SortableContext items={idsInOrder} strategy={rectSortingStrategy}>
+                <EuiFlexGroup
+                  className={classNames('controlGroup', { 'controlGroup-isDragging': draggingId })}
+                  alignItems="center"
+                  gutterSize={'m'}
+                  wrap={true}
+                >
+                  {idsInOrder.map(
+                    (controlId, index) =>
+                      panels[controlId] && (
+                        <SortableControl
+                          dragInfo={{ index, draggingIndex }}
+                          embeddableId={controlId}
+                          key={controlId}
+                        />
+                      )
+                  )}
+                </EuiFlexGroup>
+              </SortableContext>
+              <DragOverlay>
+                {draggingId ? <ControlClone draggingId={draggingId} /> : null}
+              </DragOverlay>
+            </DndContext>
           </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiToolTip content={ControlGroupStrings.management.getAddControlTitle()}>
-              <CreateControlButton />
-            </EuiToolTip>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup className="groupEditActions" gutterSize="xs">
+              <EuiFlexItem>
+                <EuiToolTip content={ControlGroupStrings.management.getManageButtonTitle()}>
+                  <EuiButtonIcon
+                    aria-label={ControlGroupStrings.management.getManageButtonTitle()}
+                    iconType="gear"
+                    color="subdued"
+                    data-test-subj="inputControlsSortingButton"
+                    onClick={() => {
+                      const flyoutInstance = openFlyout(
+                        forwardAllContext(
+                          <EditControlGroup closeFlyout={() => flyoutInstance.close()} />,
+                          reduxContainerContext
+                        )
+                      );
+                    }}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiToolTip content={ControlGroupStrings.management.getAddControlTitle()}>
+                  <CreateControlButton isIconButton={true} />
+                </EuiToolTip>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      ) : (
+        <>
+          <EuiFlexGroup alignItems="center" gutterSize="xs">
+            <EuiFlexItem grow={1}>
+              <EuiText className="emptyStateText eui-textCenter" size="s">
+                <p>{ControlGroupStrings.emptyState.getCallToAction()}</p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <div className="addControlButton">
+                <CreateControlButton isIconButton={false} />
+              </div>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </EuiPanel>
   );
 };