fix: native filter truncation rerendering loop on hover

[diegomedina248]

SUMMARY

This error was detected on a particular dashboard, for a particular set of conditions and only in chrome.

The truncation, in this case, refers to the right content of the SCOPE row.

The useTruncate function computes the truncated elements by trying to fit one element at a time in the with of their container.
Problem is, by using this information to truncate the element, and add the +X next to it, we're changing the container size, thus triggering another pass at this function.
This, in 99.9% of the cases is fine, but, in very subtle conditions, it can change the truncated count back and forth, if:

• the size taken by the +X removes the space needed by the last visible element by 1
• the subtle size gain by the +(X - 1) tag makes enough room for the removed element to appear again.

In this dashboard, the change was between +10 and +11, which has a very different pixel difference, but enough to cause the re-rendering loop.

This PR ensures we only compute the truncated elements if their size changes, or if the size of the parent of the container changes.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

For the reasons specified above, and given that the dashboard has private data, no gif is available.
Suffice to say, no change should be visible, the popup and truncation should remain the same for every other use case.

TESTING INSTRUCTIONS

Ensure that the native filters popup content displays correctly, and that the truncation still works as expected.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #20021 (5e57203) into master (b7cff83) will decrease coverage by 0.00%.
The diff coverage is 85.71%.

@@            Coverage Diff             @@
##           master   #20021      +/-   ##
==========================================
- Coverage   66.28%   66.28%   -0.01%     
==========================================
  Files        1712     1712              
  Lines       63968    63985      +17     
  Branches     6731     6734       +3     
==========================================
+ Hits        42404    42414      +10     
- Misses      19853    19860       +7     
  Partials     1711     1711              

Flag	Coverage Δ
javascript	51.27% <85.71%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...mponents/nativeFilters/FilterCard/useTruncation.ts	50.00% <85.71%> (+6.52%)	⬆️
superset-frontend/src/SqlLab/actions/sqlLab.js	60.39% <0.00%> (ø)
...c/views/CRUD/data/database/DatabaseModal/index.tsx	32.69% <0.00%> (+0.18%)	⬆️
...et-frontend/src/explore/reducers/exploreReducer.js	28.75% <0.00%> (+1.98%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b7cff83...5e57203. Read the comment docs.

[yousoph]

/testenv up

[github-actions]

@yousoph Ephemeral environment spinning up at http://34.219.158.185:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[villebro]

Thanks for looking into this @diegomedina248 ! I ran into this a few times when testing something unrelated, and wondered if I did something weird that caused it.

[kgabryje]

Awesome fix and even better explanation! LGTM

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[sadpandajoe]

🏷️ preset:2022.19