chore: Improves the Select component UI/UX - iteration 4 #15480

michael-s-molina · 2021-06-30T17:10:21Z

SUMMARY

Improves the Select component UI/UX - iteration 4.

Migrates the native filters Select components to the new Select
Fixes some bugs of the Select component related to searching and selection
Simplifies the Select API for the async non-paginated version

Touched components:

src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
src/filters/components/common.ts
src/filters/components/GroupBy/GroupByFilterPlugin.tsx
src/filters/components/Select/SelectFilterPlugin.tsx
src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx

@rusackas @villebro

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

screen-recording-2021-07-02-at-33700-pm_lKsESmw1.mp4

TESTING INSTRUCTIONS

Enter in a dashboard
Open the filter bar
Open the native filter modal
Check the selects of the native filter modal
After adding some filters check the selects in the filter bar

ADDITIONAL INFORMATION

Has associated issue:
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

michael-s-molina · 2021-07-06T11:58:53Z

@jinghua-qa @junlincc @rosemarie-chiu @rusackas Can you help me test the native filters with the new select?

michael-s-molina · 2021-07-06T12:23:38Z

/testenv up

github-actions · 2021-07-06T12:25:22Z

@michael-s-molina Ephemeral environment spinning up at http://54.186.197.32:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

geido

The code is looking good! Just looking for the CI to pass and for the env with native filters ON for some manual testing

...rontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts

github-actions · 2021-07-07T15:34:32Z

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

codecov · 2021-07-07T17:59:50Z

Codecov Report

Merging #15480 (1b8cc4d) into master (9a14aed) will increase coverage by 0.05%.
The diff coverage is 69.29%.

@@            Coverage Diff             @@
##           master   #15480      +/-   ##
==========================================
+ Coverage   77.06%   77.12%   +0.05%     
==========================================
  Files         983      983              
  Lines       51620    51645      +25     
  Branches     6992     6991       -1     
==========================================
+ Hits        39783    39833      +50     
+ Misses      11612    11588      -24     
+ Partials      225      224       -1

Flag	Coverage Δ
javascript	`71.81% <69.29%> (+0.12%)`	⬆️

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

Impacted Files	Coverage Δ
...nfigModal/FiltersConfigForm/getControlItemsMap.tsx	`85.96% <ø> (ø)`
...filters/components/GroupBy/GroupByFilterPlugin.tsx	`0.00% <0.00%> (ø)`
...s/components/TimeColumn/TimeColumnFilterPlugin.tsx	`0.00% <0.00%> (ø)`
...ers/components/TimeGrain/TimeGrainFilterPlugin.tsx	`0.00% <0.00%> (ø)`
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	`73.76% <66.66%> (+0.17%)`	⬆️
...ersConfigModal/FiltersConfigForm/DatasetSelect.tsx	`77.50% <77.50%> (ø)`
superset-frontend/src/components/Select/utils.ts	`92.30% <85.71%> (+4.80%)`	⬆️
...tersConfigModal/FiltersConfigForm/ColumnSelect.tsx	`96.15% <100.00%> (ø)`
...ters/FiltersConfigModal/FiltersConfigForm/utils.ts	`90.47% <100.00%> (+1.58%)`	⬆️
...src/filters/components/Range/RangeFilterPlugin.tsx	`88.23% <100.00%> (ø)`
... and 13 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 9a14aed...1b8cc4d. Read the comment docs.

rusackas · 2021-07-09T04:54:16Z

Hmmm... something seems amiss, if I'm not mistaken. If I go to the Sales Dashboard, and create a new filter, the default dataset should be "cleaned_sales_data" but the Select now shows "27"

"cleaned_sales_data" doesn't show up in the options list, but I can search for it. When I select it, and create a filter, like so...

I get this error in the filter bar:

However, the value filter DOES seem to work fine in other dashboards... which is confusing. The above issue is happening on the ephemeral env. I'll try it on a local build and see if I get the same results...

rusackas · 2021-07-09T05:27:16Z

Well hmm... on my local build, with the Sales Dashboard, I see the correct data source in the Select. However, I can't create functional native filters (attempted value and numeric range) on that dashboard. I get that "Cannot load filter" error. On other dashboards, things are working seemingly fine. Something is amiss, but I'm not yet sure if it's the data source, the dashboard, or the feature(s).

michael-s-molina · 2021-07-09T12:35:39Z

@rusackas Thanks for testing this. I'll investigate the problem with the Sales Dashboard.

michael-s-molina · 2021-07-19T11:36:15Z

@rusackas I'll do the suggested changes in a follow-up PR. @geido Can we get your approval as well?

geido · 2021-07-19T11:40:42Z

Sure @michael-s-molina . I'll do some manual testing as well today and come back to you.

geido

The latest changes to the code look good. Just a nit below. Now going for manual testing

...src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx

...rc/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx

geido

Hey @michael-s-molina please find the results of my manual testing efforts below:

I have noticed a problem with the creation of new options. It is now allowing for the creation of existing options, which would then make unselecting any of the duplicated options impossible. It gets stuck.

I don't see my newly created option "test" in the dropdown in multiple mode

I don't see my newly created option in the dropdown in single mode. I think this used to work consistently with the single mode ON and allowNewOptions OFF, where the selected option is highlighted at top of the options list

I am not sure if this is related to this PR but I am unable to create hierarchical filters. The child filter never appears anywhere. Only the parent is showing up. When I go back to editing, the hierarchical option is always unchecked as if it wasn't saved.

After adding a new filter, the previously selected options of the existing filters are not selected anymore. This may be because I haven't clicked "Apply", however, as a user I would expect that my filters remain filled as I add or delete other filters, even before applying (I am fine if this needs to be discussed outside of the scope of this PR)

michael-s-molina · 2021-07-20T12:32:36Z

@geido @rusackas @junlincc

I have noticed a problem with the creation of new options. It is now allowing for the creation of existing options, which would then make unselecting any of the duplicated options impossible. It gets stuck.

I don't see my newly created option "test" in the dropdown in multiple mode

I don't see my newly created option in the dropdown in single mode. I think this used to work consistently with the single mode ON and allowNewOptions OFF, where the selected option is highlighted at top of the options list

After investigation, I discovered that these were not bugs in the new Select component but problems in the SelectFilterPlugin component. SelectFilterPlugin contained duplicated logic already present in the Select component. I removed the duplicated logic.

I am not sure if this is related to this PR but I am unable to create hierarchical filters. The child filter never appears anywhere. Only the parent is showing up. When I go back to editing, the hierarchical option is always unchecked as if it wasn't saved.

This was in fact related to this PR. Fixed.

After adding a new filter, the previously selected options of the existing filters are not selected anymore. This may be because I haven't clicked "Apply", however, as a user I would expect that my filters remain filled as I add or delete other filters, even before applying (I am fine if this needs to be discussed outside of the scope of this PR)

This one is by design, until now we only keep the values if the user clicks on "Apply". We can change this behavior if the product team agrees but if that's the case we need to open another low priority issue.

@rusackas @geido I also applied all your suggestions.

@geido Thanks for testing the features. I updated the environment and requested your review again.

michael-s-molina · 2021-07-20T12:32:52Z

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true

github-actions · 2021-07-20T12:37:31Z

@michael-s-molina Ephemeral environment spinning up at http://52.36.69.174:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

geido · 2021-07-20T15:24:27Z

Hey @michael-s-molina. Thanks for the fixes. There's only one problem that I could find. See below

When I choose Time Grain and a default value, it won't allow me to select the option Original value. It fails to select it. This happens on both the modal and the left sidebar

michael-s-molina · 2021-07-20T16:26:22Z

@geido This problem is already happening on master so I'll open another PR to fix it so we can merge this one.

github-actions · 2021-07-20T16:30:03Z

Ephemeral environment shutdown and build artifacts deleted.

