superset icon indicating copy to clipboard operation
superset copied to clipboard

fix(dashboard): Add correct icon, label and badge to horizontal native filters dropdown button

Open codyml opened this issue 2 years ago • 2 comments

SUMMARY

This PR is based on #22169 and fixes some issues with the native filters dropdown button:

  • Style tweaks
  • Adds icon and label
  • Adds logic to identify the active filters in the dropdown and update badge to reflect
  • Forces button to appear even when container has no overflowing items if custom dropdown content is inserted
  • Fixes an issue where filters/dividers would appear in horizontal overflow view when not in the overflow dropdown

Note: there are still some issues with getting the component to resize correctly, but those will be addressed in a future PR.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: Screen Shot 2022-11-23 at 3 14 48 PM

After: Screen Shot 2022-11-23 at 3 15 17 PM Screen Shot 2022-11-23 at 3 15 31 PM

TESTING INSTRUCTIONS

  • Confirm that the button appears even when there's no badge
  • Confirm that the button appears even when there are only out-of-scope filters in it
  • Confirm that the button shows only the number of active filters, not including out-of-scope filters
  • Confirm that when the view is large enough for there to be no overflowed items, items have correct non-overflow horizontal appearance

ADDITIONAL INFORMATION

  • [ ] Has associated issue:
  • [x] Required feature flags: HORIZONTAL_FILTER_BAR
  • [x] 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

codyml avatar Nov 23 '22 22:11 codyml

Codecov Report

Merging #22211 (1d2a069) into master (64939f2) will decrease coverage by 0.07%. The diff coverage is 41.00%.

:exclamation: Current head 1d2a069 differs from pull request most recent head b0046fb. Consider uploading reports for the commit b0046fb to get more accurate results

@@            Coverage Diff             @@
##           master   #22211      +/-   ##
==========================================
- Coverage   66.91%   66.84%   -0.08%     
==========================================
  Files        1839     1841       +2     
  Lines       70079    70220     +141     
  Branches     7636     7670      +34     
==========================================
+ Hits        46894    46936      +42     
- Misses      21218    21302      +84     
- Partials     1967     1982      +15     
Flag Coverage Δ
javascript 53.66% <36.11%> (-0.11%) :arrow_down:

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

Impacted Files Coverage Δ
...ages/superset-ui-core/src/query/types/Dashboard.ts 100.00% <ø> (ø)
...superset-ui-core/src/query/types/PostProcessing.ts 100.00% <ø> (ø)
...s/legacy-plugin-chart-country-map/src/countries.ts 100.00% <ø> (ø)
...ins/plugin-chart-echarts/src/BoxPlot/buildQuery.ts 66.66% <ø> (ø)
...s/plugin-chart-echarts/src/BoxPlot/controlPanel.ts 5.55% <ø> (ø)
...charts/src/Timeseries/Regular/Bar/controlPanel.tsx 35.71% <ø> (+4.46%) :arrow_up:
.../plugin-chart-echarts/src/Timeseries/buildQuery.ts 71.42% <ø> (ø)
.../plugin-chart-pivot-table/src/plugin/buildQuery.ts 42.85% <ø> (ø)
...ugin-chart-pivot-table/src/plugin/controlPanel.tsx 4.16% <0.00%> (ø)
...ntend/plugins/plugin-chart-table/src/buildQuery.ts 56.25% <ø> (ø)
... and 29 more

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

codecov[bot] avatar Nov 23 '22 23:11 codecov[bot]

image `More filters` appears even when there's nothing overflowing and there are no filters out of scope

kgabryje avatar Nov 25 '22 11:11 kgabryje