fix: Broken effect in useCSSTextTruncation hook

[codyml]

SUMMARY

As discovered as part of #22317, the useCSSTextTruncation hook had a difficult to track down bug: the effect responsible for updating the isTruncated value based on DOM measurements wouldn't run, even though console logs showed that values in its dependency array were changing.

Upon investigation, it seems this is an intended behavior of React, as described by this comment: even if dependency arrays change, React will abort the entire render cycle (including effects) if neither props, state nor context have changed. Because the dependency array of the effect in question is currently based on values derived from refs, changes to these values don't indicate to React that the render cycle is "worth it", so if no other props, state or context changes in the component calling the hook, the render cycle is thrown out and the effect that would update the isTruncated value never runs.

To fix this, this PR removes the use of refs to store intermediate values and instead adds a new effect that runs every render and sets the offsetWidth and scrollWidth state variables to whatever the current DOM measurement is. No dependency array or checks for changes are necessary to avoid infinite render cycles because updating state in functional components to the same value does not trigger a re-render. This PR then updates the previously-existing effect to be much simpler, taking advantage of this same no-op behavior of setting the state to an existing value.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Example that's broken in #22317:

Screen.Recording.2022-12-02.at.8.24.32.PM.mov

#22317 after cherry-picking this commit:

Screen.Recording.2022-12-02.at.8.25.21.PM.mov

TESTING INSTRUCTIONS

Check that truncation-based tooltips still work as expected wherever useCSSTextTruncation is used:

• DateFilterLabel in Dashboard native filters (vertical + horizontal) and Explore ad-hoc filters
• Horizontal filter bar dividers, non-overflow and overflow

ADDITIONAL INFORMATION

• Has associated issue: feat: New time range label #22317
• Required feature flags: HORIZONTAL_FILTER_BAR
• 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 #22324 (b3254c1) into master (997950e) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #22324      +/-   ##
==========================================
+ Coverage   66.85%   66.86%   +0.01%     
==========================================
  Files        1847     1847              
  Lines       70482    70481       -1     
  Branches     7721     7720       -1     
==========================================
+ Hits        47120    47127       +7     
+ Misses      21362    21360       -2     
+ Partials     2000     1994       -6     

Flag	Coverage Δ
javascript	53.79% <100.00%> (+0.02%)	⬆️

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

Impacted Files	Coverage Δ
...nd/src/hooks/useTruncation/useCSSTextTruncation.ts	100.00% <100.00%> (+30.76%)	⬆️
...erset-frontend/src/components/Select/CustomTag.tsx	71.42% <0.00%> (+7.14%)	⬆️
...Filters/FilterBar/FilterControls/FilterDivider.tsx	96.00% <0.00%> (+12.00%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[geido]

/testenv up

[github-actions]

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

[geido]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[geido]

LGMT!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.