fix: disable View as Chart/Table for non-thematic maps (#1997) (#1998)

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
dhis2 · Sep 28, 2021 · 4dcb048 · 4dcb048
1 parent 4cf6810
commit 4dcb048
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 51 deletions.
diff --git 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
@@ -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
@@ -144,6 +144,7 @@ const ItemContextMenu = props => {
                         {allowVisOpenInApp && !isSmallScreen(width) && (
                             <MenuItem
                                 icon={<IconLaunch16 />}
+                                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
@@ -43,6 +43,7 @@ const ViewAsMenuItems = ({
                     }
                     label={i18n.t('View as Chart')}
                     onClick={onViewChart}
+                    disabled={notSupported}
                     icon={<IconVisualizationColumn16 />}
                 />
             )}
@@ -55,6 +56,7 @@ const ViewAsMenuItems = ({
                     }
                     label={i18n.t('View as Table')}
                     onClick={onViewTable}
+                    disabled={notSupported}
                     icon={<IconTable16 />}
                 />
             )}

diff --git 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(<ViewAsMenuItems {...props} />)
+
+    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/...em/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ViewAsMenuItems.spec.js.snap b/...em/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`] = `
 <div>
   <li
-    class="jsx-665727467 dense"
+    class="jsx-665727467 disabled dense"
     data-test="dhis2-uicore-menuitem"
   >
     <a
@@ -416,15 +416,15 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer 1`
         class="jsx-665727467 label"
       >
         <span
-          class="span"
+          class="span notAllowed"
         >
           View as Chart
         </span>
       </span>
     </a>
   </li>
   <li
-    class="jsx-665727467 dense"
+    class="jsx-665727467 disabled dense"
     data-test="dhis2-uicore-menuitem"
   >
     <a
@@ -449,7 +449,85 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer 1`
         class="jsx-665727467 label"
       >
         <span
-          class="span"
+          class="span notAllowed"
+        >
+          View as Table
+        </span>
+      </span>
+    </a>
+  </li>
+</div>
+`;
+
+exports[`renders menu for active type MAP and type MAP without Thematic layer when offline 1`] = `
+<div>
+  <li
+    class="jsx-665727467 disabled dense"
+    data-test="dhis2-uicore-menuitem"
+  >
+    <a
+      class="jsx-665727467"
+    >
+      <span
+        class="jsx-665727467 icon"
+      >
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            fill="currentColor"
+            fill-rule="evenodd"
+          >
+            <path
+              d="M0 0h1v15h15v1H0z"
+            />
+            <path
+              d="M16 8v7h-3V8zm-5-6v13H8V2zM6 4v11H3V4z"
+            />
+          </g>
+        </svg>
+      </span>
+      <span
+        class="jsx-665727467 label"
+      >
+        <span
+          class="span notAllowed"
+        >
+          View as Chart
+        </span>
+      </span>
+    </a>
+  </li>
+  <li
+    class="jsx-665727467 disabled dense"
+    data-test="dhis2-uicore-menuitem"
+  >
+    <a
+      class="jsx-665727467"
+    >
+      <span
+        class="jsx-665727467 icon"
+      >
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 1a1 1 0 011 1v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1zm-6.5 9H2v4h5.5zm6.5 0H8.5v4H14zM2 5v4h5.5V5zm12-3H2v2h12zM8.5 9H14V5H8.5z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <span
+        class="jsx-665727467 label"
+      >
+        <span
+          class="span notAllowed"
         >
           View as Table
         </span>

diff --git 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 (
         <MenuItem
@@ -27,6 +28,7 @@ const MenuItemWithTooltip = ({
             label={
                 <OfflineTooltip
                     content={tooltipContent}
+                    disabled={disabled}
                     disabledWhenOffline={disabledWhenOffline}
                 >
                     {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
@@ -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 (
         <UiTooltip
@@ -37,10 +37,12 @@ const Tooltip = ({ disabledWhenOffline, content, children }) => {
 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
@@ -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')}
                             </Button>
-                            <OfflineTooltip
-                                content={i18n.t(
-                                    'Cannot confirm changes while offline'
-                                )}
+                            <Button
+                                onClick={() => {
+                                    if (!filtersSelectable) {
+                                        setSelected([])
+                                    }
+                                    onConfirm(filtersSelectable, selected)
+                                }}
+                                primary
+                                type="button"
                             >
-                                <Button
-                                    onClick={() => {
-                                        if (!filtersSelectable) {
-                                            setSelected([])
-                                        }
-                                        onConfirm(filtersSelectable, selected)
-                                    }}
-                                    primary
-                                    type="button"
-                                >
-                                    {i18n.t('Confirm')}
-                                </Button>
-                            </OfflineTooltip>
+                                {i18n.t('Confirm')}
+                            </Button>
                         </ButtonStrip>
                     </ModalActions>
                 </Modal>

diff --git 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`] = `
         <div
           class="jsx-71743532 box"
         >
-          <span
-            class="span"
+          <button
+            class="jsx-3597138218 primary"
+            data-test="dhis2-uicore-button"
+            type="button"
           >
-            <button
-              class="jsx-3597138218 primary"
-              data-test="dhis2-uicore-button"
-              type="button"
-            >
-              Confirm
-            </button>
-          </span>
+            Confirm
+          </button>
         </div>
       </div>
     </div>
@@ -309,17 +305,13 @@ exports[`renders correctly when filters are restricted 1`] = `
         <div
           class="jsx-71743532 box"
         >
-          <span
-            class="span"
+          <button
+            class="jsx-3597138218 primary"
+            data-test="dhis2-uicore-button"
+            type="button"
           >
-            <button
-              class="jsx-3597138218 primary"
-              data-test="dhis2-uicore-button"
-              type="button"
-            >
-              Confirm
-            </button>
-          </span>
+            Confirm
+          </button>
         </div>
       </div>
     </div>

diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js
@@ -176,17 +176,22 @@ const ViewActions = ({
             <MenuItem
                 dense
                 disabled={offline && !isCached}
+                disabledWhenOffline={false}
                 label={i18n.t('Print')}
                 dataTest="print-menu-item"
             >
                 <MenuItem
                     dense
+                    disabled={offline && !isCached}
+                    disabledWhenOffline={false}
                     label={i18n.t('Dashboard layout')}
                     onClick={() => setRedirectUrl(`${id}/printlayout`)}
                     dataTest="print-layout-menu-item"
                 />
                 <MenuItem
                     dense
+                    disabled={offline && !isCached}
+                    disabledWhenOffline={false}
                     label={i18n.t('One item per page')}
                     onClick={() => setRedirectUrl(`${id}/printoipp`)}
                     dataTest="print-oipp-menu-item"