feat: Make filters and dividers display horizontally in horizontal native filters filter bar #22169

codyml · 2022-11-18T16:52:22Z

SUMMARY

This PR adds filters and dividers to the horizontal filter bar, based off of @kgabryje's #22042 with some additional styling work on top. Dividers and filter wrappers (labels + spacing) should look correct, though the filter input controls themselves are not yet styled in this PR. Known issues that will be covered in future PRs:

Filter control inputs aren't updated for horizontal layout
"More filters" dropdown has incorrect icon, label, badge numbers and doesn't open automatically when related filter links are clicked
Overflow container may have some resizing quirks
Hover labels for dividers in horizontal overflow aren't showing up
Filter cards aren't positioned quite right

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

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

codecov · 2022-11-20T17:57:57Z

Codecov Report

Merging #22169 (9567b5e) into master (3bc0865) will decrease coverage by 0.00%.
The diff coverage is 58.78%.

@@            Coverage Diff             @@
##           master   #22169      +/-   ##
==========================================
- Coverage   66.92%   66.91%   -0.01%     
==========================================
  Files        1835     1840       +5     
  Lines       69988    70081      +93     
  Branches     7612     7636      +24     
==========================================
+ Hits        46839    46896      +57     
- Misses      21183    21218      +35     
- Partials     1966     1967       +1

Flag	Coverage Δ
javascript	`53.76% <58.78%> (+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	`80.00% <ø> (ø)`
...ts/nativeFilters/FilterBar/ActionButtons/index.tsx	`78.57% <ø> (ø)`
.../components/nativeFilters/FilterBar/Horizontal.tsx	`100.00% <ø> (ø)`
...oard/components/nativeFilters/FilterCard/index.tsx	`10.00% <ø> (ø)`
...veFilters/FilterBar/FilterControls/FilterValue.tsx	`6.31% <20.00%> (-0.28%)`	⬇️
...s/FilterBar/FiltersOutOfScopeCollapsible/index.tsx	`20.00% <20.00%> (ø)`
...Filters/FilterBar/FiltersDropdownContent/index.tsx	`25.00% <25.00%> (ø)`
...Filters/FilterBar/FilterControls/FilterControl.tsx	`29.03% <36.84%> (ø)`
...c/hooks/useTruncation/useChildElementTruncation.ts	`44.73% <44.73%> (ø)`
...ilters/FilterBar/FilterControls/FilterControls.tsx	`67.64% <61.53%> (-2.95%)`	⬇️
... and 4 more

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

kgabryje · 2022-11-21T17:03:47Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-11-21T17:06:01Z

@kgabryje Ephemeral environment spinning up at http://35.91.79.71:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

kgabryje · 2022-11-22T15:13:26Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-11-22T15:17:12Z

@kgabryje Ephemeral environment spinning up at http://54.244.77.71:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

kgabryje · 2022-11-24T14:50:52Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-11-24T14:55:04Z

@kgabryje Ephemeral environment spinning up at http://35.88.186.83:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

kgabryje · 2022-11-24T16:55:59Z

...t-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx

+    <FilterControlContainer
+      layout={
+        orientation === FilterBarOrientation.HORIZONTAL && !overflow
+          ? 'horizontal'


nit: should we use an enum for horizontal and vertical layout? Maybe we could even simply use FilterBarOrientation for that?

kgabryje · 2022-11-24T17:07:53Z

...t-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx

+        margin-bottom: ${theme.gridUnit * 4}px;
+      `}
+    >
+      <Tooltip overlay={titleIsTruncated ? <strong>{title}</strong> : null}>


Should the tooltip content be bold? Can't see that requirement in the designs

kgabryje · 2022-11-24T17:15:33Z

...set-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx

