Merge branch 'master' into master-transifex-ALL-20241207_224255

.eslintrc.js

@@ -2,4 +2,15 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     extends: [config.eslintReact, 'plugin:cypress/recommended'],
+    overrides: [
+        {
+            files: ['src/**/*.spec.js'],
+            rules: {
+                'react/prop-types': 'off',
+                'react/display-name': 'off',
+                'react/no-unknown-property': 'off',
+                'no-unused-vars': ['error', { ignoreRestSiblings: true }],
+            },
+        },
+    ],
 }

.github/workflows/generate-and-upload-bom.yml

@@ -0,0 +1,49 @@
+name: 'This workflow creates bill of material and uploads it to Dependency-Track each night'
+
+on:
+    schedule:
+        - cron: '0 0 * * *'
+    workflow_dispatch:
+
+concurrency:
+    group: ${{ github.workflow}}-${{ github.ref }}
+    cancel-in-progress: true
+
+defaults:
+    run:
+        shell: bash
+
+jobs:
+    create-bom:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 18.x
+
+            - name: Install
+              run: yarn install --frozen-lockfile
+
+            - name: Install CycloneDX CLI
+              run: |
+                  curl -s https://api.github.com/repos/CycloneDX/cyclonedx-cli/releases/latest | grep "browser_download_url.*linux.x64" | cut -d '"' -f 4 | wget -i -
+                  sudo mv cyclonedx-linux-x64 /usr/local/bin/
+                  sudo chmod +x /usr/local/bin/cyclonedx-linux-x64
+
+            - name: Generate BOMs
+              run: |
+                  npm install -g @cyclonedx/cdxgen
+                  cdxgen -o sbom.json
+
+            - name: Upload SBOM to DependencyTrack
+              env:
+                  DEPENDENCY_TRACK_API: 'https://dt.security.dhis2.org/api/v1/bom'
+              run: |
+                  curl -X POST "$DEPENDENCY_TRACK_API" \
+                      --fail-with-body \
+                      -H "Content-Type: multipart/form-data" \
+                      -H "X-Api-Key: ${{ secrets.DEPENDENCYTRACK_APIKEY }}" \
+                      -F "project=c0bd0f2d-d512-460a-81f9-e256e4fb1054" \
+                      -F "bom=@sbom.json"

CHANGELOG.md

@@ -1,3 +1,12 @@
+# [100.4.0](https://github.com/dhis2/dashboard-app/compare/v100.3.2...v100.4.0) (2025-01-08)
+
+
+### Features
+
+* add space efficient dashboard bar design and dashboard selection, and keyboard navigation ([33bcbca](https://github.com/dhis2/dashboard-app/commit/33bcbcad729367d6c320dc8a161d91c17615b0f2))
+* implement dashboard slideshow ([#3081](https://github.com/dhis2/dashboard-app/issues/3081)) ([2a75b84](https://github.com/dhis2/dashboard-app/commit/2a75b849559e27d621d0c97b2b9ae02e8555e663))
+* maximize use of the available screen space by reducing whitespace in the dashboard item grid ([95b9764](https://github.com/dhis2/dashboard-app/commit/95b976409934204b91ba24fe6c1cc23a20f8d41a)), closes [#3165](https://github.com/dhis2/dashboard-app/issues/3165)
+
 ## [100.3.2](https://github.com/dhis2/dashboard-app/compare/v100.3.1...v100.3.2) (2024-12-04)
 
 

config/testSetup.js

@@ -0,0 +1,9 @@
+import { configure } from '@testing-library/dom'
+import '@testing-library/jest-dom'
+import ResizeObserver from 'resize-observer-polyfill'
+
+global.ResizeObserver = ResizeObserver
+
+configure({
+    testIdAttribute: 'data-test',
+})

cypress/e2e/common/add_a_FILTERTYPE_filter.js

@@ -11,7 +11,7 @@ const OU_ID = 'ImspTQPwCqd' //Sierra Leone
 const FACILITY_TYPE = 'Clinic'
 
 When('I add a {string} filter', (dimensionType) => {
-    cy.contains('Add filter').click()
+    cy.containsExact('Filter').click()
 
     // select an item in the modal
     switch (dimensionType) {

cypress/e2e/common/click_on_the_FILTERTYPE_filter_badge.js

@@ -2,5 +2,8 @@ import { When } from '@badeball/cypress-cucumber-preprocessor'
 import { filterBadgeSel } from '../../elements/dashboardFilter.js'
 
 When('I click on the {string} filter badge', (filterName) => {
-    cy.get(filterBadgeSel).find('span:visible').contains(filterName).click()
+    cy.get(filterBadgeSel)
+        .find('button')
+        .contains(filterName)
+        .click({ force: true })
 })

cypress/e2e/common/open_print_layout.js

@@ -1,8 +1,7 @@
 import { When } from '@badeball/cypress-cucumber-preprocessor'
-import { clickViewActionButton } from '../../elements/viewDashboard.js'
 
 When('I click to preview the print layout', () => {
-    clickViewActionButton('More')
+    cy.get('[data-test="more-actions-button"]').click()
     cy.get('[data-test="print-menu-item"]').click()
     cy.get('[data-test="print-layout-menu-item"]').click()
 })

cypress/e2e/common/open_the_SL_dashboard.js

@@ -1,14 +1,11 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../assets/backends/index.js'
 // import { gridItemSel, chartSel } from '../../elements/dashboardItem.js'
-import {
-    dashboardTitleSel,
-    dashboardChipSel,
-} from '../../elements/viewDashboard.js'
-import { EXTENDED_TIMEOUT } from '../../support/utils.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
 
 Given('I open the {string} dashboard', (title) => {
-    cy.get(dashboardChipSel, EXTENDED_TIMEOUT).contains(title).click()
+    getNavigationMenuItem(title).click()
 
     cy.location().should((loc) => {
         expect(loc.hash).to.equal(dashboards[title].route)

cypress/e2e/dashboard_filter/create_dashboard.js

@@ -1,9 +1,7 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { gridItemSel } from '../../elements/dashboardItem.js'
-import {
-    dashboardChipSel,
-    dashboardTitleSel,
-} from '../../elements/viewDashboard.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
 import {
     EXTENDED_TIMEOUT,
     createDashboardTitle,
@@ -79,9 +77,7 @@ When('I add items and save', () => {
 })
 
 Given('I open an existing dashboard', () => {
-    cy.get(dashboardChipSel, EXTENDED_TIMEOUT)
-        .contains(TEST_DASHBOARD_TITLE)
-        .click()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE).click()
 })
 
 // Some map visualization load very slowly:

cypress/e2e/dashboard_filter/dashboard_filter.js

@@ -2,6 +2,7 @@ import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
 import {
     filterBadgeSel,
     dimensionsModalSel,
+    filterBadgeDeleteBtnSel,
 } from '../../elements/dashboardFilter.js'
 // import {
 //     gridItemSel,
@@ -128,7 +129,7 @@ Then('the filter modal is opened', () => {
 })
 
 When('I remove the {string} filter', () => {
-    cy.get(filterBadgeSel).find('button').contains('Remove').click()
+    cy.get(filterBadgeDeleteBtnSel).click()
 })
 
 Then('the filter is removed from the dashboard', () => {

cypress/e2e/edit_dashboard/edit_dashboard.js

@@ -9,9 +9,10 @@ import {
     titleInputSel,
     clickEditActionButton,
 } from '../../elements/editDashboard.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
 import {
-    dashboardChipSel,
     dashboardTitleSel,
+    dashboardsNavMenuButtonSel,
 } from '../../elements/viewDashboard.js'
 import { EXTENDED_TIMEOUT, createDashboardTitle } from '../../support/utils.js'
 
@@ -79,9 +80,8 @@ Then('different valid dashboard displays in view mode', () => {
 })
 
 Given('I open existing dashboard', () => {
-    cy.get(dashboardChipSel, EXTENDED_TIMEOUT)
-        .contains(TEST_DASHBOARD_TITLE)
-        .click()
+    cy.get(dashboardsNavMenuButtonSel, EXTENDED_TIMEOUT).click()
+    cy.get('[role="menu"]').find('li').contains(TEST_DASHBOARD_TITLE).click()
 
     cy.location().should((loc) => {
         const currentRoute = getRouteFromHash(loc.hash)
@@ -124,8 +124,7 @@ Scenario: I delete a dashboard
 */
 
 Then('the dashboard is deleted and first starred dashboard displayed', () => {
-    cy.get(dashboardChipSel).contains(TEST_DASHBOARD_TITLE).should('not.exist')
-
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE).should('not.exist')
     cy.get(dashboardTitleSel).should('exist').should('not.be.empty')
 })
 

cypress/e2e/edit_dashboard/star_dashboard.js

@@ -1,25 +1,27 @@
 import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import {
-    starSel,
+    getNavigationMenuItem,
+    closeNavigationMenu,
+} from '../../elements/navigationMenu.js'
+import {
     dashboardStarredSel,
     dashboardUnstarredSel,
-    dashboardChipSel,
-    chipStarSel,
+    navMenuItemStarIconSel,
 } from '../../elements/viewDashboard.js'
 import { TEST_DASHBOARD_TITLE } from './edit_dashboard.js'
 
 // Scenario: I star the dashboard
 When('I click to star the dashboard', () => {
     cy.intercept('POST', '**/favorite').as('starDashboard')
 
-    cy.get(starSel).click()
+    cy.get(dashboardUnstarredSel).click()
     cy.wait('@starDashboard').its('response.statusCode').should('eq', 200)
 })
 
 When('I click to unstar the dashboard', () => {
     cy.intercept('DELETE', '**/favorite').as('unstarDashboard')
 
-    cy.get(starSel).click()
+    cy.get(dashboardStarredSel).click()
     cy.wait('@unstarDashboard').its('response.statusCode').should('eq', 200)
 })
 
@@ -28,22 +30,21 @@ Then('the dashboard is starred', () => {
     cy.get(dashboardStarredSel).should('be.visible')
     cy.get(dashboardUnstarredSel).should('not.exist')
 
-    cy.get(dashboardChipSel)
-        .contains(TEST_DASHBOARD_TITLE)
-        .parent()
-        .siblings(chipStarSel)
-        .first()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE)
+        .find(navMenuItemStarIconSel)
         .should('be.visible')
+
+    closeNavigationMenu()
 })
 
 Then('the dashboard is not starred', () => {
     // check for the unfilled star next to the title
     cy.get(dashboardUnstarredSel).should('be.visible')
     cy.get(dashboardStarredSel).should('not.exist')
 
-    cy.get(dashboardChipSel)
-        .contains(TEST_DASHBOARD_TITLE)
-        .parent()
-        .siblings()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE)
+        .find(navMenuItemStarIconSel)
         .should('not.exist')
+
+    closeNavigationMenu()
 })

cypress/e2e/filter_restrict/filter_restrict.js

@@ -146,7 +146,7 @@ When('I save the dashboard', () => {
 })
 
 When('I click Add Filter', () => {
-    clickViewActionButton('Add filter')
+    clickViewActionButton('Filter')
 })
 
 Then('I see Facility Ownership and no other dimensions', () => {
@@ -168,7 +168,7 @@ Scenario: I restrict filters to no dimensions and do not see Add Filter in dashb
 */
 
 Then('Add Filter button is not visible', () => {
-    cy.contains('Add filter').should('not.exist')
+    cy.containsExact('Filter').should('not.exist')
 })
 
 When('I delete the dashboard', () => {

cypress/e2e/offline/offline.js

@@ -212,7 +212,7 @@ Then(
         // edit, sharing, starring, filtering, all options under more
         getViewActionButton('Edit').should('be.disabled')
         getViewActionButton('Share').should('be.disabled')
-        getViewActionButton('Add filter').should('be.disabled')
+        getViewActionButton('Filter').should('be.disabled')
         getViewActionButton('More').should('be.enabled')
 
         checkCorrectMoreOptionsEnabledState(false, cacheState)

cypress/e2e/responsive_dashboard/responsive_dashboard.js

@@ -27,10 +27,7 @@ Then('the small screen view is shown', () => {
     //titlebar - only the More button and the title
     cy.get('button').contains('Edit').should('not.be.visible')
     cy.get('button').contains('Share').should('not.be.visible')
-    cy.get('button').contains('Add filter').should('not.be.visible')
-
-    cy.get('button.small').contains('More').should('be.visible')
-    cy.get('button').not('.small').contains('More').should('not.be.visible')
+    cy.get('button').contains('Filter').should('not.be.visible')
 })
 
 When('I restore the wide screen', () => {
@@ -44,10 +41,7 @@ Then('the wide screen view is shown', () => {
 
     cy.get('button').contains('Edit').should('be.visible')
     cy.get('button').contains('Share').should('be.visible')
-    cy.get('button').contains('Add filter').should('be.visible')
-
-    cy.get('button').not('.small').contains('More').should('be.visible')
-    cy.get('button.small').contains('More').should('not.be.visible')
+    cy.get('button').contains('Filter').should('be.visible')
 })
 
 Then('the small screen edit view is shown', () => {

cypress/e2e/slideshow.feature

@@ -0,0 +1,31 @@
+Feature: Slideshow
+
+    Scenario: I view a dashboard in slideshow
+        Given I open the "Delivery" dashboard
+        When I click the slideshow button
+        Then item 1 is shown in fullscreen
+        When I click the next slide button
+        Then item 2 is shown in fullscreen
+        When I click the previous slide button
+        Then item 1 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown
+
+
+    Scenario: I view fullscreen on the second item of the dashboard
+        Given I open the "Delivery" dashboard
+        When I click the fullscreen button on the second item
+        Then item 2 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown
+
+    Scenario: I view fullscreen on the third item of the dashboard and navigate backwards
+        Given I open the "Delivery" dashboard
+        When I click the fullscreen button on the third item
+        Then item 3 is shown in fullscreen
+        When I click the previous slide button
+        Then item 2 is shown in fullscreen
+        When I click the previous slide button
+        Then item 1 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown

cypress/e2e/slideshow/index.js

@@ -0,0 +1 @@
+'../common/index.js'