fix(sqllab): Have table name tooltip only show when name is truncated

[corbinrobb]

SUMMARY

Short Summary:

Removed the tooltip hover for tables that are not truncated

Changed tooltip popup to be centered over the table name

Detailed Summary:

This was done by adding a reference to the StyledSpan which is the element that had the styling to truncate when the table name text overflows.

Then when the component mounts, we check if the element is overflowing and if so remove the tooltip trigger that shows the tooltip pop up.

We did that by passing an empty array to the ToolTip trigger property instead of ['hover']. Doing this makes it so the tooltip never triggers and therefore never shows up.

I changed the tooltip to show up over the center of the name because it looked a little weird to have it placed on the left when the table name was so long. I might be the only one who feels that way, so please let me know if anybody disagrees and I will change it back.

BEFORE

AFTER

TESTING INSTRUCTIONS

Open Superset and select the SqlEditor option under SQL Lab at the top of the screen

On the left side of the screen select some schema and add some tables with the table schema dropdown

If you know where to find some tables with long enough names that it causes the name to truncate then open up some of those and then hover your mouse over the table names and observe.

If you are like me and you do not know where to find super long table names you can add a little bit of code at the file located here superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx

Then we hop on down to line 213 and we can copy-paste this little map method in between this.props.tables and .map

.map((table, i) => { if (i % 2 == 0) return table; return { ...table, name: table.name + 'this_is_a_really_really_really_really_long_name', }; })

All this does is appends a really long string to the end of every other table name. You should remove this after visually testing.

Should go from this:

To This:

Then save and refresh the page and now every other table name should be really long.

Finally, you can observe the lack of tooltip on the short names and bear witness to the tooltip popup on the long ones.

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

[lyndsiWilliams]

Looks good to me, thanks for fixing this! 😁

[codecov]

Codecov Report

Merging #17386 (218961d) into master (561d1ac) will decrease coverage by 0.12%.
The diff coverage is 76.92%.

@@            Coverage Diff             @@
##           master   #17386      +/-   ##
==========================================
- Coverage   77.07%   76.94%   -0.13%     
==========================================
  Files        1036     1038       +2     
  Lines       55756    56014     +258     
  Branches     7630     7736     +106     
==========================================
+ Hits        42972    43101     +129     
- Misses      12529    12655     +126     
- Partials      255      258       +3     

Flag	Coverage Δ
javascript	71.22% <76.92%> (-0.21%)	⬇️

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

Impacted Files	Coverage Δ
...ntend/src/SqlLab/components/TableElement/index.tsx	88.23% <76.92%> (-0.52%)	⬇️
...hboard/components/nativeFilters/FilterBar/state.ts	82.81% <0.00%> (-4.69%)	⬇️
superset-frontend/src/chart/Chart.jsx	40.29% <0.00%> (-3.04%)	⬇️
...tend/src/common/hooks/apiResources/apiResources.ts	92.50% <0.00%> (-2.24%)	⬇️
.../src/dashboard/components/gridComponents/Chart.jsx	78.37% <0.00%> (-2.00%)	⬇️
superset-frontend/src/explore/constants.ts	95.74% <0.00%> (-1.63%)	⬇️
...et-frontend/src/dashboard/actions/sliceEntities.js	11.76% <0.00%> (-1.14%)	⬇️
...t-frontend/src/dashboard/components/SliceAdder.jsx	76.62% <0.00%> (-0.41%)	⬇️
superset-frontend/src/dashboard/actions/hydrate.js	1.63% <0.00%> (-0.08%)	⬇️
superset-frontend/src/constants.ts	100.00% <0.00%> (ø)
... and 14 more

---

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 561d1ac...218961d. Read the comment docs.

[eschutho]

This looks great! Thanks @corbinrobb!