fix(cosmetic): cannot find m-r-10 class in superset.less

[Renderz]

SUMMARY

Cannot find '.m-r-10' css class in CollectionTable component, seems missing in src/assets/stylesheets/superset.less

BTW, maybe we should check any other missing css class.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: Fixes Cannot find .m-r-10 class #20275
• 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 #20276 (fdbf0d7) into master (ead1040) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #20276      +/-   ##
==========================================
+ Coverage   66.69%   66.70%   +0.01%     
==========================================
  Files        1739     1739              
  Lines       65153    65139      -14     
  Branches     6903     6897       -6     
==========================================
+ Hits        43453    43454       +1     
+ Misses      19947    19932      -15     
  Partials     1753     1753              

Flag	Coverage Δ
javascript	51.75% <100.00%> (+0.02%)	⬆️

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

Impacted Files	Coverage Δ
...tend/src/components/Datasource/CollectionTable.tsx	80.86% <100.00%> (+0.33%)	⬆️
...end/src/components/Datasource/DatasourceEditor.jsx	65.61% <100.00%> (+0.41%)	⬆️
...gins/plugin-chart-echarts/src/Pie/controlPanel.tsx	28.57% <0.00%> (-4.77%)	⬇️
superset-frontend/src/components/Modal/Modal.tsx	88.05% <0.00%> (ø)
...frontend/src/SqlLab/components/SqlEditor/index.jsx	51.36% <0.00%> (ø)
.../src/views/CRUD/data/savedquery/SavedQueryList.tsx	63.30% <0.00%> (ø)
...c/views/CRUD/data/database/DatabaseModal/index.tsx	32.16% <0.00%> (ø)
...dashboard/components/SliceHeaderControls/index.tsx	64.28% <0.00%> (ø)
...qlLab/components/EstimateQueryCostButton/index.tsx	5.26% <0.00%> (ø)
...es/superset-ui-core/src/query/buildQueryContext.ts	100.00% <0.00%> (ø)
... and 20 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 ead1040...fdbf0d7. Read the comment docs.

[rusackas]

While this fixes the missing class, and I appreciate the contribution to resolve that, there are a couple things that are holding me up from approving/merging.

1. The .m-r-10 definition exists in SQL Lab's main.less file, so if we were to go global with it, we should remove that in favor of the one you're adding.

2. It looks like this class is only actually used in a couple places. It'd probably be better to style those two components with Emotion rather than adding more LESS (which we're trying to whittle away at)

3. To confuse things further... I kind of LIKE the layout of the Before picture better... everything is nicely right aligned. Maybe we should just get rid of this margin once and for all? It sounds like you were solving a code problem more than a cosmetic problem, but let me know if I'm misinterpreting.

[Renderz]

While this fixes the missing class, and I appreciate the contribution to resolve that, there are a couple things that are holding me up from approving/merging.

1. The .m-r-10 definition exists in SQL Lab's main.less file, so if we were to go global with it, we should remove that in favor of the one you're adding.
2. It looks like this class is only actually used in a couple places. It'd probably be better to style those two components with Emotion rather than adding more LESS (which we're trying to whittle away at)
3. To confuse things further... I kind of LIKE the layout of the Before picture better... everything is nicely right aligned. Maybe we should just get rid of this margin once and for all? It sounds like you were solving a code problem more than a cosmetic problem, but let me know if I'm misinterpreting.

I found this problem when I was trying to add another Button on the right side after the one showing in the picture, and there was no margin between these two Button which should be there because both Button had '.m-r-10' class. So I raised up this issue.

But just as you mentioned, it looks nicely right aligned so maybe all those buttons should be removed from '.m-r-10' class? or use '.m-l-10' instead.

And maybe it is another good way to globalize SQL Labs' less file.

[michael-s-molina]

It looks like this class is only actually used in a couple places. It'd probably be better to style those two components with Emotion rather than adding more LESS (which we're trying to whittle away at)

I think this is the best solution.

I found this problem when I was trying to add another Button on the right side after the one showing in the picture, and there was no margin between these two Button which should be there because both Button had '.m-r-10' class.

That's a valid use case. We just need to fix it using Emotion instead of LESS.

[michael-s-molina]

We can adjust the margins to our theme multiples (12px) 😉

[michael-s-molina]

/testenv up

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://52.13.42.77:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

LGTM. Thanks for the contribution!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.