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.

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

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

Merged
merged 4 commits into from
Sep 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion cypress/integration/view/offline/offline.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
7 changes: 2 additions & 5 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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),
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const ViewAsMenuItems = ({
}
label={i18n.t('View as Chart')}
onClick={onViewChart}
disabled={notSupported}
icon={<IconVisualizationColumn16 />}
/>
)}
Expand All @@ -55,6 +56,7 @@ const ViewAsMenuItems = ({
}
label={i18n.t('View as Table')}
onClick={onViewTable}
disabled={notSupported}
icon={<IconTable16 />}
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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-3508410433 dense"
class="jsx-3508410433 disabled dense"
data-test="dhis2-uicore-menuitem"
>
<a
Expand Down Expand Up @@ -416,15 +416,15 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer 1`
class="jsx-3508410433 label"
>
<span
class="span"
class="span notAllowed"
>
View as Chart
</span>
</span>
</a>
</li>
<li
class="jsx-3508410433 dense"
class="jsx-3508410433 disabled dense"
data-test="dhis2-uicore-menuitem"
>
<a
Expand All @@ -449,7 +449,85 @@ exports[`renders menu for active type MAP and type MAP without Thematic layer 1`
class="jsx-3508410433 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-3508410433 disabled dense"
data-test="dhis2-uicore-menuitem"
>
<a
class="jsx-3508410433"
>
<span
class="jsx-3508410433 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-3508410433 label"
>
<span
class="span notAllowed"
>
View as Chart
</span>
</span>
</a>
</li>
<li
class="jsx-3508410433 disabled dense"
data-test="dhis2-uicore-menuitem"
>
<a
class="jsx-3508410433"
>
<span
class="jsx-3508410433 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-3508410433 label"
>
<span
class="span notAllowed"
>
View as Table
</span>
Expand Down
6 changes: 5 additions & 1 deletion src/components/MenuItemWithTooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const MenuItemWithTooltip = ({
disabledWhenOffline,
tooltip,
label,
disabled,
...rest
}) => {
const { offline } = useOnlineStatus()
Expand All @@ -18,7 +19,7 @@ const MenuItemWithTooltip = ({
? i18n.t('Not available offline')
: tooltip

const notAllowed = disabledWhenOffline && offline
const notAllowed = disabled || (disabledWhenOffline && offline)

return (
<MenuItem
Expand All @@ -27,6 +28,7 @@ const MenuItemWithTooltip = ({
label={
<OfflineTooltip
content={tooltipContent}
disabled={disabled}
disabledWhenOffline={disabledWhenOffline}
>
{label}
Expand All @@ -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: '',
}
Expand Down
6 changes: 4 additions & 2 deletions src/components/OfflineTooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
}

Expand Down
29 changes: 11 additions & 18 deletions src/pages/edit/FilterSettingsDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,17 +143,13 @@ exports[`renders correctly when filters are not restricted 1`] = `
<div
class="jsx-71743532 box"
>
<span
class="span"
<button
class="jsx-1937199209 primary"
data-test="dhis2-uicore-button"
type="button"
>
<button
class="jsx-1937199209 primary"
data-test="dhis2-uicore-button"
type="button"
>
Confirm
</button>
</span>
Confirm
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -309,17 +305,13 @@ exports[`renders correctly when filters are restricted 1`] = `
<div
class="jsx-71743532 box"
>
<span
class="span"
<button
class="jsx-1937199209 primary"
data-test="dhis2-uicore-button"
type="button"
>
<button
class="jsx-1937199209 primary"
data-test="dhis2-uicore-button"
type="button"
>
Confirm
</button>
</span>
Confirm
</button>
</div>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions src/pages/view/TitleBar/ActionsBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -173,17 +173,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"
Expand Down