fix: use keyAnalysisDisplayProperty from user settings for analytics …

…components (#1600) Fix for these components and functions from analytics and dv plugin that respect the keyAnalysisDisplayProperty: apiFetchDimensions, visualization, OrgUnitDimension, DynamicDimension Refactor: * remove hardcoded displayNameProperty that was together with system settings (not where it belonged either) * remove other userSettings request and use the useUserSettings hook instead * Messages Item - move style to css module
dhis2 · Mar 5, 2021 · 35eeb69 · 35eeb69
1 parent 2fc062c
commit 35eeb69
Show file tree

Hide file tree

Showing 15 changed files with 236 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^15.1.1",
+        "@dhis2/analytics": "^16.0.1",
         "@dhis2/app-runtime": "^2.7.0",
         "@dhis2/app-runtime-adapter-d2": "^1.0.2",
         "@dhis2/d2-i18n": "^1.0.6",
@@ -15,7 +15,7 @@
         "@dhis2/d2-ui-rich-text": "^7.1.4",
         "@dhis2/d2-ui-sharing-dialog": "^7.1.4",
         "@dhis2/d2-ui-translation-dialog": "^7.1.4",
-        "@dhis2/data-visualizer-plugin": "^35.20.0",
+        "@dhis2/data-visualizer-plugin": "^35.20.3",
         "@dhis2/ui": "^6.2.3",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^4.9.1",

diff --git a/src/AppWrapper.js b/src/AppWrapper.js
@@ -7,6 +7,7 @@ import { useDataEngine } from '@dhis2/app-runtime'
 
 import WindowDimensionsProvider from './components/WindowDimensionsProvider'
 import SystemSettingsProvider from './components/SystemSettingsProvider'
+import UserSettingsProvider from './components/UserSettingsProvider'
 import App from './components/App'
 import configureStore from './configureStore'
 
@@ -50,9 +51,11 @@ const AppWrapper = () => {
                         }
                         return (
                             <SystemSettingsProvider>
-                                <WindowDimensionsProvider>
-                                    <App />
-                                </WindowDimensionsProvider>
+                                <UserSettingsProvider>
+                                    <WindowDimensionsProvider>
+                                        <App />
+                                    </WindowDimensionsProvider>
+                                </UserSettingsProvider>
                             </SystemSettingsProvider>
                         )
                     }}

diff --git a/src/api/settings.js → src/api/systemSettings.js b/src/api/settings.js → src/api/systemSettings.js
@@ -1,5 +1,4 @@
 export const DEFAULT_SETTINGS = {
-    displayNameProperty: 'displayName',
     keyDashboardContextMenuItemOpenInRelevantApp: true,
     keyDashboardContextMenuItemShowInterpretationsAndDetails: true,
     keyDashboardContextMenuItemSwitchViewType: true,
@@ -30,9 +29,7 @@ export const renameSystemSettings = settings => {
     }, {})
 }
 
