fix: changing View As on one item was incorrectly causing other items to also change view [DHIS2-9590]

src/actions/selected.js

@@ -7,6 +7,8 @@ import {
     SET_SELECTED_ID,
     SET_SELECTED_ISLOADING,
     SET_SELECTED_SHOWDESCRIPTION,
+    SET_SELECTED_ITEM_ACTIVE_TYPE,
+    CLEAR_SELECTED_ITEM_ACTIVE_TYPES,
     sGetSelectedIsLoading,
     sGetSelectedId,
 } from '../reducers/selected'
@@ -16,7 +18,7 @@ import { acSetDashboardItems, acAppendDashboards } from './dashboards'
 import { acClearItemFilters } from './itemFilters'
 import { tGetMessages } from '../components/Item/MessagesItem/actions'
 import { acReceivedSnackbarMessage, acCloseSnackbar } from './snackbar'
-import { acAddVisualization } from './visualizations'
+import { acAddVisualization, acClearVisualizations } from './visualizations'
 
 import { apiFetchDashboard } from '../api/dashboards'
 import { storePreferredDashboardId } from '../api/localStorage'
@@ -55,6 +57,20 @@ export const acSetSelectedShowDescription = value => ({
     value,
 })
 
+export const acSetSelectedItemActiveType = (id, activeType) => {
+    const action = {
+        type: SET_SELECTED_ITEM_ACTIVE_TYPE,
+        id,
+        activeType,
+    }
+
+    return action
+}
+
+export const acClearSelectedItemActiveTypes = () => ({
+    type: CLEAR_SELECTED_ITEM_ACTIVE_TYPES,
+})
+
 // thunks
 export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
     dispatch(acSetSelectedIsLoading(true))
@@ -84,6 +100,12 @@ export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
 
         storePreferredDashboardId(sGetUserUsername(getState()), id)
 
+        if (id !== sGetSelectedId(getState())) {
+            dispatch(acClearItemFilters())
+            dispatch(acClearVisualizations())
+            dispatch(acClearSelectedItemActiveTypes())
+        }
+
         customDashboard.dashboardItems.forEach(item => {
             switch (item.type) {
                 case REPORT_TABLE:
@@ -101,10 +123,6 @@ export const tSetSelectedDashboardById = id => async (dispatch, getState) => {
             }
         })
 
-        if (id !== sGetSelectedId(getState())) {
-            dispatch(acClearItemFilters())
-        }
-
         dispatch(acSetSelectedId(id))
 
         dispatch(acSetSelectedIsLoading(false))

src/actions/visualizations.js

@@ -1,19 +1,13 @@
 import {
     ADD_VISUALIZATION,
-    SET_ACTIVE_VISUALIZATION_TYPE,
+    CLEAR_VISUALIZATIONS,
 } from '../reducers/visualizations'
 
 export const acAddVisualization = value => ({
     type: ADD_VISUALIZATION,
     value,
 })
 
-export const acSetActiveVisualizationType = (id, activeType) => {
-    const action = {
-        type: SET_ACTIVE_VISUALIZATION_TYPE,
-        id,
-        activeType,
-    }
-
-    return action
-}
+export const acClearVisualizations = () => ({
+    type: CLEAR_VISUALIZATIONS,
+})

src/components/Item/VisualizationItem/DefaultPlugin.js

@@ -48,25 +48,15 @@ class DefaultPlugin extends Component {
             ) &&
             this.shouldPluginReload(prevProps)
         ) {
-            const prevVis = orObject(prevProps.visualization)
-            const currentVis = this.props.visualization
-
-            const useActiveType =
-                currentVis.activeType !== prevVis.activeType ||
-                currentVis.activeType !== this.props.item.type
-
             if (
-                useActiveType ||
+                this.props.activeType !== prevProps.activeType ||
                 this.props.itemFilters !== prevProps.itemFilters
             ) {
-                pluginManager.unmount(
-                    this.props.item,
-                    prevVis.activeType || this.props.item.type
-                )
+                pluginManager.unmount(this.props.item, prevProps.activeType)
 
                 pluginManager.load(this.props.item, this.props.visualization, {
                     credentials: this.pluginCredentials,
-                    activeType: useActiveType ? currentVis.activeType : null,
+                    activeType: this.props.activeType,
                 })
             }
         }
@@ -83,9 +73,7 @@ class DefaultPlugin extends Component {
         ) {
             pluginManager.load(this.props.item, this.props.visualization, {
                 credentials: this.pluginCredentials,
-                activeType: this.props.useActiveType
-                    ? this.getActiveType()
-                    : null,
+                activeType: this.props.activeType,
                 options: this.props.options,
             })
         }
