feat(chart-controls): Show detailed data type tooltip when hovering type icon

[ved-kashyap-samsung]

SUMMARY

Fix for issue - #13248
Minor improvement: It show the type as in VARCHAR(50), text, double precision when hovering the icon in the metadata panel Please refer the after screenshots below for more understanding.

AFTER SCREENSHOTS

TESTING INSTRUCTIONS

Please verify changes from my fork

1. Click on charts from headers section to see all charts
2. Click and open any chart
3. On the left side there will be columns of table and column options
4. If we hover on the icon (abc, # etc.) of column type, it should open a tooltip with detailed data type of that particular column

ADDITIONAL INFORMATION

• Has associated issue: Fixes [explore] Show detailed data type tooltip when hovering type icon #13248
• 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

[github-actions]

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

[ved-kashyap-samsung]

@mistercrunch @junlincc Can you please review and approve. Thanks!

[rusackas]

Code LGTM, though tests would be greatly appreciated. Approving to unblock, but pinging others @kgabryje and @michael-s-molina for an additional review in case we're preferring other techniques/components, and @kasiazjc in case there's anything that needs to be adjusted from the UI/design stance.

[ved-kashyap-samsung]

Thanks @rusackas ! I will add some tests soon. Also, I have applied prettier linting issue fixes.

[ved-kashyap-samsung]

@rusackas I have added test cases for my changes and all are passing. Attaching pic for reference.

[ved-kashyap-samsung]

@rusackas I have run npm run lint and npm run test and there were no issues found. Can you please re-run the checks.
cc: @michael-s-molina , @kgabryje , @kasiazjc

[ved-kashyap-samsung]

@rusackas All checks have passed now. I have verified all UI behaviors in dev from my end. Please let me know in case anything else is required. Thank you for prompt response!

[kasiazjc]

@rusackas I have run npm run lint and npm run test and there were no issues found. Can you please re-run the checks. cc: @michael-s-molina , @kgabryje , @kasiazjc

Thank you @ved-kashyap-samsung for working on this! I have one suggestion (if possible) can you centre the caret/arrow from the tooltip so that it points to the centre to the icon? With current implementation the caret seems not to be anchored to anything specific and it can be confusing, I think

[ved-kashyap-samsung]

@rusackas I have run npm run lint and npm run test and there were no issues found. Can you please re-run the checks. cc: @michael-s-molina , @kgabryje , @kasiazjc

Thank you @ved-kashyap-samsung for working on this! I have one suggestion (if possible) can you centre the caret/arrow from the tooltip so that it points to the centre to the icon? With current implementation the caret seems not to be anchored to anything specific and it can be confusing, I think

@kasiazjc , @rusackas Now, I have made changes to align the tooltip arrow to the center of the icon in this PR. Please check some sample pics from the modified version. Thanks!

[codecov]

Codecov Report

Merging #23970 (64db462) into master (b613167) will increase coverage by 0.41%.
The diff coverage is 67.78%.

❗ Current head 64db462 differs from pull request most recent head c5a6c8c. Consider uploading reports for the commit c5a6c8c to get more accurate results

@@            Coverage Diff             @@
##           master   #23970      +/-   ##
==========================================
+ Coverage   67.71%   68.13%   +0.41%     
==========================================
  Files        1918     1941      +23     
  Lines       74157    75310    +1153     
  Branches     8053     8167     +114     
==========================================
+ Hits        50219    51314    +1095     
- Misses      21885    21907      +22     
- Partials     2053     2089      +36     

Flag	Coverage Δ
hive	?
javascript	54.55% <67.78%> (+0.65%)	⬆️

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

Impacted Files	Coverage Δ
...ackages/superset-ui-chart-controls/src/fixtures.ts	100.00% <ø> (ø)
...chart-controls/src/shared-controls/dndControls.tsx	58.33% <ø> (ø)
...d/packages/superset-ui-chart-controls/src/types.ts	100.00% <ø> (ø)
...s/superset-ui-core/src/components/SafeMarkdown.tsx	85.71% <0.00%> (+19.04%)	⬆️
...ackages/superset-ui-core/src/utils/featureFlags.ts	100.00% <ø> (ø)
...s/legacy-plugin-chart-calendar/src/controlPanel.ts	50.00% <ø> (ø)
...nd/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js	0.00% <ø> (ø)
...rts/src/BigNumber/BigNumberTotal/transformProps.ts	0.00% <0.00%> (ø)
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	0.00% <0.00%> (ø)
...plugin-chart-echarts/src/BoxPlot/transformProps.ts	55.00% <ø> (ø)
... and 65 more

... and 156 files with indirect coverage changes

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

[rusackas]

Really appreciate this fantastic PR, particularly the quick turnaround on suggestions (both code and design), and clear communication. You even added tests, and managed to make CI happy! This is a very well-done first PR, and I hope we see more like it in the future :) I added a couple more (non-blocking) suggestions, but I'm happy to approve it as-is, and look forward to merging this!

[ved-kashyap-samsung]

Really appreciate this fantastic PR, particularly the quick turnaround on suggestions (both code and design), and clear communication. You even added tests, and managed to make CI happy! This is a very well-done first PR, and I hope we see more like it in the future :) I added a couple more (non-blocking) suggestions, but I'm happy to approve it as-is, and look forward to merging this!

Thanks @rusackas ! Sure, I am looking forward to contribute more and more to superset community in future. Also, thank you for suggesting the changes, I have included your review comments in my latest commit.