[Controls] Control Group Embeddable and Management Experience

.ci/.storybook/main.js

@@ -11,6 +11,12 @@ const aliases = require('../../src/dev/storybook/aliases.ts').storybookAliases;
 
 config.refs = {};
 
+// Required due to https://github.com/storybookjs/storybook/issues/13834
+config.babel = async (options) => ({
+  ...options,
+  plugins: ['@babel/plugin-transform-typescript', ...options.plugins],
+});
+
 for (const alias of Object.keys(aliases).filter((a) => a !== 'ci_composite')) {
   // snake_case -> Title Case
   const title = alias

package.json

@@ -92,6 +92,9 @@
     "yarn": "^1.21.1"
   },
   "dependencies": {
+    "@dnd-kit/core": "^3.1.1",
+    "@dnd-kit/sortable": "^4.0.0",
+    "@dnd-kit/utilities": "^2.0.0",
     "@babel/runtime": "^7.15.4",
     "@elastic/apm-rum": "^5.9.1",
     "@elastic/apm-rum-react": "^1.3.1",

src/plugins/embeddable/public/lib/containers/container.ts

@@ -46,6 +46,7 @@ export abstract class Container<
     parent?: Container
   ) {
     super(input, output, parent);
+    this.getFactory = getFactory; // Currently required for using in storybook due to https://github.com/storybookjs/storybook/issues/13834
     this.subscription = this.getInput$()
       // At each update event, get both the previous and current state
       .pipe(startWith(input), pairwise())

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { InputControlFactory } from '../types';
+import { ControlsService } from '../controls_service';
+import { flightFields, getEuiSelectableOptions } 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']),
+    () => Promise.resolve(flightFields)
+  );
+
+  // cast to unknown because the stub cannot use the embeddable start contract to transform the EmbeddableFactoryDefinition into an EmbeddableFactory
+  const optionsListControlFactory = optionsListFactoryStub as unknown as InputControlFactory;
+  optionsListControlFactory.getDefaultInput = () => ({});
+  controlsServiceStub.registerInputControlType(optionsListControlFactory);
+  return controlsServiceStub;
+};

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

@@ -23,7 +23,7 @@ const panelStyle = {
 
 const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };
 