@@ -102,13 +90,10 @@ class DefaultPlugin extends Component {
                 this.props.visualization
             )
         ) {
-            pluginManager.unmount(this.props.item, this.getActiveType())
+            pluginManager.unmount(this.props.item, this.props.activeType)
         }
     }
 
-    getActiveType = () =>
-        this.props.visualization.activeType || this.props.item.type
-
     render() {
         const { classes, item, visualization, style } = this.props
         const pluginIsAvailable = pluginManager.pluginIsAvailable(
@@ -131,12 +116,12 @@ DefaultPlugin.contextTypes = {
 }
 
 DefaultPlugin.propTypes = {
+    activeType: PropTypes.string,
     classes: PropTypes.object,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     options: PropTypes.object,
     style: PropTypes.object,
-    useActiveType: PropTypes.bool,
     visualization: PropTypes.object,
 }
 

src/components/Item/VisualizationItem/Item.js

@@ -14,14 +14,14 @@ import LoadingMask from './LoadingMask'
 
 import * as pluginManager from './plugin'
 import { sGetVisualization } from '../../../reducers/visualizations'
+import { sGetSelectedItemActiveType } from '../../../reducers/selected'
+import { sGetIsEditing } from '../../../reducers/editDashboard'
 import {
     sGetItemFiltersRoot,
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters'
-import {
-    acAddVisualization,
-    acSetActiveVisualizationType,
-} from '../../../actions/visualizations'
+import { acAddVisualization } from '../../../actions/visualizations'
+import { acSetSelectedItemActiveType } from '../../../actions/selected'
 import {
     VISUALIZATION,
     MAP,
@@ -64,7 +64,7 @@ export class Item extends Component {
     }
 
     async componentDidMount() {
-        this.props.onVisualizationLoaded(
+        this.props.updateVisualization(
             // TODO do not call fetch on the pluginManager, do it here as the manager will eventually be removed...
             await pluginManager.fetch(this.props.item)
         )
@@ -155,7 +155,7 @@ export class Item extends Component {
 
         const props = {
             ...this.props,
-            useActiveType: !isEditMode(this.props.dashboardMode),
+            activeType,
             visualization,
             classes,
             style: this.memoizedGetContentStyle(
@@ -253,13 +253,17 @@ export class Item extends Component {
         )
     }
 
-    onSelectActiveType = type => {
+    selectActiveType = type => {
         type !== this.getActiveType() &&
-            this.props.onSelectActiveType(this.props.visualization.id, type)
+            this.props.selectActiveType(this.props.item.id, type)
     }
 
-    getActiveType = () =>
-        this.props.visualization.activeType || this.props.item.type
+    getActiveType = () => {
+        if (this.props.isEditing) {
+            return this.props.item.type
+        }
+        return this.props.activeType || this.props.item.type
+    }
 
     pluginIsAvailable = () =>
         pluginManager.pluginIsAvailable(
@@ -283,7 +287,7 @@ export class Item extends Component {
             <ItemHeaderButtons
                 item={item}
                 visualization={this.props.visualization}
-                onSelectActiveType={this.onSelectActiveType}
+                onSelectActiveType={this.selectActiveType}
                 onToggleFooter={this.onToggleFooter}
                 d2={this.d2}
                 activeType={this.getActiveType()}
@@ -323,13 +327,15 @@ Item.contextTypes = {
 }
 
 Item.propTypes = {
+    activeType: PropTypes.string,
     dashboardMode: PropTypes.string,
+    isEditing: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
+    selectActiveType: PropTypes.func,
+    updateVisualization: PropTypes.func,
     visualization: PropTypes.object,
-    onSelectActiveType: PropTypes.func,
     onToggleItemExpanded: PropTypes.func,
-    onVisualizationLoaded: PropTypes.func,
 }
 
 Item.defaultProps = {
@@ -344,6 +350,8 @@ const mapStateToProps = (state, ownProps) => {
         : DEFAULT_STATE_ITEM_FILTERS
 
     return {
+        activeType: sGetSelectedItemActiveType(state, ownProps.item?.id),
+        isEditing: sGetIsEditing(state),
         itemFilters,
         visualization: sGetVisualization(
             state,
@@ -352,11 +360,9 @@ const mapStateToProps = (state, ownProps) => {
     }
 }
 
-const mapDispatchToProps = dispatch => ({
-    onVisualizationLoaded: visualization =>
-        dispatch(acAddVisualization(visualization)),
-    onSelectActiveType: (id, type, activeType) =>
-        dispatch(acSetActiveVisualizationType(id, type, activeType)),
-})
+const mapDispatchToProps = {
+    selectActiveType: acSetSelectedItemActiveType,
+    updateVisualization: acAddVisualization,
+}
 
 export default connect(mapStateToProps, mapDispatchToProps)(Item)

src/reducers/__tests__/selected.spec.js

@@ -2,54 +2,98 @@ import reducer, {
     SET_SELECTED_ID,
     SET_SELECTED_ISLOADING,
     SET_SELECTED_SHOWDESCRIPTION,
+    SET_SELECTED_ITEM_ACTIVE_TYPE,
+    CLEAR_SELECTED_ITEM_ACTIVE_TYPES,
+    DEFAULT_STATE_SELECTED_ITEM_ACTIVE_TYPES,
 } from '../selected'
 
 describe('selected dashboard reducer', () => {
     const defaultState = {
         id: null,
         isLoading: false,
         showDescription: false,
+        itemActiveTypes: {},
     }
 
-    describe('reducer', () => {
-        it('should set the selected dashboard id', () => {
-            const id = 'my favorite dashboard'
-            const expectedState = Object.assign({}, defaultState, { id })
+    it('sets the selected dashboard id', () => {
+        const id = 'my favorite dashboard'
+        const expectedState = Object.assign({}, defaultState, { id })
 
-            const actualState = reducer(defaultState, {
-                type: SET_SELECTED_ID,
-                value: id,
-            })
+        const actualState = reducer(defaultState, {
+            type: SET_SELECTED_ID,
+            value: id,
+        })
+
+        expect(actualState).toEqual(expectedState)
+    })
 
-            expect(actualState).toEqual(expectedState)
+    it('sets the selected dashboard isLoading state', () => {
+        const isLoading = true
+        const expectedState = Object.assign({}, defaultState, {
+            isLoading,
         })
 
-        it('should set the selected dashboard isLoading state', () => {
-            const isLoading = true
-            const expectedState = Object.assign({}, defaultState, {
-                isLoading,
-            })
+        const actualState = reducer(defaultState, {
+            type: SET_SELECTED_ISLOADING,
+            value: isLoading,
+        })
 
-            const actualState = reducer(defaultState, {
-                type: SET_SELECTED_ISLOADING,
-                value: isLoading,
-            })
+        expect(actualState).toEqual(expectedState)
+    })
 
-            expect(actualState).toEqual(expectedState)
+    it('sets the selected dashboard showDescription state', () => {
+        const showDescription = true
+        const expectedState = Object.assign({}, defaultState, {
+            showDescription,
         })
 
-        it('should set the selected dashboard showDescription state', () => {
-            const showDescription = true
-            const expectedState = Object.assign({}, defaultState, {
-                showDescription,
-            })
+        const actualState = reducer(defaultState, {
+            type: SET_SELECTED_SHOWDESCRIPTION,
+            value: showDescription,
+        })
 
-            const actualState = reducer(defaultState, {
-                type: SET_SELECTED_SHOWDESCRIPTION,
-                value: showDescription,
-            })
+        expect(actualState).toEqual(expectedState)
+    })
+
+    it('sets an item active Type', () => {
+        const action = {
+            type: SET_SELECTED_ITEM_ACTIVE_TYPE,
+            id: 'rainbowDash',
+            activeType: 'PONY',
+        }
 
-            expect(actualState).toEqual(expectedState)
+        const expectedState = Object.assign({}, defaultState, {
+            itemActiveTypes: { rainbowDash: 'PONY' },
         })
+
+        const actualState = reducer(defaultState, action)
+
+        expect(actualState).toEqual(expectedState)
+    })
+
+    it('clears the item active types', () => {
+        const action = {
+            type: SET_SELECTED_ITEM_ACTIVE_TYPE,
+            id: 'rainbowDash',
+            activeType: 'PONY',
+        }
+
+        const expectedState = Object.assign({}, defaultState, {
+            itemActiveTypes: { rainbowDash: 'PONY' },
+        })
+
+        const actualState = reducer(defaultState, action)
+
+        expect(actualState).toEqual(expectedState)
+
+        const updatedState = reducer(actualState, {
+            type: CLEAR_SELECTED_ITEM_ACTIVE_TYPES,
+        })
+
+        expect(updatedState).toEqual(
+            Object.assign({}, defaultState, {
+                itemActiveTypes: DEFAULT_STATE_SELECTED_ITEM_ACTIVE_TYPES,
+            })
+        )
     })
 })