@@ -270,7 +277,7 @@ const FilterValue: React.FC<FilterProps> = ({
          height={HEIGHT}
          width="100%"
          showOverflow={showOverflow}
-          formData={formData}
+          formData={formDataWithDisplayParams}


hmmm I'm not sure if orientation and overflow belongs to formData... I'd rather add a new optional prop to SuperChart like displaySetting: Record<string, any> and put those values there.

kgabryje · 2022-11-24T17:37:36Z

A few more comments:

I think the divider truncation behaviour should be a bit different. If there's only title - don't show icon and show tooltip on title hover. If there's title and description - show tooltip with full title on title hover, show tooltip with description on icon hover. Currently we don't do anything when hovering over truncated title and we display truncated title on icon hover.

If there are a lot of filters in the dropdown, I think it should have some max height and be scrollable + it should close itself when user starts scrolling the dashboard to avoid the effect of floating box

Screen.Recording.2022-11-24.at.18.36.15.mov

kgabryje · 2022-11-24T17:51:15Z

However, those are all minor problems and this PR looks great! I'm happy to merge it now and address the comments in separate PRs

kgabryje

The comments are non blocking since this is locked behind a feature flag. LGTM

github-actions · 2022-11-25T10:59:28Z

Ephemeral environment shutdown and build artifacts deleted.

pull-request-size bot added the size/XXL label Nov 18, 2022

codyml mentioned this pull request Nov 19, 2022

feat: Update native filter dividers to support horizontal display #21970

Closed

9 tasks

michael-s-molina changed the title ~~[WIP] Make filters and dividers display horizontally in horizontal native filters filter bar~~ feat: Make filters and dividers display horizontally in horizontal native filters filter bar Nov 20, 2022

codyml and others added 7 commits November 23, 2022 14:59

WIP

d5ea84a

Merge in divider styles.

bd8c2e3

Update styles for horizontal container.

fd027b4

Update styles for filter wrappers.

cda0345

Style horizontal overflow filter labels.

a2ef1f5

Truncate horizontal and horizontal overflow filter labels.

edafb7d

Adds filter bar orientation to mocks

9567b5e

codyml force-pushed the feat/horizontal-filters-dividers branch from 12fb8a4 to 9567b5e Compare November 23, 2022 21:59

kgabryje reviewed Nov 24, 2022

View reviewed changes

kgabryje approved these changes Nov 24, 2022

View reviewed changes

kgabryje requested a review from geido November 24, 2022 18:04

geido approved these changes Nov 25, 2022

View reviewed changes

geido merged commit 64939f2 into apache:master Nov 25, 2022

kgabryje mentioned this pull request Nov 29, 2022

[WIP]feat(dashboard): Support custom dropdown content in horizontal filter bar #22042

Closed

9 tasks

mistercrunch added the 🚢 2.1.3 label Feb 18, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Make filters and dividers display horizontally in horizontal native filters filter bar #22169

feat: Make filters and dividers display horizontally in horizontal native filters filter bar #22169

codyml commented Nov 18, 2022 •

edited

codecov bot commented Nov 20, 2022 •

edited

kgabryje commented Nov 21, 2022

github-actions bot commented Nov 21, 2022

kgabryje commented Nov 22, 2022

github-actions bot commented Nov 22, 2022

kgabryje commented Nov 24, 2022

github-actions bot commented Nov 24, 2022

kgabryje Nov 24, 2022

kgabryje Nov 24, 2022

kgabryje Nov 24, 2022

kgabryje commented Nov 24, 2022 •

edited

kgabryje commented Nov 24, 2022

kgabryje left a comment

github-actions bot commented Nov 25, 2022

feat: Make filters and dividers display horizontally in horizontal native filters filter bar #22169

feat: Make filters and dividers display horizontally in horizontal native filters filter bar #22169

Conversation

codyml commented Nov 18, 2022 • edited

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Nov 20, 2022 • edited

Codecov Report

kgabryje commented Nov 21, 2022

github-actions bot commented Nov 21, 2022

kgabryje commented Nov 22, 2022

github-actions bot commented Nov 22, 2022

kgabryje commented Nov 24, 2022

github-actions bot commented Nov 24, 2022

kgabryje Nov 24, 2022

Choose a reason for hiding this comment

kgabryje Nov 24, 2022

Choose a reason for hiding this comment

kgabryje Nov 24, 2022

Choose a reason for hiding this comment

kgabryje commented Nov 24, 2022 • edited

kgabryje commented Nov 24, 2022

kgabryje left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 25, 2022

codyml commented Nov 18, 2022 •

edited

codecov bot commented Nov 20, 2022 •

edited

kgabryje commented Nov 24, 2022 •

edited