feat: view mode dashboards-bar design changes [DHIS2-18441]

[HendrikThePendric]

Implements DHIS2-18441 according to design doc

---

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.

---

TODO

• KFMT
• Add e2e test for error state, i.e. dashboard items request returning a 500

---

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, see DHIS2-18537.

---

Screenshots

[dhis2-bot]

🚀 Deployed on https://pr-3155.dashboard.netlify.dhis2.org

[sonarqubecloud]

Quality Gate failed

Failed conditions
12 New issues
1 New Critical Issues (required ≤ 0)
9 New Code Smells (required ≤ 0)
3 New Bugs (required ≤ 0)
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE