feat: offline dashboard

[jenniferarnesen]

Implements DHIS2-10874

Add offline functionality to dashboard to support Dashboard PWA. With this implementation, it is possible to cache dashboards so they can be viewed while offline. The app also detects the offline/online state, and updates availability of actions - like editing, starring, changing filters, and viewing certain info like sharing and interpretations - accordingly.

Much of this PR is about disabling/enabling buttons and menu items, and showing a tooltip. ViewDashboard is the main code for navigating to different dashboards while offline, while view/TitleBar/ActionsBar triggers the recording of a dashboard.

Additional info for some of the changed files:

Cypress tests:

• all new tests related to offline are in the offline.feature and offline.js files. The rest of the changes are adaptations based on changed html structure, or sharing functionality
• goOffline and goOnline functions were copied from this post: https://www.cypress.io/blog/2020/11/12/testing-application-in-offline-network-mode/

d2.config.js

• this is the config that enables offline functionality in the app-runtime. The patternsToOmit property is a list of endpoints that should NOT be cached as part of the GENERAL app cache. Therefore, the endpoints listed in this property are related to content for a specific dashboard. Endpoints that go into the general app cache include e.g. /dashboards, static assets (dashboard bundle, plugins, jquery...), /schemas, etc.

actions/selected.js

• refactored tSetSelectedDashboardById to use async/await
• tSetSelectedDashboardByIdOffline - this is used when user navigates to an uncached dashboard while offline. We still want to navigate to the url and set the state of the app, then when connection is restored, the rest of the data gets loaded.

Tooltip.js

• this component is used throughout the app to apply a tooltip when the button is disabled.
  MenuItemWithTooltip.js
• applies a tooltip to MenuItems - used for offline messages.

ConfirmActionDialog.js (refactor/code sharing)

• used by 3 other components

DropdownButton.js

• modifed to handle additional property disabledWhenOffline - moved that and other properties into rest

VisualizationItem/Item.js

• need to always fetch visualization in ComponentDidMount, to handle case of dashboard being recorded.

ViewAsMenuItems.js

• uses MenuItemWithTooltip, and the offline status will override the supplied tooltip.

DefaultPlugin.js

• unmount visualization when the item is being removed from page. TODO: confirm changes with Jan.

ProgressiveLoadingContainer.js

• forceLoadCount is an incrementing property that triggers force loading when a dashboard is being recorded.

PrintDashboard, PrintLayoutDashboard

• bug fixes for bugs that the offline functionality revealed.

CacheableViewDashboard

• adds CacheableSection which enables the dashboard to be recorded as a section.

DashboardsBar - useCallback to prevent unneeded rerendering of the content

FilterBadge.js, FilterBar.js

• only allow removing filter if online, or if cached then user can remove, but has to remove all filters

view/TitleBar.js

• incorporate the Last updated tag

ViewDashboard.js

• complex logic in useEffect to determine how to handle opening dashboards depending on the offline/online state and whether the dashboard is cached. The cypress tests cover most of the scenarios.

yarn.lock.

• yeah, just don't. I tried merging in changes from master but there were so many conflicts that were really difficult to resolve, that I ended up deleting the file and regenerating it. So lots of dependencies that have nothing to do with this feature are unfortunately in there.

[martinkrulltott]

Shouldn't this tooltip conditionally rendered based on !filtersSelectable or the online status to not show when online?

[jenniferarnesen]

The tooltip is for when the button is disabled due to being offline.

[jenniferarnesen]

I don't think so. I am only adding functionality for offline. Nothing else has changed unless I'm missing something?

[martinkrulltott]

hm, I thought, since this is wrapping the "confirm" button, which I thought would be visible both online and offline, that the tooltip would then also be (incorrectly) visible when online. The button has a if (!filtersSelectable) condition, but the tooltip has none. But maybe Im missing something, hard to judge when you just look at this in isolation.

[martinkrulltott]

Reviewed, see separate comments with suggestions and questions.

[dhis2-bot]

🎉 This PR is included in version 31.18.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