feat: add fullscreen option to visualization items [DHIS2-9879] (#1358)

Adds fullscreen button to Visualization items

* No cypress tests added since it isn't currently possible to test the fullscreen api in cypress. I'll be keeping an eye on if/when this gets implemented in cypress (cypress-io/cypress#7776)
* Minor refactor: move check for whether to show ItemHeaderButtons (pluginIsAvailable) out of ItemHeaderButtons and to Item, so that the logic doesn't get too complex in ItemHeaderButtons (would have been first checking pluginIsAvailable, then checking the fullsreen prop)

.browserslistrc

@@ -0,0 +1,5 @@
+> 0.5%
+last 2 versions
+Firefox ESR
+not ie 11
+not dead

cypress/assets/backends/sierraLeone_236.js

@@ -1,6 +1,14 @@
 export const dashboards = {
     'Antenatal Care': {
         route: '#/nghVC4wtyzi',
+        items: {
+            text: {
+                itemUid: 'ILRTXgXvurM',
+            },
+            chart: {
+                itemUid: 'azz0KRlHgLs',
+            },
+        },
     },
     Delivery: {
         route: '#/iMnYyBfSxmM',

cypress/integration/ui/fullscreen.feature

@@ -0,0 +1,15 @@
+Feature: Item context menu fullscreen
+
+    Background:
+        Given I open the "Antenatal Care" dashboard
+        And the "Antenatal Care" dashboard displays in view mode
+
+    @nonmutating
+    Scenario: Text item does not have a context menu
+        Then the text item does not have a context menu
+
+    @nonmutating
+    Scenario: Chart item has a fullscreen option
+        Then the chart item has a fullscreen option in the context menu
+
+

cypress/integration/ui/fullscreen/fullscreen.js

@@ -0,0 +1,18 @@
+import { Then } from 'cypress-cucumber-preprocessor/steps'
+import {
+    getDashboardItem,
+    itemMenuButton,
+    clickMenuButton,
+} from '../../../selectors/dashboardItem'
+import { dashboards } from '../../../assets/backends'
+
+Then('the text item does not have a context menu', () => {
+    getDashboardItem(dashboards['Antenatal Care'].items.text.itemUid)
+        .find(itemMenuButton)
+        .should('not.exist')
+})
+
+Then('the chart item has a fullscreen option in the context menu', () => {
+    clickMenuButton(dashboards['Antenatal Care'].items.chart.itemUid)
+    cy.contains('View fullscreen').should('be.visible')
+})

cypress/selectors/dashboardItem.js

@@ -6,11 +6,10 @@ export const tableSel = '.pivot-table-container'
 export const gridItemSel = '.react-grid-item'
 
 export const itemDetailsSel = '[data-test="dashboarditem-footer"]'
+export const itemMenuButton = '[data-test="dashboarditem-menu-button"]'
 
 export const getDashboardItem = itemUid =>
     cy.get(`[data-test="dashboarditem-${itemUid}"]`)
 
 export const clickMenuButton = itemUid =>
-    getDashboardItem(itemUid)
-        .find('[data-test="dashboarditem-menu-button"]')
-        .click()
+    getDashboardItem(itemUid).find(itemMenuButton).click()

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: 2020-12-09T13:38:15.043Z\n"
-"PO-Revision-Date: 2020-12-09T13:38:15.043Z\n"
+"POT-Creation-Date: 2020-12-10T12:16:21.390Z\n"
+"PO-Revision-Date: 2020-12-10T12:16:21.391Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
@@ -153,6 +153,9 @@ msgstr ""
 msgid "Open in {{appName}} app"
 msgstr ""
 
+msgid "View fullscreen"
+msgstr ""
+
 msgid "Unable to load the plugin for this item"
 msgstr ""
 

src/components/App.css

@@ -29,6 +29,35 @@ table.pivot * {
     background-color: #48a999;
 }
 
+div:fullscreen,
+div:-webkit-full-screen {
+    background-color: white;
+}
+
+div:-webkit-full-screen {
+    object-fit: contain;
+    position: fixed !important;
+    top: 0px !important;
+    right: 0px !important;
+    bottom: 0px !important;
+    left: 0px !important;
+    box-sizing: border-box !important;
+    min-width: 0px !important;
+    max-width: none !important;
+    min-height: 0px !important;
+    max-height: none !important;
+    width: 100% !important;
+    height: 100% !important;
+    transform: none !important;
+    margin: 0px !important;
+}
+
+div:fullscreen .dashboard-item-content,
+div:-webkit-full-screen .dashboard-item-content {
+    height: 95vh !important;
+    width: 100vw !important;
+}
+
 @media print {
     body {
         width: 100% !important;

src/components/Item/VisualizationItem/Item.js

@@ -21,6 +21,7 @@ import {
 import { sGatherAnalyticalObjectStatisticsInDashboardViews } from '../../../reducers/settings'
 import { acAddVisualization } from '../../../actions/visualizations'
 import { acSetSelectedItemActiveType } from '../../../actions/selected'
+import { pluginIsAvailable } from './Visualization/plugin'
 import { getDataStatisticsName } from '../../../modules/itemTypes'
 import { getVisualizationId, getVisualizationName } from '../../../modules/item'
 import memoizeOne from '../../../modules/memoizeOne'
@@ -36,6 +37,7 @@ export class Item extends Component {
     state = {
         showFooter: false,
         configLoaded: false,
+        isFullscreen: false,
     }
 
     constructor(props, context) {
@@ -45,6 +47,7 @@ export class Item extends Component {
 
         this.contentRef = React.createRef()
         this.headerRef = React.createRef()
+        this.itemDomElSelector = `.reactgriditem-${this.props.item.id}`
 
         this.memoizedGetContentHeight = memoizeOne(
             (calculatedHeight, measuredHeight, preferMeasured) =>
@@ -73,11 +76,59 @@ export class Item extends Component {
             console.log(e)
         }
 
+        this.setState({ configLoaded: true })
+
+        const el = document.querySelector(this.itemDomElSelector)
+        if (el?.requestFullscreen) {
+            el.onfullscreenchange = this.handleFullscreenChange
+        } else if (el?.webkitRequestFullscreen) {
+            el.onwebkitfullscreenchange = this.handleFullscreenChange
+        }
+    }
+
+    componentWillUnmount() {
+        const el = document.querySelector(this.itemDomElSelector)
+        if (el?.onfullscreenchange) {
+            el.removeEventListener(
+                'onfullscreenchange',
+                this.handleFullscreenChange
+            )
+        } else if (el?.onwebkitfullscreenchange) {
+            el.removeEventListener(
+                'onwebkitfullscreenchange',
+                this.handleFullscreenChange
+            )
+        }
+    }
+
+    isFullscreenSupported = () => {
+        const el = document.querySelector(this.itemDomElSelector)
+        return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
+    }
+
+    handleFullscreenChange = () => {
         this.setState({
-            configLoaded: true,
+            isFullscreen:
+                !!document.fullscreenElement ||
+                !!document.webkitFullscreenElement,
         })
     }
 
+    onToggleFullscreen = () => {
+        if (!this.state.isFullscreen) {
+            const el = document.querySelector(this.itemDomElSelector)
+            if (el?.requestFullscreen) {
+                el.requestFullscreen()
+            } else if (el?.webkitRequestFullscreen) {
+                el.webkitRequestFullscreen()
+            }
+        } else {
+            document.exitFullscreen
+                ? document.exitFullscreen()
+                : document.webkitExitFullscreen()
+        }
+    }
+
     getUniqueKey = memoizeOne(() => uniqueId())
 
     onToggleFooter = () => {
@@ -100,6 +151,10 @@ export class Item extends Component {
     }
 
     getAvailableHeight = () => {
+        if (this.state.isFullscreen) {
+            return '95vh'
+        }
+
         const calculatedHeight =
             this.props.item.originalHeight -
             this.headerRef.current.clientHeight -
@@ -119,16 +174,19 @@ export class Item extends Component {
         const { showFooter } = this.state
         const activeType = this.getActiveType()
 
-        const actionButtons = (
+        const actionButtons = pluginIsAvailable(activeType || item.type) ? (
             <ItemHeaderButtons
                 item={item}
                 visualization={this.props.visualization}
                 onSelectActiveType={this.setActiveType}
                 onToggleFooter={this.onToggleFooter}
+                onToggleFullscreen={this.onToggleFullscreen}
                 activeType={activeType}
                 activeFooter={showFooter}
+                isFullscreen={this.state.isFullscreen}
+                fullscreenSupported={this.isFullscreenSupported()}
             />
-        )
+        ) : null
 
         return (
             <>

src/components/Item/VisualizationItem/ItemHeaderButtons.js

@@ -14,8 +14,13 @@ import ChartIcon from '@material-ui/icons/InsertChart'
 import MapIcon from '@material-ui/icons/Public'
 import LaunchIcon from '@material-ui/icons/Launch'
 
-import { ThreeDots, SpeechBubble } from './assets/icons'
-import { pluginIsAvailable, getLink } from './Visualization/plugin'
+import {
+    ThreeDots,
+    SpeechBubble,
+    Fullscreen,
+    ExitFullscreen,
+} from './assets/icons'
+import { getLink } from './Visualization/plugin'
 import {
     CHART,
     MAP,
@@ -31,7 +36,6 @@ const iconFill = { fill: colors.grey600 }
 
 const ItemHeaderButtons = (props, context) => {
     const [menuIsOpen, setMenuIsOpen] = useState(null)
-
     const { item, visualization, onSelectActiveType, activeType } = props
 
     const isTrackerType = isTrackerDomainType(item.type)
@@ -60,6 +64,11 @@ const ItemHeaderButtons = (props, context) => {
         }
     }
 
+    const handleToggleFullscreenClick = () => {
+        props.onToggleFullscreen()
+        closeMenu()
+    }
+
     const openMenu = () => setMenuIsOpen(true)
     const closeMenu = () => setMenuIsOpen(false)
 
@@ -105,7 +114,11 @@ const ItemHeaderButtons = (props, context) => {
 
     const buttonRef = createRef()
 
-    return pluginIsAvailable(activeType || item.type) ? (
+    return props.isFullscreen ? (
+        <Button small secondary onClick={props.onToggleFullscreen}>
+            <ExitFullscreen />
+        </Button>
+    ) : (
         <>
             <div ref={buttonRef}>
                 <Button
@@ -146,20 +159,31 @@ const ItemHeaderButtons = (props, context) => {
                             label={interpretationMenuLabel}
                             onClick={handleInterpretationClick}
                         />
+                        {props.fullscreenSupported && (
+                            <MenuItem
+                                dense
+                                icon={<Fullscreen />}
+                                label={i18n.t('View fullscreen')}
+                                onClick={handleToggleFullscreenClick}
+                            />
+                        )}
                     </Menu>
                 </Popover>
             )}
         </>
-    ) : null
+    )
 }
 
 ItemHeaderButtons.propTypes = {
     activeFooter: PropTypes.bool,
     activeType: PropTypes.string,
+    fullscreenSupported: PropTypes.bool,
+    isFullscreen: PropTypes.bool,
     item: PropTypes.object,
     visualization: PropTypes.object,
     onSelectActiveType: PropTypes.func,
     onToggleFooter: PropTypes.func,
+    onToggleFullscreen: PropTypes.func,
 }
 
 ItemHeaderButtons.contextTypes = {

src/components/Item/VisualizationItem/Visualization/Visualization.js

@@ -114,7 +114,7 @@ class Visualization extends React.Component {
 
 Visualization.propTypes = {
     activeType: PropTypes.string,
-    availableHeight: PropTypes.number,
+    availableHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     visualization: PropTypes.object,

src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js

@@ -8,7 +8,7 @@ jest.mock('../Visualization/plugin', () => ({
     pluginIsAvailable: () => true,
 }))
 
-it('renders correctly', () => {
+it('renders correctly when not fullscreen', () => {
     const buttons = shallow(
         <ItemHeaderButtons
             item={{
@@ -27,3 +27,24 @@ it('renders correctly', () => {
     )
     expect(toJson(buttons)).toMatchSnapshot()
 })
+
+it('renders correctly when fullscreen', () => {
+    const buttons = 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={true}
+        />
+    )
+    expect(toJson(buttons)).toMatchSnapshot()
+})

src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap

@@ -7,6 +7,8 @@ exports[`VisualizationItem/Item does not render Visualization if config not load
       <ItemHeaderButtons
         activeFooter={false}
         activeType="CHART"
+        fullscreenSupported={false}
+        isFullscreen={false}
         item={
           Object {
             "chart": Object {
@@ -18,6 +20,7 @@ exports[`VisualizationItem/Item does not render Visualization if config not load
         }
         onSelectActiveType={[Function]}
         onToggleFooter={[Function]}
+        onToggleFullscreen={[Function]}
         visualization={
           Object {
             "id": "vis id",