superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch chris--top-level-tabs updated: [dnd] clean up dropResult shape, add new component source id + type, use css for drop indicator instead of styles and fix tab indicators.
Date Fri, 16 Mar 2018 08:31:21 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch chris--top-level-tabs
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/chris--top-level-tabs by this push:
     new 43f622b  [dnd] clean up dropResult shape, add new component source id + type, use
css for drop indicator instead of styles and fix tab indicators.
43f622b is described below

commit 43f622bf540cdd8e303d3955c81212f633bd11b1
Author: Chris Williams <chris.williams@airbnb.com>
AuthorDate: Fri Mar 16 01:31:02 2018 -0700

    [dnd] clean up dropResult shape, add new component source id + type, use css for drop
indicator instead of styles and fix tab indicators.
---
 .../javascripts/dashboard/v2/actions/index.js      | 17 ++++---
 .../dashboard/v2/components/dnd/DragDroppable.jsx  | 32 +++++++-----
 .../v2/components/dnd/dragDroppableConfig.js       | 11 ++--
 .../dashboard/v2/components/dnd/handleDrop.js      | 18 ++++---
 .../dashboard/v2/components/dnd/handleHover.js     | 19 +------
 .../dashboard/v2/components/gridComponents/Tab.jsx |  3 +-
 .../v2/components/gridComponents/Tabs.jsx          | 13 +++--
 .../gridComponents/new/DraggableNewComponent.jsx   |  4 +-
 .../javascripts/dashboard/v2/reducers/dashboard.js | 27 +++++-----
 .../dashboard/v2/stylesheets/components/tabs.less  | 14 ++++-
 .../javascripts/dashboard/v2/stylesheets/dnd.less  | 59 +++++++++++++++-------
 .../javascripts/dashboard/v2/stylesheets/grid.less | 19 +++++++
 .../dashboard/v2/util/componentTypes.js            |  2 +
 .../javascripts/dashboard/v2/util/constants.js     |  1 +
 .../javascripts/dashboard/v2/util/dnd-reorder.js   | 18 +++----
 .../dashboard/v2/util/getDropPosition.js           |  2 +-
 .../dashboard/v2/util/newEntitiesFromDrop.js       | 16 ++----
 17 files changed, 166 insertions(+), 109 deletions(-)

diff --git a/superset/assets/javascripts/dashboard/v2/actions/index.js b/superset/assets/javascripts/dashboard/v2/actions/index.js
index 99ce5f3..eb5f3cb 100644
--- a/superset/assets/javascripts/dashboard/v2/actions/index.js
+++ b/superset/assets/javascripts/dashboard/v2/actions/index.js
@@ -1,4 +1,4 @@
-import { DASHBOARD_ROOT_ID } from '../util/constants';
+import { DASHBOARD_ROOT_ID, NEW_COMPONENTS_SOURCE_ID } from '../util/constants';
 import findParentId from '../util/findParentId';
 import { TABS_TYPE } from '../util/componentTypes';
 
