Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Nov 28, 2022

Conversation

codyml
Copy link
Member

@codyml codyml commented Nov 23, 2022

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:
  • Required feature flags: HORIZONTAL_FILTER_BAR
  • 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 codyml marked this pull request as draft November 23, 2022 22:22
@codyml codyml marked this pull request as ready for review November 23, 2022 22:48
@codyml codyml marked this pull request as draft November 23, 2022 22:48
@codecov
Copy link

codecov bot commented Nov 23, 2022

Codecov Report

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

❗ 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%) ⬇️

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%) ⬆️
.../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

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

@kgabryje kgabryje requested review from geido and kgabryje and removed request for geido November 24, 2022 18:02
@kgabryje kgabryje marked this pull request as ready for review November 25, 2022 11:20
@kgabryje
Copy link
Member

image

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

Copy link
Member

@kgabryje kgabryje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 bug to address

Copy link
Member

@kgabryje kgabryje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I pushed a fix for the issue with empty content in the dropdown. Now the dropdown button won't display if the menu is empty
  2. Not really related to this PR, but after discussion with @kasiazjc I removed the style overrides for Add/Edit filter button in horizontal mode. It was implemented as in designs, but it was inconsistent with the vertical version. Now both vertical and horizontal buttons look the same.

@kgabryje kgabryje merged commit 435926b into apache:master Nov 28, 2022
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 and removed 🚢 2.1.3 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L 🚢 2.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants