fix: dashboard filter - filter dialog incorrectly shows filter as selected even though it was removed [DHIS2-9560]

src/actions/selected.js

@@ -1,4 +1,8 @@
-import { getCustomDashboards, sGetDashboardById } from '../reducers/dashboards'
+import {
+    getCustomDashboards,
+    sGetDashboardById,
+    EMPTY_DASHBOARD,
+} from '../reducers/dashboards'
 import {
     SET_SELECTED_ID,
     SET_SELECTED_ISLOADING,
@@ -33,7 +37,6 @@ import {
     EVENT_CHART,
     MESSAGES,
 } from '../modules/itemTypes'
-import { orObject } from '../modules/util'
 
 // actions
 
@@ -57,8 +60,9 @@ export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
     dispatch(acSetSelectedIsLoading(true))
 
     const snackbarTimeout = setTimeout(() => {
-        const dashboardName = orObject(sGetDashboardById(getState(), id))
-            .displayName
+        const dashboardName = (
+            sGetDashboardById(getState(), id) || EMPTY_DASHBOARD
+        ).displayName
         if (sGetSelectedIsLoading(getState()) && dashboardName) {
             loadingDashboardMsg.name = dashboardName
 

src/components/Item/ItemHeader/styles/ItemHeader.module.css

@@ -1,18 +1,13 @@
-.itemWrap {
-    padding: var(--spacers-dp8);
-}
-
 .itemHeaderWrap {
     display: flex;
-    margin: var(--spacers-dp4) var(--spacers-dp4) var(--spacers-dp8)
+    margin: var(--spacers-dp8) var(--spacers-dp4) var(--spacers-dp8)
         var(--spacers-dp8);
 }
 
 .itemTitle {
     font-weight: 700;
     color: var(--colors-grey800);
     font-size: 14px;
-    line-height: 28px;
     padding: 0;
     margin: 0;
     align-self: center;

src/components/Item/PrintTitlePageItem/Item.js

@@ -3,14 +3,20 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 
-import { orObject } from '../../../modules/util'
-
 import {
     sGetSelectedId,
     sGetSelectedShowDescription,
 } from '../../../reducers/selected'
-import { sGetDashboardById } from '../../../reducers/dashboards'
+import {
+    sGetDashboardById,
+    EMPTY_DASHBOARD,
+} from '../../../reducers/dashboards'
 import { sGetNamedItemFilters } from '../../../reducers/itemFilters'
+import { sGetIsEditing } from '../../../reducers/editDashboard'
+import {
+    sGetPrintDashboardName,
+    sGetPrintDashboardDescription,
+} from '../../../reducers/printDashboard'
 
 import classes from './styles/Item.module.css'
 
@@ -63,12 +69,21 @@ PrintTitlePageItem.defaultProps = {
 
 const mapStateToProps = state => {
     const id = sGetSelectedId(state)
-    const dashboard = orObject(sGetDashboardById(state, id))
+    const isEditMode = sGetIsEditing(state)
+    const viewDashboard = sGetDashboardById(state, id) || EMPTY_DASHBOARD
+
+    const name = isEditMode
+        ? sGetPrintDashboardName(state) || i18n.t('Untitled dashboard')
+        : viewDashboard.displayName
+
+    const description = isEditMode
+        ? sGetPrintDashboardDescription(state)
+        : viewDashboard.displayDescription
 
     return {
-        name: dashboard.displayName,
+        name,
+        description,
         itemFilters: sGetNamedItemFilters(state),
-        description: dashboard.displayDescription,
         showDescription: sGetSelectedShowDescription(state),
     }
 }

src/components/ItemFilter/FilterDialog.js

@@ -1,6 +1,7 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-
+import { connect } from 'react-redux'
+import i18n from '@dhis2/d2-i18n'
 import {
     Button,
     Modal,
@@ -9,9 +10,6 @@ import {
     ModalActions,
     ButtonStrip,
 } from '@dhis2/ui'
-
-import i18n from '@dhis2/d2-i18n'
-
 import {
     PeriodDimension,
     DynamicDimension,
@@ -20,21 +18,71 @@ import {
     DIMENSION_ID_ORGUNIT,
 } from '@dhis2/analytics'
 
-class FilterDialog extends Component {
-    onConfirm = id => () => this.props.onConfirm(id)
+import { acAddItemFilter, acRemoveItemFilter } from '../../actions/itemFilters'
+import { sGetItemFiltersRoot } from '../../reducers/itemFilters'
+
+const FilterDialog = (
+    {
+        displayNameProperty,
+        dimension,
+        initiallySelectedItems,
+        addItemFilter,
+        removeItemFilter,
+        onClose,
+    },
+    context
+) => {
+    const [filters, setFilters] = useState(initiallySelectedItems)
+
+    const onSelectItems = ({ dimensionId, items }) => {
+        setFilters({ [dimensionId]: items })
+    }
+
+    const onDeselectItems = ({ dimensionId, itemIdsToRemove }) => {
+        const oldList = filters[dimensionId] || []
+        const newList = oldList.filter(
+            item => !itemIdsToRemove.includes(item.id)
+        )
+
+        setFilters({ ...filters, [dimensionId]: newList })
+    }
+
+    const onReorderItems = ({ dimensionId, itemIds }) => {
+        const oldList = filters[dimensionId] || []
+        const reorderedList = itemIds.map(id =>
+            oldList.find(item => item.id === id)
+        )
+
+        setFilters({ ...filters, [dimensionId]: reorderedList })
+    }
+
+    const saveFilter = () => {
+        const id = dimension.id
+        const filterItems = filters[id]
+
+        if (filterItems && filterItems.length) {
+            addItemFilter({
+                id,
+                value: [...filterItems],
+            })
+        } else {
+            removeItemFilter(id)
+        }
 
-    renderDialogContent() {
-        const { displayNameProperty, dimension, selectedItems } = this.props
-        const dialogId = dimension.id
+        onClose(id)
+    }
 
+    const renderDialogContent = () => {
         const commonProps = {
-            d2: this.context.d2,
-            onSelect: this.props.onSelect,
-            onDeselect: this.props.onDeselect,
-            onReorder: this.props.onReorder,
+            d2: context.d2,
+            onSelect: onSelectItems,
+            onDeselect: onDeselectItems,
+            onReorder: onReorderItems,
         }
 
-        switch (dialogId) {
+        const selectedItems = filters[dimension.id] || []
+
+        switch (dimension.id) {
             case DIMENSION_ID_PERIOD: {
                 return (
                     <PeriodDimension
@@ -55,59 +103,54 @@ class FilterDialog extends Component {
                 return (
                     <DynamicDimension
                         selectedItems={selectedItems}
-                        dimensionId={dialogId}
+                        dimensionId={dimension.id}
                         onSelect={commonProps.onSelect}
                         context={commonProps.d2}
                     />
                 )
         }
     }
 
-    render() {
-        const { dimension, onClose } = this.props
-        const dialogId = dimension.id
-
-        return (
-            <>
-                {dialogId && (
-                    <Modal onClose={onClose} position="top" large>
-                        <ModalTitle>{dimension.name}</ModalTitle>
-                        <ModalContent>
-                            {this.renderDialogContent()}
-                        </ModalContent>
-                        <ModalActions>
-                            <ButtonStrip>
-                                <Button secondary onClick={onClose}>
-                                    {i18n.t('Cancel')}
-                                </Button>
-                                <Button
-                                    primary
-                                    onClick={this.onConfirm(dialogId)}
-                                >
-                                    {i18n.t('Confirm')}
-                                </Button>
-                            </ButtonStrip>
-                        </ModalActions>
-                    </Modal>
-                )}
-            </>
-        )
-    }
+    return (
+        <>
+            {dimension.id && (
+                <Modal onClose={onClose} position="top" large>
+                    <ModalTitle>{dimension.name}</ModalTitle>
+                    <ModalContent>{renderDialogContent()}</ModalContent>
+                    <ModalActions>
+                        <ButtonStrip>
+                            <Button secondary onClick={onClose}>
+                                {i18n.t('Cancel')}
+                            </Button>
+                            <Button primary onClick={saveFilter}>
+                                {i18n.t('Confirm')}
+                            </Button>
+                        </ButtonStrip>
+                    </ModalActions>
+                </Modal>
+            )}
+        </>
+    )
 }
 
 FilterDialog.propTypes = {
+    addItemFilter: PropTypes.func,
     dimension: PropTypes.object,
     displayNameProperty: PropTypes.string,
-    selectedItems: PropTypes.array,
+    initiallySelectedItems: PropTypes.object,
+    removeItemFilter: PropTypes.func,
     onClose: PropTypes.func,
-    onConfirm: PropTypes.func,
-    onDeselect: PropTypes.func,
-    onReorder: PropTypes.func,
-    onSelect: PropTypes.func,
 }
 
 FilterDialog.contextTypes = {
     d2: PropTypes.object,
 }
 
-export default FilterDialog
+const mapStateToProps = state => ({
+    initiallySelectedItems: sGetItemFiltersRoot(state),
+})
+
+export default connect(mapStateToProps, {
+    addItemFilter: acAddItemFilter,
+    removeItemFilter: acRemoveItemFilter,
+})(FilterDialog)