@@ -68,8 +68,8 @@ export const HANDLE_COMPONENT_DROP = 'HANDLE_COMPONENT_DROP';
 export function handleComponentDrop(dropResult) {
   return (dispatch, getState) => {
     const { source, destination } = dropResult;
-    const droppedOnRoot = destination && destination.droppableId === DASHBOARD_ROOT_ID;
-    const isNewComponent = !source; // @TODO create NEW_COMPONENTS source for better readability
+    const droppedOnRoot = destination && destination.id === DASHBOARD_ROOT_ID;
+    const isNewComponent = source.id === NEW_COMPONENTS_SOURCE_ID;
 
     if (droppedOnRoot) {
       dispatch(createTopLevelTabs(dropResult));
@@ -79,21 +79,22 @@ export function handleComponentDrop(dropResult) {
       destination
       && source
       && !( // ensure it has moved
-        destination.droppableId === source.droppableId
+        destination.id === source.id
         && destination.index === source.index
       )
     ) {
       dispatch(moveComponent(dropResult));
     }
 
-    if (source) {
+    // if we moved a tab and the parent tabs no longer has children, delete it.
+    if (!isNewComponent) {
       const { dashboard: undoableDashboard } = getState();
       const { present: dashboard } = undoableDashboard;
-      const sourceComponent = dashboard[source.droppableId];
+      const sourceComponent = dashboard[source.id];
 
       if (sourceComponent.type === TABS_TYPE && sourceComponent.children.length ===
0) {
-        const parentId = findParentId({ childId: source.droppableId, components: dashboard
});
-        dispatch(deleteComponent(source.droppableId, parentId));
+        const parentId = findParentId({ childId: source.id, components: dashboard });
+        dispatch(deleteComponent(source.id, parentId));
       }
     }
 
diff --git a/superset/assets/javascripts/dashboard/v2/components/dnd/DragDroppable.jsx b/superset/assets/javascripts/dashboard/v2/components/dnd/DragDroppable.jsx
index 86329ab..511d67b 100644
--- a/superset/assets/javascripts/dashboard/v2/components/dnd/DragDroppable.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/dnd/DragDroppable.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { DragSource, DropTarget } from 'react-dnd';
 import cx from 'classnames';
 
-import { dragConfig, dropConfig } from './dragDroppableConfig';
 import { componentShape } from '../../util/propShapes';
-
+import { dragConfig, dropConfig } from './dragDroppableConfig';
+import { DROP_TOP, DROP_RIGHT, DROP_BOTTOM, DROP_LEFT } from '../../util/getDropPosition';
 
 const propTypes = {
   children: PropTypes.func,
@@ -16,6 +16,7 @@ const propTypes = {
   orientation: PropTypes.oneOf(['row', 'column']),
   index: PropTypes.number.isRequired,
   style: PropTypes.object,
+  onDrop: PropTypes.func,
 
   // from react-dnd
   isDragging: PropTypes.bool.isRequired,
@@ -24,9 +25,6 @@ const propTypes = {
   droppableRef: PropTypes.func.isRequired,
   dragSourceRef: PropTypes.func.isRequired,
   dragPreviewRef: PropTypes.func.isRequired,
-
-  // from redux
-  onDrop: PropTypes.func,
 };
 
 const defaultProps = {
@@ -45,6 +43,7 @@ class DragDroppable extends React.Component {
     this.state = {
       dropIndicator: null, // this gets set/modified by the react-dnd HOCs
     };
+    this.setRef = this.setRef.bind(this);
   }
 
   componentDidMount() {
@@ -55,14 +54,18 @@ class DragDroppable extends React.Component {
     this.mounted = false;
   }
 
+  setRef(ref) {
+    this.ref = ref;
+    this.props.dragPreviewRef(ref);
+    this.props.droppableRef(ref);
+  }
+
   render() {
     const {
       children,
       className,
       orientation,
-      droppableRef,
       dragSourceRef,
-      dragPreviewRef,
       isDragging,
       isDraggingOver,
       style,
@@ -73,11 +76,7 @@ class DragDroppable extends React.Component {
     return (
       <div
         style={style}
-        ref={(ref) => {
-          this.ref = ref;
-          dragPreviewRef(ref);
-          droppableRef(ref);
-        }}
+        ref={this.setRef}
         className={cx(
           'dragdroppable',
           orientation === 'row' && 'dragdroppable-row',
@@ -89,8 +88,13 @@ class DragDroppable extends React.Component {
         {children({
           dragSourceRef,
           dropIndicatorProps: isDraggingOver && dropIndicator && {
-            className: 'drop-indicator',
-            style: dropIndicator,
+            className: cx(
+              'drop-indicator',
+              dropIndicator === DROP_TOP && 'drop-indicator--top',
+              dropIndicator === DROP_BOTTOM && 'drop-indicator--bottom',
+              dropIndicator === DROP_LEFT && 'drop-indicator--left',
+              dropIndicator === DROP_RIGHT && 'drop-indicator--right',
+            ),
           },
         })}
       </div>
diff --git a/superset/assets/javascripts/dashboard/v2/components/dnd/dragDroppableConfig.js
b/superset/assets/javascripts/dashboard/v2/components/dnd/dragDroppableConfig.js
index e6d5533..55d7e1d 100644
--- a/superset/assets/javascripts/dashboard/v2/components/dnd/dragDroppableConfig.js
+++ b/superset/assets/javascripts/dashboard/v2/components/dnd/dragDroppableConfig.js
@@ -10,13 +10,16 @@ export const dragConfig = [
     canDrag(props) {
       return !props.disableDragDrop;
     },
+
+    // this defines the dragging item object returned by monitor.getItem()
     beginDrag(props /* , monitor, component */) {
-      const { component, index, parentComponent } = props;
+      const { component, index, parentComponent = {} } = props;
       return {
-        draggableId: component.id,
-        index,
-        parentId: parentComponent && parentComponent.id,
         type: component.type,
+        id: component.id,
+        index,
+        parentId: parentComponent.id,
+        parentType: parentComponent.type,
       };
     },
   },
diff --git a/superset/assets/javascripts/dashboard/v2/components/dnd/handleDrop.js b/superset/assets/javascripts/dashboard/v2/components/dnd/handleDrop.js
index c81a04e..2207ca6 100644
--- a/superset/assets/javascripts/dashboard/v2/components/dnd/handleDrop.js
+++ b/superset/assets/javascripts/dashboard/v2/components/dnd/handleDrop.js
@@ -27,17 +27,22 @@ export default function handleDrop(props, monitor, Component) {
     ? 'sibling' : 'child';
 
   const dropResult = {
-    source: draggingItem.parentId ? {
-      droppableId: draggingItem.parentId,
+    source: {
+      id: draggingItem.parentId,
+      type: draggingItem.parentType,
       index: draggingItem.index,
-    } : null,
-    draggableId: draggingItem.draggableId,
+    },
+    dragging: {
+      id: draggingItem.id,
+      type: draggingItem.type,
+    },
   };
 
   // simplest case, append as child
   if (dropAsChildOrSibling === 'child') {
     dropResult.destination = {
-      droppableId: component.id,
+      id: component.id,
+      type: component.type,
       index: component.children.length,
     };
   } else {
@@ -52,7 +57,8 @@ export default function handleDrop(props, monitor, Component) {
     }
 
     dropResult.destination = {
-      droppableId: parentComponent.id,
+      id: parentComponent.id,
+      type: parentComponent.type,
       index: nextIndex,
     };
   }
diff --git a/superset/assets/javascripts/dashboard/v2/components/dnd/handleHover.js b/superset/assets/javascripts/dashboard/v2/components/dnd/handleHover.js
index bccd5d6..a303e13 100644
--- a/superset/assets/javascripts/dashboard/v2/components/dnd/handleHover.js
+++ b/superset/assets/javascripts/dashboard/v2/components/dnd/handleHover.js
@@ -1,8 +1,7 @@
 import throttle from 'lodash.throttle';
-import getDropPosition, { DROP_TOP, DROP_RIGHT, DROP_BOTTOM, DROP_LEFT } from '../../util/getDropPosition';
+import getDropPosition from '../../util/getDropPosition';
 
 const HOVER_THROTTLE_MS = 200;
-const INDICATOR_THICKNESS = 4;
 
 function handleHover(props, monitor, Component) {
   // this may happen due to throttling
@@ -15,22 +14,8 @@ function handleHover(props, monitor, Component) {
     return;
   }
 
-  // @TODO
-  // drop-indicator
-  // drop-indicator--top/right/bottom/left
   Component.setState(() => ({
-    dropIndicator: {
-      top: dropPosition === DROP_BOTTOM ? '100%' : 0,
-      left: dropPosition === DROP_RIGHT ? '100%' : 0,
-      height: dropPosition === DROP_LEFT || dropPosition === DROP_RIGHT ? '100%' : INDICATOR_THICKNESS,
-      width: dropPosition === DROP_TOP || dropPosition === DROP_BOTTOM ? '100%' : INDICATOR_THICKNESS,
-      minHeight: dropPosition === DROP_LEFT || dropPosition === DROP_RIGHT ? 16 : null,
-      minWidth: dropPosition === DROP_TOP || dropPosition === DROP_BOTTOM ? 16 : null,
-      margin: 'auto',
-      backgroundColor: '#44C0FF',
-      position: 'absolute',
-      zIndex: 10,
-    },
+    dropIndicator: dropPosition,
   }));
 }
 
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tab.jsx b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tab.jsx
index 96d884e..25f8a9b 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tab.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tab.jsx
@@ -18,7 +18,7 @@ const propTypes = {
   parentComponent: componentShape.isRequired,
   index: PropTypes.number.isRequired,
   depth: PropTypes.number.isRequired,
-  renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]),
+  renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
   onDropOnTab: PropTypes.func,
   onDeleteTab: PropTypes.func,
 
@@ -40,7 +40,6 @@ const defaultProps = {
   columnWidth: 0,
   onDropOnTab() {},
   onDeleteTab() {},
-  renderType: RENDER_TAB_CONTENT,
   onResizeStart() {},
   onResize() {},
   onResizeStop() {},
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tabs.jsx b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tabs.jsx
index 3e2d9cc..d1c7cf1 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tabs.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Tabs.jsx
@@ -10,6 +10,7 @@ import HoverMenu from '../menu/HoverMenu';
 import { componentShape } from '../../util/propShapes';
 import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
 import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab';
+import { TAB_TYPE } from '../../util/componentTypes';
 
 const NEW_TAB_INDEX = -1;
 const MAX_TAB_COUNT = 5;
@@ -79,10 +80,14 @@ class Tabs extends React.PureComponent {
     } else if (tabIndex === NEW_TAB_INDEX) {
       createComponent({
         destination: {
-          droppableId: component.id,
+          id: component.id,
+          type: component.type,
           index: component.children.length,
         },
-        draggableId: NEW_TAB_ID,
+        dragging: {
+          id: NEW_TAB_ID,
+          type: TAB_TYPE,
+        },
       });
     }
   }
@@ -102,9 +107,9 @@ class Tabs extends React.PureComponent {
     // Ensure dropped tab is visible
     const { destination } = dropResult;
     if (destination) {
-      const dropTabIndex = destination.droppableId === component.id
+      const dropTabIndex = destination.id === component.id
         ? destination.index // dropped ON tabs
-        : component.children.indexOf(destination.droppableId); // dropped IN tab
+        : component.children.indexOf(destination.id); // dropped IN tab
 
       if (dropTabIndex > -1) {
         setTimeout(() => {
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/new/DraggableNewComponent.jsx
b/superset/assets/javascripts/dashboard/v2/components/gridComponents/new/DraggableNewComponent.jsx
index c4d8d62..465209d 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/new/DraggableNewComponent.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/new/DraggableNewComponent.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import DragDroppable from '../../dnd/DragDroppable';
+import { NEW_COMPONENTS_SOURCE_ID } from '../../../util/constants';
+import { NEW_COMPONENT_SOURCE_TYPE } from '../../../util/componentTypes';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -21,7 +23,7 @@ export default class DraggableNewComponent extends React.PureComponent {
     return (
       <DragDroppable
         component={{ type, id }}
-        parentComponent={null}
+        parentComponent={{ id: NEW_COMPONENTS_SOURCE_ID, type: NEW_COMPONENT_SOURCE_TYPE
}}
         index={0}
       >
         {({ dragSourceRef }) => (
diff --git a/superset/assets/javascripts/dashboard/v2/reducers/dashboard.js b/superset/assets/javascripts/dashboard/v2/reducers/dashboard.js
index 418b2aa..1d706d7 100644
--- a/superset/assets/javascripts/dashboard/v2/reducers/dashboard.js
+++ b/superset/assets/javascripts/dashboard/v2/reducers/dashboard.js
@@ -1,4 +1,4 @@
-import { DASHBOARD_ROOT_ID, DASHBOARD_GRID_ID } from '../util/constants';
+import { DASHBOARD_ROOT_ID, DASHBOARD_GRID_ID, NEW_COMPONENTS_SOURCE_ID } from '../util/constants';
 import newComponentFactory from '../util/newComponentFactory';
 import newEntitiesFromDrop from '../util/newEntitiesFromDrop';
 import reorderItem from '../util/dnd-reorder';
@@ -70,10 +70,9 @@ const actionHandlers = {
 
   [MOVE_COMPONENT](state, action) {
     const { payload: { dropResult } } = action;
-    const { source, destination, draggableId } = dropResult;
-    const draggableType = (state[draggableId] || {}).type;
+    const { source, destination, dragging } = dropResult;
 
-    if (!source || !destination || !draggableId) return state;
+    if (!source || !destination || !dragging) return state;
 
     const nextEntities = reorderItem({
       entitiesMap: state,
@@ -82,14 +81,13 @@ const actionHandlers = {
     });
 
     // wrap the dragged component in a row depening on destination type
-    const destinationType = (state[destination.droppableId] || {}).type;
     const wrapInRow = shouldWrapChildInRow({
-      parentType: destinationType,
-      childType: draggableType,
+      parentType: destination.type,
+      childType: dragging.type,
     });
 
     if (wrapInRow) {
-      const destinationEntity = nextEntities[destination.droppableId];
+      const destinationEntity = nextEntities[destination.id];
       const destinationChildren = destinationEntity.children;
       const newRow = newComponentFactory(ROW_TYPE);
       newRow.children = [destinationChildren[destination.index]];
@@ -105,26 +103,27 @@ const actionHandlers = {
 
   [CREATE_TOP_LEVEL_TABS](state, action) {
     const { payload: { dropResult } } = action;
-    const { source, draggableId } = dropResult;
+    const { source, dragging } = dropResult;
 
     // move children of current root to be children of the dragging tab
     const rootComponent = state[DASHBOARD_ROOT_ID];
     const topLevelId = rootComponent.children[0];
     const topLevelComponent = state[topLevelId];
 
-    if (source) {
-      const draggingTabs = state[draggableId];
+    if (source.id !== NEW_COMPONENTS_SOURCE_ID) {
+      // component already exists
+      const draggingTabs = state[dragging.id];
       const draggingTabId = draggingTabs.children[0];
       const draggingTab = state[draggingTabId];
 
       // move all children except the one that is dragging
-      const childrenToMove = [...topLevelComponent.children].filter(id => id !== draggableId);
+      const childrenToMove = [...topLevelComponent.children].filter(id => id !== dragging.id);
 
       return {
         ...state,
         [DASHBOARD_ROOT_ID]: {
           ...rootComponent,
-          children: [draggableId],
+          children: [dragging.id],
         },
         [topLevelId]: {
           ...topLevelComponent,
@@ -139,6 +138,8 @@ const actionHandlers = {
         },
       };
     }
+
+    // create new component
     const newEntities = newEntitiesFromDrop({ dropResult, components: state });
     const newEntitiesArray = Object.values(newEntities);
     const tabComponent = newEntitiesArray.find(component => component.type === TAB_TYPE);
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
index 1bf79dc..e70459e 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
@@ -54,9 +54,21 @@
 
 .dashboard-component-tabs .nav-tabs > li .drop-indicator {
   top: -12px !important;
+  height: ~"calc(100% + 24px)" !important;
+}
+
+.dashboard-component-tabs .nav-tabs > li .drop-indicator--left {
+  left: -12px !important;
+}
+
+.dashboard-component-tabs .nav-tabs > li .drop-indicator--right {
+  right: -12px !important;
+}
+
+.dashboard-component-tabs .nav-tabs > li .drop-indicator--top,
+.dashboard-component-tabs .nav-tabs > li .drop-indicator--bottom {
   left: -12px !important;
   width: ~"calc(100% + 24px)" !important; /* escape for .less */
-  height: ~"calc(100% + 24px)" !important;
   opacity: 0.4;
 }
 
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less b/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
index cb1d46c..45a9784 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
@@ -10,6 +10,47 @@
   width: 100%;
 }
 
+/* drop indicators */
+.drop-indicator {
+  margin: auto;
+  background-color: @indicator-color;
+  position: absolute;
+  z-index: 10;
+}
+
+.drop-indicator--top {
+  top: 0;
+  left: 0;
+  height: 4px;
+  width: 100%;
+  min-width: 16px;
+}
+
+.drop-indicator--bottom {
+  top: 100%;
+  left: 0;
+  height: 4px;
+  width: 100%;
+  min-width: 16px;
+}
+
+.drop-indicator--right {
+  top: 0;
+  left: 100%;
+  height: 100%;
+  width: 4px;
+  min-height: 16px;
+}
+
+.drop-indicator--left {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 4px;
+  min-height: 16px;
+}
+
+/* drag handles */
 .drag-handle {
   overflow: hidden;
   width: 16px;
@@ -35,21 +76,3 @@
   margin: -1px;
   width: 2px;
 }
-
-.grid-container .grid-row:after,
-.grid-container .grid-column:after {
-  border: 1px dashed transparent;
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 1px;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.grid-container .grid-row:hover:after,
-.grid-container .grid-column:hover:after {
-  border: 1px dashed #aaa;
-}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/grid.less b/superset/assets/javascripts/dashboard/v2/stylesheets/grid.less
index 00fc84f..805a57b 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/grid.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/grid.less
@@ -31,3 +31,22 @@
   background-color: var(--indicator-color);
   pointer-events: none;
 }
+
+
+.grid-container .grid-row:after,
+.grid-container .grid-column:after {
+  border: 1px dashed transparent;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 1px;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.grid-container .grid-row:hover:after,
+.grid-container .grid-column:hover:after {
+  border: 1px dashed #aaa;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/util/componentTypes.js b/superset/assets/javascripts/dashboard/v2/util/componentTypes.js
index b6de8fe..c667138 100644
--- a/superset/assets/javascripts/dashboard/v2/util/componentTypes.js
+++ b/superset/assets/javascripts/dashboard/v2/util/componentTypes.js
@@ -6,6 +6,7 @@ export const DASHBOARD_ROOT_TYPE = 'DASHBOARD_ROOT_TYPE';
 export const DIVIDER_TYPE = 'DASHBOARD_DIVIDER_TYPE';
 export const HEADER_TYPE = 'DASHBOARD_HEADER_TYPE';
 export const MARKDOWN_TYPE = 'DASHBOARD_MARKDOWN_TYPE';
+export const NEW_COMPONENT_SOURCE_TYPE = 'NEW_COMPONENT_SOURCE_TYPE';
 export const ROW_TYPE = 'DASHBOARD_ROW_TYPE';
 export const SPACER_TYPE = 'DASHBOARD_SPACER_TYPE';
 export const TABS_TYPE = 'DASHBOARD_TABS_TYPE';
@@ -20,6 +21,7 @@ export default {
   DIVIDER_TYPE,
   HEADER_TYPE,
   MARKDOWN_TYPE,
+  NEW_COMPONENT_SOURCE_TYPE,
   ROW_TYPE,
   SPACER_TYPE,
   TABS_TYPE,
diff --git a/superset/assets/javascripts/dashboard/v2/util/constants.js b/superset/assets/javascripts/dashboard/v2/util/constants.js
index 737d1c9..b57ed93 100644
--- a/superset/assets/javascripts/dashboard/v2/util/constants.js
+++ b/superset/assets/javascripts/dashboard/v2/util/constants.js
@@ -3,6 +3,7 @@ export const DASHBOARD_GRID_ID = 'DASHBOARD_GRID_ID';
 export const DASHBOARD_HEADER_ID = 'DASHBOARD_HEADER_ID';
 export const DASHBOARD_ROOT_ID = 'DASHBOARD_ROOT_ID';
 
+export const NEW_COMPONENTS_SOURCE_ID = 'NEW_COMPONENTS_SOURCE_ID';
 export const NEW_CHART_ID = 'NEW_CHART_ID';
 export const NEW_COLUMN_ID = 'NEW_COLUMN_ID';
 export const NEW_DIVIDER_ID = 'NEW_DIVIDER_ID';
diff --git a/superset/assets/javascripts/dashboard/v2/util/dnd-reorder.js b/superset/assets/javascripts/dashboard/v2/util/dnd-reorder.js
index 5ebca8c..9a0dedf 100644
--- a/superset/assets/javascripts/dashboard/v2/util/dnd-reorder.js
+++ b/superset/assets/javascripts/dashboard/v2/util/dnd-reorder.js
@@ -11,12 +11,12 @@ export default function reorderItem({
   source,
   destination,
 }) {
-  const current = [...entitiesMap[source.droppableId].children];
-  const next = [...entitiesMap[destination.droppableId].children];
+  const current = [...entitiesMap[source.id].children];
+  const next = [...entitiesMap[destination.id].children];
   const target = current[source.index];
 
   // moving to same list
-  if (source.droppableId === destination.droppableId) {
+  if (source.id === destination.id) {
     const reordered = reorder(
       current,
       source.index,
@@ -25,8 +25,8 @@ export default function reorderItem({
 
     const result = {
       ...entitiesMap,
-      [source.droppableId]: {
-        ...entitiesMap[source.droppableId],
+      [source.id]: {
+        ...entitiesMap[source.id],
         children: reordered,
       },
     };
@@ -40,12 +40,12 @@ export default function reorderItem({
 
   const result = {
     ...entitiesMap,
-    [source.droppableId]: {
-      ...entitiesMap[source.droppableId],
+    [source.id]: {
+      ...entitiesMap[source.id],
       children: current,
     },
-    [destination.droppableId]: {
-      ...entitiesMap[destination.droppableId],
+    [destination.id]: {
+      ...entitiesMap[destination.id],
       children: next,
     },
   };
diff --git a/superset/assets/javascripts/dashboard/v2/util/getDropPosition.js b/superset/assets/javascripts/dashboard/v2/util/getDropPosition.js
index c1ff64a..9922d1b 100644
--- a/superset/assets/javascripts/dashboard/v2/util/getDropPosition.js
+++ b/superset/assets/javascripts/dashboard/v2/util/getDropPosition.js
@@ -18,7 +18,7 @@ export default function getDropPosition(monitor, Component) {
   const draggingItem = monitor.getItem();
 
   // if dropped self on self, do nothing
-  if (!draggingItem || draggingItem.draggableId === component.id || !isDraggingOverShallow)
{
+  if (!draggingItem || draggingItem.id === component.id || !isDraggingOverShallow) {
     return null;
   }
 
diff --git a/superset/assets/javascripts/dashboard/v2/util/newEntitiesFromDrop.js b/superset/assets/javascripts/dashboard/v2/util/newEntitiesFromDrop.js
index a0d92fa..881ab45 100644
--- a/superset/assets/javascripts/dashboard/v2/util/newEntitiesFromDrop.js
+++ b/superset/assets/javascripts/dashboard/v2/util/newEntitiesFromDrop.js
@@ -1,4 +1,3 @@
-import newComponentIdToType from './newComponentIdToType';
 import shouldWrapChildInRow from './shouldWrapChildInRow';
 import newComponentFactory from './newComponentFactory';
 
@@ -9,18 +8,13 @@ import {
 } from './componentTypes';
 
 export default function newEntitiesFromDrop({ dropResult, components }) {
-  const { draggableId, destination } = dropResult;
+  const { dragging, destination } = dropResult;
 
-  const dragType = newComponentIdToType[draggableId];
-  const dropEntity = components[destination.droppableId];
+  const dragType = dragging.type;
+  const dropEntity = components[destination.id];
 
   if (!dropEntity) {
-    console.warn('Drop target entity', destination.droppableId, 'not found');
-    return null;
-  }
-
-  if (!dragType) {
-    console.warn('Drag type not found for id', draggableId);
+    console.warn('Drop target entity', destination.id, 'not found');
     return null;
   }
 
@@ -46,7 +40,7 @@ export default function newEntitiesFromDrop({ dropResult, components })
{
   const nextDropChildren = [...dropEntity.children];
   nextDropChildren.splice(destination.index, 0, newDropChild.id);
 
-  newEntities[destination.droppableId] = {
+  newEntities[destination.id] = {
     ...dropEntity,
     children: nextDropChildren,
   };

-- 
To stop receiving notification emails like this one, please contact
ccwilliams@apache.org.

Mime
View raw message