feat: when rendering for push analytics, disable download button unti…

…l map is rendered (#3072)

* feat: disable download button until map is rendered

* chore: code cleaning

* chore: code cleaning

* chore: code comment

* fix: isPushAnalytics url param

* fix: isPushAnalytics url param

* chore: update @dhis2/analytics and deduplicate deps

* chore: read single url param

* fix: ensure isDownload is a bool to avoid prop-types error

* fix: add class-names for push-analytics

* fix: check download param when navigating to new

* fix: prevent enabling download button while loading mask is showing

* fix: add class to map container when no map id is set

* fix: improve hover states and add consistent spacing [UX-161] (#3121)

* fix: make `dhis2-map-new` class independent of downloadMode

* feat: add push analytics instructions

* chore: upgrade @dhis2/maps-gl

---------

Co-authored-by: HendrikThePendric <hendrik@dhis2.org>
Co-authored-by: Jen Jones Arnesen <jennifer@dhis2.org>
Co-authored-by: Joseph John Aas Cooper <joe@dhis2.org>

package.json

@@ -39,13 +39,13 @@
         "start-server-and-test": "^2.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.2.0",
+        "@dhis2/analytics": "^26.3.0",
         "@dhis2/app-runtime": "3.9.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-alerts": "3.9.4",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/maps-gl": "^3.8.6",
+        "@dhis2/maps-gl": "^3.9.0",
         "@dhis2/ui": "^9.2.0",
         "@krakenjs/post-robot": "^11.0.0",
         "@reportportal/agent-js-cypress": "git+https://github.com/dhis2/agent-js-cypress.git#develop",

public/push-analytics.json

@@ -0,0 +1,24 @@
+{
+    "version": "0.0.1",
+    "showVisualization": {
+        "strategy": "navigateToUrl",
+        "steps": [
+            { "goto": "{{appUrl}}/#/{{id}}/download?isPushAnalytics=true" },
+            { "waitForSelector": ".push-analytics-download-button:enabled" }
+        ]
+    },
+    "triggerDownload": {
+        "strategy": "useUiElements",
+        "steps": [{ "click": ".push-analytics-download-button" }]
+    },
+    "obtainDownloadArtifact": {
+        "strategy": "interceptFileDownload"
+    },
+    "clearVisualization": {
+        "strategy": "navigateToUrl",
+        "steps": [
+            { "goto": "{{appUrl}}/#/" },
+            { "waitForSelector": ".dhis2-map-new .dhis2-map-rendered" }
+        ]
+    }
+}

src/components/download/DownloadButton.js

@@ -1,11 +1,18 @@
 import i18n from '@dhis2/d2-i18n'
+import cx from 'classnames'
 import React from 'react'
 import { openDownloadMode } from '../../util/history.js'
 import styles from './styles/DownloadButton.module.css'
 
 const DownloadButton = () => {
     return (
-        <button className={styles.button} onClick={openDownloadMode}>
+        <button
+            className={cx(
+                styles.button,
+                'push-analytics-download-dropdown-menu-button'
+            )}
+            onClick={openDownloadMode}
+        >
             {i18n.t('Download')}
         </button>
     )

src/components/download/DownloadSettings.js

@@ -6,15 +6,23 @@ import { setDownloadConfig } from '../../actions/download.js'
 import { standardizeFilename } from '../../util/dataDownload.js'
 import { downloadMapImage, downloadSupport } from '../../util/export-image.js'
 import { getSplitViewLayer } from '../../util/helpers.js'
-import { closeDownloadMode } from '../../util/history.js'
+import { closeDownloadMode, getHashUrlParam } from '../../util/history.js'
 import { getMapName } from '../app/FileMenu.js'
 import Drawer from '../core/Drawer.js'
 import { Checkbox, Help } from '../core/index.js'
+import { loadingMaskClass } from '../map/MapLoadingMask.js'
 import LegendLayers from './LegendLayers.js'
 import NorthArrowPosition from './NorthArrowPosition.js'
 import styles from './styles/DownloadSettings.module.css'
 
+const mapContainerId = 'dhis2-map-container'
+const mapClass = 'dhis2-map'
+const renderedClass = 'dhis2-map-rendered'
+const downloadingClass = 'dhis2-map-downloading'
+
 const DownloadSettings = () => {
+    const isPushAnalytics = getHashUrlParam('isPushAnalytics')
+    const [isRendered, setIsRendered] = useState(false)
     const [error, setError] = useState(null)
     const dispatch = useDispatch()
 
@@ -38,17 +46,17 @@ const DownloadSettings = () => {
 
     const onDownload = useCallback(() => {
         const filename = standardizeFilename(getMapName(name), 'png')
-        let mapEl = document.getElementById('dhis2-map-container')
+        let mapEl = document.getElementById(mapContainerId)
 
         if (includeMargins) {
             mapEl = mapEl.parentNode
         }
 
         // Temporary added to remove close 'x' from map popups
-        mapEl.classList.add('dhis2-map-downloading')
+        mapEl.classList.add(downloadingClass)
 
         downloadMapImage(mapEl, filename)
-            .then(() => mapEl.classList.remove('dhis2-map-downloading'))
+            .then(() => mapEl.classList.remove(downloadingClass))
             .catch(setError)
     }, [name, includeMargins])
 
@@ -67,6 +75,36 @@ const DownloadSettings = () => {
         )
     }, [name, description, legendLayers, hasLayers, dispatch])
 
+    useEffect(() => {
+        if (isPushAnalytics) {
+            // Multiple map elements if split view
+            const mapElements = document.getElementsByClassName(mapClass)
+
+            // Observe is rendered class is added to map element
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.attributeName == 'class') {
+                        setIsRendered(
+                            !document.querySelector(`.${loadingMaskClass}`) &&
+                                mutation.target.classList.contains(
+                                    renderedClass
+                                )
+                        )
+                    }
+                })
+            })
+
+            for (const mapEl of mapElements) {
+                mapEl.classList.remove(renderedClass)
+                observer.observe(mapEl, { attributes: true })
+            }
+
+            return () => {
+                observer.disconnect()
+            }
+        }
+    }, [isPushAnalytics])
+
     const isSupported = downloadSupport() && !error
     const isSplitView = !!getSplitViewLayer(mapViews)
     const showMarginsCheckbox = false // Not in use
