Add Drag & Drop Across Axis Functionality to Vis Builder

src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx

@@ -5,22 +5,49 @@
 
 import { EuiForm } from '@elastic/eui';
 import React from 'react';
-import { useVisualizationType } from '../../utils/use';
-import { useTypedSelector } from '../../utils/state_management';
+
 import './config_panel.scss';
 import { mapSchemaToAggPanel } from './schema_to_dropbox';
 import { SecondaryPanel } from './secondary_panel';
+import { Schemas } from '../../../../../vis_default_editor/public';
+import {
+  AggConfig,
+  AggConfigs,
+  CreateAggConfigParams,
+} from '../../../../../data/common/search/aggs';
+import { IndexPattern, TimeRange } from '../../../../../data/public';
+import { SchemaDisplayStates } from '.';
 
-export function ConfigPanel() {
-  const vizType = useVisualizationType();
-  const editingState = useTypedSelector(
-    (state) => state.visualization.activeVisualization?.draftAgg
-  );
-  const schemas = vizType.ui.containerConfig.data.schemas;
+export interface AggProps {
+  indexPattern: IndexPattern | undefined;
+  aggConfigs: AggConfigs | undefined;
+  aggs: AggConfig[];
+  timeRange: TimeRange;
+}
 
+export interface ConfigPanelProps {
+  schemas: Schemas;
+  editingState?: CreateAggConfigParams;
+  aggProps: AggProps;
+  schemaDisplayStates: SchemaDisplayStates;
+  setSchemaDisplayStates: React.Dispatch<React.SetStateAction<SchemaDisplayStates>>;
+}
+
+export function ConfigPanel({
+  schemas,
+  editingState,
+  aggProps,
+  schemaDisplayStates,
+  setSchemaDisplayStates,
+}: ConfigPanelProps) {
   if (!schemas) return null;
 
-  const mainPanel = mapSchemaToAggPanel(schemas);
+  const mainPanel = mapSchemaToAggPanel(
+    schemas,
+    aggProps,
+    schemaDisplayStates,
+    setSchemaDisplayStates
+  );
 
   return (
     <EuiForm className={`vbConfig ${editingState ? 'showSecondary' : ''}`}>

src/plugins/vis_builder/public/application/components/data_tab/dropbox.scss

@@ -15,6 +15,10 @@
     border-bottom: none;
   }
 
+  &__droppable {
+    min-height: 1px;
+  }
+
   &__container {
     display: grid;
     grid-gap: calc($euiSizeXS / 2);

src/plugins/vis_builder/public/application/components/data_tab/dropbox.tsx

@@ -6,13 +6,11 @@
 import { i18n } from '@osd/i18n';
 import {
   EuiButtonIcon,
-  EuiDragDropContext,
   EuiDraggable,
   EuiDroppable,
   EuiFormRow,
   EuiPanel,
   EuiText,
-  DropResult,
 } from '@elastic/eui';
 import React, { useCallback, useState } from 'react';
 import { IDropAttributes, IDropState } from '../../utils/drag_drop';
@@ -51,25 +49,13 @@
   onAddField,
   onDeleteField,
   onEditField,
-  onReorderField,
   limit = 1,
   isValidDropTarget,
   canDrop,
   dropProps,
 }: DropboxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
   const [closing, setClosing] = useState<boolean | string>(false);
-  const handleDragEnd = useCallback(
-    ({ source, destination }: DropResult) => {
-      if (!destination) return;
-
-      onReorderField({
-        sourceAggId: fields[source.index].id,
-        destinationAggId: fields[destination.index].id,
-      });
-    },
-    [fields, onReorderField]
-  );
 
   const animateDelete = useCallback(
     (id: string) => {
@@ -86,71 +72,72 @@
   );
 
   return (
-    <EuiDragDropContext onDragEnd={handleDragEnd}>
-      <EuiFormRow label={boxLabel} className="dropBox" fullWidth>
-        <div className="dropBox__container">
-          <EuiDroppable droppableId={dropboxId}>
-            {fields.map(({ id, label }, index) => (
-              <EuiDraggable
-                className={`dropBox__draggable ${id === closing && 'closing'}`}
-                key={id}
-                draggableId={id}
-                index={index}
-              >
-                <EuiPanel
-                  key={index}
-                  paddingSize="s"
-                  className="dropBox__field"
-                  data-test-subj={`dropBoxField-${dropboxId}-${index}`}
-                >
-                  <EuiText size="s" className="dropBox__field_text" onClick={() => onEditField(id)}>
-                    <a role="button" tabIndex={0}>
-                      {label}
-                    </a>
-                  </EuiText>
-                  <EuiButtonIcon
-                    color="subdued"
-                    iconType="cross"
-                    aria-label="clear-field"
-                    iconSize="s"
-                    onClick={() => animateDelete(id)}
-                    data-test-subj="dropBoxRemoveBtn"
-                  />
-                </EuiPanel>
-              </EuiDraggable>
-            ))}
-          </EuiDroppable>
-          {fields.length < limit && (
-            <EuiPanel
-              data-test-subj={`dropBoxAddField-${dropboxId}`}
-              className={`dropBox__field dropBox__dropTarget ${
-                isValidDropTarget ? 'validField' : ''
-              } ${canDrop ? 'canDrop' : ''}`}
-              {...(isValidDropTarget && dropProps)}
+    <EuiFormRow label={boxLabel} className="dropBox" fullWidth>
+      <div className="dropBox__container">
+        <EuiDroppable
+          className="dropBox__droppable"
+          droppableId={dropboxId}
+          isCombineEnabled={true}
+        >
+          {fields.map(({ id, label }, index) => (
+            <EuiDraggable
+              className={`dropBox__draggable ${id === closing && 'closing'}`}
+              key={id}
+              draggableId={id}
+              index={index}
             >
-              <EuiText size="s">
-                {i18n.translate('visBuilder.dropbox.addField.title', {
-                  defaultMessage: 'Click or drop to add',
-                })}
-              </EuiText>
-              <EuiButtonIcon
-                iconType="plusInCircle"
-                aria-label="clear-field"
-                iconSize="s"
-                onClick={() => onAddField()}
-                data-test-subj="dropBoxAddBtn"
-              />
-            </EuiPanel>
-          )}
-        </div>
-      </EuiFormRow>
-    </EuiDragDropContext>
+              <EuiPanel
+                key={index}
+                paddingSize="s"
+                className="dropBox__field"
+                data-test-subj={`dropBoxField-${dropboxId}-${index}`}
+              >
+                <EuiText size="s" className="dropBox__field_text" onClick={() => onEditField(id)}>
+                  <a role="button" tabIndex={0}>
+                    {label}
+                  </a>
+                </EuiText>
+                <EuiButtonIcon
+                  color="subdued"
+                  iconType="cross"
+                  aria-label="clear-field"
+                  iconSize="s"
+                  onClick={() => animateDelete(id)}
+                  data-test-subj="dropBoxRemoveBtn"
+                />
+              </EuiPanel>
+            </EuiDraggable>
+          ))}
+        </EuiDroppable>
+        {fields.length < limit && (
+          <EuiPanel
+            data-test-subj={`dropBoxAddField-${dropboxId}`}
+            className={`dropBox__field dropBox__dropTarget ${
+              isValidDropTarget ? 'validField' : ''
+            } ${canDrop ? 'canDrop' : ''}`}
+            {...(isValidDropTarget && dropProps)}
+          >
+            <EuiText size="s">
+              {i18n.translate('visBuilder.dropbox.addField.title', {
+                defaultMessage: 'Click or drop to add',
+              })}
+            </EuiText>
+            <EuiButtonIcon
+              iconType="plusInCircle"
+              aria-label="clear-field"
+              iconSize="s"
+              onClick={() => onAddField()}
+              data-test-subj="dropBoxAddBtn"
+            />
+          </EuiPanel>
+        )}
+      </div>
+    </EuiFormRow>
   );
 };
 
 const Dropbox = React.memo((dropBox: UseDropboxProps) => {
   const props = useDropbox(dropBox);
-
   return <DropboxComponent {...props} />;
 });
 

src/plugins/vis_builder/public/application/components/data_tab/field.test.tsx

@@ -9,6 +9,7 @@ import { render, screen } from '@testing-library/react';
 import { IndexPatternField } from '../../../../../data/public';
 
 import { DraggableFieldButton } from './field';
+import { DropResult, EuiDragDropContext, EuiDroppable } from '@elastic/eui';
 
 describe('visBuilder field', function () {
   describe('DraggableFieldButton', () => {
@@ -28,7 +29,13 @@ describe('visBuilder field', function () {
           'bytes'
         ),
       };
-      render(<DraggableFieldButton {...props} />);
+      render(
+        <EuiDragDropContext onDragEnd={(result: DropResult) => {}}>
+          <EuiDroppable droppableId="1">
+            <DraggableFieldButton index={1} {...props} />
+          </EuiDroppable>
+        </EuiDragDropContext>
+      );
 
       const button = screen.getByTestId('field-bytes-showDetails');
 

src/plugins/vis_builder/public/application/components/data_tab/field.tsx

@@ -29,7 +29,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover } from '@elastic/eui';
+import { EuiDraggable, EuiPopover } from '@elastic/eui';
 
 import { IndexPatternField } from '../../../../../data/public';
 import {
@@ -46,10 +46,11 @@ import './field.scss';
 export interface FieldProps {
   field: IndexPatternField;
   getDetails: (field) => FieldDetails;
+  id: number;
 }
 
 // TODO: Add field sections (Available fields, popular fields from src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx)
-export const Field = ({ field, getDetails }: FieldProps) => {
+export const Field = ({ field, getDetails, id }: FieldProps) => {
   const [infoIsOpen, setOpen] = useState(false);
 
   function togglePopover() {
@@ -60,7 +61,14 @@ export const Field = ({ field, getDetails }: FieldProps) => {
     <EuiPopover
       ownFocus
       display="block"
-      button={<DraggableFieldButton isActive={infoIsOpen} onClick={togglePopover} field={field} />}
+      button={
+        <DraggableFieldButton
+          isActive={infoIsOpen}
+          onClick={togglePopover}
+          field={field}
+          index={id}
+        />
+      }
       isOpen={infoIsOpen}
       closePopover={() => setOpen(false)}
       anchorPosition="rightUp"
@@ -77,9 +85,15 @@ export const Field = ({ field, getDetails }: FieldProps) => {
 export interface DraggableFieldButtonProps extends Partial<FieldButtonProps> {
   dragValue?: IndexPatternField['name'] | null | typeof COUNT_FIELD;
   field: Partial<IndexPatternField> & Pick<IndexPatternField, 'displayName' | 'name' | 'type'>;
+  index: number;
 }
 
-export const DraggableFieldButton = ({ dragValue, field, ...rest }: DraggableFieldButtonProps) => {
+export const DraggableFieldButton = ({
+  dragValue,
+  field,
+  index,
+  ...rest
+}: DraggableFieldButtonProps) => {
   const { name, displayName, type, scripted = false } = field;
   const [dragProps] = useDrag({
     namespace: 'field-data',
@@ -109,5 +123,14 @@ export const DraggableFieldButton = ({ dragValue, field, ...rest }: DraggableFie
     onClick: () => {},
   };
 
-  return <FieldButton {...defaultProps} {...rest} {...dragProps} />;
+  return (
+    <EuiDraggable
+      draggableId={name}
+      index={index}
+      disableInteractiveElementBlocking={true}
+      shouldRespectForcePress
+    >
+      <FieldButton {...defaultProps} {...rest} {...dragProps} />
+    </EuiDraggable>
+  );
 };

src/plugins/vis_builder/public/application/components/data_tab/field_selector.scss

@@ -10,8 +10,6 @@
   padding: $euiSizeS;
 
   &__fieldGroups {
-    @include euiYScrollWithShadows;
-
     overflow-y: auto;
     margin-right: -$euiSizeS;
     padding-right: $euiSizeS;

src/plugins/vis_builder/public/application/components/data_tab/field_selector.test.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { FilterManager, IndexPatternField } from '../../../../../data/public';
 import { FieldGroup } from './field_selector';
+import { DropResult, EuiDragDropContext, EuiDroppable } from '@elastic/eui';
 
 const mockUseIndexPatterns = jest.fn(() => ({ selected: 'mockIndexPattern' }));
 const mockUseOnAddFilter = jest.fn();
@@ -68,7 +69,13 @@ describe('visBuilder sidebar field selector', function () {
         ...defaultProps,
         fields: ['bytes', 'machine.ram', 'memory', 'phpmemory'].map(getFields),
       };
-      const { container } = render(<FieldGroup {...props} />);
+      const { container } = render(
+        <EuiDragDropContext onDragEnd={(result: DropResult) => {}}>
+          <EuiDroppable droppableId="1">
+            <FieldGroup {...props} />
+          </EuiDroppable>
+        </EuiDragDropContext>
+      );
 
       expect(container).toHaveTextContent(props.header);
       expect(container).toHaveTextContent(props.fields.length.toString());