You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2018/06/07 00:47:23 UTC
[GitHub] williaster closed pull request #5151: [dashboard v2] better grid drop ux, fix tab bugs 🐛
williaster closed pull request #5151: [dashboard v2] better grid drop ux, fix tab bugs 🐛
URL: https://github.com/apache/incubator-superset/pull/5151
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/spec/javascripts/dashboard/components/DashboardGrid_spec.jsx b/superset/assets/spec/javascripts/dashboard/components/DashboardGrid_spec.jsx
index 3121e7e333..1160d65249 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 2156ed3aa5..59a9152499 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 46890514f0..f5ca6e5a7b 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 876fa78685..a6216357b5 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 a0b7eed545..828651fbde 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 c2e285d589..9e47bf2a70 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 (
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org