feat: add support for hash routing which is used by other analytics apps [DHIS2-15762]

cypress/integration/interpretations.cy.js

@@ -5,7 +5,7 @@ import { EXTENDED_TIMEOUT } from '../support/util.js'
 const MAP_TITLE = 'test ' + new Date().toUTCString().slice(-24, -4)
 context('Interpretations', () => {
     it('opens the interpretations panel for a map', () => {
-        cy.visit('/?id=ZBjCfSaLSqD', EXTENDED_TIMEOUT)
+        cy.visit('/#/ZBjCfSaLSqD', EXTENDED_TIMEOUT)
         const Layer = new ThematicLayer()
         Layer.validateCardTitle('ANC LLITN coverage')
         cy.get('canvas.maplibregl-canvas').should('be.visible')
@@ -65,8 +65,12 @@ context('Interpretations', () => {
             .find('canvas.maplibregl-canvas')
             .should('be.visible')
 
+        cy.url().should('include', 'interpretationId=')
+
         cy.get('button').contains('Hide interpretation').click()
 
+        cy.url().should('not.include', 'interpretationId=')
+
         deleteMap()
     })
 
@@ -75,7 +79,7 @@ context('Interpretations', () => {
             'postDataStatistics'
         )
         cy.visit(
-            '/?id=ZBjCfSaLSqD&interpretationId=yKqhXZdeJ6a',
+            '/#/ZBjCfSaLSqD?interpretationId=yKqhXZdeJ6a',
             EXTENDED_TIMEOUT
         ) //ANC: LLITN coverage district and facility
 
@@ -90,12 +94,16 @@ context('Interpretations', () => {
             )
             .should('be.visible')
 
+        cy.url().should('include', 'interpretationId=')
+
         cy.getByDataTest('interpretation-modal')
             .findByDataTest('dhis2-modal-close-button')
             .click()
 
         cy.getByDataTest('interpretation-modal').should('not.exist')
 
+        cy.url().should('not.include', 'interpretationId=')
+
         cy.getByDataTest('interpretations-list').should('be.visible')
     })
 })

cypress/integration/mapDownload.cy.js

@@ -0,0 +1,100 @@
+import { EXTENDED_TIMEOUT } from '../support/util.js'
+
+const mapWithThematicLayer = {
+    id: 'eDlFx0jTtV9',
+    name: 'ANC: LLITN Cov Chiefdom this year',
+    downloadFileName: 'ANC LLITN Cov Chiefdom this year.png',
+    cardTitle: 'ANC LLITN coverage',
+}
+
+const assertDownloadSettingChecked = (label, isChecked) => {
+    cy.getByDataTest('download-settings')
+        .find('label')
+        .contains(label)
+        .find('input')
+        .should(`${isChecked ? '' : 'not.'}be.checked`)
+}
+
+const clickDownloadSetting = (label) => {
+    cy.getByDataTest('download-settings')
+        .find('label')
+        .contains(label)
+        .find('input')
+        .click()
+}
+
+describe('Map Download', () => {
+    beforeEach(() => {
+        cy.task('emptyDownloadsFolder')
+    })
+
+    it('downloads a map', () => {
+        cy.visit(`/#/${mapWithThematicLayer.id}`, EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.get('[data-test="layercard"]')
+            .find('h2')
+            .contains(mapWithThematicLayer.cardTitle, EXTENDED_TIMEOUT)
+
+        cy.getByDataTest('dhis2-analytics-hovermenubar')
+            .find('button')
+            .contains('Download')
+            .click()
+
+        cy.log('confirm that download page is open')
+        cy.getByDataTest('download-settings').should('be.visible')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+        cy.get('button').contains('Exit download mode').should('be.visible')
+        cy.url().should('contain', `/#/${mapWithThematicLayer.id}/download`)
+
+        // check the current settings
+        assertDownloadSettingChecked('Show map name', true)
+
+        cy.getByDataTest('download-map-info')
+            .find('h1')
+            .contains(mapWithThematicLayer.name)
+            .should('be.visible')
+
+        assertDownloadSettingChecked('Show map description', false)
+        assertDownloadSettingChecked('Show legend', true)
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('download-legend-title')
+            .should('have.length', 1)
+
+        assertDownloadSettingChecked('Show overview map', true)
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('overview-map')
+            .should('be.visible')
+
+        // make some changes
+        clickDownloadSetting('Show map name')
+        cy.getByDataTest('download-map-info').find('h1').should('not.exist')
+
+        cy.getByDataTest('download-settings')
+            .find('button')
+            .contains('Download')
+            .click()
+
+        // check for downloaded file
+        cy.wait(3000) // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.waitUntil(
+            () => cy.task('getLastDownloadFilePath').then((result) => result),
+            { timeout: 3000, interval: 100 }
+        ).then((filePath) => {
+            expect(filePath).to.include(mapWithThematicLayer.downloadFileName)
+
+            cy.readFile(filePath, EXTENDED_TIMEOUT).should((buffer) =>
+                expect(buffer.length).to.be.gt(10000)
+            )
+        })
+
+        // leave download mode
+        cy.get('button').contains('Exit download mode').click()
+        cy.url().should('contain', `/#/${mapWithThematicLayer.id}`)
+        cy.url().should('not.contain', '/download')
+        cy.getByDataTest('download-settings').should('not.exist')
+        cy.get('[data-test="layercard"]')
+            .find('h2')
+            .contains(mapWithThematicLayer.cardTitle, EXTENDED_TIMEOUT)
+    })
+})

cypress/integration/smoke.cy.js

@@ -8,7 +8,7 @@ context('Smoke Test', () => {
         cy.title().should('equal', 'Maps | DHIS2')
     })
 
-    it('loads with map id', () => {
+    it('loads with map id (legacy)', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
         )
@@ -24,7 +24,16 @@ context('Smoke Test', () => {
         Layer.validateCardTitle('ANC 3 Coverage')
     })
 
-    it('loads currentAnalyticalObject', () => {
+    it('loads with map id (hash)', () => {
+        cy.visit('/#/zDP78aJU8nX', EXTENDED_TIMEOUT) //ANC: 1st visit coverage (%) by district last year
+
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        const Layer = new ThematicLayer()
+        Layer.validateCardTitle('ANC 1 Coverage')
+    })
+
+    it('loads currentAnalyticalObject (legacy)', () => {
         cy.intercept('**/userDataStore/analytics/settings', {
             fixture: 'analyticalObject.json',
         })
@@ -39,7 +48,22 @@ context('Smoke Test', () => {
         cy.get('canvas.maplibregl-canvas').should('be.visible')
     })
 
-    it('loads with map id and interpretationid lowercase', () => {
+    it('loads currentAnalyticalObject (hash)', () => {
+        cy.intercept('**/userDataStore/analytics/settings', {
+            fixture: 'analyticalObject.json',
+        })
+
+        cy.visit('/#/currentAnalyticalObject', EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.contains('button', 'Proceed').click()
+
+        const Layer = new ThematicLayer()
+        Layer.validateCardTitle('ANC 1 Coverage')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+    })
+
+    it('loads with map id (legacy) and interpretationid lowercase', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
         )
@@ -60,7 +84,7 @@ context('Smoke Test', () => {
             .should('be.visible')
     })
 
-    it('loads with map id and interpretationId uppercase', () => {
+    it('loads with map id (legacy) and interpretationId uppercase', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
         )
@@ -80,4 +104,54 @@ context('Smoke Test', () => {
             )
             .should('be.visible')
     })
+
+    it('loads with map id (hash) and interpretationId', () => {
+        cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
+            'postDataStatistics'
+        )
+        cy.visit(
+            '/#/ZBjCfSaLSqD?interpretationId=yKqhXZdeJ6a',
+            EXTENDED_TIMEOUT
+        ) //ANC: LLITN coverage district and facility
+
+        cy.wait('@postDataStatistics')
+            .its('response.statusCode')
+            .should('eq', 201)
+
+        cy.getByDataTest('interpretation-modal')
+            .find('h1')
+            .contains(
+                'Viewing interpretation: ANC: LLITN coverage district and facility'
+            )
+            .should('be.visible')
+    })
+
+    it('loads download page for map id (hash)', () => {
+        cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
+            'postDataStatistics'
+        )
+        cy.visit('/#/ZBjCfSaLSqD/download', EXTENDED_TIMEOUT) //ANC: LLITN coverage district and facility
+
+        cy.wait('@postDataStatistics')
+            .its('response.statusCode')
+            .should('eq', 201)
+
+        cy.getByDataTest('download-settings').should('be.visible')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+        cy.get('button').contains('Exit download mode').should('be.visible')
+    })
+
+    it('loads download page currentAnalyticalObject (hash)', () => {
+        cy.intercept('**/userDataStore/analytics/settings', {
+            fixture: 'analyticalObject.json',
+        })
+
+        cy.visit('/#/currentAnalyticalObject/download', EXTENDED_TIMEOUT)
+
+        cy.contains('button', 'Proceed').click()
+
+        cy.getByDataTest('download-settings').should('be.visible')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+        cy.get('button').contains('Exit download mode').should('be.visible')
+    })
 })

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: 2023-10-23T12:55:26.288Z\n"
-"PO-Revision-Date: 2023-10-23T12:55:26.288Z\n"
+"POT-Creation-Date: 2023-12-18T10:13:08.754Z\n"
+"PO-Revision-Date: 2023-12-18T10:13:08.754Z\n"
 
 msgid "Untitled map, {{date}}"
 msgstr "Untitled map, {{date}}"
@@ -17,6 +17,12 @@ msgstr "Map \"{{- name}}\" is saved."
 msgid "Failed to save map: {{message}}"
 msgstr "Failed to save map: {{message}}"
 
+msgid "Failed to open the map"
+msgstr "Failed to open the map"
+
+msgid "Unrecognized url path to map"
+msgstr "Unrecognized url path to map"
+
 msgid "Classification"
 msgstr "Classification"
 

package.json

@@ -64,10 +64,12 @@
         "d3-time": "^3.1.0",
         "d3-time-format": "^4.1.0",
         "file-saver": "^2.0.5",
+        "history": "^5.3.0",
         "html-to-image": "^1.11.1",
         "lodash": "^4.17.21",
         "loglevel": "^1.8.1",
         "prop-types": "^15.8.1",
+        "query-string": "^8.1.0",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-redux": "^8.1.2",

src/AppWrapper.js

@@ -1,8 +1,9 @@
 import { CachedDataQueryProvider } from '@dhis2/analytics'
 import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
 import { DataStoreProvider } from '@dhis2/app-service-datastore'
-import { CenteredContent, CircularLoader } from '@dhis2/ui'
+import { CssVariables, CenteredContent, CircularLoader } from '@dhis2/ui'
 import log from 'loglevel'
+import queryString from 'query-string'
 import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 import App from './components/app/App.js'
@@ -12,6 +13,7 @@ import store from './store/index.js'
 import { USER_DATASTORE_NAMESPACE } from './util/analyticalObject.js'
 import { appQueries, providerDataTransformation } from './util/app.js'
 import './locales/index.js'
+import history from './util/history.js'
 
 log.setLevel(
     process.env.NODE_ENV === 'production' ? log.levels.INFO : log.levels.TRACE
@@ -38,7 +40,45 @@ const d2Config = {
     ],
 }
 
+const replaceLegacyUrl = () => {
+    // support legacy urls
+    const queryParams = queryString.parse(window.location.search, {
+        parseBooleans: true,
+    })
+    const [base] = window.location.href.split('?')
+
+    if (queryParams.id) {
+        // /?id=ytkZY3ChM6J
+        // /?id=ZBjCfSaLSqD&interpretationid=yKqhXZdeJ6a
+        // /?id=ZBjCfSaLSqD&interpretationId=yKqhXZdeJ6a
+        let newPath = queryParams.id
+
+        let interpretationId
+        if (queryParams.interpretationId) {
+            interpretationId = queryParams.interpretationId
+        } else if (queryParams.interpretationid) {
+            interpretationId = queryParams.interpretationid
+        }
+
+        if (interpretationId) {
+            newPath += `?interpretationId=${interpretationId}`
+        }
+
+        // replace history && hash history
+        window.history.replaceState({}, '', `${base}#/${newPath}`)
+        history.replace(`/${newPath}`)
+    } else if (queryParams.currentAnalyticalObject === true) {
+        // /?currentAnalyticalObject=true
+
+        // replace history && hash history
+        window.history.replaceState({}, '', `${base}#/currentAnalyticalObject`)
+        history.replace('/currentAnalyticalObject')
+    }
+}
+
 const AppWrapper = () => {
+    replaceLegacyUrl()
+
     return (
         <ReduxProvider store={store}>
             <DataStoreProvider namespace={USER_DATASTORE_NAMESPACE}>
@@ -67,6 +107,7 @@ const AppWrapper = () => {
                             >
                                 <WindowDimensionsProvider>
                                     <OrgUnitsProvider>
+                                        <CssVariables colors spacers theme />
                                         <App />
                                     </OrgUnitsProvider>
                                 </WindowDimensionsProvider>