Issues with context when using different instances of our libs

[HendrikThePendric]

@martinkrulltott encountered an issue where the Select rendered below the Modal. We have encountered this issue before and thought we had solved it by using context (React.createContext()). However, there seems to be a case where this falls apart:

• The data-visualizer-app is dependent on the analytics package
• Both data-visualizer and analytics have their own instance of ui-core.
• As such the different layers and layer-contexts seem to be fully unaware of each other
• And as a result the Select (from analytics) uses its default zIndex value because it doesn't know it's stacked on top of another layer

Martin provided a screen recording on Slack that demoes the issue very well. You can see in the screen-recording that the Select which is coming from the same ui-core instance as the Modal (both data-viz) is working fine and is on top of the Modal (Select gets z-index 3001), but the one coming from analytics is misbehaving and gets rendered below the Modal (it just used a z-index of 2000)....

I didn't get a chance to debug this properly, but going by what we are seeing in the screen-recording, I can't really think of another explanation. This isn't necessarily an urgent issue, but it does seem to be quite a fundamental one... I don't really know how to tackle it.

And this issue is relevant to the components I am working on at the moment, see #10

[HendrikThePendric]

Some directions we could take this:

• Just file this as a known limitation and make sure @dhis2/ui-core / @dhis2/ui is always a peer-dependency, so every app just ends up with a single instance of it...
• Don't use context, but implement a layer system that purely relies on DOM traversal.
• Introduce some sort of wrapper component that creates the base Layer context so the context is not created in the Layer module
• Forget about the whole layering system and expose a zIndex prop on every component that "pops up", so that the app can control this...

These are just some pretty random ideas... Nothing is tested and everything is fully hypothetical...

[HendrikThePendric]

FYI: I see we also have a TableContext file. It seems less likely that this is going to cause similar problems, but it does also create the context in the module too.

[HendrikThePendric]

See this PR for an illustration of the problem #16, specifically the https://localhost:5000/?path=/story/component-widget-layer--it-falls-apart story...

[varl]

This is a problem with anything that uses hooks really, and the consumers need to make sure that UI resolves to a single instance inside of node_modules. The best option is probably to use the resolutions property in package.json as we do for React.

[HendrikThePendric]

Update: @amcgee and @martinkrulltott are looking into a way of solving this in the app. If they are successful, we should provide instructions on how to prevent this problem in the docs.

[martinkrulltott]

Confirmed that the issue in DV was because it was using multiple versions of ui-core. This has now been resolved to 4.16.0, which fixes the issue. z-index correctly sets to 3001. 🎉