feat: lazy load dashboards into the navigation menu [DHIS2-10624]

cypress/e2e/view_dashboard.cy.js

@@ -0,0 +1,129 @@
+import { dashboards } from '../assets/backends/index.js'
+import {
+    getNavigationMenuDropdown,
+    getNavigationMenuItem,
+    closeNavigationMenu,
+    getNavigationMenuFilter,
+} from '../elements/navigationMenu.js'
+import { dashboardTitleSel, newButtonSel } from '../elements/viewDashboard.js'
+
+const assertDashboardDisplayed = (title) => {
+    cy.location().should((loc) => {
+        expect(loc.hash).to.equal(dashboards[title].route)
+    })
+    cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
+}
+
+describe('view dashboard', () => {
+    it('there are no dashboards', () => {
+        cy.intercept('**/dashboards?*', { body: { dashboards: [] } })
+        cy.visit('/')
+
+        // check that main dashboard area shows the no dashboards message
+        cy.contains('No dashboards found').should('be.visible')
+        cy.get(newButtonSel).should('be.visible')
+
+        // check that NavigationMenu shows the no dashboards message
+        getNavigationMenuDropdown().click()
+        cy.getByDataTest('navmenu-no-dashboards-message').should('be.visible')
+        closeNavigationMenu()
+    })
+
+    it('dashboard not found', () => {
+        cy.visit('#/invalid')
+
+        cy.contains('Requested dashboard not found').should('be.visible')
+
+        // Open the Delivery dashboard
+        const title = 'Delivery'
+        getNavigationMenuItem(title).click()
+        assertDashboardDisplayed(title)
+    })
+
+    it('switch between dashboards', () => {
+        cy.visit('/')
+
+        // open the Delivery dashboard
+        const title = 'Delivery'
+        getNavigationMenuItem(title).click()
+        assertDashboardDisplayed(title)
+
+        // open the Immunization dashboard
+        const newTitle = 'Immunization'
+        getNavigationMenuItem(newTitle).click()
+        assertDashboardDisplayed(newTitle)
+    })
+
+    it('search for a dashboard', () => {
+        cy.visit('/')
+
+        // open the Antenatal Care dashboard
+        const title = 'Antenatal Care'
+        getNavigationMenuItem(title).click()
+        assertDashboardDisplayed(title)
+
+        // search for Immun
+        getNavigationMenuFilter().type('Immun')
+        getNavigationMenuItem('Immunization', true).should('be.visible')
+        getNavigationMenuItem('Immunization data', true).should('be.visible')
+
+        // open the Immunization dashboard
+        getNavigationMenuItem('Immunization', true).click()
+        assertDashboardDisplayed('Immunization')
+    })
+
+    it('search for a dashboard with nonmatching search text', () => {
+        cy.visit('/')
+
+        // open the Antenatal Care dashboard
+        const title = 'Antenatal Care'
+        getNavigationMenuItem(title).click()
+        assertDashboardDisplayed(title)
+
+        // search for Noexist
+        getNavigationMenuFilter().type('xyzpdq')
+        cy.getByDataTest('navmenu-no-items-found')
+            .should('be.visible')
+            .and('contain', 'No dashboards found for "xyzpdq"')
+    })
+
+    it('user preferred dashboard', () => {
+        cy.visit('/')
+
+        // open the Antenatal Care dashboard
+        getNavigationMenuItem('Antenatal Care').click()
+        assertDashboardDisplayed('Antenatal Care')
+
+        // open the Delivery dashboard
+        getNavigationMenuItem('Delivery').click()
+        assertDashboardDisplayed('Delivery')
+
+        // open the root url which should display the Delivery dashboard
+        cy.visit('/')
+        cy.get(dashboardTitleSel)
+            .should('be.visible')
+            .and('contain', 'Delivery')
+    })
+
+    //     Given I open the "Delivery" dashboard with shapes removed
+    //     Then the "Delivery" dashboard displays in view mode
+    it('display dashboard with items lacking shape', () => {
+        const title = 'Delivery'
+        const regex = new RegExp(`dashboards/${dashboards[title].id}`, 'g')
+        cy.intercept(regex, (req) => {
+            req.reply((res) => {
+                res.body.dashboardItems.forEach((item) => {
+                    delete item.x
+                    delete item.y
+                    delete item.w
+                    delete item.h
+                })
+
+                res.send({ body: res.body })
+            })
+        })
+        getNavigationMenuItem(title).click()
+
+        assertDashboardDisplayed('Delivery')
+    })
+})

cypress/e2e_cucumber/view_dashboard.feature

@@ -1,25 +1,5 @@
 Feature: Viewing dashboards
 
