fix(filters): wrap badges + clear/disable filters on dashboard switch…

… and edit mode (#280)

Remove filters when switching dashboard

Filters are not removed when the same dashboard is (re)selected.
Also disable filters when switching to edit mode and enable them again
when returning to view mode.

Wrap filter badges instead of text in them.

(cherry picked from commit ad3e3c3)

package.json

@@ -6,20 +6,20 @@
     "license": "BSD-3-Clause",
     "dependencies": {
         "@dhis2/d2-i18n": "^1.0.4",
-        "@dhis2/d2-ui-analytics": "0.0.4",
+        "@dhis2/d2-ui-analytics": "^0.0.9",
         "@dhis2/d2-ui-core": "^5.2.9",
         "@dhis2/d2-ui-interpretations": "^5.2.10",
         "@dhis2/d2-ui-mentions-wrapper": "^5.2.9",
         "@dhis2/d2-ui-rich-text": "^5.3.0",
         "@dhis2/d2-ui-sharing-dialog": "^5.2.9",
         "@dhis2/d2-ui-translation-dialog": "^5.2.9",
+        "@dhis2/data-visualizer-plugin": "^32.0.3",
         "@dhis2/ui": "1.0.0-beta.15",
         "@dhis2/ui-core": "^1.1.3",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^3.0.2",
         "d2": "^31.6.0",
         "d2-utilizr": "^0.2.16",
-        "data-visualizer-plugin": "github:d2-ci/data-visualizer-plugin",
         "i18next": "^15.0.6",
         "lodash": "^4.17.11",
         "material-design-icons": "^3.0.1",

src/actions/dashboards.js

@@ -12,6 +12,11 @@ import {
 } from '../reducers/dashboards';
 import { sGetUserUsername } from '../reducers/user';
 import { tSetSelectedDashboardById, acSetSelectedId } from './selected';
+import { sGetSelectedId } from '../reducers/selected';
+import { sGetIsEditing } from '../reducers/editDashboard';
+import { sGetEditItemFiltersRoot } from '../reducers/editItemFilters';
+import { acSetItemFilters, acClearItemFilters } from './itemFilters';
+import { acClearEditItemFilters } from './editItemFilters';
 import { acClearEditDashboard } from './editDashboard';
 import {
     apiFetchDashboards,
@@ -82,6 +87,20 @@ export const tSelectDashboard = id => async (dispatch, getState) => {
 
         if (dashboardToSelect) {
             dispatch(tSetSelectedDashboardById(dashboardToSelect.id));
+
+            if (dashboardToSelect.id === sGetSelectedId(state)) {
+                if (sGetIsEditing(state)) {
+                    // disable filters when switching to edit mode
+                    dispatch(acClearItemFilters());
+                } else {
+                    // enable filters when switching to view mode
+                    dispatch(acSetItemFilters(sGetEditItemFiltersRoot(state)));
+                }
+            } else {
+                // clear filters when switching dashboard
+                dispatch(acClearEditItemFilters());
+                dispatch(acClearItemFilters());
+            }
         } else {
             dispatch(acSetSelectedId(false));
         }

src/actions/editItemFilters.js

@@ -1,6 +1,7 @@
 import {
     REMOVE_EDIT_ITEM_FILTER,
     SET_EDIT_ITEM_FILTERS,
+    CLEAR_EDIT_ITEM_FILTERS,
 } from '../reducers/editItemFilters';
 
 // actions
@@ -10,6 +11,10 @@ export const acRemoveEditItemFilter = id => ({
     id,
 });
 
+export const acClearEditItemFilters = () => ({
+    type: CLEAR_EDIT_ITEM_FILTERS,
+});
+
 export const acSetEditItemFilters = filters => ({
     type: SET_EDIT_ITEM_FILTERS,
     filters,

src/actions/itemFilters.js

@@ -2,6 +2,7 @@ import {
     ADD_ITEM_FILTER,
     REMOVE_ITEM_FILTER,
     SET_ITEM_FILTERS,
+    CLEAR_ITEM_FILTERS,
 } from '../reducers/itemFilters';
 
 export const FILTER_ORG_UNIT = 'ou';
@@ -18,6 +19,10 @@ export const acRemoveItemFilter = id => ({
     id,
 });
 
+export const acClearItemFilters = () => ({
+    type: CLEAR_ITEM_FILTERS,
+});
+
 export const acSetItemFilters = filters => ({
     type: SET_ITEM_FILTERS,
     filters,

src/components/FilterBar/FilterBadge.js

@@ -7,7 +7,7 @@ import { colors } from '../../modules/colors';
 
 const styles = {
     badgeContainer: {
-        margin: '0 4px',
+        margin: '2px',
         padding: '0 16px',
         borderRadius: '4px',
         color: colors.white,
@@ -19,6 +19,7 @@ const styles = {
     badge: {
         fontSize: '13px',
         cursor: 'pointer',
+        whiteSpace: 'nowrap',
     },
     badgeRemove: {
         fontSize: '12px',

src/components/FilterBar/FilterBar.js

@@ -19,6 +19,7 @@ const styles = {
         padding: '8px 0',
         display: 'flex',
         justifyContent: 'center',
+        flexWrap: 'wrap',
     },
 };
 

src/components/Item/VisualizationItem/Item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import LaunchIcon from '@material-ui/icons/Launch';
-import ChartPlugin from 'data-visualizer-plugin';
+import ChartPlugin from '@dhis2/data-visualizer-plugin';
 
 import i18n from '@dhis2/d2-i18n';
 import uniqueId from 'lodash/uniqueId';

src/components/Item/VisualizationItem/__tests__/Item.spec.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ChartPlugin from 'data-visualizer-plugin';
+import ChartPlugin from '@dhis2/data-visualizer-plugin';
 import { CHART, REPORT_TABLE } from '../../../../modules/itemTypes';
 import { Item } from '../Item';
 import DefaultPlugin from '../DefaultPlugin';
 
-jest.mock('data-visualizer-plugin', () => () => <div />);
+jest.mock('@dhis2/data-visualizer-plugin', () => () => <div />);
 jest.mock('../DefaultPlugin', () => () => <div />);
 jest.mock('../ItemFooter', () => () => <div />);
 jest.mock('../plugin', () => {

src/reducers/__tests__/editItemFilters.js

@@ -0,0 +1,61 @@
+import reducer, {
+    DEFAULT_STATE_EDIT_ITEM_FILTERS,
+    SET_EDIT_ITEM_FILTERS,
+    REMOVE_EDIT_ITEM_FILTER,
+    CLEAR_EDIT_ITEM_FILTERS,
+} from '../editItemFilters';
+
+const testKey = 'ou';
+const testValue = [{ id: 'ou1', name: 'OU test' }];
+
+const testState = {
+    [testKey]: testValue,
+};
+
+describe('item filter reducer', () => {
+    describe('reducer', () => {
+        it('should return the default state', () => {
+            const actualState = reducer(DEFAULT_STATE_EDIT_ITEM_FILTERS, {});
+
+            expect(actualState).toEqual(DEFAULT_STATE_EDIT_ITEM_FILTERS);
+        });
+
+        it('should set a filter', () => {
+            const action = {
+                type: SET_EDIT_ITEM_FILTERS,
+                filters: testState,
+            };
+
+            const expectedState = testState;
+
+            const actualState = reducer(undefined, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+
+        it('should remove a filter', () => {
+            const action = {
+                type: REMOVE_EDIT_ITEM_FILTER,
+                id: testKey,
+            };
+
+            const expectedState = DEFAULT_STATE_EDIT_ITEM_FILTERS;
+
+            const actualState = reducer(testState, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+
+        it('should clear all filters', () => {
+            const action = {
+                type: CLEAR_EDIT_ITEM_FILTERS,
+            };
+
+            const expectedState = DEFAULT_STATE_EDIT_ITEM_FILTERS;
+
+            const actualState = reducer(testState, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+    });
+});

src/reducers/__tests__/itemFilters.js

@@ -1,6 +1,8 @@
 import reducer, {
     DEFAULT_STATE_ITEM_FILTERS,
     SET_ITEM_FILTERS,
+    REMOVE_ITEM_FILTER,
+    CLEAR_ITEM_FILTERS,
 } from '../itemFilters';
 
 const testKey = 'ou';
@@ -33,8 +35,20 @@ describe('item filter reducer', () => {
 
         it('should remove a filter', () => {
             const action = {
-                type: SET_ITEM_FILTERS,
-                filters: {},
+                type: REMOVE_ITEM_FILTER,
+                id: testKey,
+            };
+
+            const expectedState = DEFAULT_STATE_ITEM_FILTERS;
+
+            const actualState = reducer(testState, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+
+        it('should clear all filters', () => {
+            const action = {
+                type: CLEAR_ITEM_FILTERS,
             };
 
             const expectedState = DEFAULT_STATE_ITEM_FILTERS;

src/reducers/editItemFilters.js

@@ -1,3 +1,4 @@
+export const CLEAR_EDIT_ITEM_FILTERS = 'CLEAR_EDIT_ITEM_FILTERS';
 export const REMOVE_EDIT_ITEM_FILTER = 'REMOVE_EDIT_ITEM_FILTER';
 export const SET_EDIT_ITEM_FILTERS = 'SET_EDIT_ITEM_FILTERS';
 
@@ -15,6 +16,9 @@ export default (state = DEFAULT_STATE_EDIT_ITEM_FILTERS, action) => {
         case SET_EDIT_ITEM_FILTERS: {
             return action.filters;
         }
+        case CLEAR_EDIT_ITEM_FILTERS: {
+            return DEFAULT_STATE_EDIT_ITEM_FILTERS;
+        }
         default:
             return state;
     }

src/reducers/itemFilters.js

@@ -1,3 +1,4 @@
+export const CLEAR_ITEM_FILTERS = 'CLEAR_ITEM_FILTERS';
 export const SET_ITEM_FILTERS = 'SET_ITEM_FILTERS';
 export const ADD_ITEM_FILTER = 'ADD_ITEM_FILTER';
 export const REMOVE_ITEM_FILTER = 'REMOVE_ITEM_FILTER';
@@ -22,6 +23,9 @@ export default (state = DEFAULT_STATE_ITEM_FILTERS, action) => {
         case SET_ITEM_FILTERS: {
             return action.filters;
         }
+        case CLEAR_ITEM_FILTERS: {
+            return DEFAULT_STATE_ITEM_FILTERS;
+        }
         default:
             return state;
     }