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

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,73 @@ 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)
 
-    renderDialogContent() {
-        const { displayNameProperty, dimension, selectedItems } = this.props
-        const dialogId = dimension.id
+    const onSelectItems = ({ dimensionId, items }) => {
+        setFilters({ [dimensionId]: items })
+    }
 
+    const onDeselectItems = ({ dimensionId, itemIdsToRemove }) => {
+        const oldList = filters[dimensionId] || []
+        const newList = oldList.filter(
+            item => !itemIdsToRemove.includes(item.id)
+        )
+
+        const list = newList.length ? newList : []
+
+        setFilters({ ...filters, [dimensionId]: list })
+    }
+
+    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)
+        }
+
+        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 +105,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)

src/components/ItemFilter/FilterSelector.js

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
+import isEmpty from 'lodash/isEmpty'
 
 import i18n from '@dhis2/d2-i18n'
 import { DimensionsPanel } from '@dhis2/analytics'
@@ -12,26 +13,20 @@ import FilterDialog from './FilterDialog'
 import { sGetSettingsDisplayNameProperty } from '../../reducers/settings'
 import { sGetActiveModalDimension } from '../../reducers/activeModalDimension'
 import { sGetDimensions } from '../../reducers/dimensions'
-import {
-    sGetItemFiltersRoot,
-    sGetFiltersKeys,
-} from '../../reducers/itemFilters'
-import { acAddItemFilter, acRemoveItemFilter } from '../../actions/itemFilters'
+import { sGetFiltersKeys } from '../../reducers/itemFilters'
+
 import {
     acClearActiveModalDimension,
     acSetActiveModalDimension,
 } from '../../actions/activeModalDimension'
 
 const FilterSelector = props => {
     const [showPopover, setShowPopover] = useState(false)
-    const [filters, setFilters] = useState(props.initiallySelectedItems)
 
     const ref = useRef(null)
 
-    const closePanel = () => setShowPopover(false)
-
     const onCloseDialog = () => {
-        closePanel()
+        setShowPopover(false)
 
         props.clearActiveModalDimension()
     }
@@ -42,45 +37,6 @@ const FilterSelector = props => {
         )
     }
 
-    const onSelectItems = ({ dimensionId, items }) => {
-        setFilters({ ...filters, [dimensionId]: items })
-    }
-
-    const onDeselectItems = ({ dimensionId, itemIdsToRemove }) => {
-        const oldList = filters[dimensionId] || []
-        const newList = oldList.filter(
-            item => !itemIdsToRemove.includes(item.id)
-        )
-
-        const list = newList.length ? newList : []
-
-        setFilters({ ...filters, [dimensionId]: list })
-    }
-
-    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 = id => {
-        const filterItems = filters[id]
-
-        if (filterItems && filterItems.length) {
-            props.addItemFilter({
-                id,
-                value: [...filterItems],
-            })
-        } else {
-            props.removeItemFilter(id)
-        }
-
-        onCloseDialog()
-    }
-
     return (
         <>
             <span ref={ref}>
@@ -91,7 +47,7 @@ const FilterSelector = props => {
             </span>
             {showPopover && (
                 <Popover
-                    onClickOutside={closePanel}
+                    onClickOutside={onCloseDialog}
                     reference={ref}
                     arrow={true}
                     placement="bottom-start"
@@ -104,16 +60,11 @@ const FilterSelector = props => {
                     />
                 </Popover>
             )}
-            {props.dimension ? (
+            {!isEmpty(props.dimension) ? (
                 <FilterDialog
                     displayNameProperty={props.displayNameProperty}
                     dimension={props.dimension}
-                    selectedItems={filters[props.dimension.id] || []}
-                    onSelect={onSelectItems}
-                    onDeselect={onDeselectItems}
-                    onReorder={onReorderItems}
                     onClose={onCloseDialog}
-                    onConfirm={saveFilter}
                 />
             ) : null}
         </>
@@ -124,25 +75,19 @@ const mapStateToProps = state => ({
     displayNameProperty: sGetSettingsDisplayNameProperty(state),
     dimension: sGetActiveModalDimension(state),
     dimensions: sGetDimensions(state),
-    initiallySelectedItems: sGetItemFiltersRoot(state),
     selectedDimensions: sGetFiltersKeys(state),
 })
 
 FilterSelector.propTypes = {
-    addItemFilter: PropTypes.func,
     clearActiveModalDimension: PropTypes.func,
     dimension: PropTypes.object,
     dimensions: PropTypes.array,
     displayNameProperty: PropTypes.string,
-    initiallySelectedItems: PropTypes.object,
-    removeItemFilter: PropTypes.func,
     selectedDimensions: PropTypes.array,
     setActiveModalDimension: PropTypes.func,
 }
 
 export default connect(mapStateToProps, {
     clearActiveModalDimension: acClearActiveModalDimension,
     setActiveModalDimension: acSetActiveModalDimension,
-    addItemFilter: acAddItemFilter,
-    removeItemFilter: acRemoveItemFilter,
 })(FilterSelector)