[Needs followup] "Add media" button doesn't always open the media library

The fix in #3490102: Add test for uploading new image in media library should fix this, but even if it doesn't it should be committed before any work proceeds on this as it addresses an underlying issue that causes all sorts of flakiness.

That issue has a fix and tests already. The final thing needed is to set up Gitlab CI so a built version of the UI app is available to FunctionalJavascript tests.

I'm running into this where I click the "add media" button and it briefly says "opening media library" but nothing happens and there are no console or dblog messages.

Yeah... I didn't have the problem with latest XB and SDDS on vanilla D11.

I installed the Drupal CMS demo and reproduced the issue has well
I also confirmed that disabling JS aggregation makes the issue go away, which helpfully narrows down what the underlying cause might be. Will investigate further.

Interesting. We had to leave aggregation off in the early days pre-Barcelona

Interesting. We had to leave aggregation off in the early days pre-Barcelona

With that being mentioned I think it's important to share I've already found the underlying cause and it's a very different set of factors than what is mentioned above. MR on the way.

Note that with Drupal CMS, the dialog buttons might not appear visible due to not having certain styles. This is unrelated to anything discussed here and requires patching Gin with this.

The Cause

Fairly recently, Experience Builder added several custom libraries that are largely identical to core libraries but with small differences to address things like CSS leakage or applying Admin theme overrides despite the XB UI not using the admin theme. We need to make them distinct libraries instead of instead of alter() ing them as the alters should only apply in XB contexts, something the library cache isn't easily aware of.

This approach works well, but it also results in multiple libraries potentially having the same assets. Drupal's AJAX system does an excellent job of preventing libraries from being added multiple times, but nothing to prevent assets from being re-added if they belong to a not-yet-added library. The specific problem reported was occurring because misc/ajax.js was being re-loaded.

There was already logic in Experience builder to prevent core libraries with existing XB equivalents from being directly added, but this was not being prevented if the library was a dependency. In this case, core/drupal.ajax was being re-added as a dependency of media_library/ui

The Solution

There might be something cleaner... but for now: drupalSettings now keeps track of all JS assets added by XB-specific libraries that load by default with the XB UI. processResponseAssets checks the list in drupalSettings and skips loading any JS already listed there - regardless of which library requested it.

To Review

This is hard to reproduce with a plain XB install, but the issue is immediately apparent in Drupal CMS when attempting to change the image in the card component.

Note that with Drupal CMS, the dialog buttons might not appear visible due to not having certain styles. This is unrelated to anything within the scope of this issue... it just happens to be in Media Library. Getting the buttons visible requires patching Gin with this, so it properly includes all the stylesheets necessary to display dialogs.

I think a simpler/more elegant solution is possible, but it's still fundamentally the same solution, just solved on the server side instead.

Back to nr, see #13 for steps

Wow, so much simpler!

A few questions on the MR, but this feels much closer to ready! 🤩

With this patch, I'm able to open the media library in the Drupal CMS XB demo! But now I'm hitting the original issue in #3490102: Add test for uploading new image in media library where nothing happens when I upload. Is this unexpected?

Adding the related Gin issue at #3497793: Dialog styles are not loading correctly in Experience Builder so they are easier to find.

One last thing that @jessebaker should approve: https://git.drupalcode.org/project/experience_builder/-/merge_requests/7....

Current solution is able to prevent the duplicate loading of assets by AJAX requests made by the UI app, but does not prevent the duplicate loading of assets if the duplication prone library requests comes from elsewhere, which is what I'm running into manually atm.

Remove the test skipping stuff so anyone can review now.

Assigning to Wim since they provided the initial RTBC, so it should only require looking at the changes since then.

I was the un-rtbc'r and since then a few approvals happened. Given that this is also soft blocking some other issues I'm gonna bring it in.

Really good call on https://git.drupalcode.org/project/experience_builder/-/merge_requests/7...! 👍 Much clearer 😊

Can you create a novice follow-up for:

• https://git.drupalcode.org/project/experience_builder/-/merge_requests/7...
• https://git.drupalcode.org/project/experience_builder/-/merge_requests/7...
• https://git.drupalcode.org/project/experience_builder/-/merge_requests/7...

?
🙏

Created #3537647: Nit followups to #3491047 w/MR.