fix: show error UI when plugin has empty rows [DHIS2-16793]

[HendrikThePendric]

Implements DHIS2-16793

---

Key features

1. Adds some validation to the plugin wrapper so that it won't attempt to render a visualization when there is no data

---

Description

The key feature needs no further explanation but there are some things to take uinto consideration about the implementation:

• The JIRA issue mentions a bug in the PivotTable component, and this is indeed where the error is thrown. However, this is really going wrong at an earlier stage: the filter condition has caused the rows to be empty, and really the plugin shouldn't have rendered the PivotTable in the first place, but some sort of info/error screen instead. So this is what I have addressed, and I have ignored the bug in the PivotTable. I am not sure we need to address this one.
• The most common way to render these types of error views is using an ErrorBoundary component. I tried to implement things using one, but struggled to get this to work: somehow the onComponentDidCatch hook never got triggered. When I realised that a solution without an ErrorBoundary was very simple (less code and no complexity), more in line with the implementation in StartScreen, and worked at the first attempt, I decided to stick with that.

---

TODO

• Manual testing (I don't think an e2e test is possible)

---

Screenshots

[dhis2-bot]

🚀 Deployed on https://pr-3131--dhis2-data-visualizer.netlify.app

[jenniferarnesen]

I see that this wasn't previously in a try/catch either. Does this ever throw? What does the user experience in this case?

[HendrikThePendric]

I worked on this quite a while ago, but I am pretty sure it is like this (quite complicated):

1. onResponsesReceived is defined in Visualization and calls ensureAnalyticsResponsesContainData. It is passed as a prop to PluginWrapper.
2. It is and then called by the PluginWrapper when a response comes in: it is called by doFetchData which in turn is called in doFetchAll.
3. doFetchAll() returns a Promise and the catch method of this promise is called (doFetchAll().catch(..)). In the catch calback onError() is being called with the error. So if ensureAnalyticsResponsesContainData() throws an error this will be the parameter passed to onError(error)
4. onError itself is another prop called by the PluginWrapper but defined in the Visualization. It ends up calling this.props.setLoadError(error) and this will ensure the StartScreen is rendered with the appropriate message.