[Controls] Control Frame Layout Management Design

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

@@ -6,14 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useMemo } from 'react';
 
 import { decorators } from './decorators';
-import { getEuiSelectableOptions, flightFields, flightFieldLabels, FlightField } from './flights';
-import { OptionsListEmbeddableFactory, OptionsListEmbeddable } from '../control_types/options_list';
-import { ControlFrame } from '../control_frame/control_frame';
+import { getEuiSelectableOptions, flightFields } from './flights';
+import { OptionsListEmbeddableFactory } from '../control_types/options_list';
+import { ControlGroupComponent } from '../control_group/control_group_component';
 
 export default {
   title: 'Input Controls',
@@ -44,8 +42,6 @@ const storybookArgTypes = {
 };
 
 const OptionsListStoryComponent = ({ fields, twoLine }: OptionsListStorybookArgs) => {
-  const [embeddables, setEmbeddables] = useState<OptionsListEmbeddable[]>([]);
-
   const optionsListEmbeddableFactory = useMemo(
     () =>
       new OptionsListEmbeddableFactory(
@@ -55,28 +51,12 @@ const OptionsListStoryComponent = ({ fields, twoLine }: OptionsListStorybookArgs
     []
   );
 
-  useEffect(() => {
-    const embeddableCreatePromises = fields.map((field) => {
-      return optionsListEmbeddableFactory.create({
-        field,
-        id: '',
-        indexPattern: '',
-        multiSelect: true,
-        twoLineLayout: twoLine,
-        title: flightFieldLabels[field as FlightField],
-      });
-    });
-    Promise.all(embeddableCreatePromises).then((newEmbeddables) => setEmbeddables(newEmbeddables));
-  }, [fields, optionsListEmbeddableFactory, twoLine]);
-
   return (
-    <EuiFlexGroup alignItems="center" wrap={true} gutterSize={'s'}>
-      {embeddables.map((embeddable) => (
-        <EuiFlexItem key={embeddable.getInput().field}>
-          <ControlFrame twoLine={twoLine} embeddable={embeddable} />
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
+    <ControlGroupComponent
+      embeddableFactory={optionsListEmbeddableFactory}
+      twoLine={twoLine}
+      fields={fields}
+    />
   );
 };
 

src/plugins/presentation_util/public/components/input_controls/control_frame/control_frame.tsx → src/plugins/presentation_util/public/components/input_controls/control_group/control_frame/control_frame.tsx

@@ -11,9 +11,7 @@ import useMount from 'react-use/lib/useMount';
 import classNames from 'classnames';
 import { EuiFormControlLayout, EuiFormLabel, EuiFormRow } from '@elastic/eui';
 
-import { InputControlEmbeddable } from '../embeddable/types';
-
-import './control_frame.scss';
+import { InputControlEmbeddable } from '../../embeddable/types';
 
 interface ControlFrameProps {
   embeddable: InputControlEmbeddable;
@@ -39,20 +37,18 @@ export const ControlFrame = ({ twoLine, embeddable }: ControlFrameProps) => {
     >
       <div
         className={classNames('controlFrame--control', {
-          'optionsList--filterBtnTwoLine': twoLine,
-          'optionsList--filterBtnSingle': !twoLine,
+          'controlFrame--twoLine': twoLine,
+          'controlFrame--single': !twoLine,
         })}
         id={embeddable.id}
         ref={embeddableRoot}
       />
     </EuiFormControlLayout>
   );
 
-  return twoLine ? (
-    <EuiFormRow fullWidth label={embeddable.getInput().title}>
+  return (
+    <EuiFormRow fullWidth label={twoLine ? embeddable.getInput().title : undefined}>
       {form}
     </EuiFormRow>
-  ) : (
-    form
   );
 };

src/plugins/presentation_util/public/components/input_controls/control_group/control_group.scss

@@ -0,0 +1,47 @@
+.controlFrame--wrapper {
+  flex-basis: auto;
+
+  &-small {
+    width: $euiSize * 14;
+  }
+
+  &-medium {
+    width: $euiSize * 25;
+  }
+
+  &-large {
+    width: $euiSize * 50;
+  }
+}
+
+.controlFrame--formControlLayout {
+  width: 100%;
+  min-width: $euiSize * 14;
+}
+
+.controlFrame--control {
+  &.controlFrame--single {
+    height: 100%;
+  }
+
+  &.controlFrame--twoLine {
+    width: 100%;
+  }
+}
+
+.controlGroup--sortPopover {
+  // Hack because the fixed positions of drag and drop don't work inside of transformed elements
+  // sass-lint:disable-block no-important
+  transform: none !important;
+  transition: none !important;
+  margin-top: -$euiSizeS;
+  // IE11 needs a min-width
+  min-width: $euiSize * 12;
+}
+
+.controlGroup--sortItem {
+  &-isDragging {
+    @include euiBottomShadow;
+    background: $euiColorEmptyShade;
+  }
+}

src/plugins/presentation_util/public/components/input_controls/control_group/control_group_component.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 React, { useEffect, useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import uuid from 'uuid';
+import classNames from 'classnames';
+import { OptionsListEmbeddable, OptionsListEmbeddableFactory } from '../control_types/options_list';
+import { FlightField, flightFieldLabels } from '../__stories__/flights';
+import { ControlFrame } from './control_frame/control_frame';
+
+import './control_group.scss';
+import {
+  InputControlMeta,
+  ControlStyle,
+  ManageControlGroupComponent,
+} from './control_group_editor/manage_control_group_component';
+
+interface OptionsListStorybookArgs {
+  fields: string[];
+  twoLine: boolean;
+  embeddableFactory: OptionsListEmbeddableFactory;
+}
+
+interface InputControlEmbeddableMap {
+  [key: string]: OptionsListEmbeddable;
+}
+
+export const ControlGroupComponent = ({
+  fields,
+  twoLine,
+  embeddableFactory,
+}: OptionsListStorybookArgs) => {
+  const [embeddablesMap, setEmbeddablesMap] = useState<InputControlEmbeddableMap>({});
+  const [controlMeta, setControlMeta] = useState<InputControlMeta[]>([]);
+  const [controlStyle, setControlStyle] = useState<ControlStyle>('oneLine');
+
+  useEffect(() => {
+    const embeddableCreatePromises = fields.map((field) => {
+      return embeddableFactory.create({
+        field,
+        id: uuid.v4(),
+        indexPattern: '',
+        multiSelect: true,
+        title: flightFieldLabels[field as FlightField],
+      });
+    });
+    Promise.all(embeddableCreatePromises).then((newEmbeddables) => {
+      setEmbeddablesMap(
+        newEmbeddables.reduce<InputControlEmbeddableMap>(
+          (map, embeddable) => ((map[embeddable.id] = embeddable), map),
+          {}
+        )
+      );
+      setControlMeta(
+        newEmbeddables.map((embeddable) => ({
+          title: embeddable.getTitle(),
+          embeddableId: embeddable.id,
+          width: 'auto',
+          grow: true,
+        }))
+      );
+    });
+  }, [fields, embeddableFactory]);
+
+  // notify child embeddables when twoLineLayout changes
+  useEffect(() => {
+    Object.values(embeddablesMap).forEach((embeddable) => {
+      embeddable.updateInput({ twoLineLayout: controlStyle === 'twoLine' });
+    });
+  }, [embeddablesMap, controlStyle]);
+
+  return (
+    <>
+      <ManageControlGroupComponent
+        controlMeta={controlMeta}
+        controlStyle={controlStyle}
+        setControlMeta={setControlMeta}
+        setControlStyle={setControlStyle}
+      />
+      <EuiSpacer size="l" />
+      <EuiFlexGroup alignItems="center" wrap={true} gutterSize={'s'}>
+        {controlMeta.map(({ embeddableId, width }) => (
+          <EuiFlexItem
+            grow={width === 'auto'}
+            key={embeddableId}
+            className={classNames({
+              'controlFrame--wrapper-small': width === 'small',
+              'controlFrame--wrapper-medium': width === 'medium',
+              'controlFrame--wrapper-large': width === 'large',
+            })}
+          >
+            <ControlFrame
+              twoLine={controlStyle === 'twoLine'}
+              embeddable={embeddablesMap[embeddableId]}
+            />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </>
+  );
+};