[Embeddable Rebuild] [Controls] Add drag and drop to control group (#…

…188687) ## Summary > [!NOTE] > This PR has **no** user-facing changes - minus one small style change (which is a small selector simplification and doesn't actually change anything), all work is contained in the `examples` plugin. This PR adds drag and drop to the refactored control group in the `examples` plugin. ![Jul-18-2024 16-24-32](https://github.com/user-attachments/assets/c8080af7-4176-473f-92ea-b13f8b1e5def) ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
elastic · Jul 22, 2024 · fa0ef37 · fa0ef37
1 parent f19af22
commit fa0ef37
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 37 deletions.
diff --git a/examples/controls_example/public/react_controls/components/control_clone.tsx b/examples/controls_example/public/react_controls/components/control_clone.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 classNames from 'classnames';
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiIcon } from '@elastic/eui';
+import {
+  useBatchedOptionalPublishingSubjects,
+  useStateFromPublishingSubject,
+} from '@kbn/presentation-publishing';
+
+import { DefaultControlApi } from '../types';
+
+/**
+ * A simplified clone version of the control which is dragged. This version only shows
+ * the title, because individual controls can be any size, and dragging a wide item
+ * can be quite cumbersome.
+ */
+export const ControlClone = ({
+  controlStyle,
+  controlApi,
+}: {
+  controlStyle: string;
+  controlApi: DefaultControlApi;
+}) => {
+  const width = useStateFromPublishingSubject(controlApi.width);
+  const [panelTitle, defaultPanelTitle] = useBatchedOptionalPublishingSubjects(
+    controlApi.panelTitle,
+    controlApi.defaultPanelTitle
+  );
+
+  return (
+    <EuiFlexItem
+      className={classNames('controlFrameCloneWrapper', {
+        'controlFrameCloneWrapper--small': width === 'small',
+        'controlFrameCloneWrapper--medium': width === 'medium',
+        'controlFrameCloneWrapper--large': width === 'large',
+        'controlFrameCloneWrapper--twoLine': controlStyle === 'twoLine',
+      })}
+    >
+      {controlStyle === 'twoLine' ? (
+        <EuiFormLabel>{panelTitle ?? defaultPanelTitle}</EuiFormLabel>
+      ) : undefined}
+      <EuiFlexGroup responsive={false} gutterSize="none" className={'controlFrame__draggable'}>
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="grabHorizontal" className="controlFrame__dragHandle" />
+        </EuiFlexItem>
+        {controlStyle === 'oneLine' ? (
+          <EuiFlexItem>
+            <label className="controlFrameCloneWrapper__label">
+              {panelTitle ?? defaultPanelTitle}
+            </label>
+          </EuiFlexItem>
+        ) : undefined}
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
diff --git a/...eact_controls/control_error_component.tsx → ...act_controls/components/control_error.tsx b/...eact_controls/control_error_component.tsx → ...act_controls/components/control_error.tsx
diff --git a/.../public/react_controls/control_panel.scss → ...ct_controls/components/control_panel.scss b/.../public/react_controls/control_panel.scss → ...ct_controls/components/control_panel.scss
diff --git a/...e/public/react_controls/control_panel.tsx → ...act_controls/components/control_panel.tsx b/...e/public/react_controls/control_panel.tsx → ...act_controls/components/control_panel.tsx
@@ -9,6 +9,8 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
   EuiFlexItem,
   EuiFormControlLayout,
@@ -26,25 +28,24 @@ import {
 } from '@kbn/presentation-publishing';
 import { FloatingActions } from '@kbn/presentation-util-plugin/public';
 
-import { ControlError } from './control_error_component';
-import { ControlPanelProps, DefaultControlApi } from './types';
+import { ControlPanelProps, DefaultControlApi } from '../types';
+import { ControlError } from './control_error';
 
 import './control_panel.scss';
 
-/**
- * TODO: Handle dragging
- */
 const DragHandle = ({
   isEditable,
   controlTitle,
   hideEmptyDragHandle,
+  ...rest // drag info is contained here
 }: {
   isEditable: boolean;
   controlTitle?: string;
   hideEmptyDragHandle: boolean;
 }) =>
   isEditable ? (
     <button
+      {...rest}
       aria-label={i18n.translate('controls.controlGroup.ariaActions.moveControlButtonAction', {
         defaultMessage: 'Move control {controlTitle}',
         values: { controlTitle: controlTitle ?? '' },
@@ -59,8 +60,27 @@ const DragHandle = ({
 
 export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlApi>({
   Component,
+  uuid,
 }: ControlPanelProps<ApiType>) => {
   const [api, setApi] = useState<ApiType | null>(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isOver,
+    isDragging,
+    index,
+    isSorting,
+    activeIndex,
+  } = useSortable({
+    id: uuid,
+  });
+  const style = {
+    transition,
+    transform: isSorting ? undefined : CSS.Translate.toString(transform),
+  };
 
   const viewModeSubject = (() => {
     if (
@@ -102,19 +122,20 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
 
   return (
     <EuiFlexItem
+      ref={setNodeRef}
+      style={style}
       grow={grow}
-      data-control-id={api?.uuid}
+      data-control-id={uuid}
       data-test-subj={`control-frame`}
       data-render-complete="true"
       className={classNames('controlFrameWrapper', {
         'controlFrameWrapper--grow': grow,
         'controlFrameWrapper--small': width === 'small',
         'controlFrameWrapper--medium': width === 'medium',
         'controlFrameWrapper--large': width === 'large',
-        // TODO: Add the following classes back once drag and drop logic is added
-        // 'controlFrameWrapper-isDragging': isDragging,
-        // 'controlFrameWrapper--insertBefore': isOver && (index ?? -1) < (draggingIndex ?? -1),
-        // 'controlFrameWrapper--insertAfter': isOver && (index ?? -1) > (draggingIndex ?? -1),
+        'controlFrameWrapper-isDragging': isDragging,
+        'controlFrameWrapper--insertBefore': isOver && (index ?? -1) < (activeIndex ?? -1),
+        'controlFrameWrapper--insertAfter': isOver && (index ?? -1) > (activeIndex ?? -1),
       })}
     >
       <FloatingActions
@@ -135,12 +156,15 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
           <EuiFormControlLayout
             fullWidth
             isLoading={Boolean(dataLoading)}
+            className="controlFrame__formControlLayout"
             prepend={
               <>
                 <DragHandle
                   isEditable={isEditable}
                   controlTitle={panelTitle || defaultPanelTitle}
                   hideEmptyDragHandle={usingTwoLineLayout || Boolean(api?.CustomPrependComponent)}
+                  {...attributes}
+                  {...listeners}
                 />
 
                 {api?.CustomPrependComponent ? (

diff --git a/examples/controls_example/public/react_controls/control_group/get_control_group_factory.tsx b/examples/controls_example/public/react_controls/control_group/get_control_group_factory.tsx
@@ -6,10 +6,26 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { BehaviorSubject } from 'rxjs';
 
-import { EuiFlexGroup } from '@elastic/eui';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  KeyboardSensor,
+  MeasuringStrategy,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
 import {
   ControlGroupChainingSystem,
   ControlWidth,
@@ -33,7 +49,7 @@ import {
   PublishesDataViews,
   PublishesFilters,
   PublishesTimeslice,
-  useStateFromPublishingSubject,
+  useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
 
 import { ControlRenderer } from '../control_renderer';
@@ -47,6 +63,7 @@ import {
   ControlGroupSerializedState,
   ControlGroupUnsavedChanges,
 } from './types';
+import { ControlClone } from '../components/control_clone';
 
 export const getControlGroupEmbeddableFactory = (services: {
   core: CoreStart;
@@ -212,7 +229,31 @@ export const getControlGroupEmbeddableFactory = (services: {
       return {
         api,
         Component: () => {
-          const controlsInOrder = useStateFromPublishingSubject(controlsManager.controlsInOrder$);
+          const [controlsInOrder, controlStyle] = useBatchedPublishingSubjects(
+            controlsManager.controlsInOrder$,
+            labelPosition$
+          );
+
+          /** Handle drag and drop */
+          const sensors = useSensors(
+            useSensor(PointerSensor),
+            useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+          );
+          const [draggingId, setDraggingId] = useState<string | null>(null);
+          const onDragEnd = useCallback(
+            ({ over, active }: DragEndEvent) => {
+              const oldIndex = active?.data.current?.sortable.index;
+              const newIndex = over?.data.current?.sortable.index;
+              if (oldIndex !== undefined && newIndex !== undefined && oldIndex !== newIndex) {
+                controlsManager.controlsInOrder$.next(
+                  arrayMove([...controlsInOrder], oldIndex, newIndex)
+                );
+              }
+              (document.activeElement as HTMLElement)?.blur(); // hide hover actions on drop; otherwise, they get stuck
+              setDraggingId(null);
+            },
+            [controlsInOrder]
+          );
 
           useEffect(() => {
             return () => {
@@ -223,19 +264,47 @@ export const getControlGroupEmbeddableFactory = (services: {
           }, []);
 
           return (
-            <EuiFlexGroup className={'controlGroup'} alignItems="center" gutterSize="s" wrap={true}>
-              {controlsInOrder.map(({ id, type }) => (
-                <ControlRenderer
-                  key={id}
-                  uuid={id}
-                  type={type}
-                  getParentApi={() => api}
-                  onApiAvailable={(controlApi) => {
-                    controlsManager.setControlApi(id, controlApi);
+            <EuiPanel
+              borderRadius="m"
+              paddingSize="none"
+              color={draggingId ? 'success' : 'transparent'}
+            >
+              <EuiFlexGroup alignItems="center" gutterSize="s" wrap={true}>
+                <DndContext
+                  onDragStart={({ active }) => setDraggingId(`${active.id}`)}
+                  onDragEnd={onDragEnd}
+                  onDragCancel={() => setDraggingId(null)}
+                  sensors={sensors}
+                  measuring={{
+                    droppable: {
+                      strategy: MeasuringStrategy.BeforeDragging,
+                    },
                   }}
-                />
-              ))}
-            </EuiFlexGroup>
+                >
+                  <SortableContext items={controlsInOrder} strategy={rectSortingStrategy}>
+                    {controlsInOrder.map(({ id, type }) => (
+                      <ControlRenderer
+                        key={id}
+                        uuid={id}
+                        type={type}
+                        getParentApi={() => api}
+                        onApiAvailable={(controlApi) => {
+                          controlsManager.setControlApi(id, controlApi);
+                        }}
+                      />
+                    ))}
+                  </SortableContext>
+                  <DragOverlay>
+                    {draggingId ? (
+                      <ControlClone
+                        controlStyle={controlStyle}
+                        controlApi={controlsManager.getControlApi(draggingId)}
+                      />
+                    ) : null}
+                  </DragOverlay>
+                </DndContext>
+              </EuiFlexGroup>
+            </EuiPanel>
           );
         },
       };

diff --git a/examples/controls_example/public/react_controls/control_group/init_controls_manager.ts b/examples/controls_example/public/react_controls/control_group/init_controls_manager.ts
@@ -19,19 +19,22 @@ import { omit } from 'lodash';
 import { ControlPanelsState, ControlPanelState } from './types';
 import { DefaultControlApi, DefaultControlState } from '../types';
 
+type ControlOrder = Array<{ id: string; type: string }>;
+
 export function initControlsManager(initialControlPanelsState: ControlPanelsState) {
   const children$ = new BehaviorSubject<{ [key: string]: DefaultControlApi }>({});
   const controlsPanelState: { [panelId: string]: DefaultControlState } = {
     ...initialControlPanelsState,
   };
-  const controlsInOrder$ = new BehaviorSubject<Array<{ id: string; type: string }>>(
+  const controlsInOrder$ = new BehaviorSubject<ControlOrder>(
     Object.keys(initialControlPanelsState)
       .map((key) => ({
         id: key,
         order: initialControlPanelsState[key].order,
         type: initialControlPanelsState[key].type,
       }))
       .sort((a, b) => (a.order > b.order ? 1 : -1))
+      .map(({ id, type }) => ({ id, type })) // filter out `order`
   );
 
   function untilControlLoaded(
@@ -85,7 +88,7 @@ export function initControlsManager(initialControlPanelsState: ControlPanelsStat
   }
 
   return {
-    controlsInOrder$: controlsInOrder$ as PublishingSubject<Array<{ id: string; type: string }>>,
+    controlsInOrder$,
     getControlApi,
     setControlApi: (uuid: string, controlApi: DefaultControlApi) => {
       children$.next({

diff --git a/examples/controls_example/public/react_controls/control_renderer.tsx b/examples/controls_example/public/react_controls/control_renderer.tsx
@@ -13,7 +13,7 @@ import { StateComparators } from '@kbn/presentation-publishing';
 
 import { getControlFactory } from './control_factory_registry';
 import { ControlGroupApi } from './control_group/types';
-import { ControlPanel } from './control_panel';
+import { ControlPanel } from './components/control_panel';
 import { ControlApiRegistration, DefaultControlApi, DefaultControlState } from './types';
 
 /**
@@ -68,6 +68,7 @@ export const ControlRenderer = <
         return React.forwardRef<typeof api, { className: string }>((props, ref) => {
           // expose the api into the imperative handle
           useImperativeHandle(ref, () => api, []);
+
           return <Component {...props} />;
         });
       })(),
@@ -79,5 +80,5 @@ export const ControlRenderer = <
     [type]
   );
 
-  return <ControlPanel<ApiType> Component={component} />;
+  return <ControlPanel<ApiType> Component={component} uuid={uuid} />;
 };
diff --git a/...trols_example/public/react_controls/timeslider_control/get_timeslider_control_factory.tsx b/...trols_example/public/react_controls/timeslider_control/get_timeslider_control_factory.tsx
@@ -185,7 +185,8 @@ export const getTimesliderControlFactory = (
       const viewModeSubject =
         getViewModeSubject(controlGroupApi) ?? new BehaviorSubject('view' as ViewMode);
 
-      const defaultControl = initializeDefaultControlApi(initialState);
+      // overwrite the `width` attribute because time slider should always have a width of large
+      const defaultControl = initializeDefaultControlApi({ ...initialState, width: 'large' });
 
       const dashboardDataLoading$ =
         apiHasParentApi(controlGroupApi) && apiPublishesDataLoading(controlGroupApi.parentApi)

diff --git a/examples/controls_example/public/react_controls/types.ts b/examples/controls_example/public/react_controls/types.ts
@@ -96,5 +96,6 @@ export interface ControlPanelProps<
   ApiType extends DefaultControlApi = DefaultControlApi,
   PropsType extends {} = { className: string }
 > {
+  uuid: string;
   Component: PanelCompatibleComponent<ApiType, PropsType>;
 }