-    @nonmutating
-    Scenario: I switch between dashboards
-        Given I open the "Delivery" dashboard
-        When I open the "Immunization" dashboard
-        Then the "Immunization" dashboard displays in view mode
-
-    @nonmutating
-    Scenario: I search for a dashboard
-        Given I open the "Antenatal Care" dashboard
-        When I search for dashboards containing "Immun"
-        Then Immunization and Immunization data dashboards are choices
-        When I click on the Immunization dashboard in the search results
-        Then the "Immunization" dashboard displays in view mode
-
-    @nonmutating
-    Scenario: I search for a dashboard with nonmatching search text
-        Given I open the "Antenatal Care" dashboard
-        When I search for dashboards containing "Noexist"
-        Then no dashboards are choices
-
     @nonmutating
     Scenario: I view the print layout preview and then print one-item-per-page preview
         Given I open the "Delivery" dashboard
@@ -32,38 +12,9 @@ Feature: Viewing dashboards
         When I click to exit print preview
         Then the "Delivery" dashboard displays in view mode
 
-    @nonmutating
-    Scenario: I view a dashboard with items lacking shape
-        Given I open the "Delivery" dashboard with shapes removed
-        Then the "Delivery" dashboard displays in view mode
-
 # @nonmutating
 # FIXME
 # Scenario: Maps with tracked entities show layer names in legend
 #     Given I open the Cases Malaria dashboard
 #     When I hover over the map legend button
 #     Then the legend title shows the tracked entity name
-
-    @nonmutating
-    Scenario: User's preferred dashboard is opened
-        Given I open the "Antenatal Care" dashboard
-        When I open the dashboard app with the root url
-        And I open the "Delivery" dashboard
-        And I open the dashboard app with the root url
-        Then the "Delivery" dashboard displays
-
-
-# TODO: flaky test
-# @mutating
-# Scenario: I change the height of the control bar
-#     Given I open the "Delivery" dashboard
-#     When I drag to increase the height of the control bar
-#     Then the control bar height should be updated
-
-# TODO: flaky test
-# @mutating
-# Scenario: I change the height of an expanded control bar
-#     Given I open the "Delivery" dashboard
-#     When I toggle show more dashboards
-#     And I drag to decrease the height of the control bar
-#     Then the control bar height should be updated

cypress/e2e_cucumber/view_errors.feature

@@ -1,17 +1,5 @@
 Feature: Errors while in view mode
 
-    @nonmutating
-    Scenario: There are no dashboards
-        Given I open an app with no dashboards
-        Then a message displays informing that there are no dashboards
-
-    @nonmutating
-    Scenario: I navigate to a dashboard that doesn't exist or I don't have access to
-        Given I type an invalid dashboard id in the browser url
-        Then a message displays informing that the dashboard is not found
-        When I open the "Delivery" dashboard
-        Then the "Delivery" dashboard displays in view mode
-
     @nonmutating
     Scenario: I navigate to edit dashboard that doesn't exist
         Given I type an invalid edit dashboard id in the browser url

cypress/support/utils.js

@@ -1,4 +1,4 @@
-export const EXTENDED_TIMEOUT = { timeout: 45000 }
+export const EXTENDED_TIMEOUT = { timeout: 15000 }
 
 export const getApiBaseUrl = () => {
     const baseUrl = Cypress.env('dhis2BaseUrl') || ''

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: 2025-02-07T10:20:57.831Z\n"
-"PO-Revision-Date: 2025-02-07T10:20:57.833Z\n"
+"POT-Creation-Date: 2025-02-26T12:30:51.331Z\n"
+"PO-Revision-Date: 2025-02-26T12:30:51.331Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -560,12 +560,12 @@ msgstr "Create a new dashboard with the + button."
 msgid "Your most viewed dashboards"
 msgstr "Your most viewed dashboards"
 
-msgid "No dashboards found. Use the + button to create a new dashboard."
-msgstr "No dashboards found. Use the + button to create a new dashboard."
-
 msgid "Requested dashboard not found"
 msgstr "Requested dashboard not found"
 
+msgid "No dashboards found. Use the + button to create a new dashboard."
+msgstr "No dashboards found. Use the + button to create a new dashboard."
+
 msgid "No description"
 msgstr "No description"
 
@@ -610,9 +610,6 @@ msgid_plural "{{count}} filters active"
 msgstr[0] "{{count}} filter active"
 msgstr[1] "{{count}} filters active"
 
-msgid "Loading dashboard – {{name}}"
-msgstr "Loading dashboard – {{name}}"
-
 msgid "Loading dashboard"
 msgstr "Loading dashboard"
 

src/actions/editDashboard.js

@@ -30,7 +30,6 @@ import {
     sGetItemConfigInsertPosition,
     RECEIVED_CODE,
 } from '../reducers/editDashboard.js'
-import { tFetchDashboards } from './dashboards.js'
 
 // actions
 
@@ -183,8 +182,5 @@ export const tSaveDashboard = () => async (dispatch, getState, dataEngine) => {
         ? await updateDashboard(dataEngine, dashboardToSave)
         : await postDashboard(dataEngine, dashboardToSave)
 
-    // update the dashboard list
-    await dispatch(tFetchDashboards())
-
     return Promise.resolve(dashboardId)
 }