fix: dropdown placement for cascading filters popover #17046

pkdotson · 2021-10-08T23:41:00Z

SUMMARY

This pr fixes an issue where the dropdown select will fill the container of the popover causing ui confusion for the user. This fix enables the drop down to drop in respect to the select

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before
#16521 (comment)

after

Screen.Recording.2021-10-08.at.4.37.51.PM.mov

TESTING INSTRUCTIONS

Go to dashboard and create cascading filter and ensure the the dropdown does not fill the popover container.

ADDITIONAL INFORMATION

[x ] Has associated issue: Fixes [native filter][cascading] when selecting value for child filter, the dropdown list become full of the popover window #16521
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

codecov · 2021-10-09T00:14:40Z

Codecov Report

Merging #17046 (8cf017b) into master (4cc095c) will increase coverage by 0.02%.
The diff coverage is 83.33%.

@@            Coverage Diff             @@
##           master   #17046      +/-   ##
==========================================
+ Coverage   76.91%   76.93%   +0.02%     
==========================================
  Files        1038     1039       +1     
  Lines       55557    55575      +18     
  Branches     7567     7576       +9     
==========================================
+ Hits        42731    42759      +28     
+ Misses      12576    12566      -10     
  Partials      250      250

Flag	Coverage Δ
javascript	`70.98% <83.33%> (+0.05%)`	⬆️

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

Impacted Files	Coverage Δ
...Filters/FilterBar/FilterControls/FilterControl.tsx	`100.00% <ø> (ø)`
...veFilters/FilterBar/FilterControls/FilterValue.tsx	`69.56% <ø> (ø)`
...et-frontend/src/filters/components/Select/types.ts	`100.00% <ø> (ø)`
.../FilterBar/CascadeFilters/CascadePopover/index.tsx	`63.76% <75.00%> (+0.53%)`	⬆️
...rBar/CascadeFilters/CascadeFilterControl/index.tsx	`90.00% <100.00%> (ø)`
...c/filters/components/Select/SelectFilterPlugin.tsx	`80.85% <100.00%> (+0.20%)`	⬆️
...nativeFilters/FiltersConfigModal/Footer/Footer.tsx	`90.90% <0.00%> (-9.10%)`	⬇️
...re/components/controls/DatasourceControl/index.jsx	`79.06% <0.00%> (ø)`
...-frontend/src/datasource/ChangeDatasourceModal.tsx
...perset-frontend/src/datasource/DatasourceModal.tsx
... and 9 more

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 4cc095c...8cf017b. Read the comment docs.

geido · 2021-10-11T09:07:34Z

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DASHBOARD_NATIVE_FILTERS_SET=true FEATURE_DASHBOARD_FILTERS_EXPERIMENTAL=true

github-actions · 2021-10-11T09:09:47Z

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

...end/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx

michael-s-molina · 2021-10-11T10:33:09Z

@pkdotson The overflow-y: auto had the objective of adding a vertical scroll when needed.

Screen.Recording.2021-10-11.at.7.30.55.AM.mov

rusackas · 2021-10-12T17:52:11Z

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DASHBOARD_NATIVE_FILTERS_SET=true FEATURE_DASHBOARD_FILTERS_EXPERIMENTAL=true

github-actions · 2021-10-12T17:56:31Z

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

github-actions · 2021-10-14T04:38:49Z

Ephemeral environment shutdown and build artifacts deleted.

...c/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx

...end/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx

…ix-popover-dropdown

pkdotson · 2021-10-15T22:17:55Z

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DASHBOARD_NATIVE_FILTERS_SET=true FEATURE_DASHBOARD_FILTERS_EXPERIMENTAL=true

github-actions · 2021-10-15T22:19:55Z

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

junlincc

LGTM! Thanks for the fix. ready to go if the code looks good. cc @graceguo-supercat

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

…ix-popover-dropdown

pkdotson · 2021-10-19T20:29:12Z

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DASHBOARD_NATIVE_FILTERS_SET=true FEATURE_DASHBOARD_FILTERS_EXPERIMENTAL=true

github-actions · 2021-10-19T20:33:25Z

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

...end/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx

kgabryje · 2021-10-21T15:33:49Z

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

@@ -285,6 +287,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
          // @ts-ignore
          value={filterState.value || []}
          disabled={isDisabled}
+          getPopupContainer={showOverflow ? () => parentRef : undefined}


Shouldn't that be parentRef.current?

…uperset into fix-popover-dropdown

kgabryje

Lgtm

github-actions · 2021-10-22T03:25:46Z

Ephemeral environment shutdown and build artifacts deleted.

inital fix

4748e6c

