chore: refactor ChartHolder to typescript + tests

[diegomedina248]

SUMMARY

This PR refactors the ChartHolder into a functional component with typescript. It also adds more test coverage.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

--

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[bot]]

Codecov Report

Merging #20910 (d63f0de) into master (756ed0e) will increase coverage by 0.05%. The diff coverage is 91.75%.

@@            Coverage Diff             @@
##           master   #20910      +/-   ##
==========================================
+ Coverage   66.29%   66.34%   +0.05%     
==========================================
  Files        1773     1774       +1     
  Lines       67680    67686       +6     
  Branches     7214     7215       +1     
==========================================
+ Hits        44866    44907      +41     
+ Misses      20971    20946      -25     
+ Partials     1843     1833      -10     

Flag	Coverage Δ
javascript	52.21% <91.75%> (+0.10%)	:arrow_up:

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

Impacted Files	Coverage Δ
...tend/src/dashboard/components/AnchorLink/index.tsx	93.75% <ø> (+12.50%)	:arrow_up:
...ashboard/components/gridComponents/ChartHolder.tsx	88.88% <88.88%> (ø)
...end/src/dashboard/components/dnd/DragDroppable.jsx	76.92% <100.00%> (ø)
...rc/dashboard/util/useFilterFocusHighlightStyles.ts	100.00% <100.00%> (ø)
...-frontend/src/dashboard/reducers/dashboardState.js	76.59% <0.00%> (+2.12%)	:arrow_up:
...hboard/components/resizable/ResizableContainer.jsx	61.70% <0.00%> (+4.25%)	:arrow_up:

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

[yousoph]

/testenv up

[yousoph]

🏷️ Preset-Patch

[github-actions[bot]]

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

[EugeneTorap]

@diegomedina248 Thank you for this PR! I have a SqlEditor refactoring into FC, can I share the code with you? @michael-s-molina @kgabryje Can we merge the PR?

[diegomedina248]

@diegomedina248 Thank you for this PR! I have a SqlEditor refactoring into FC, can I share the code with you? @michael-s-molina @kgabryje Can we merge the PR?

@EugeneTorap sure thing!

[jinghua-qa]

/testenv up

[github-actions[bot]]

@jinghua-qa Ephemeral environment spinning up at http://54.214.218.74:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[github-actions[bot]]

@jinghua-qa Ephemeral environment spinning up at http://54.214.218.74:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[jinghua-qa]

I found some issues in this PR: 1, if user click on the filter indicator when chart is in fullscreen view, user will bring out to the normal view and the 3 dot menu on charts are not open. I test on superset master it seems like on master click on the filter indicator in enlarge chart view did not bring user to fullscreen view.

2, for numerical filter, it looks like the filter bar is not shown correctly when user select filter range:

[diegomedina248]

I found some issues in this PR: 1, if user click on the filter indicator when chart is in fullscreen view, user will bring out to the normal view and the 3 dot menu on charts are not open. I test on superset master it seems like on master click on the filter indicator in enlarge chart view did not bring user to fullscreen view.

Screen.Recording.2022-08-18.at.11.06.53.AM.mov 2, for numerical filter, it looks like the filter bar is not shown correctly when user select filter range:

mm, I actually couldn't reproduce those. I did rebase from master, to have the branch up to date, and couldn't reproduce either that way.

Here's what I'm doing:

https://user-images.githubusercontent.com/17252075/185916954-9f0699d2-6808-4773-823d-2188fdfa801f.mov

[jinghua-qa]

/testenv up

[github-actions[bot]]

@jinghua-qa Ephemeral environment spinning up at http://34.221.79.198:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[jinghua-qa]

Test again in the new ephemeral env and verified the reported issue is fixed. Regression test for dashboard LGTM

[EugeneTorap]

@michael-s-molina @kgabryje @geido Can you review the PR and then merge it?

[github-actions[bot]]

Ephemeral environment shutdown and build artifacts deleted.