fix(dashboard): drag preview not working

[stephenLYZ]

SUMMARY

Currently the drag preview of react-dnd was broken since we introduce position: 'fixed' inside the drag container from #21198. To fix this, we use createPortal to ensure that the parent container is not affected and that the dropdown is also displayed properly.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

2022-09-12.12.22.42.mov

after

2022-09-12.12.11.41.mov

TESTING INSTRUCTIONS

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 #21432 (bb8eed6) into master (7401f15) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #21432   +/-   ##
=======================================
  Coverage   66.56%   66.56%           
=======================================
  Files        1791     1791           
  Lines       68591    68591           
  Branches     7319     7319           
=======================================
  Hits        45656    45656           
  Misses      21046    21046           
  Partials     1889     1889           

Flag	Coverage Δ
javascript	52.74% <100.00%> (ø)

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

Impacted Files	Coverage Δ
...frontend/src/components/Chart/ChartContextMenu.tsx	44.00% <100.00%> (ø)

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

[michael-s-molina]

@stephenLYZ I'm still able to reproduce the issue. If I remove ChartContextMenu completely, the error still happens so I don't think it's related to that component.

Screen.Recording.2022-09-12.at.7.33.44.AM.mov

[stephenLYZ]

@stephenLYZ I'm still able to reproduce the issue. If I remove ChartContextMenu completely, the error still happens so I don't think it's related to that component.

Screen.Recording.2022-09-12.at.7.33.44.AM.mov

@michael-s-molina This is actually another problem with the pivot table v2, because it also uses fixed position , and we may need to use another PR to solve it. But for the rest of the chart, everything looks fine. During my troubleshooting, I found that this commit was fine before, but afterwards the behavior was not as expected, so I'm guessing that this is what's affecting it.

[michael-s-molina]

@michael-s-molina This is actually another problem with the pivot table v2, because it also uses fixed position , and we may need to use another PR to solve it. But for the rest of the chart, everything looks fine. During my troubleshooting, I found that this commit was fine before, but afterwards the behavior was not as expected, so I'm guessing that this is what's affecting it.

Oh, thanks for clarifying that. LGTM

[mistercrunch]