pkdotson requested a review from michael-s-molina October 8, 2021 23:41

superset-github-bot bot added the preset-io label Oct 8, 2021

pull-request-size bot added the size/XS label Oct 8, 2021

geido reviewed Oct 11, 2021

View reviewed changes

...end/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx Outdated Show resolved Hide resolved

remove content wrapper

530eab0

pull-request-size bot added size/S and removed size/XS labels Oct 11, 2021

allow dropdown to overflow in long chart

8c3b0c1

pull-request-size bot added size/M and removed size/S labels Oct 14, 2021

pkdotson closed this Oct 14, 2021

pkdotson reopened this Oct 14, 2021

michael-s-molina reviewed Oct 14, 2021

View reviewed changes

...c/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx Show resolved Hide resolved

michael-s-molina reviewed Oct 14, 2021

View reviewed changes

...c/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx Outdated Show resolved Hide resolved

michael-s-molina reviewed Oct 14, 2021

View reviewed changes

...end/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx Outdated Show resolved Hide resolved

pkdotson mentioned this pull request Oct 14, 2021

chore: add prop to SuperChart for select apache-superset/superset-ui#1408

Merged

pkdotson added 2 commits October 15, 2021 09:33

Merge branch 'master' of https://github.com/preset-io/superset into f…

e2145b5

…ix-popover-dropdown

only pass through filtercontrol

28ea985

pull-request-size bot added size/S and removed size/M labels Oct 15, 2021

pkdotson requested review from geido and michael-s-molina October 15, 2021 20:44

junlincc requested review from graceguo-supercat and junlincc October 15, 2021 23:13

junlincc reviewed Oct 15, 2021

View reviewed changes

kgabryje reviewed Oct 18, 2021

View reviewed changes

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx Outdated Show resolved Hide resolved

michael-s-molina reviewed Oct 18, 2021

View reviewed changes

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx Outdated Show resolved Hide resolved

pkdotson mentioned this pull request Oct 18, 2021

chore: add ref type for superchart apache-superset/superset-ui#1411

Merged

add ref and pass to child

b1abda4

pull-request-size bot added size/M and removed size/S labels Oct 18, 2021

pkdotson added 4 commits October 18, 2021 21:42

fix bug

5f863da

Merge branch 'master' of https://github.com/preset-io/superset into f…

96d3562

…ix-popover-dropdown

fix lint

dc671ab

add type

3d5f23b

michael-s-molina reviewed Oct 20, 2021

View reviewed changes

...end/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx Outdated Show resolved Hide resolved

remove code

d92867d

pkdotson requested review from michael-s-molina and kgabryje October 20, 2021 16:14

kgabryje reviewed Oct 21, 2021

View reviewed changes

pkdotson added 2 commits October 21, 2021 08:49

add currrent param

8a15259

Merge branch 'fix-popover-dropdown' of https://github.com/preset-io/s…

8cf017b

…uperset into fix-popover-dropdown

kgabryje approved these changes Oct 21, 2021

View reviewed changes

rusackas merged commit 824e62b into apache:master Oct 22, 2021

rusackas deleted the fix-popover-dropdown branch October 22, 2021 22:56

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.5.0 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: dropdown placement for cascading filters popover #17046

fix: dropdown placement for cascading filters popover #17046

pkdotson commented Oct 8, 2021

codecov bot commented Oct 9, 2021 •

edited

geido commented Oct 11, 2021

github-actions bot commented Oct 11, 2021

michael-s-molina commented Oct 11, 2021

rusackas commented Oct 12, 2021

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 14, 2021

pkdotson commented Oct 15, 2021

github-actions bot commented Oct 15, 2021

junlincc left a comment

pkdotson commented Oct 19, 2021

github-actions bot commented Oct 19, 2021

kgabryje Oct 21, 2021

kgabryje left a comment

github-actions bot commented Oct 22, 2021

fix: dropdown placement for cascading filters popover #17046

fix: dropdown placement for cascading filters popover #17046

Conversation

pkdotson commented Oct 8, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Oct 9, 2021 • edited

Codecov Report

geido commented Oct 11, 2021

github-actions bot commented Oct 11, 2021

michael-s-molina commented Oct 11, 2021

rusackas commented Oct 12, 2021

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 14, 2021

pkdotson commented Oct 15, 2021

github-actions bot commented Oct 15, 2021

junlincc left a comment

Choose a reason for hiding this comment

pkdotson commented Oct 19, 2021

github-actions bot commented Oct 19, 2021

kgabryje Oct 21, 2021

Choose a reason for hiding this comment

kgabryje left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 22, 2021

codecov bot commented Oct 9, 2021 •

edited