#15856) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> * feat: toggle the ReportModal Icon based on user permissions (#15780) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * added testing props * cleaned up rebase * changed name and type Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * feat: Begin incorporation of email report modal to Charts (#15793) * Add email report modal to Charts * Fix px themes * feat: fetch UI specific reports (#15785) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * created Api call * added click logic * made the fetch report into a action/reducer * abstracted report action * revision * added reportState to reducer * reports conditions * revisions * revisions Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * fix: Edit physical dataset from the Edit Dataset modal (#15770) * Remove unnecessary onChange * Remove confliciting onChange * Revert unnecessary change * Enhance and fix tests * feat: add show columns to Reports model (#15712) * added logic for creation_method * revisions * added index * Update superset/migrations/versions/3317e9248280_add_creation_method_to_reports_model.py * filters * search columns updated * fix: margin right on warning icon to 8px (#15715) * changed margin right on warning icon to 8px * fixed to grid units from pixels * feat: adding Progress Bar to Benchmark script (#15719) * rough draft of benchmark script * revisions * revisions * rough draft of benchmark script * revisions * Update requirements/development.in Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset/utils/mock_data.py Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * more revisions Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * fix: migration downgrade references wrong column (#15791) * fix(dashboard): Add resize handles to right and bottom of component (#15778) * fix(dashboard): Add resize handles to right and bottom of component * Fix test * chore: Add tags to the new viz gallery (#15734) * chore: add tags to gallery * fix UT * fix lint * redesign tags filter * chore: change to Highly-used and fix some css * fix UT Co-authored-by: stephenLYZ <750188453@qq.com> * chore: bump 0.17.70 (#15795) * docs: Adding Sunbird to users list (#15794) * chore: Improves the Select component UI/UX - iteration 4 (#15480) * Add z-index only on maximize (#15800) * chore: remove `retry` dependency in favor of `backoff` (#15788) * chore: remove retry dep in favor of backoff * Fix lint * fix: create fk model in benchmark script (#15804) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * Working on onSave functionality * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> * feat: toggle the ReportModal Icon based on user permissions (#15780) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * added testing props * cleaned up rebase * changed name and type Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * feat: fetch UI specific reports (#15785) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * created Api call * added click logic * made the fetch report into a action/reducer * abstracted report action * revision * added reportState to reducer * reports conditions * revisions * revisions Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * Dashboard onSave progress * More onSave/create progress * Dashboard POST working! * Dashboard POST relocated to redux * POST now also working in Charts * making linter happy * linter again Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> Co-authored-by: Geido <60598000+geido@users.noreply.github.com> Co-authored-by: stellalc7 <stellalc7@gmail.com> Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com> Co-authored-by: Yongjie Zhao <yongjie.zhao@gmail.com> Co-authored-by: stephenLYZ <750188453@qq.com> Co-authored-by: Kumar <kumarks1122@gmail.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-github-bot bot added the Turing label Jun 30, 2021

pull-request-size bot added the size/L label Jun 30, 2021

michael-s-molina requested review from geido and removed request for geido June 30, 2021 17:13

michael-s-molina force-pushed the new-select-4 branch 3 times, most recently from 55c02fa to 3b88f52 Compare July 2, 2021 18:29

pull-request-size bot added size/XL and removed size/L labels Jul 2, 2021

michael-s-molina force-pushed the new-select-4 branch 2 times, most recently from a4b340b to 5f9c00c Compare July 6, 2021 11:56

apache deleted a comment from github-actions bot Jul 6, 2021

michael-s-molina marked this pull request as ready for review July 6, 2021 12:00

apache deleted a comment from github-actions bot Jul 6, 2021

geido reviewed Jul 7, 2021

View reviewed changes

...rontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts Outdated Show resolved Hide resolved

michael-s-molina force-pushed the new-select-4 branch from 5f9c00c to d3a97f4 Compare July 7, 2021 17:41

michael-s-molina requested a review from geido July 8, 2021 12:55

michael-s-molina force-pushed the new-select-4 branch from d3a97f4 to cf55caf Compare July 14, 2021 19:19

geido approved these changes Jul 19, 2021

View reviewed changes

...src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx Outdated Show resolved Hide resolved

...rc/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx Outdated Show resolved Hide resolved

geido requested changes Jul 19, 2021

View reviewed changes

chore: Improves the Select component UI/UX - iteration 4

1b8cc4d

michael-s-molina force-pushed the new-select-4 branch from a208f90 to 1b8cc4d Compare July 20, 2021 12:13

michael-s-molina requested review from geido and removed request for kgabryje, simcha90, amitmiran137 and suddjian July 20, 2021 12:33

geido approved these changes Jul 20, 2021

View reviewed changes

michael-s-molina merged commit ad773ff into apache:master Jul 20, 2021

lyndsiWilliams pushed a commit to preset-io/superset that referenced this pull request Jul 26, 2021

chore: Improves the Select component UI/UX - iteration 4 (apache#15480)

f1bac8b

cccs-RyanS pushed a commit to CybercentreCanada/superset that referenced this pull request Dec 17, 2021

chore: Improves the Select component UI/UX - iteration 4 (apache#15480)

7dff162

QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 29, 2021

chore: Improves the Select component UI/UX - iteration 4 (apache#15480)

30d233d

cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024

chore: Improves the Select component UI/UX - iteration 4 (apache#15480)

77627c7

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Improves the Select component UI/UX - iteration 4 #15480

chore: Improves the Select component UI/UX - iteration 4 #15480

michael-s-molina commented Jun 30, 2021 •

edited

Loading

michael-s-molina commented Jul 6, 2021 •

edited

Loading

michael-s-molina commented Jul 6, 2021

github-actions bot commented Jul 6, 2021

geido left a comment •

edited

Loading

github-actions bot commented Jul 7, 2021

codecov bot commented Jul 7, 2021 •

edited

Loading

rusackas commented Jul 9, 2021 •

edited

Loading

rusackas commented Jul 9, 2021 •

edited

Loading

michael-s-molina commented Jul 9, 2021

michael-s-molina commented Jul 19, 2021

geido commented Jul 19, 2021

geido left a comment •

edited

Loading

geido left a comment •

edited

Loading

michael-s-molina commented Jul 20, 2021

michael-s-molina commented Jul 20, 2021

github-actions bot commented Jul 20, 2021

geido commented Jul 20, 2021

michael-s-molina commented Jul 20, 2021

github-actions bot commented Jul 20, 2021

chore: Improves the Select component UI/UX - iteration 4 #15480

chore: Improves the Select component UI/UX - iteration 4 #15480

Conversation

michael-s-molina commented Jun 30, 2021 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

michael-s-molina commented Jul 6, 2021 • edited Loading

michael-s-molina commented Jul 6, 2021

github-actions bot commented Jul 6, 2021

geido left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jul 7, 2021

codecov bot commented Jul 7, 2021 • edited Loading

Codecov Report

rusackas commented Jul 9, 2021 • edited Loading

rusackas commented Jul 9, 2021 • edited Loading

michael-s-molina commented Jul 9, 2021

michael-s-molina commented Jul 19, 2021

geido commented Jul 19, 2021

geido left a comment • edited Loading

Choose a reason for hiding this comment

geido left a comment • edited Loading

Choose a reason for hiding this comment

michael-s-molina commented Jul 20, 2021

michael-s-molina commented Jul 20, 2021

github-actions bot commented Jul 20, 2021

geido commented Jul 20, 2021

michael-s-molina commented Jul 20, 2021

github-actions bot commented Jul 20, 2021

michael-s-molina commented Jun 30, 2021 •

edited

Loading

michael-s-molina commented Jul 6, 2021 •

edited

Loading

geido left a comment •

edited

Loading

codecov bot commented Jul 7, 2021 •

edited

Loading

rusackas commented Jul 9, 2021 •

edited

Loading

rusackas commented Jul 9, 2021 •

edited

Loading

geido left a comment •

edited

Loading

geido left a comment •

edited

Loading