From cc1a44d2b3ce66b47a7aaf142b69da7c99f2a818 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 28 Sep 2021 14:00:04 +0200 Subject: [PATCH] fix: disable View as Chart/Table for non-thematic maps (#1997) Fixes https://jira.dhis2.org/browse/DHIS2-11889 Fixes in this PR * Open in [appName] app should be enabled even when offline * When online, View as options for non-thematic maps should be disabled with tooltip "This map not available as a Chart" * Dimension filter settings confirm button should not have an offline tooltip, because clicking the "Confirm" button doesn't trigger an api request * Print button in More menu should be enabled for cached dashboards when offline --- cypress/integration/view/offline/offline.js | 2 +- i18n/en.pot | 7 +- .../ItemContextMenu/ItemContextMenu.js | 1 + .../ItemContextMenu/ViewAsMenuItems.js | 2 + .../__tests__/ViewAsMenuItems.spec.js | 15 ++++ .../ViewAsMenuItems.spec.js.snap | 86 ++++++++++++++++++- src/components/MenuItemWithTooltip.js | 6 +- src/components/OfflineTooltip.js | 6 +- src/pages/edit/FilterSettingsDialog.js | 29 +++---- .../FilterSettingsDialog.spec.js.snap | 32 +++---- src/pages/view/TitleBar/ActionsBar.js | 5 ++ 11 files changed, 140 insertions(+), 51 deletions(-) diff --git a/cypress/integration/view/offline/offline.js b/cypress/integration/view/offline/offline.js index 2773961f7..9286cc880 100644 --- a/cypress/integration/view/offline/offline.js +++ b/cypress/integration/view/offline/offline.js @@ -211,7 +211,7 @@ Then( cy.contains('li', 'View as').should('have.class', 'disabled') cy.contains('li', 'Open in Data Visualizer app').should( - 'have.class', + 'not.have.class', 'disabled' ) cy.contains('li', 'Show details and interpretations').should( diff --git a/i18n/en.pot b/i18n/en.pot index 58ab4e2cb..b5971e32e 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2021-09-14T13:34:35.765Z\n" -"PO-Revision-Date: 2021-09-14T13:34:35.765Z\n" +"POT-Creation-Date: 2021-09-28T07:35:26.454Z\n" +"PO-Revision-Date: 2021-09-28T07:35:26.454Z\n" msgid "Untitled dashboard" msgstr "Untitled dashboard" @@ -243,9 +243,6 @@ msgstr "Available Filters" msgid "Selected Filters" msgstr "Selected Filters" -msgid "Cannot confirm changes while offline" -msgstr "Cannot confirm changes while offline" - msgid "Confirm" msgstr "Confirm" diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js index 3a797928d..7826df3b3 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js +++ b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js @@ -144,6 +144,7 @@ const ItemContextMenu = props => { {allowVisOpenInApp && !isSmallScreen(width) && ( } + disabledWhenOffline={false} label={i18n.t('Open in {{appName}} app', { appName: getAppName(item.type), })} diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js index 0b26580fb..705f8ee61 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js +++ b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js @@ -43,6 +43,7 @@ const ViewAsMenuItems = ({ } label={i18n.t('View as Chart')} onClick={onViewChart} + disabled={notSupported} icon={} /> )} @@ -55,6 +56,7 @@ const ViewAsMenuItems = ({ } label={i18n.t('View as Table')} onClick={onViewTable} + disabled={notSupported} icon={} /> )} diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js index 7507a2420..be1b5541e 100644 --- a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js +++ b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js @@ -82,6 +82,21 @@ test('renders menu for active type MAP and type MAP without Thematic layer', asy expect(container).toMatchSnapshot() }) +test('renders menu for active type MAP and type MAP without Thematic layer when offline', async () => { + useOnlineStatus.mockImplementation(jest.fn(() => offline)) + const props = Object.assign({}, defaultProps, { + type: MAP, + activeType: MAP, + visualization: { + mapViews: [{ layer: 'earthEngine' }], + }, + }) + + const { container } = render() + + expect(container).toMatchSnapshot() +}) + test('renders menu for active type REPORT_TABLE and type CHART', async () => { useOnlineStatus.mockImplementation(jest.fn(() => online)) const props = Object.assign({}, defaultProps, { 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 bdd4086b6..ebbffb307 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 @@ -384,7 +384,7 @@ exports[`renders menu for active type MAP and type CHART 1`] = ` exports[`renders menu for active type MAP and type MAP without Thematic layer 1`] = ` +`; + +exports[`renders menu for active type MAP and type MAP without Thematic layer when offline 1`] = ` +
+
  • + + + + + + + + + + + + View as Chart + + + +
    • +
  • + + + + + + + + View as Table diff --git a/src/components/MenuItemWithTooltip.js b/src/components/MenuItemWithTooltip.js index 10d5d8547..8f2ea549e 100644 --- a/src/components/MenuItemWithTooltip.js +++ b/src/components/MenuItemWithTooltip.js @@ -9,6 +9,7 @@ const MenuItemWithTooltip = ({ disabledWhenOffline, tooltip, label, + disabled, ...rest }) => { const { offline } = useOnlineStatus() @@ -18,7 +19,7 @@ const MenuItemWithTooltip = ({ ? i18n.t('Not available offline') : tooltip - const notAllowed = disabledWhenOffline && offline + const notAllowed = disabled || (disabledWhenOffline && offline) return ( {label} @@ -38,12 +40,14 @@ const MenuItemWithTooltip = ({ } MenuItemWithTooltip.propTypes = { + disabled: PropTypes.bool, disabledWhenOffline: PropTypes.bool, label: PropTypes.string, tooltip: PropTypes.string, } MenuItemWithTooltip.defaultProps = { + disabled: false, disabledWhenOffline: true, tooltip: '', } diff --git a/src/components/OfflineTooltip.js b/src/components/OfflineTooltip.js index c4670d1d5..25de4a233 100644 --- a/src/components/OfflineTooltip.js +++ b/src/components/OfflineTooltip.js @@ -6,10 +6,10 @@ import PropTypes from 'prop-types' import React from 'react' import classes from './styles/Tooltip.module.css' -const Tooltip = ({ disabledWhenOffline, content, children }) => { +const Tooltip = ({ disabledWhenOffline, disabled, content, children }) => { const { offline } = useOnlineStatus() - const notAllowed = disabledWhenOffline && offline + const notAllowed = disabled || (disabledWhenOffline && offline) return ( { Tooltip.propTypes = { children: PropTypes.node, content: PropTypes.string, + disabled: PropTypes.bool, disabledWhenOffline: PropTypes.bool, } Tooltip.defaultProps = { + disabled: false, disabledWhenOffline: true, } diff --git a/src/pages/edit/FilterSettingsDialog.js b/src/pages/edit/FilterSettingsDialog.js index 067a42a83..f8f0130b1 100644 --- a/src/pages/edit/FilterSettingsDialog.js +++ b/src/pages/edit/FilterSettingsDialog.js @@ -12,7 +12,6 @@ import { } from '@dhis2/ui' import PropTypes from 'prop-types' import React, { useState } from 'react' -import OfflineTooltip from '../../components/OfflineTooltip' import useDimensions from '../../modules/useDimensions' import classes from './styles/FilterSettingsDialog.module.css' @@ -166,24 +165,18 @@ const FilterSettingsDialog = ({ > {i18n.t('Cancel')} - { + if (!filtersSelectable) { + setSelected([]) + } + onConfirm(filtersSelectable, selected) + }} + primary + type="button" > - - + {i18n.t('Confirm')} + diff --git a/src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.js.snap index 06d639aa0..c5910cc80 100644 --- a/src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.js.snap +++ b/src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.js.snap @@ -143,17 +143,13 @@ exports[`renders correctly when filters are not restricted 1`] = `
    - - - + Confirm +
    • @@ -309,17 +305,13 @@ exports[`renders correctly when filters are restricted 1`] = `
    - - - + Confirm +
    diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js index 418ae84b7..bb2bf0db1 100644 --- a/src/pages/view/TitleBar/ActionsBar.js +++ b/src/pages/view/TitleBar/ActionsBar.js @@ -173,17 +173,22 @@ const ViewActions = ({ setRedirectUrl(`${id}/printlayout`)} dataTest="print-layout-menu-item" /> setRedirectUrl(`${id}/printoipp`)} dataTest="print-oipp-menu-item"