Fixes #28608: API account tooltips are broken when table is sorted or refreshed

[clarktsiory]

https://issues.rudder.io/issues/28608

EDIT : New understanding of tooltips

• the only attribute that seems to be universally working is data-bs-original-title, instead of title/data-bs-title

• removeBsTooltips is only a hack for removing "stale" tooltips in some specific UX concerns ("the tooltip is frozen")

  • it leads to memory leaks : when using tooltips in Elm apps and e.g. filtering items, the DOM changes, but event handlers of tooltips are still there
  • it is used in this PR because a "button click" when opening a modal leads to a frozen one

• we need a new function to properly dispose of tooltips, it's called disposeBsTooltips :

  • it needs to be always followed by an initialization of tooltips, because when "sorting elements", the DOM elements would swap
  • resetTooltips is a single Port that guarantees that we have "dispose", then "init", and it is used in this PR upon the update of "table filters"

• to maximize performance, we could restrict tooltips actions to a selector of "tooltips within the Elm app" : just add a <div id="app-container"> and pass to the "dispose" and "init" functions

---

Adding a new function to dispose of tooltips completely : removeBsTooltips is to not work in this context because of how Elm swaps the DOM elements, by leaving tooltips at their previous location (which made the bug appear when : sorting the table, filtering, and adding and API account).

I could not get rid of them :

• the previous one always remains with a data-bs-original-title :

• sometimes it's the title that would remain, even on a - :

I tried removing every attributes (including the title) upon calling dispose() on the tooltip, and this solves the issue, but would make all tooltips not work globally when applying some filters on the table 🙃, so I didn't risk doing that

[clarktsiory]

this new function does the "unmounting" of the tooltip from the DOM element (at least in theory, from the doc)

But as explained in the description, several attributes still remain... it won't clean up correctly

[clarktsiory]

adding a stable reference to the event listener avoids duplicating the event listener function (it appeared several times when I looked in the inspector)

Also, this allows calling removeEventListener(..., registeredListener)

[RaphaelGauthier]

I've tried different things that improve the result, here is my conclusion:

• Adding a clearTooltips port was a good idea, but disposeBsTooltips() does not work as expected, removeBsTooltip() is more effectice as it actually destroy the generated .tooltip elements. So we better use this one in the subscribe() function.

• As explained in the Bootstrap Tooltip documentation: "Feel free to use either title or data-bs-title in your HTML. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.". It looks like this creates another delay before the tooltip initialisation, so it is better to use ‘data-bs-title’ directly rather than ‘title’ attribute in order to avoid this extra delay

• Finally, the timeout we use before each tooltip initialisation is one of the main causes of the problem.
  Its duration is purely arbitrary and may not correspond at all to the time required before initialising the tooltips.
  The best solution I have found is to wait until the elements containing the tooltips are present in the DOM, by using the MutationObserver api.

So instead of:

app.ports.initTooltips.subscribe(function (msg) {
  setTimeout(function () {
    initBsTooltips();
  }, 600);
});

We should do something like:

const tooltipSelector = '.dataTable [data-bs-toggle="tooltip"]';
app.ports.initTooltips.subscribe(function () {
  waitForElement(tooltipSelector).then((el) => {
    initBsTooltips();
  });
});

The last remaining issue (I hope 🤞) is the resolution delay of the MutationObserver's promise, which takes few millisecond to complete. But I can’t see how to improve on that.

[RaphaelGauthier]

Last but not least, we should replace the attribute "title" with "data-bs-original-title"... This makes the generated .tooltip element actually disappeared 💀

[RaphaelGauthier]

Cmd.batch is not garanteed to be sequential (clear and init sequentially)

[clarktsiory]

I found no easy Elm solution for this (other than a rather complex library) : the solution I opted for was to have a single resetTooltips port.

Tooltips are always reset anyway... (and sometimes we want the actual "removeBsTooltips" for frozen ones)

[clarktsiory]

PR updated with a new commit

[clarktsiory]

PR updated with a new commit : forgot the initBsTooltips optimization

[clarktsiory]

PR updated with a new commit : fix the initBsTooltips selector optimization

[clarktsiory]

OK, squash merging this PR