fix: Styling fixes for horizontal filter bar

[kgabryje]

SUMMARY

A few styling fixes related to horizontal native filters bar (and 1 for vertical):

• Remove extra right padding from empty state text
• Remove extra spacing to right of Add/Edit Filters button
• Make Apply and Clear All buttons aligned with each other
• Increase padding at end of non-overflowed items
• Increase top/bottom padding of horizontal bar
• Align Apply and Clear All buttons with other Dashboard buttons

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

CC @kasiazjc @codyml for review

[michael-s-molina]

Shouldn't the Apply and Clear buttons be aligned to the right when presenting the empty state? That's the behavior of the horizontal filter bar when we have filters. The vertical bar keeps the buttons aligned to the bottom when presenting the empty state so I think it would make it more consistent.

[michael-s-molina]

@kasiazjc @kgabryje What do you think about inverting the positions of the empty message and the Add Filters? That way, the gear icon, and Add Filters will keep a constant position when interacting with the bar. So with this, we would have:

• A fixed area on the left with a gear icon + Add Filters
• A dynamic central area where we can add filters or present the empty text
• A fixed area on the right with the Apply + Clear All buttons

WDYT?

[kgabryje]

@michael-s-molina Thank you for suggestions, applied both changes.
@kasiazjc also agrees

[codecov]

Codecov Report

Merging #22337 (34d526a) into master (e1ffdb9) will decrease coverage by 0.00%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #22337      +/-   ##
==========================================
- Coverage   66.85%   66.85%   -0.01%     
==========================================
  Files        1847     1847              
  Lines       70561    70560       -1     
  Branches     7737     7737              
==========================================
- Hits        47174    47173       -1     
  Misses      21380    21380              
  Partials     2007     2007              

Flag	Coverage Δ
javascript	53.80% <100.00%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...rontend/src/components/DropdownContainer/index.tsx	72.83% <ø> (ø)
...ts/nativeFilters/FilterBar/ActionButtons/index.tsx	78.57% <ø> (ø)
...ilters/FilterBar/FilterControls/FilterControls.tsx	68.62% <ø> (ø)
...Filters/FilterBar/FilterControls/FilterDivider.tsx	84.00% <ø> (ø)
...omponents/nativeFilters/FilterBar/Header/index.tsx	95.00% <100.00%> (-0.24%)	⬇️
.../components/nativeFilters/FilterBar/Horizontal.tsx	100.00% <100.00%> (ø)

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

[michael-s-molina]

@kgabryje @kasiazjc Final nit: Should the distance between the gear icon, Add Filter, and empty text be the same? If so, make sure to also test how it would look when we have filters.

[kgabryje]

@michael-s-molina Spacings between the COMPONENTS are the same - 16px. The problem is that the icon component has some empty space around it. When we start using the icons from the new design system, the problem will be solved, since those new icons don't have spacing around them. CC @kasiazjc

[michael-s-molina]

LGTM. Thank you for the fixes and for addressing the comments @kgabryje.

[rusackas]

that's some goofy formatting, but if the linter's happy, I'm happy.

[kgabryje]

Yeah I don't like it either but that's what prettier came up with :(

[rusackas]

Code LGTM! Will try to remember to spin up a test env when CI is ready for that.