superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch dashboard-builder updated: [dashboard v2] better grid drop ux, fix tab bugs 🐛 (#5151)
Date Thu, 07 Jun 2018 00:47:24 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch dashboard-builder
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/dashboard-builder by this push:
     new 1592f72  [dashboard v2]  better grid drop ux, fix tab bugs 🐛 (#5151)
1592f72 is described below

commit 1592f72c558b3dcbf87fd71be3253a6fec1452fe
Author: Chris Williams <williaster@users.noreply.github.com>
AuthorDate: Wed Jun 6 17:47:21 2018 -0700

    [dashboard v2]  better grid drop ux, fix tab bugs 🐛 (#5151)
    
    * [dashboard v2] add empty droptarget to dashboard grid for better ux and update test
    
    * [dashboard] reset tab index upon top-level tab deletion, fix findparentid bug
    
    * [dashboard] update v1<>v2 modal link for tracking
---
 .../dashboard/components/DashboardGrid_spec.jsx    |  9 ++---
 .../src/dashboard/components/DashboardBuilder.jsx  | 18 +++++-----
 .../src/dashboard/components/DashboardGrid.jsx     | 39 +++++++++++-----------
 .../deprecated/PromptV2ConversionModal.jsx         |  2 +-
 .../src/dashboard/deprecated/V2PreviewModal.jsx    |  2 +-
 superset/assets/src/dashboard/util/findParentId.js |  2 +-
 6 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/superset/assets/spec/javascripts/dashboard/components/DashboardGrid_spec.jsx
b/superset/assets/spec/javascripts/dashboard/components/DashboardGrid_spec.jsx
index 3121e7e..1160d65 100644
--- a/superset/assets/spec/javascripts/dashboard/components/DashboardGrid_spec.jsx
+++ b/superset/assets/spec/javascripts/dashboard/components/DashboardGrid_spec.jsx
@@ -42,12 +42,9 @@ describe('DashboardGrid', () => {
     expect(wrapper.find(DashboardComponent)).to.have.length(2);
   });
 
-  it('should render an empty DragDroppables target when the gridComponent has no children',
() => {
-    const withChildren = setup({ editMode: true });
-    const withoutChildren = setup({
-      editMode: true,
-      gridComponent: { ...props.gridComponent, children: [] },
-    });
+  it('should render an empty DragDroppables in editMode to increase the drop target zone',
() => {
+    const withChildren = setup({ editMode: false });
+    const withoutChildren = setup({ editMode: true });
     expect(withChildren.find(DragDroppable)).to.have.length(0);
     expect(withoutChildren.find(DragDroppable)).to.have.length(1);
   });
diff --git a/superset/assets/src/dashboard/components/DashboardBuilder.jsx b/superset/assets/src/dashboard/components/DashboardBuilder.jsx
index 2156ed3..59a9152 100644
--- a/superset/assets/src/dashboard/components/DashboardBuilder.jsx
+++ b/superset/assets/src/dashboard/components/DashboardBuilder.jsx
@@ -57,6 +57,7 @@ class DashboardBuilder extends React.Component {
       tabIndex: 0, // top-level tabs
     };
     this.handleChangeTab = this.handleChangeTab.bind(this);
+    this.handleDeleteTopLevelTabs = this.handleDeleteTopLevelTabs.bind(this);
   }
 
   getChildContext() {
@@ -65,6 +66,11 @@ class DashboardBuilder extends React.Component {
     };
   }
 
+  handleDeleteTopLevelTabs() {
+    this.props.deleteTopLevelTabs();
+    this.setState({ tabIndex: 0 });
+  }
+
   handleChangeTab({ tabIndex }) {
     this.setState(() => ({ tabIndex }));
     setTimeout(() => {
@@ -77,13 +83,7 @@ class DashboardBuilder extends React.Component {
   }
 
   render() {
-    const {
-      handleComponentDrop,
-      dashboardLayout,
-      deleteTopLevelTabs,
-      editMode,
-    } = this.props;
-
+    const { handleComponentDrop, dashboardLayout, editMode } = this.props;
     const { tabIndex } = this.state;
     const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
     const rootChildId = dashboardRoot.children[0];
@@ -124,7 +124,7 @@ class DashboardBuilder extends React.Component {
                   <IconButton
                     className="fa fa-level-down"
                     label="Collapse tab content"
-                    onClick={deleteTopLevelTabs}
+                    onClick={this.handleDeleteTopLevelTabs}
                   />,
                 ]}
                 editMode={editMode}
@@ -155,7 +155,7 @@ class DashboardBuilder extends React.Component {
                 */
                 <TabContainer
                   id={DASHBOARD_GRID_ID}
-                  activeKey={tabIndex}
+                  activeKey={Math.min(tabIndex, childIds.length - 1)}
                   onSelect={this.handleChangeTab}
                   animation
                   mountOnEnter
diff --git a/superset/assets/src/dashboard/components/DashboardGrid.jsx b/superset/assets/src/dashboard/components/DashboardGrid.jsx
index 4689051..f5ca6e5 100644
--- a/superset/assets/src/dashboard/components/DashboardGrid.jsx
+++ b/superset/assets/src/dashboard/components/DashboardGrid.jsx
@@ -108,26 +108,25 @@ class DashboardGrid extends React.PureComponent {
             />
           ))}
 
-          {/* make the grid droppable in the case that there are no children */}
-          {editMode &&
-            gridComponent.children.length === 0 && (
-              <DragDroppable
-                component={gridComponent}
-                depth={depth}
-                parentComponent={null}
-                index={gridComponent.children.length}
-                orientation="column"
-                onDrop={handleComponentDrop}
-                className="empty-grid-droptarget--bottom"
-                editMode
-              >
-                {({ dropIndicatorProps }) =>
-                  dropIndicatorProps && (
-                    <div className="drop-indicator drop-indicator--top" />
-                  )
-                }
-              </DragDroppable>
-            )}
+          {/* make the area below components droppable */}
+          {editMode && (
+            <DragDroppable
+              component={gridComponent}
+              depth={depth}
+              parentComponent={null}
+              index={gridComponent.children.length}
+              orientation="column"
+              onDrop={handleComponentDrop}
+              className="empty-grid-droptarget--bottom"
+              editMode
+            >
+              {({ dropIndicatorProps }) =>
+                dropIndicatorProps && (
+                  <div className="drop-indicator drop-indicator--top" />
+                )
+              }
+            </DragDroppable>
+          )}
 
           {isResizing &&
             Array(GRID_COLUMN_COUNT)
diff --git a/superset/assets/src/dashboard/deprecated/PromptV2ConversionModal.jsx b/superset/assets/src/dashboard/deprecated/PromptV2ConversionModal.jsx
index 876fa78..a621635 100644
--- a/superset/assets/src/dashboard/deprecated/PromptV2ConversionModal.jsx
+++ b/superset/assets/src/dashboard/deprecated/PromptV2ConversionModal.jsx
@@ -69,7 +69,7 @@ function PromptV2ConversionModal({
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href="https://gist.github.com/williaster/bad4ac9c6a71b234cf9fc8ee629844e5#file-superset-dashboard-v2-md"
+            href="http://bit.ly/superset-dash-v2"
             onClick={logReadAboutV2Changes}
           >
             here
diff --git a/superset/assets/src/dashboard/deprecated/V2PreviewModal.jsx b/superset/assets/src/dashboard/deprecated/V2PreviewModal.jsx
index a0b7eed..828651f 100644
--- a/superset/assets/src/dashboard/deprecated/V2PreviewModal.jsx
+++ b/superset/assets/src/dashboard/deprecated/V2PreviewModal.jsx
@@ -81,7 +81,7 @@ class V2PreviewModal extends React.Component {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="https://gist.github.com/williaster/bad4ac9c6a71b234cf9fc8ee629844e5#file-superset-dashboard-v2-md"
+              href="http://bit.ly/superset-dash-v2"
               onClick={V2PreviewModal.logReadAboutV2Changes}
             >
               here
diff --git a/superset/assets/src/dashboard/util/findParentId.js b/superset/assets/src/dashboard/util/findParentId.js
index c2e285d..9e47bf2 100644
--- a/superset/assets/src/dashboard/util/findParentId.js
+++ b/superset/assets/src/dashboard/util/findParentId.js
@@ -2,7 +2,7 @@ export default function findParentId({ childId, layout = {} }) {
   let parentId = null;
 
   const ids = Object.keys(layout);
-  for (let i = 0; i < ids.length - 1; i += 1) {
+  for (let i = 0; i <= ids.length - 1; i += 1) {
     const id = ids[i];
     const component = layout[id] || {};
     if (

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

Mime
View raw message