@@ -205,7 +243,12 @@ const DownloadSettings = () => {
                                     : i18n.t('Close')}
                             </Button>
                             {isSupported && (
-                                <Button primary onClick={onDownload}>
+                                <Button
+                                    primary
+                                    disabled={isPushAnalytics && !isRendered}
+                                    onClick={onDownload}
+                                    className="push-analytics-download-button"
+                                >
                                     {i18n.t('Download')}
                                 </Button>
                             )}

src/components/map/MapLoadingMask.js

@@ -1,11 +1,14 @@
 import { ComponentCover, CenteredContent, CircularLoader } from '@dhis2/ui'
+import cx from 'classnames'
 import React from 'react'
 import styles from './styles/MapLoadingMask.module.css'
 
+export const loadingMaskClass = 'dhis2-map-loading-mask'
+
 const MapLoadingMask = () => (
     <ComponentCover
         translucent
-        className={styles.cover}
+        className={cx(styles.cover, loadingMaskClass)}
         dataTest="map-loading-mask"
     >
         <CenteredContent>

src/components/map/MapPosition.js

@@ -98,6 +98,7 @@ const MapPosition = () => {
                     className={cx(styles.mapContainer, {
                         [styles.download]: downloadMode,
                         'dhis2-map-download': downloadMode,
+                        'dhis2-map-new': !mapId,
                     })}
                 >
                     <MapContainer resizeCount={resizeCount} setMap={setMap} />

src/util/history.js

@@ -34,6 +34,11 @@ const getHashUrlParams = (loc) => {
     return params
 }
 
+const getHashUrlParam = (key) => {
+    const params = getHashUrlParams(history.location)
+    return params[key]
+}
+
 const openDownloadMode = () => {
     if (history.location.pathname === '/') {
         history.push(`/${DOWNLOAD}`)
@@ -53,6 +58,7 @@ const closeDownloadMode = () => {
 
 export {
     getHashUrlParams,
+    getHashUrlParam,
     defaultHashUrlParams,
     openDownloadMode,
     closeDownloadMode,

yarn.lock

@@ -2016,10 +2016,10 @@
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2/analytics@^26.2.0":
-  version "26.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.2.0.tgz#36a7f258ac96ddab90f4001e62257e2cc64f202e"
-  integrity sha512-YcJu6EHnor6pbHmwXKYumLRVy/9TxuLtBDv9JIzjt9/APZa8kbak6sT2/53pnWDnbUjzDwR8EV1UIz24vAX+ig==
+"@dhis2/analytics@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.3.0.tgz#ada2fe27442f19704fa704e334546416c85ea1d6"
+  integrity sha512-B/pUh8K8wyivL4yBiwqPoQ94pMWwCqh0xu3Uak4jmJqS+jO0slUlyDLtAmXU/jqRlRgRg1nR4u18npjd511Q7A==
   dependencies:
     "@dhis2/d2-ui-rich-text" "^7.4.1"
     "@dhis2/multi-calendar-dates" "1.0.0"
@@ -2243,10 +2243,10 @@
     markdown-it "^8.4.2"
     prop-types "^15.6.2"
 
-"@dhis2/maps-gl@^3.8.6":
-  version "3.8.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-3.8.6.tgz#eace04fca9bb5d4cc24ca3fcebb4c13e3f8a6422"
-  integrity sha512-9jVfPczgT9MZrU/Cm5ksSjVnUV8/sPOdcaRVLj/nusDMOUVJ23Bt6/U6Gd6SOu/XPk8pWAi9dwyOF1p5pB8L7g==
+"@dhis2/maps-gl@^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-3.9.0.tgz#124f560eaa2107c7b0555b47d7b88533ebdca9e5"
+  integrity sha512-bGxBsiTRktUihyM4epcYGl1joJe5RG/r0HOHicU4UaxJLU7t8f1b9VVW18hp9TWyinjMUMmaorIu+dwOgFg/MA==
   dependencies:
     "@mapbox/sphericalmercator" "^1.2.0"
     "@turf/area" "^6.5.0"