fix: update dashboard scrollbar based on changes to window height [DH…

…IS2-9427] (#1047)

* fix: store changes to window height in redux

* fix: snapshot

* chore: update deps

Co-authored-by: Jan Henrik Øverland <jan@dhis2.org>
Co-authored-by: Jan Henrik Overland <janhenrik.overland@gmail.com>

package.json

@@ -5,17 +5,17 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^10.0.2",
+        "@dhis2/analytics": "^10.0.3",
         "@dhis2/app-runtime": "^2.2.2",
         "@dhis2/app-runtime-adapter-d2": "^1.0.1",
         "@dhis2/d2-i18n": "^1.0.6",
         "@dhis2/d2-ui-core": "^7.0.3",
-        "@dhis2/d2-ui-interpretations": "^7.0.4",
+        "@dhis2/d2-ui-interpretations": "^7.0.7",
         "@dhis2/d2-ui-mentions-wrapper": "^7.0.3",
         "@dhis2/d2-ui-rich-text": "^7.0.4",
         "@dhis2/d2-ui-sharing-dialog": "^7.0.5",
         "@dhis2/d2-ui-translation-dialog": "^7.0.4",
-        "@dhis2/data-visualizer-plugin": "^35.12.9",
+        "@dhis2/data-visualizer-plugin": "^35.12.10",
         "@dhis2/ui": "^5.5.4",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^4.9.1",

src/actions/windowHeight.js

@@ -0,0 +1,6 @@
+import { SET_WINDOW_HEIGHT } from '../reducers/windowHeight'
+
+export const acSetWindowHeight = value => ({
+    type: SET_WINDOW_HEIGHT,
+    value,
+})

src/components/Dashboard/Dashboard.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import isEmpty from 'lodash/isEmpty'
 import i18n from '@dhis2/d2-i18n'
 import { Layer, CenteredContent, CircularLoader } from '@dhis2/ui'
+import debounce from 'lodash/debounce'
 
 import DashboardsBar from '../ControlBar/DashboardsBar'
 import DashboardVerticalOffset from './DashboardVerticalOffset'
@@ -15,6 +16,7 @@ import PrintDashboard from './PrintDashboard'
 import PrintLayoutDashboard from './PrintLayoutDashboard'
 
 import { tSelectDashboard } from '../../actions/dashboards'
+import { acSetWindowHeight } from '../../actions/windowHeight'
 import {
     sDashboardsIsFetching,
     sGetAllDashboards,
@@ -61,6 +63,10 @@ export class Dashboard extends Component {
     }
 
     componentDidMount() {
+        window.onresize = debounce(
+            () => this.props.setWindowHeight(window.innerHeight),
+            300
+        )
         this.setDashboard()
     }
 
@@ -122,6 +128,7 @@ Dashboard.propTypes = {
     match: PropTypes.object,
     mode: PropTypes.string,
     selectDashboard: PropTypes.func,
+    setWindowHeight: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -135,4 +142,5 @@ const mapStateToProps = state => {
 
 export default connect(mapStateToProps, {
     selectDashboard: tSelectDashboard,
+    setWindowHeight: acSetWindowHeight,
 })(Dashboard)

src/components/Dashboard/EditDashboard.js

@@ -9,6 +9,7 @@ import EditBar from '../ControlBar/EditBar'
 import LayoutPrintPreview from './PrintLayoutDashboard'
 import NoContentMessage from '../../widgets/NoContentMessage'
 import { acSetEditDashboard } from '../../actions/editDashboard'
+import { sGetWindowHeight } from '../../reducers/windowHeight'
 import { sGetSelectedId } from '../../reducers/selected'
 import {
     sGetDashboardById,
@@ -48,7 +49,7 @@ export class EditDashboard extends Component {
         }
 
         const height =
-            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+            this.props.windowHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
 
         return (
             <div className="dashboard-wrapper" style={{ height }}>
@@ -78,6 +79,7 @@ EditDashboard.propTypes = {
     items: PropTypes.array,
     setEditDashboard: PropTypes.func,
     updateAccess: PropTypes.bool,
+    windowHeight: PropTypes.number,
 }
 
 const mapStateToProps = state => {
@@ -92,6 +94,7 @@ const mapStateToProps = state => {
         updateAccess,
         items: sGetDashboardItems(state),
         isPrintPreviewView: sGetIsPrintPreviewView(state),
+        windowHeight: sGetWindowHeight(state),
     }
 }
 

src/components/Dashboard/NewDashboard.js

@@ -9,6 +9,7 @@ import LayoutPrintPreview from './PrintLayoutDashboard'
 
 import { acSetEditNewDashboard } from '../../actions/editDashboard'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
+import { sGetWindowHeight } from '../../reducers/windowHeight'
 
 import {
     getControlBarHeight,
@@ -22,7 +23,7 @@ class NewDashboard extends Component {
 
     render() {
         const height =
-            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+            this.props.windowHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
 
         return (
             <>
@@ -43,10 +44,12 @@ class NewDashboard extends Component {
 NewDashboard.propTypes = {
     isPrintPreviewView: PropTypes.bool,
     setNewDashboard: PropTypes.func,
+    windowHeight: PropTypes.number,
 }
 
 const mapStateToProps = state => ({
     isPrintPreviewView: sGetIsPrintPreviewView(state),
+    windowHeight: sGetWindowHeight(state),
 })
 
 export default connect(mapStateToProps, {

src/components/Dashboard/PrintDashboard.js

@@ -12,6 +12,7 @@ import {
     acRemovePrintDashboardItem,
 } from '../../actions/printDashboard'
 import { sGetSelectedId } from '../../reducers/selected'
+import { sGetWindowHeight } from '../../reducers/windowHeight'
 import {
     sGetDashboardById,
     sGetDashboardItems,
@@ -77,7 +78,7 @@ export class PrintDashboard extends Component {
     }
 
     render() {
-        const height = window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT
+        const height = this.props.windowHeight - PRINT_ACTIONS_BAR_HEIGHT
 
         return (
             <>
@@ -102,6 +103,7 @@ PrintDashboard.propTypes = {
     items: PropTypes.array,
     removeDashboardItem: PropTypes.func,
     setPrintDashboard: PropTypes.func,
+    windowHeight: PropTypes.number,
 }
 
 const mapStateToProps = state => {
@@ -112,6 +114,7 @@ const mapStateToProps = state => {
         dashboard,
         id,
         items: sGetDashboardItems(state),
+        windowHeight: sGetWindowHeight(state),
     }
 }
 

src/components/Dashboard/PrintLayoutDashboard.js

@@ -13,6 +13,7 @@ import {
     acUpdatePrintDashboardItem,
 } from '../../actions/printDashboard'
 import { sGetSelectedId } from '../../reducers/selected'
+import { sGetWindowHeight } from '../../reducers/windowHeight'
 import {
     sGetEditDashboardRoot,
     sGetEditDashboardItems,
@@ -124,10 +125,12 @@ export class PrintLayoutDashboard extends Component {
             ? {
                   paddingTop: spacers.dp24,
                   height:
-                      window.innerHeight - EDIT_BAR_HEIGHT - HEADERBAR_HEIGHT,
+                      this.props.windowHeight -
+                      EDIT_BAR_HEIGHT -
+                      HEADERBAR_HEIGHT,
               }
             : {
-                  height: window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT,
+                  height: this.props.windowHeight - PRINT_ACTIONS_BAR_HEIGHT,
               }
     }
 
@@ -161,6 +164,7 @@ PrintLayoutDashboard.propTypes = {
     items: PropTypes.array,
     setPrintDashboard: PropTypes.func,
     updateDashboardItem: PropTypes.func,
+    windowHeight: PropTypes.number,
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -173,6 +177,7 @@ const mapStateToProps = (state, ownProps) => {
             dashboard,
             id,
             items: sGetEditDashboardItems(state),
+            windowHeight: sGetWindowHeight(state),
         }
     }
 
@@ -182,6 +187,7 @@ const mapStateToProps = (state, ownProps) => {
         dashboard,
         id,
         items: sGetDashboardItems(state),
+        windowHeight: sGetWindowHeight(state),
     }
 }
 

src/components/Dashboard/ViewDashboard.js

@@ -10,6 +10,7 @@ import DashboardVerticalOffset from './DashboardVerticalOffset'
 import { sGetIsEditing } from '../../reducers/editDashboard'
 import { sGetIsPrinting } from '../../reducers/printDashboard'
 import { sGetSelectedId } from '../../reducers/selected'
+import { sGetWindowHeight } from '../../reducers/windowHeight'
 import { sGetControlBarUserRows } from '../../reducers/controlBar'
 import { acClearEditDashboard } from '../../actions/editDashboard'
 import { acClearPrintDashboard } from '../../actions/printDashboard'
@@ -32,7 +33,7 @@ export const ViewDashboard = props => {
     }, [props.selectedId])
 
     const height =
-        window.innerHeight -
+        props.windowHeight -
         HEADERBAR_HEIGHT -
         getControlBarHeight(props.controlBarRows)
 
@@ -56,6 +57,7 @@ ViewDashboard.propTypes = {
     dashboardIsEditing: PropTypes.bool,
     dashboardIsPrinting: PropTypes.bool,
     selectedId: PropTypes.string,
+    windowHeight: PropTypes.number,
 }
 
 const mapStateToProps = state => {
@@ -64,6 +66,7 @@ const mapStateToProps = state => {
         dashboardIsPrinting: sGetIsPrinting(state),
         controlBarRows: sGetControlBarUserRows(state),
         selectedId: sGetSelectedId(state),
+        windowHeight: sGetWindowHeight(state),
     }
 }
 

src/components/Dashboard/__tests__/EditDashboard.spec.js

@@ -22,6 +22,7 @@ describe('EditDashboard', () => {
             items: undefined,
             dashboardsLoaded: undefined,
             isPrintPreviewView: undefined,
+            windowHeight: 600,
         }
     })
 

src/components/Dashboard/__tests__/ViewDashboard.spec.js

@@ -24,6 +24,7 @@ describe('ViewDashboard', () => {
             dashboardIsEditing: false,
             dashboardIsPrinting: false,
             controlBarRows: 2,
+            windowHeight: 600,
         }
     })
 

src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap

@@ -7,7 +7,7 @@ exports[`EditDashboard renders message when enough access 1`] = `
     className="dashboard-wrapper"
     style={
       Object {
-        "height": 656,
+        "height": 488,
       }
     }
   >

src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap

@@ -8,7 +8,7 @@ exports[`ViewDashboard renders correctly default 1`] = `
     className="dashboard-wrapper"
     style={
       Object {
-        "height": 616,
+        "height": 448,
       }
     }
   >

src/reducers/index.js

@@ -21,6 +21,7 @@ import style from './style'
 import dimensions from './dimensions'
 import settings from './settings'
 import activeModalDimension from './activeModalDimension'
+import windowHeight from './windowHeight'
 
 const USER = 'system'
 
@@ -42,6 +43,7 @@ export default combineReducers({
     dimensions,
     settings,
     activeModalDimension,
+    windowHeight,
 })
 
 // Map constants to data

src/reducers/windowHeight.js

@@ -0,0 +1,15 @@
+export const SET_WINDOW_HEIGHT = 'SET_WINDOW_HEIGHT'
+
+export const DEFAULT_STATE_WINDOW_HEIGHT = window.innerHeight
+
+export default (state = DEFAULT_STATE_WINDOW_HEIGHT, action) => {
+    switch (action.type) {
+        case SET_WINDOW_HEIGHT: {
+            return action.value
+        }
+        default:
+            return state
+    }
+}
+
+export const sGetWindowHeight = state => state.windowHeight