-const inputBarStyle = { background: '#fff', padding: 4, minHeight };
+const inputBarStyle = { background: '#fff', padding: 4 };
 
 const layout = (OptionStory: Story) => (
   <EuiFlexGroup style={{ background }} direction="column">

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

@@ -0,0 +1,53 @@
+/*
+ * 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, useMemo } from 'react';
+import uuid from 'uuid';
+
+import { decorators } from './decorators';
+import { providers } from '../../../services/storybook';
+import { getControlsServiceStub } from './controls_service_stub';
+import { ControlGroupContainerFactory } from '../control_group/control_group_container_factory';
+
+export default {
+  title: 'Controls',
+  description: '',
+  decorators,
+};
+
+const ControlGroupStoryComponent = () => {
+  const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);
+
+  providers.overlays.start({});
+  const overlays = providers.overlays.getService();
+
+  const controlsServiceStub = getControlsServiceStub();
+
+  useEffect(() => {
+    (async () => {
+      const factory = new ControlGroupContainerFactory(controlsServiceStub, overlays);
+      const controlGroupContainerEmbeddable = await factory.create({
+        inheritParentState: {
+          useQuery: false,
+          useFilters: false,
+          useTimerange: false,
+        },
+        controlStyle: 'oneLine',
+        id: uuid.v4(),
+        panels: {},
+      });
+      if (controlGroupContainerEmbeddable && embeddableRoot.current) {
+        controlGroupContainerEmbeddable.render(embeddableRoot.current);
+      }
+    })();
+  }, [embeddableRoot, controlsServiceStub, overlays]);
+
+  return <div ref={embeddableRoot} />;
+};
+
+export const ControlGroupStory = () => <ControlGroupStoryComponent />;

src/plugins/presentation_util/public/components/controls/control_frame/control_frame_component.tsx

@@ -0,0 +1,117 @@
+/*
+ * 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, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import {
+  EuiButtonIcon,
+  EuiFormControlLayout,
+  EuiFormLabel,
+  EuiFormRow,
+  EuiToolTip,
+} from '@elastic/eui';
+import { ControlGroupContainer } from '../control_group/control_group_container';
+import { useChildEmbeddable } from '../hooks/use_child_embeddable';
+import { ControlStyle } from '../types';
+import { ControlFrameStrings } from './control_frame_strings';
+
+export interface ControlFrameProps {
+  container: ControlGroupContainer;
+  customPrepend?: JSX.Element;
+  controlStyle: ControlStyle;
+  enableActions?: boolean;
+  onRemove?: () => void;
+  embeddableId: string;
+  onEdit?: () => void;
+}
+
+export const ControlFrame = ({
+  customPrepend,
+  enableActions,
+  embeddableId,
+  controlStyle,
+  container,
+  onRemove,
+  onEdit,
+}: ControlFrameProps) => {
+  const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);
+  const embeddable = useChildEmbeddable({ container, embeddableId });
+
+  const [title, setTitle] = useState<string>();
+
+  const usingTwoLineLayout = controlStyle === 'twoLine';
+
+  useEffect(() => {
+    if (embeddableRoot.current && embeddable) {
+      embeddable.render(embeddableRoot.current);
+    }
+    const subscription = embeddable?.getInput$().subscribe((newInput) => setTitle(newInput.title));
+    return () => subscription?.unsubscribe();
+  }, [embeddable, embeddableRoot]);
+
+  const floatingActions = (
+    <div
+      className={classNames('controlFrame--floatingActions', {
+        'controlFrame--floatingActions-twoLine': usingTwoLineLayout,
+        'controlFrame--floatingActions-oneLine': !usingTwoLineLayout,
+      })}
+    >
+      <EuiToolTip content={ControlFrameStrings.floatingActions.getEditButtonTitle()}>
+        <EuiButtonIcon
+          aria-label={ControlFrameStrings.floatingActions.getEditButtonTitle()}
+          iconType="pencil"
+          onClick={onEdit}
+          color="text"
+        />
+      </EuiToolTip>
+      <EuiToolTip content={ControlFrameStrings.floatingActions.getRemoveButtonTitle()}>
+        <EuiButtonIcon
+          aria-label={ControlFrameStrings.floatingActions.getRemoveButtonTitle()}
+          onClick={onRemove}
+          iconType="cross"
+          color="danger"
+        />
+      </EuiToolTip>
+    </div>
+  );
+
+  const form = (
+    <EuiFormControlLayout
+      className={'controlFrame--formControlLayout'}
+      fullWidth
+      prepend={
+        <>
+          {customPrepend ?? null}
+          {usingTwoLineLayout ? undefined : (
+            <EuiFormLabel className="controlFrame--formControlLayout__label" htmlFor={embeddableId}>
+              {title}
+            </EuiFormLabel>
+          )}
+        </>
+      }
+    >
+      <div
+        className={classNames('controlFrame--control', {
+          'controlFrame--twoLine': controlStyle === 'twoLine',
+          'controlFrame--oneLine': controlStyle === 'oneLine',
+        })}
+        id={`controlFrame--${embeddableId}`}
+        ref={embeddableRoot}
+      />
+    </EuiFormControlLayout>
+  );
+
+  return (
+    <>
+      {enableActions && floatingActions}
+      <EuiFormRow fullWidth label={usingTwoLineLayout ? title : undefined}>
+        {form}
+      </EuiFormRow>
+    </>
+  );
+};

src/plugins/presentation_util/public/components/controls/control_frame/control_frame_strings.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const ControlFrameStrings = {
+  floatingActions: {
+    getEditButtonTitle: () =>
+      i18n.translate('presentationUtil.inputControls.controlGroup.floatingActions.editTitle', {
+        defaultMessage: 'Manage control',
+      }),
+    getRemoveButtonTitle: () =>
+      i18n.translate('presentationUtil.inputControls.controlGroup.floatingActions.removeTitle', {
+        defaultMessage: 'Remove control',
+      }),
+  },
+};