fix(Explore): Cell height and spacing for Data panel

[geido]

SUMMARY

Makes the height of the cells consistent and improves spacing.

Fixes: #15691

BEFORE

AFTER

TESTING INSTRUCTIONS

1. Open a Table chart in Explore
2. Observe the layout of the Data panel and spacing

ADDITIONAL INFORMATION

• Has associated issue: [cosmetic][south table]unequal space in Table chart and data/sample table #15691
• 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

[geido]

@rosemarie-chiu @jinghua-qa

[codecov]

Codecov Report

Merging #15821 (5cfabf2) into master (6cb91ee) will increase coverage by 0.00%.
The diff coverage is 90.47%.

❗ Current head 5cfabf2 differs from pull request most recent head 1a7d899. Consider uploading reports for the commit 1a7d899 to get more accurate results

@@           Coverage Diff           @@
##           master   #15821   +/-   ##
=======================================
  Coverage   77.05%   77.06%           
=======================================
  Files         984      984           
  Lines       51650    51669   +19     
  Branches     6991     6995    +4     
=======================================
+ Hits        39801    39819   +18     
- Misses      11625    11626    +1     
  Partials      224      224           

Flag	Coverage Δ
javascript	71.81% <77.77%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...nd/src/explore/components/DataTablesPane/index.tsx	84.26% <75.00%> (+0.36%)	⬆️
...et-frontend/src/components/TableView/TableView.tsx	95.77% <80.00%> (-1.20%)	⬇️
superset/connectors/druid/models.py	82.93% <100.00%> (+0.11%)	⬆️
superset/connectors/sqla/models.py	88.55% <100.00%> (+0.08%)	⬆️

---

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 6cb91ee...1a7d899. Read the comment docs.

[junlincc]

@geido Thank you for the PR! Diego, the purpose of the change is 1) visual consistency for all tables, 2) show more rows in the south table. Is there a particular reason why we are only showing 4 rows per page now after the spacing is reduced?

original comment
Issue 1: decrease spacing in the south table(view result, view sample) to be the same as table chart. the goal is to show more results and example rows, and for visual consistency. Please also check Pivot table v2 spacing
Issue 2: add spacing between tab and error msg. - cosmetic

cc @kgabryje

[junlincc]

/testenv up

[github-actions]

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

[geido]

@junlincc the PR only makes the table style in the data panel consistent with the table chart. The number of the shown items depends on the screen size. The screenshot after the PR was taken on a 15' screen. Probably the screenshot in the original issue (which I have re-attached to this PR as a reference) was taken with a larger screen.

[geido]

P.S. I have closed the downloads in my browser which were occupying some space and I am seeing 5 items on my 15' laptop now.

If we want to show more rows we might need to act also on the height of the datapanel itself as reducing the height of the cells does not give that much additional space.

I would also like to point out that there are several other visual differences between the two tables. On the table chart, in every other row, the cells have a different background color. Also, the pagination is right positioned and comes in different colors compared to the table in the datapanel one.

Finally, the table of the datapanel is used in other places too, such as the "Change dataset" modal. I left that one untouched as the issue did not specify to change it everywhere.

If we are looking to make the tables look consistent (aka the same) everywhere, we have to change several other layout parts.

CC @junlincc

[pkdotson]

code looks good to me.

[junlincc]

LGTM! Thanks so much for making Superset SLICK!

[rosemarie-chiu]

neat!

BEFORE:

AFTER:

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[kgabryje]

Nice! Thanks for the improvement ❤️