You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/06/22 00:54:35 UTC
[incubator-superset] 20/26: [dashboard v2] better grid drop ux, fix tab bugs 🐛 (#5151)
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
commit b1386abde8f1a99d2df40912f055324b84faec20
Author: Chris Williams <wi...@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 (