-const query = {
+export const systemSettingsQuery = {
     resource: 'systemSettings',
     params: { key: SYSTEM_SETTINGS },
 }
-
-export default query
diff --git a/src/api/userSettings.js b/src/api/userSettings.js
@@ -0,0 +1,6 @@
+export const userSettingsQuery = {
+    resource: 'userSettings',
+    params: {
+        key: ['keyDbLocale', 'keyUiLocale', 'keyAnalysisDisplayProperty'],
+    },
+}
diff --git a/src/components/App.js b/src/components/App.js
@@ -9,7 +9,7 @@ import { useDataEngine } from '@dhis2/app-runtime'
 
 import Dashboard from './Dashboard/Dashboard'
 import AlertBar from './AlertBar/AlertBar'
-import { useSystemSettings } from './SystemSettingsProvider'
+import { useUserSettings } from './UserSettingsProvider'
 
 import { acReceivedUser } from '../actions/user'
 import { tFetchDashboards } from '../actions/dashboards'
@@ -31,7 +31,7 @@ import './App.css'
 const App = props => {
     const { d2 } = useD2()
     const dataEngine = useDataEngine()
-    const { settings } = useSystemSettings()
+    const { userSettings } = useUserSettings()
 
     useEffect(() => {
         props.setCurrentUser(d2.currentUser)
@@ -45,7 +45,7 @@ const App = props => {
             try {
                 const dimensions = await apiFetchDimensions(
                     dataEngine,
-                    settings.displayNameProperty
+                    userSettings.keyAnalysisDisplayProperty
                 )
 
                 props.setDimensions(getFilteredDimensions(dimensions))
@@ -54,10 +54,10 @@ const App = props => {
             }
         }
 
-        if (settings.displayNameProperty) {
+        if (userSettings.keyAnalysisDisplayProperty) {
             fetchDimensions()
         }
-    }, [settings])
+    }, [userSettings])
 
     return (
         <>

diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js
@@ -10,6 +10,7 @@ import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 
 import FilterSettingsDialog from '../ItemFilter/FilterSettingsDialog'
 import ConfirmDeleteDialog from './ConfirmDeleteDialog'
+import { useUserSettings } from '../UserSettingsProvider'
 import {
     tSaveDashboard,
     acClearEditDashboard,
@@ -48,6 +49,8 @@ const EditBar = props => {
     const [confirmDeleteDlgIsOpen, setConfirmDeleteDlgIsOpen] = useState(false)
     const [redirectUrl, setRedirectUrl] = useState(undefined)
 
+    const { userSettings } = useUserSettings()
+
     const failureAlert = useAlert(saveFailedMessage, {
         critical: true,
     })
@@ -116,14 +119,12 @@ const EditBar = props => {
         toggleFilterSettingsDialog()
     }
 
-    const onTranslationsSaved = async translations => {
+    const onTranslationsSaved = translations => {
         if (translations && translations.length) {
-            const dbLocale = await d2.currentUser.userSettings.get(
-                'keyDbLocale'
-            )
-
             const translation = translations.find(
-                t => t.locale === dbLocale && t.property === 'NAME'
+                t =>
+                    t.locale === userSettings.keyDbLocale &&
+                    t.property === 'NAME'
             )
 
             if (translation && translation.value) {

diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.js
@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import i18n from '@dhis2/d2-i18n'
-import { colors } from '@dhis2/ui'
 import { useConfig } from '@dhis2/app-runtime'
-import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import ItemHeader from '../ItemHeader/ItemHeader'
 import Line from '../../../widgets/Line'
+import { useUserSettings } from '../../UserSettingsProvider'
 
 import { sGetMessagesRoot } from '../../../reducers/messages'
 import { formatDate } from '../../../modules/util'
 import { isViewMode } from '../../Dashboard/dashboardModes'
 
+import classes from './styles/Item.module.css'
 import './MessagesItem.css'
 
 const PRIVATE = 'PRIVATE'
@@ -23,45 +23,9 @@ const messageTypes = {
     SYSTEM: 'System',
 }
 
-const style = {
-    list: {
-        listStyleType: 'none',
-        paddingLeft: '0px',
-    },
-    seeAll: {
-        textAlign: 'center',
-        fontSize: '13px',
-        marginBottom: '5px',
-    },
-    sender: {
-        fontSize: '13px',
-        lineHeight: '15px',
-        margin: 0,
-        color: colors.grey800,
-    },
-    snippet: {
-        color: colors.grey800,
-        fontSize: '13px',
-        lineHeight: '15px',
-        maxHeight: '30px',
-        overflow: 'hidden',
-    },
-}
-
 const MessagesItem = ({ messages, item, dashboardMode }) => {
-    const [uiLocale, setUiLocale] = useState('')
-    const { d2 } = useD2()
     const { baseUrl } = useConfig()
-
-    useEffect(() => {
-        const getUiLocale = async () => {
-            const uiLocale = await d2.currentUser.userSettings.get(
-                'keyUiLocale'
-            )
-            setUiLocale(uiLocale)
-        }
-        getUiLocale()
-    }, [])
+    const { userSettings } = useUserSettings()
 
     const getMessageHref = msg => {
         const msgIdentifier = msg ? `#/${msg.messageType}/${msg.id}` : ''
@@ -101,10 +65,11 @@ const MessagesItem = ({ messages, item, dashboardMode }) => {
                     <p className={`message-title ${readClass}`}>
                         {msg.displayName} ({msg.messageCount})
                     </p>
-                    <p style={style.sender}>
-                        {sender} - {formatDate(msgDate, uiLocale)}
+                    <p className={classes.sender}>
+                        {sender} -{' '}
+                        {formatDate(msgDate, userSettings.keyUiLocale)}
                     </p>
-                    <p style={style.snippet}>{latestMsg.text}</p>
+                    <p className={classes.snippet}>{latestMsg.text}</p>
                 </li>
             )
         })
@@ -121,8 +86,8 @@ const MessagesItem = ({ messages, item, dashboardMode }) => {
             <Line />
             {messages.length > 0 && (
                 <div className="dashboard-item-content">
-                    <ul style={style.list}>{getMessageItems()}</ul>
-                    <div style={style.seeAll}>
+                    <ul className={classes.list}>{getMessageItems()}</ul>
+                    <div className={classes.seeAll}>
                         <a href={getMessageHref()}>
                             {i18n.t('See all messages')}
                         </a>

diff --git a/src/components/Item/MessagesItem/styles/Item.module.css b/src/components/Item/MessagesItem/styles/Item.module.css
@@ -0,0 +1,25 @@
+.list {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.seeAll {
+    text-align: center;
+    font-size: 13px;
+    margin-bottom: 5px;
+}
+
+.sender {
+    font-size: 13px;
+    line-height: 15px;
+    margin: 0;
+    color: var(--colors-grey800);
+}
+
+.snippet {
+    color: var(--colors-grey800);
+    font-size: 13px;
+    line-height: 15px;
+    max-height: 30px;
+    overflow: hidden;
+}
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -21,6 +21,7 @@ import {
 import { getVisualizationId } from '../../../../modules/item'
 import memoizeOne from '../../../../modules/memoizeOne'
 import { sGetVisualization } from '../../../../reducers/visualizations'
+import { UserSettingsCtx } from '../../../UserSettingsProvider'
 import { pluginIsAvailable } from './plugin'
 
 class Visualization extends React.Component {
@@ -98,6 +99,11 @@ class Visualization extends React.Component {
                                     onLoadingComplete={this.onLoadingComplete}
                                     forDashboard={true}
                                     style={pluginProps.style}
+                                    userSettings={{
+                                        displayProperty: this.context
+                                            .userSettings
+                                            .keyAnalysisDisplayProperty,
+                                    }}
                                 />
                             )}
                         </D2Shim>
@@ -134,6 +140,8 @@ class Visualization extends React.Component {
     }
 }
 
+Visualization.contextType = UserSettingsCtx
+
 Visualization.propTypes = {
     activeType: PropTypes.string,
     availableHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),