Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 48 commits into
base: master
Choose a base branch
from

Conversation

jenniferarnesen
Copy link
Collaborator

@jenniferarnesen jenniferarnesen commented Feb 21, 2025

Implements DHIS2-10624


Key features

To improve dashboard app performance for users with access to many dashboards, use paging to limit the number of dashboards loaded into the navigation menu

Description

The navigation menu now has "infinite" scrolling similar to the data item selector in DV and LL. Scrolling to the bottom triggers a fetch of the next page of results (page size set to 200 as suggested by Lars in the Jira ticket). Searching works the same way, sending a request with the filter text and get the results, paged. Searching is debounced to 300ms.

The CacheableViewDashboard code is primarily determining whether there is a dashboard the user can view: when the app initially loads, instead of fetching all the dashboards like before, it now fetches a single dashboard to answer the question of whether there are any dashboards.

The list of dashboards has been removed from redux and is now kept in the NavigationMenu state. Each time the user opens the menu, the first page of dashboards is fetched.

The "starred" status of the dashboard being displayed is now kept in the redux 'selected' property.

The component EndIntersectionDetector was adapted from the Data Item selector (transfer) component of the same name (from analytics).


TODO


@dhis2-bot
Copy link
Contributor

dhis2-bot commented Feb 21, 2025

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

@dhis2-bot dhis2-bot temporarily deployed to netlify February 21, 2025 12:20 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 21, 2025 13:51 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 21, 2025 14:53 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 21, 2025 16:05 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 24, 2025 15:06 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 26, 2025 09:48 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 26, 2025 10:19 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 26, 2025 10:41 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 26, 2025 12:57 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify February 26, 2025 13:19 Inactive
…com:dhis2/dashboard-app into feat/limit-dashboard-preloading-DHIS2-10624
@dhis2-bot dhis2-bot temporarily deployed to netlify March 4, 2025 17:00 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify March 5, 2025 13:13 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify March 5, 2025 14:15 Inactive
@jenniferarnesen jenniferarnesen changed the title feat: limit dashboard preloading feat: lazy load dashboards into the navigation menu Mar 5, 2025
@jenniferarnesen jenniferarnesen changed the title feat: lazy load dashboards into the navigation menu feat: lazy load dashboards into the navigation menu [DHIS2-10624] Mar 5, 2025
props.fetchDashboards()
props.setShowDescription()

// store the headerbar height for controlbar height calculations
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This headerbar height is no longer relevant as of the new dashboard design

@dhis2-bot dhis2-bot temporarily deployed to netlify March 5, 2025 15:52 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify March 7, 2025 12:08 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify March 7, 2025 14:30 Inactive
Copy link

sonarqubecloud bot commented Mar 7, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
1 New issue
1 New Critical Issues (required ≤ 0)
1 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

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

@dhis2-bot dhis2-bot temporarily deployed to netlify March 7, 2025 14:45 Inactive
@jenniferarnesen jenniferarnesen added the e2e record Apply this label to a pull request to trigger recording of E2E tests on Cypress Cloud label Mar 10, 2025
Copy link

cypress bot commented Mar 10, 2025

dashboards-app    Run #5156

Run Properties:  status check failed Failed #5156  •  git commit dfaf03d1d8 ℹ️: Merge 4a4b29ced2dd65c4431d49f94f0cf403fcf61fd2 into 9695ff757eb7821de687fb7af1bb...
Project dashboards-app
Branch Review feat/limit-dashboard-preloading-DHIS2-10624
Run status status check failed Failed #5156
Run duration 05m 25s
Commit git commit dfaf03d1d8 ℹ️: Merge 4a4b29ced2dd65c4431d49f94f0cf403fcf61fd2 into 9695ff757eb7821de687fb7af1bb...
Committer Jen Jones Arnesen
View all properties for this run ↗︎

Test results
Tests that failed  Failures 15
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 93
View all changes introduced in this branch ↗︎

Tests for review

Failed  e2e_cucumber/slideshow.feature • 1 failed test • e2e-chrome-parallel-2.41-7

View Output Video

Test Artifacts
Slideshow > I view a dashboard in slideshow Test Replay Screenshots Video
Failed  e2e_cucumber/responsive_dashboard.feature • 1 failed test • e2e-chrome-parallel-2.40-6

View Output Video

Test Artifacts
Small screen dashboard > I change the url to new while in small screen Test Replay Screenshots Video
Failed  e2e_cucumber/slideshow.feature • 1 failed test • e2e-chrome-parallel-2.40-7

View Output Video

Test Artifacts
Slideshow > I view a dashboard in slideshow Test Replay Screenshots Video
Failed  e2e_cucumber/view_errors.feature • 4 failed tests • e2e-chrome-parallel-2.40-2

View Output Video

Test Artifacts
Errors while in view mode > I navigate to a dashboard that fails to load Test Replay Screenshots Video
Errors while in view mode > View dashboard containing item that is missing type Test Replay Screenshots Video
Errors while in view mode > Edit dashboard containing item that is missing type Test Replay Screenshots Video
Errors while in view mode > Print dashboard containing item that is missing type Test Replay Screenshots Video
Failed  e2e/view_dashboard.cy.js • 2 failed tests • e2e-chrome-parallel-2.41-4

View Output Video

Test Artifacts
view dashboard > search for a dashboard with nonmatching search text Test Replay Screenshots Video
view dashboard > display dashboard with items lacking shape Test Replay Screenshots Video

The first 5 failed specs are shown, see all 7 specs in Cypress Cloud.

@jenniferarnesen jenniferarnesen marked this pull request as draft March 10, 2025 10:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
e2e record Apply this label to a pull request to trigger recording of E2E tests on Cypress Cloud
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants