From d1f6200527f6451675eb6321efbedd24cba7bb1f Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Mon, 27 Apr 2020 12:38:43 -0700
Subject: [PATCH] fix: use measured height of dashboard item in view mode
 [DHIS2-8492] (#674) (#730)

Fixes issue where reloading a dashboard can cause a map item to cut off the bottom of the map. This may happen if you open the dashboard, then click on the same dashboard item chip to reload the dashboard.

Fixes https://jira.dhis2.org/browse/DHIS2-8492
---
 src/components/Item/VisualizationItem/Item.js | 24 ++++++++++++-------
 src/components/ItemGrid/ItemGrid.js           |  2 ++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index c4b7a795a..ef0ec8fb8 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -29,6 +29,7 @@ import memoizeOne from '../../../modules/memoizeOne';
 import { colors } from '@dhis2/ui-core';
 import { getVisualizationConfig } from './plugin';
 import LoadingMask from './LoadingMask';
+import { ITEM_CONTENT_PADDING_BOTTOM } from '../../ItemGrid/ItemGrid';
 
 const styles = {
     icon: {
@@ -169,13 +170,19 @@ export class Item extends Component {
             );
         }
 
+        const calculatedHeight =
+            this.props.item.originalHeight -
+            this.headerRef.current.clientHeight -
+            HEADER_MARGIN_HEIGHT -
+            ITEM_CONTENT_PADDING_BOTTOM;
+
         const props = {
             ...this.props,
             visualization,
             style: this.memoizedGetContentStyle(
-                this.props.item.originalHeight,
-                this.headerRef.current.clientHeight,
-                this.contentRef ? this.contentRef.offsetHeight : null
+                calculatedHeight,
+                this.contentRef ? this.contentRef.offsetHeight : null,
+                this.props.editMode
             ),
         };
 
@@ -285,13 +292,12 @@ export class Item extends Component {
             this.props.visualization
         );
 
-    getContentStyle = (originalHeight, headerHeight, measuredHeight) => {
-        const calculatedHeight =
-            originalHeight - headerHeight - HEADER_MARGIN_HEIGHT;
+    getContentStyle = (calculatedHeight, measuredHeight, editMode) => {
+        const height = editMode
+            ? measuredHeight || calculatedHeight
+            : calculatedHeight;
 
-        return {
-            height: measuredHeight || calculatedHeight,
-        };
+        return { height };
     };
 
     render() {
diff --git a/src/components/ItemGrid/ItemGrid.js b/src/components/ItemGrid/ItemGrid.js
index a67bfd806..b7b6fc113 100644
--- a/src/components/ItemGrid/ItemGrid.js
+++ b/src/components/ItemGrid/ItemGrid.js
@@ -42,6 +42,8 @@ import ProgressiveLoadingContainer from '../Item/ProgressiveLoadingContainer';
 // Component
 
 const EXPANDED_HEIGHT = 17;
+// this is set in the .dashboard-item-content css
+export const ITEM_CONTENT_PADDING_BOTTOM = 4;
 
 export class ItemGrid extends Component {
     state = {