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

@@ -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() {

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 = {