fix: List items not appearing to get added in edit mode (DHIS2-8567)

src/actions/editDashboard.js

@@ -14,7 +14,10 @@ import {
 import { sGetEditDashboardRoot } from '../reducers/editDashboard';
 import { updateDashboard, postDashboard } from '../api/editDashboard';
 import { tSetSelectedDashboardById } from '../actions/selected';
-import { NEW_ITEM_SHAPE } from '../components/ItemGrid/gridUtil';
+import {
+    NEW_ITEM_SHAPE,
+    getGridItemProperties,
+} from '../components/ItemGrid/gridUtil';
 import { itemTypeMap } from '../modules/itemTypes';
 import { convertUiItemsToBackend } from '../modules/uiBackendItemConverter';
 
@@ -65,13 +68,17 @@ export const acAddDashboardItem = item => {
     delete item.type;
     const itemPropName = itemTypeMap[type].propName;
 
+    const id = generateUid();
+    const gridItemProperties = getGridItemProperties(id);
+
     return {
         type: ADD_DASHBOARD_ITEM,
         value: {
-            id: generateUid(),
+            id,
             type,
             [itemPropName]: item.content,
             ...NEW_ITEM_SHAPE,
+            ...gridItemProperties,
         },
     };
 };

src/components/ItemGrid/ItemGrid.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import memoize from 'lodash/memoize';
 import i18n from '@dhis2/d2-i18n';
 import ReactGridLayout from 'react-grid-layout';
 import { CircularLoader, ScreenCover } from '@dhis2/ui-core';
@@ -16,7 +15,6 @@ import { isVisualizationType } from '../../modules/itemTypes';
 import {
     GRID_ROW_HEIGHT,
     GRID_COMPACT_TYPE,
-    ITEM_MIN_HEIGHT,
     MARGIN,
     getGridColumns,
     hasShape,
@@ -52,12 +50,6 @@ export class ItemGrid extends Component {
         expandedItems: {},
     };
 
-    constructor(props) {
-        super(props);
-
-        this.getMemoizedItem = memoize(this.getItem);
-    }
-
     onToggleItemExpanded = clickedId => {
         const isExpanded =
             typeof this.state.expandedItems[clickedId] === 'boolean'
@@ -100,24 +92,18 @@ export class ItemGrid extends Component {
 
     onRemoveItemWrapper = id => () => this.onRemoveItem(id);
 
-    getItem = dashboardItem => {
+    adjustHeightForExpanded = dashboardItem => {
         const expandedItem = this.state.expandedItems[dashboardItem.id];
-        const hProp = { h: dashboardItem.h };
 
         if (expandedItem && expandedItem === true) {
-            hProp.h = dashboardItem.h + EXPANDED_HEIGHT;
+            return Object.assign({}, dashboardItem, {
+                h: dashboardItem.h + EXPANDED_HEIGHT,
+            });
         }
 
-        return Object.assign({}, dashboardItem, hProp, {
-            i: dashboardItem.id,
-            minH: ITEM_MIN_HEIGHT,
-            randomNumber: Math.random(),
-        });
+        return dashboardItem;
     };
 
-    getItems = dashboardItems =>
-        dashboardItems.map(item => this.getMemoizedItem(item));
-
     getItemComponent = item => {
         const itemClassNames = [
             item.type,
@@ -152,8 +138,8 @@ export class ItemGrid extends Component {
         }
 
         const items = edit
-            ? this.getItems(dashboardItems)
-            : dashboardItems.map(this.getItem);
+            ? dashboardItems
+            : dashboardItems.map(this.adjustHeightForExpanded);
 
         return (
             <div className="grid-wrapper">

src/components/ItemGrid/gridUtil.js

@@ -11,7 +11,6 @@ const GRID_LAYOUT = 'FLEXIBLE'; // FIXED | FLEXIBLE
 export const MARGIN = [10, 10];
 
 export const NEW_ITEM_SHAPE = { x: 0, y: 0, w: 20, h: 29 };
-export const ITEM_MIN_HEIGHT = 4;
 
 // Dimensions for getShape
 
@@ -61,6 +60,13 @@ export const getShape = i => {
     };
 };
 
+export const getGridItemProperties = itemId => {
+    return {
+        i: itemId,
+        minH: 4, // minimum height for item
+    };
+};
+
 /**
  * Calculates the grid item's original height in pixels based
  * on the height in grid units. This calculation

src/modules/uiBackendItemConverter.js

@@ -1,4 +1,5 @@
 import { TEXT, SPACER } from './itemTypes';
+import { getGridItemProperties } from '../components/ItemGrid/gridUtil';
 
 export const spacerContent = 'SPACER_ITEM_FOR_DASHBOARD_LAYOUT_CONVENIENCE';
 export const emptyTextItemContent = 'TEXT_ITEM_WITH_NO_CONTENT';
@@ -26,6 +27,7 @@ export const convertUiItemsToBackend = items =>
 export const convertBackendItemsToUi = items =>
     items.map(item => {
         const type = isBackendSpacerType(item) ? SPACER : item.type;
+        const gridProperties = getGridItemProperties(item.id);
 
         const text = isTextType(item)
             ? item.text === emptyTextItemContent
@@ -37,5 +39,6 @@ export const convertBackendItemsToUi = items =>
             ...item,
             ...(text !== null ? { text } : {}),
             type,
+            ...gridProperties,
         };
     });

src/reducers/editDashboard.js

@@ -103,7 +103,13 @@ export default (state = DEFAULT_STATE_EDIT_DASHBOARD, action) => {
             if (dashboardItemIndex > -1) {
                 const newState = update(state, {
                     dashboardItems: {
-                        $splice: [[dashboardItemIndex, 1, dashboardItem]],
+                        $splice: [
+                            [
+                                dashboardItemIndex,
+                                1,
+                                Object.assign({}, dashboardItem),
+                            ],
+                        ],
                     },
                 });