feat: release DHIS2-18441 and DHIS2-13038 #3169
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
🚀 Deployed on https://pr-3169.dashboard.netlify.dhis2.org |
HendrikThePendric
force-pushed
the
feat/release-DHIS2-18441-and-DHIS2-13038
branch
from
de1f429 to
1776ac5
Compare
HendrikThePendric
force-pushed
the
feat/release-DHIS2-18441-and-DHIS2-13038
branch
from
1776ac5 to
b73f6ee
Compare
…n, and keyboard navigation
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
HendrikThePendric
force-pushed
the
feat/release-DHIS2-18441-and-DHIS2-13038
branch
from
b73f6ee to
45e6f4c
Compare
Implements https://dhis2.atlassian.net/browse/DHIS2-13038 Details: 1. When entering the slideshow/fullscreen, the parent div of the ItemGrid is put into browser fullscreen. That same div remains in fullscreen the entire time, while the dashboard items are displayed/hidden in turn using css opacity. Css opacity is used instead of display or visibility so that the items can first be resized to fullscreen while "invisible", and then be made visible. This means that the user doesn't see a flash of the visualization in its regular item size before it gets resized. 2. Progressive loading. When the dashboard goes into fullscreen/slideshow, then progressive loading will load the next and previous items in the fullscreen display order instead of being based on proximity to the viewport. 3. RTL support has been implemented for the slideshow navigation buttons. It was decided after discussions with in-house RTL experts that the order of the dashboard items would remain LTR.
jenniferarnesen
force-pushed
the
feat/release-DHIS2-18441-and-DHIS2-13038
branch
from
cb2b931 to
320f37c
Compare
|
jenniferarnesen
added
the
e2e record
dashboards-app
|
||||||||||||||||||||||||||||||||||||||||||||||
| Project |
dashboards-app
|
| Branch Review |
feat/release-DHIS2-18441-and-DHIS2-13038
|
| Run status |
|
| Run duration | 03m 20s |
| Commit |
|
| Committer | Hendrik de Graaf |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
2
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
103
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/e2e/slideshow.feature • 1 failed test • e2e-chrome-parallel-2.40-7
| Test | Artifacts | |
|---|---|---|
| Slideshow > I view fullscreen on the third item of the dashboard and navigate backwards |
Test Replay
Screenshots
Video
|
|
edit_dashboard.feature • 1 flaky test • e2e-chrome-parallel-2.40-2
| Test | Artifacts | |
|---|---|---|
| Creating, editing and deleting dashboard > I delete a dashboard |
Test Replay
Screenshots
Video
|
|
dashboard_filter.feature • 1 flaky test • e2e-chrome-parallel-2.41-1
| Test | Artifacts | |
|---|---|---|
| Dashboard filter > I delete a dashboard |
Test Replay
Screenshots
Video
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR must be merged with a merge commit, not a squash commit