Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Feb 15, 2021
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9883b1
feat: handle dashboard views with system settings [DHIS2-7630]
Feb 9, 2021
cf2ffb7
fix: use aliases for relevant settings [DHIS2-7630]
Feb 10, 2021
b440c72
fix: add additional unit tests for [DHIS2-7630]
Feb 10, 2021
bf04217
fix: rename system settings in initial set
Feb 11, 2021
9acc316
fix: add unit test for ItemHeaderButtons to be null when appropriate
Feb 11, 2021
97233a3
Merge branch 'master' into DHIS2-7630
jenniferarnesen Feb 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/api/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
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 query = {
resource: 'systemSettings',
Expand Down
66 changes: 48 additions & 18 deletions src/components/Item/VisualizationItem/ItemHeaderButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,25 @@ 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 { settings } = useSystemSettings()
const {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about doing this renaming at the point of the response, so it will be consistent throughout the app? It would probably be done in SystemSettingsProvider. (And then update the names throughout the app where systemSettings is used)

Copy link
Member Author

@tomzemp tomzemp Feb 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. I've refactored and put the logic for the remappings in api/settings (applied in SystemSettingsProvider). Let me know if this is okay, or if you'd like me to implement some other way
tomzemp@bf04217

keyDashboardContextMenuItemOpenInRelevantApp: openInRelevantApp,
keyDashboardContextMenuItemShowInterpretationsAndDetails: showInterpretationsAndDetails,
keyDashboardContextMenuItemSwitchViewType: switchViewType,
keyDashboardContextMenuItemViewFullscreen: fullscreenAllowedInSettings,
} = settings

const isTrackerType = isTrackerDomainType(item.type)

const onViewTable = () => {
Expand Down Expand Up @@ -77,6 +86,7 @@ const ItemHeaderButtons = props => {

const type = visualization.type || item.type
const canViewAs =
switchViewType &&
!isSingleValue(type) &&
!isYearOverYear(type) &&
type !== VIS_TYPE_GAUGE &&
Expand Down Expand Up @@ -117,6 +127,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 />
Expand Down Expand Up @@ -144,25 +165,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 />}
Expand All @@ -182,6 +211,7 @@ ItemHeaderButtons.propTypes = {
activeType: PropTypes.string,
fullscreenSupported: PropTypes.bool,
isFullscreen: PropTypes.bool,
isOpen: PropTypes.bool,
item: PropTypes.object,
visualization: PropTypes.object,
onSelectActiveType: PropTypes.func,
Expand Down
202 changes: 202 additions & 0 deletions src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,37 @@ import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import ItemHeaderButtons from '../ItemHeaderButtons'
import { useSystemSettings } from '../../../SystemSettingsProvider'

jest.mock('../Visualization/plugin', () => ({
getLink: () => 'http://rainbowdash',
pluginIsAvailable: () => true,
}))

jest.mock('@dhis2/analytics', () => ({
isSingleValue: () => {
return false
},
isYearOverYear: () => {
return false
},
}))

jest.mock('../../../SystemSettingsProvider', () => ({
useSystemSettings: jest.fn(),
}))

const mockSystemSettingsDefault = {
settings: {
keyDashboardContextMenuItemOpenInRelevantApp: true,
keyDashboardContextMenuItemShowInterpretationsAndDetails: true,
keyDashboardContextMenuItemSwitchViewType: true,
keyDashboardContextMenuItemViewFullscreen: true,
},
}

it('renders correctly when not fullscreen', () => {
useSystemSettings.mockImplementationOnce(() => mockSystemSettingsDefault)
const buttons = shallow(
<ItemHeaderButtons
item={{
Expand All @@ -29,6 +53,7 @@ it('renders correctly when not fullscreen', () => {
})

it('renders correctly when fullscreen', () => {
useSystemSettings.mockImplementationOnce(() => mockSystemSettingsDefault)
const buttons = shallow(
<ItemHeaderButtons
item={{
Expand All @@ -48,3 +73,180 @@ it('renders correctly when fullscreen', () => {
)
expect(toJson(buttons)).toMatchSnapshot()
})

it('renders Menu Items when open', () => {
useSystemSettings.mockImplementationOnce(() => mockSystemSettingsDefault)
const container = shallow(
<ItemHeaderButtons
item={{
type: 'CHART',
chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
}}
visualization={{
type: 'SINGLE_VALUE',
}}
onSelectActiveType={Function.prototype}
activeFooter={false}
activeType={'CHART'}
d2={{}}
onToggleFooter={Function.prototype}
isFullscreen={false}
fullscreenSupported={true}
isOpen={true}
/>
)

expect(toJson(container)).toMatchSnapshot()
})

it('does not render ViewAsMenuItems Items if settings do not allow', () => {
const mockSystemSettings = { settings: {} }
mockSystemSettings.settings = Object.assign(
{},
mockSystemSettingsDefault.settings,
{
keyDashboardContextMenuItemSwitchViewType: false,
}
)
useSystemSettings.mockImplementationOnce(() => mockSystemSettings)
const container = shallow(
<ItemHeaderButtons
item={{
type: 'CHART',
chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
}}
visualization={{
type: 'SINGLE_VALUE',
}}
onSelectActiveType={Function.prototype}
activeFooter={false}
activeType={'CHART'}
d2={{}}
onToggleFooter={Function.prototype}
isFullscreen={false}
fullscreenSupported={true}
isOpen={true}
/>
)
expect(container.find('ViewAsMenuItems').exists()).toBeFalsy()
})

it('does not let you open in relevant app if settings do not allow', () => {
const mockSystemSettings = { settings: {} }
mockSystemSettings.settings = Object.assign(
{},
mockSystemSettingsDefault.settings,
{
keyDashboardContextMenuItemOpenInRelevantApp: false,
}
)
useSystemSettings.mockImplementationOnce(() => mockSystemSettings)
const container = shallow(
<ItemHeaderButtons
item={{
type: 'CHART',
chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
}}
visualization={{
type: 'SINGLE_VALUE',
}}
onSelectActiveType={Function.prototype}
activeFooter={false}
activeType={'CHART'}
d2={{}}
onToggleFooter={Function.prototype}
isFullscreen={false}
fullscreenSupported={true}
isOpen={true}
/>
)
expect(
container
.findWhere(
n =>
n.name() === 'MenuItem' &&
n.prop('label') === 'Open in Data Visualizer app'
)
.exists()
).toBeFalsy()
})

it('does not let you open in fullscreen if settings do not allow', () => {
const mockSystemSettings = { settings: {} }
mockSystemSettings.settings = Object.assign(
{},
mockSystemSettingsDefault.settings,
{
keyDashboardContextMenuItemViewFullscreen: false,
}
)
useSystemSettings.mockImplementationOnce(() => mockSystemSettings)
const container = shallow(
<ItemHeaderButtons
item={{
type: 'CHART',
chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
}}
visualization={{
type: 'SINGLE_VALUE',
}}
onSelectActiveType={Function.prototype}
activeFooter={false}
activeType={'CHART'}
d2={{}}
onToggleFooter={Function.prototype}
isFullscreen={false}
fullscreenSupported={true}
isOpen={true}
/>
)
expect(
container
.findWhere(
n =>
n.name() === 'MenuItem' &&
n.prop('label') === 'View fullscreen'
)
.exists()
).toBeFalsy()
})

it('does not let you open interpretations and details if settings do not allow', () => {
const mockSystemSettings = { settings: {} }
mockSystemSettings.settings = Object.assign(
{},
mockSystemSettingsDefault.settings,
{
keyDashboardContextMenuItemShowInterpretationsAndDetails: false,
}
)
useSystemSettings.mockImplementationOnce(() => mockSystemSettings)
const container = shallow(
<ItemHeaderButtons
item={{
type: 'CHART',
chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
}}
visualization={{
type: 'SINGLE_VALUE',
}}
onSelectActiveType={Function.prototype}
activeFooter={false}
activeType={'CHART'}
d2={{}}
onToggleFooter={Function.prototype}
isFullscreen={false}
fullscreenSupported={true}
isOpen={true}
/>
)
expect(
container
.findWhere(
n =>
n.name() === 'MenuItem' &&
n.prop('label') === 'Show interpretations and details'
)
.exists()
).toBeFalsy()
})
Loading