feat: add classNames for apply and clearAll buttons for superset filters

[Nithin-George-Philips]

SUMMARY

Added className for applyAll and clearALL Button in filterBar
This is to move the sticky buttons from the top to the bottom making it intuitive to different customers.
Custom css can be used to move the buttons as well as change the UI associated with the buttons.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Sample css template to get above UI

.filter-action-buttons {
 position: absolute;
 z-index:1;
 bottom: 4px;
 right: 4px;
}

.filter-clear-all-button{
 color: #0098F3;
 border: none;
 font-weight: 400;
 text-transform: lowercase
}

.filter-apply-button{
   background-color: #0098F3;
   color: white;
}
.ant-select {
 margin-bottom: 6px;
}

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

[villebro]

Thanks @Nithin-George-Philips - great idea. Would you mind sharing an after screenshot with associated customization instructions so others can try it out. Also, if #17505 is redundant, I suggest closing that one.

[codecov]

Codecov Report

Merging #17554 (fd09a5f) into master (da75028) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #17554   +/-   ##
=======================================
  Coverage   77.02%   77.02%           
=======================================
  Files        1049     1049           
  Lines       56681    56681           
  Branches     7851     7851           
=======================================
  Hits        43659    43659           
  Misses      12769    12769           
  Partials      253      253           

Flag	Coverage Δ
javascript	71.09% <ø> (ø)

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

Impacted Files	Coverage Δ
...omponents/nativeFilters/FilterBar/Header/index.tsx	100.00% <ø> (ø)

---

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 da75028...fd09a5f. Read the comment docs.

[Nithin-George-Philips]

@villebro I have provided a screenshot as well as a custom css template to obtain the same.

[kgabryje]

Good idea, thanks for the contribution! 🙂

[villebro]

Thanks - LGTM

[optymystycpryme]

@Nithin-George-Philips Can you provide the code necessary to move the Apply Filters/Clear All buttons to the top of the field above the filter options? It seems that by default, they are at the bottom of the form.