getredash · kravets-levko · May 3, 2019 · Apr 15, 2019 · Apr 24, 2019 · Apr 24, 2019
diff --git a/client/app/components/dashboards/dashboard-grid.jsx b/client/app/components/dashboards/dashboard-grid.jsx
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { chain, pick } from 'lodash';
 import { react2angular } from 'react2angular';
 import cx from 'classnames';
-import GridLayout, { WidthProvider } from 'react-grid-layout';
+import { Responsive, WidthProvider } from 'react-grid-layout';
 import { DashboardWidget } from '@/components/dashboards/widget';
 import cfg from '@/config/dashboard-grid-options';
 
 import 'react-grid-layout/css/styles.css';
 
-const ResponsiveGridLayout = WidthProvider(GridLayout);
+const ResponsiveGridLayout = WidthProvider(Responsive);
 
 const WidgetType = PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -27,18 +27,23 @@ const WidgetType = PropTypes.shape({
   }).isRequired,
 });
 
+const SINGLE = 'single-column';
+const MULTI = 'multi-column';
+
 class DashboardGrid extends React.Component {
   static propTypes = {
     isEditing: PropTypes.bool.isRequired,
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     widgets: PropTypes.arrayOf(WidgetType).isRequired,
+    onBreakpointChange: PropTypes.func,
     onRemoveWidget: PropTypes.func,
     onLayoutChange: PropTypes.func,
   };
 
   static defaultProps = {
     onRemoveWidget: () => {},
     onLayoutChange: () => {},
+    onBreakpointChange: () => {},
   }
 
   static normalizeFrom(widget) {
@@ -67,15 +72,47 @@ class DashboardGrid extends React.Component {
     };
   }
 
-  onLayoutChange(layout) {
-    const normalized = chain(layout)
+  state = {
+    layouts: {},
+  }
+
+  mode = null
+
+  componentDidMount() {
+    this.onBreakpointChange(document.body.offsetWidth <= cfg.mobileBreakPoint ? SINGLE : MULTI);
+  }
+
+  onLayoutChange = (_, layouts) => {
+    // workaround for when dashboard starts at single mode and then multi is empty or carries single col data
+    // fixes test dashboard_spec['shows widgets with full width']
+    // TODO: open react-grid-layout issue
+    if (layouts[MULTI]) {
+      this.setState({ layouts });
+    }
+
+    // workaround for https://github.com/STRML/react-grid-layout/issues/889
+    // remove next line when fix lands
+    this.mode = document.body.offsetWidth <= cfg.mobileBreakPoint ? SINGLE : MULTI;
+    // end workaround
+
+    // don't save single column mode layout
+    if (this.mode === SINGLE) {
+      return;
+    }
+
+    const normalized = chain(layouts[MULTI])
       .keyBy('i')
       .mapValues(DashboardGrid.normalizeTo)
       .value();
 
     this.props.onLayoutChange(normalized);
   }
 
+  onBreakpointChange = (mode) => {
+    this.mode = mode;
+    this.props.onBreakpointChange(mode === SINGLE);
+  }
+
   render() {
     const className = cx('dashboard-wrapper', this.props.isEditing ? 'editing-mode' : 'preview-mode');
     const { onRemoveWidget, dashboard, widgets } = this.props;
@@ -84,12 +121,15 @@ class DashboardGrid extends React.Component {
       <div className={className}>
         <ResponsiveGridLayout
           className="layout"
-          cols={cfg.columns}
+          cols={{ [MULTI]: cfg.columns, [SINGLE]: 1 }}
           rowHeight={cfg.rowHeight - cfg.margins}
           margin={[cfg.margins, cfg.margins]}
           isDraggable={this.props.isEditing}
           isResizable={this.props.isEditing}
-          onLayoutChange={layout => this.onLayoutChange(layout)}
+          layouts={this.state.layouts}
+          onLayoutChange={this.onLayoutChange}
+          onBreakpointChange={this.onBreakpointChange}
+          breakpoints={{ [MULTI]: cfg.mobileBreakPoint, [SINGLE]: 0 }}
           measureBeforeMount
         >
           {widgets.map(widget => (

diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
@@ -107,6 +107,7 @@ <h3>
       widgets="$ctrl.dashboard.widgets"
       is-editing="$ctrl.layoutEditing && !$ctrl.isGridDisabled"
       on-layout-change="$ctrl.onLayoutChange"
+      on-breakpoint-change="$ctrl.onBreakpointChanged"
       on-remove-widget="$ctrl.removeWidget"
     />
   </div>

diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
@@ -284,6 +284,11 @@ function DashboardCtrl(
     }
   };
 
+  this.onBreakpointChanged = (isSingleCol) => {
+    this.isGridDisabled = isSingleCol;
+    $scope.$applyAsync();
+  };
+
   this.editLayout = (isEditing) => {
     this.layoutEditing = isEditing;
   };

diff --git a/client/cypress/integration/dashboard/dashboard_spec.js b/client/cypress/integration/dashboard/dashboard_spec.js
@@ -535,7 +535,7 @@ describe('Dashboard', () => {
     });
   });
 
-  context.skip('viewport width is at 800px', () => {
+  context('viewport width is at 800px', () => {
     before(function () {
       cy.login();
       createNewDashboardByAPI('Foo Bar')
@@ -557,12 +557,12 @@ describe('Dashboard', () => {
 
     it('shows widgets with full width', () => {
       cy.get('@textboxEl').should(($el) => {
-        expect($el.width()).to.eq(785);
+        expect($el.width()).to.eq(770);
       });
 
       cy.viewport(801, 800);
       cy.get('@textboxEl').should(($el) => {
-        expect($el.width()).to.eq(393);
+        expect($el.width()).to.eq(378);
       });
     });
 
@@ -592,7 +592,7 @@ describe('Dashboard', () => {
     });
   });
 
-  context.skip('viewport width is at 767px', () => {
+  context('viewport width is at 767px', () => {
     before(function () {
       cy.login();
       createNewDashboardByAPI('Foo Bar').then(({ slug }) => {