diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js index f0e95c84a..6cc87b2f8 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js +++ b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js @@ -115,6 +115,7 @@ const ItemContextMenu = props => { type={item.type} activeType={activeType} onActiveTypeChanged={onActiveTypeChanged} + visualization={visualization} /> {(allowVisShowInterpretations || (allowVisOpenInApp && diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js index 596164ca0..a6f28a183 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js +++ b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js @@ -4,6 +4,7 @@ import i18n from '@dhis2/d2-i18n' import TableIcon from '@material-ui/icons/ViewList' import ChartIcon from '@material-ui/icons/InsertChart' import MapIcon from '@material-ui/icons/Public' +import getThematicMapViews from '../../../../modules/getThematicMapViews' import { CHART, MAP, @@ -13,11 +14,16 @@ import { isTrackerDomainType, hasMapView, } from '../../../../modules/itemTypes' -import { MenuItem, colors } from '@dhis2/ui' +import { MenuItem, Tooltip, colors } from '@dhis2/ui' const iconFill = { fill: colors.grey600 } -const ViewAsMenuItems = ({ type, activeType, onActiveTypeChanged }) => { +const ViewAsMenuItems = ({ + type, + activeType, + visualization, + onActiveTypeChanged, +}) => { const isTrackerType = isTrackerDomainType(type) const onViewTable = () => @@ -28,23 +34,63 @@ const ViewAsMenuItems = ({ type, activeType, onActiveTypeChanged }) => { const onViewMap = () => onActiveTypeChanged(MAP) + const isDisabled = type === MAP && !getThematicMapViews(visualization) + + const ViewAsChartMenuItem = () => { + const ChartMenuItem = () => ( + } + /> + ) + + if (isDisabled) { + return ( + + + + ) + } + + return + } + + const ViewAsTableMenuItem = () => { + const TableMenuItem = () => ( + } + /> + ) + + if (isDisabled) { + return ( + + + + ) + } + + return + } + return ( <> {activeType !== CHART && activeType !== EVENT_CHART && ( - } - /> + )} {activeType !== REPORT_TABLE && activeType !== EVENT_REPORT && ( - } - /> + )} {hasMapView(type) && activeType !== MAP && ( { ViewAsMenuItems.propTypes = { activeType: PropTypes.string, type: PropTypes.string, + visualization: PropTypes.object, onActiveTypeChanged: PropTypes.func, } diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js index d8a36b6ac..46b71ae9c 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js +++ b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js @@ -28,6 +28,23 @@ test('renders menu for active type CHART and type MAP', async () => { const props = Object.assign({}, defaultProps, { type: MAP, activeType: CHART, + visualization: { + mapViews: [{ layer: 'thematic' }], + }, + }) + + const { container } = render() + + expect(container).toMatchSnapshot() +}) + +test('renders menu for active type MAP and type MAP without Thematic layer', async () => { + const props = Object.assign({}, defaultProps, { + type: MAP, + activeType: MAP, + visualization: { + mapViews: [{ layer: 'earthEngine' }], + }, }) const { container } = render() @@ -39,6 +56,7 @@ test('renders menu for active type REPORT_TABLE and type CHART', async () => { const props = Object.assign({}, defaultProps, { type: CHART, activeType: REPORT_TABLE, + visualization: {}, }) const { container } = render() @@ -50,6 +68,7 @@ test('renders menu for active type CHART and type REPORT_TABLE', async () => { const props = Object.assign({}, defaultProps, { type: REPORT_TABLE, activeType: CHART, + visualization: {}, }) const { container } = render() @@ -61,6 +80,7 @@ test('renders menu for active type EVENT_REPORT and type EVENT_CHART', async () const props = Object.assign({}, defaultProps, { type: EVENT_CHART, activeType: EVENT_REPORT, + visualization: {}, }) const { container } = render() @@ -72,6 +92,7 @@ test('renders menu for active type EVENT_CHART and type EVENT_REPORT', async () const props = Object.assign({}, defaultProps, { type: EVENT_REPORT, activeType: EVENT_CHART, + visualization: {}, }) const { container } = render() diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ViewAsMenuItems.spec.js.snap b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ViewAsMenuItems.spec.js.snap index 0a64885f9..8e05fccf8 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ViewAsMenuItems.spec.js.snap +++ b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ViewAsMenuItems.spec.js.snap @@ -79,7 +79,7 @@ exports[`renders menu for active type CHART and type REPORT_TABLE 1`] = ` > +`; + exports[`renders menu for active type REPORT_TABLE and type CHART 1`] = `