feat: Restricting view options of dashboard items (DHIS2-7630) (#1472)

This pull request implements PEFPAR's suggestion for restricting view options from within dashboard items (https://jira.dhis2.org/browse/DHIS2-7630) using newly added system settings.
dhis2 · Feb 15, 2021 · e74ee29 · e74ee29
1 parent 65f7c6f
commit e74ee29
Show file tree

Hide file tree

Showing 5 changed files with 388 additions and 21 deletions.
diff --git a/src/api/settings.js b/src/api/settings.js
@@ -1,9 +1,34 @@
 export const DEFAULT_SETTINGS = {
     displayNameProperty: 'displayName',
+    keyDashboardContextMenuItemOpenInRelevantApp: true,
+    keyDashboardContextMenuItemShowInterpretationsAndDetails: true,
+    keyDashboardContextMenuItemSwitchViewType: true,
+    keyDashboardContextMenuItemViewFullscreen: true,
     keyGatherAnalyticalObjectStatisticsInDashboardViews: false,
 }
 
-const SYSTEM_SETTINGS = ['keyGatherAnalyticalObjectStatisticsInDashboardViews']
+const SYSTEM_SETTINGS = [
+    'keyDashboardContextMenuItemOpenInRelevantApp',
+    'keyDashboardContextMenuItemShowInterpretationsAndDetails',
+    'keyDashboardContextMenuItemSwitchViewType',
+    'keyDashboardContextMenuItemViewFullscreen',
+    'keyGatherAnalyticalObjectStatisticsInDashboardViews',
+]
+
+const SYSTEM_SETTINGS_REMAPPINGS = {
+    keyDashboardContextMenuItemOpenInRelevantApp: 'openInRelevantApp',
+    keyDashboardContextMenuItemShowInterpretationsAndDetails:
+        'showInterpretationsAndDetails',
+    keyDashboardContextMenuItemSwitchViewType: 'switchViewType',
+    keyDashboardContextMenuItemViewFullscreen: 'fullscreenAllowedInSettings',
+}
+
+export const renameSystemSettings = settings => {
+    return Object.keys(settings).reduce((mapped, key) => {
+        mapped[SYSTEM_SETTINGS_REMAPPINGS[key] || key] = settings[key]
+        return mapped
+    }, {})
+}
 
 const query = {
     resource: 'systemSettings',

diff --git a/src/components/Item/VisualizationItem/ItemHeaderButtons.js b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
@@ -31,16 +31,24 @@ import {
     hasMapView,
     getAppName,
 } from '../../../modules/itemTypes'
+import { useSystemSettings } from '../../SystemSettingsProvider'
 
 const iconFill = { fill: colors.grey600 }
 
 const ItemHeaderButtons = props => {
-    const [menuIsOpen, setMenuIsOpen] = useState(null)
+    const [menuIsOpen, setMenuIsOpen] = useState(props.isOpen)
 
     const { baseUrl } = useConfig()
 
     const { item, visualization, onSelectActiveType, activeType } = props
 
+    const {
+        openInRelevantApp,
+        showInterpretationsAndDetails,
+        switchViewType,
+        fullscreenAllowedInSettings,
+    } = useSystemSettings().settings
+
     const isTrackerType = isTrackerDomainType(item.type)
 
     const onViewTable = () => {
@@ -77,6 +85,7 @@ const ItemHeaderButtons = props => {
 
     const type = visualization.type || item.type
     const canViewAs =
+        switchViewType &&
         !isSingleValue(type) &&
         !isYearOverYear(type) &&
         type !== VIS_TYPE_GAUGE &&
@@ -117,6 +126,17 @@ const ItemHeaderButtons = props => {
 
     const buttonRef = createRef()
 
+    const fullscreenAllowed =
+        props.fullscreenSupported && fullscreenAllowedInSettings
+
+    if (
+        !openInRelevantApp &&
+        !showInterpretationsAndDetails &&
+        !switchViewType &&
+        !fullscreenAllowed
+    ) {
+        return null
+    }
     return props.isFullscreen ? (
         <Button small secondary onClick={props.onToggleFullscreen}>
             <ExitFullscreen />
@@ -144,25 +164,33 @@ const ItemHeaderButtons = props => {
                         {canViewAs && (
                             <>
                                 <ViewAsMenuItems />
-                                <Divider />
+                                {(showInterpretationsAndDetails ||
+                                    openInRelevantApp ||
+                                    fullscreenAllowed) && <Divider />}
                             </>
                         )}
-                        <MenuItem
-                            dense
-                            icon={<LaunchIcon style={{ fill: '#6e7a8a' }} />}
-                            label={i18n.t('Open in {{appName}} app', {
-                                appName: getAppName(item.type),
-                            })}
-                            href={getLink(item, baseUrl)}
-                            target="_blank"
-                        />
-                        <MenuItem
-                            dense
-                            icon={<SpeechBubble />}
-                            label={interpretationMenuLabel}
-                            onClick={handleInterpretationClick}
-                        />
-                        {props.fullscreenSupported && (
+                        {openInRelevantApp && (
+                            <MenuItem
+                                dense
+                                icon={
+                                    <LaunchIcon style={{ fill: '#6e7a8a' }} />
+                                }
+                                label={i18n.t('Open in {{appName}} app', {
+                                    appName: getAppName(item.type),
+                                })}
+                                href={getLink(item, baseUrl)}
+                                target="_blank"
+                            />
+                        )}
+                        {showInterpretationsAndDetails && (
+                            <MenuItem
+                                dense
+                                icon={<SpeechBubble />}
+                                label={interpretationMenuLabel}
+                                onClick={handleInterpretationClick}
+                            />
+                        )}
+                        {fullscreenAllowed && (
                             <MenuItem
                                 dense
                                 icon={<Fullscreen />}
@@ -182,6 +210,7 @@ ItemHeaderButtons.propTypes = {
     activeType: PropTypes.string,
     fullscreenSupported: PropTypes.bool,
     isFullscreen: PropTypes.bool,
+    isOpen: PropTypes.bool,
     item: PropTypes.object,
     visualization: PropTypes.object,
     onSelectActiveType: PropTypes.func,