feat: view mode dashboards-bar design changes [DHIS2-18441] (#3155)

Implements JIRA issue DHIS2-18441 according to the design specs

---

### Key features

1. New design
2. New navigation menu
3. New keyboard navigation

---

### Description

Implements the new design according to the design doc. Some other changes are also included in this
PR and these are listed below.

#### Changes to `ViewDashboard`

- Use the `useAlert` hook instead of rendering a `AlertStack`. This ensures the show/hide animation
  runs and that there won't be problems when we show this alert together with another alert
- The logic to load a dashboard has been simplified, I suspect this component still contained some
  logic that predates the inclusion of react-router. In any case, there was some logic present that
  accommodated "loading a new dashboard". But this scenario would never occur, because when the
  route changes the component is remounted.
- Instead of having a `getContent` function, we now have the `ViewDashboardContent` component.

#### Changes to `CacheableViewDashboard`

A `useEffect` hook was added to ensure that the selected dashboard is cleared from the redux store
when the user  chooses "Close dashboard" in the "action menu" dropdown.

#### Changes to `FilterBadge`

The design was updated and some modifications were done to the behaviour as well:
- When online on a large screen it is possible to edit and/or remove a filter
- When online on a small screen (width =< 480px) it is not possible to edit a filter, but it can be
  removed. When attempting to edit a filter a tooltip shows to inform the user this is not possible.
- When offline filters cannot be edited or deleted. The filter-badge is still visible but the
  remove-icon is not rendered. When attempting to edit a filter a tooltip shows to inform the user
  this is not possible.

#### Major version upgrade of `@dhis2/ui` (v10)

Version 10 includes some improvements in terms of accessibility and keyboard navigation. To comply
with the new guidelines in that regard a few small tweaks to components were needed. This involved
adding things like `ariaLabel` props, and addressing some invalid DOM nesting (nested `<a>` tags).

#### Some tweaks to the unit-testing configuration

- React testing-library was configured to work with the `data-test` attribute we use at DHIS2 (i.e.
  the `dataTest` prop for components from `@dhis2/ui`). The default data-attribute used by React
  testing-library is `data-test-id`, and some tests needed to be adjusted to no longer use that.
- Some ESLint rules were added specifically for `spec.js` to remove the need to add ESLint ignore
  comments when making mock-components and other types of mocks.

---

### Known issues

-   Keyboard navigation inconsistencies: this PR includes a major version bump in `@dhis2/ui` which
    comes with some accessibility improvements including arrow-key keyboard navigation for menus.
    The navigation- and more-actions-menu in the new dashboards-bar are using these. But the
    filter-menu is using a custom menu-list and this can be used by keyboard by using the tab-key.
    This inconsistency will be tackled in a separate PR as described in JIRA issue DHIS2-18537.

---

### References

Current JIRA Issue DHIS2-18441: https://dhis2.atlassian.net/browse/DHIS2-18441
Follow-up JIRA issue DHIS2-18537: https://dhis2.atlassian.net/browse/DHIS2-18537
Design specs: https://docs.google.com/document/d/1c8Ll1aLbFYwU8HYsyDlH1wk_QKTrUXwNanCiqayczOM

Author: HendrikThePendric

.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 }],
+            },
+        },
+    ],
 }

config/testSetup.js

@@ -0,0 +1,6 @@
+import { configure } from '@testing-library/dom'
+import '@testing-library/jest-dom'
+
+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()
 })