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(explore): DndColumnSelect not handling controls with "multi: false" #14737

Merged
merged 3 commits into from
May 24, 2021

Conversation

kgabryje
Copy link
Member

@kgabryje kgabryje commented May 20, 2021

SUMMARY

DndColumnSelect was working correctly only for controls that accept multiple values. When used with controls that had multi: false prop, it displayed a prompt to add more columns and behaved weirdly - sometimes it allowed adding more values, sometimes it replaced the first value with whatever user dropped last. This PR fixes those glitches and unifies the behaviour with with DndMetricSelect - after the first value is added, prompt disappears and adding new columns is disabled.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

118995851-c1518200-b987-11eb-99f0-b7adf922429c.mov

After:

118996113-f4941100-b987-11eb-8970-04bff622fe2c.mov

TEST PLAN

Open a chart that uses DndColumnSelect for single value controls (e.g. Country Map and "ISO 3166-2 CODES" control), verify that only 1 value can be added and there are no glitches when you try to add more values. Please don't mind type label overlapping with column name, the fix is ready in a different PR 🙂

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

CC: @villebro @junlincc

Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

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

LGTM - one small improvement proposal

@@ -77,6 +78,7 @@ export const DndColumnSelect = (props: LabelProps) => {
canDrop={canDrop}
valuesRenderer={valuesRenderer}
accept={DndItemType.Column}
displayGhostButton={multi || optionSelector.values.length === 0}
Copy link
Member

Choose a reason for hiding this comment

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

Bycatch: could we add singular/plural support while we're at it? ghostButtonText={tn('Drop column', 'Drop columns', multi ? 2 : 1)}

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks! I also changed it in DndMetricSelect
image

@codecov
Copy link

codecov bot commented May 20, 2021

Codecov Report

Merging #14737 (29805cc) into master (a9d888a) will decrease coverage by 0.03%.
The diff coverage is 85.71%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #14737      +/-   ##
==========================================
- Coverage   77.54%   77.50%   -0.04%     
==========================================
  Files         959      960       +1     
  Lines       48696    48790      +94     
  Branches     5743     6126     +383     
==========================================
+ Hits        37762    37817      +55     
- Misses      10733    10770      +37     
- Partials      201      203       +2     
Flag Coverage Δ
javascript 72.47% <85.71%> (-0.06%) ⬇️

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

Impacted Files Coverage Δ
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx 60.00% <80.00%> (+1.93%) ⬆️
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx 44.44% <100.00%> (+0.44%) ⬆️
...nd/src/filters/components/Select/transformProps.ts 71.42% <0.00%> (-19.49%) ⬇️
...tend/src/filters/components/Time/transformProps.ts 88.88% <0.00%> (-11.12%) ⬇️
...d/src/filters/components/GroupBy/transformProps.ts 22.22% <0.00%> (-11.12%) ⬇️
...src/filters/components/TimeGrain/transformProps.ts 22.22% <0.00%> (-11.12%) ⬇️
...rc/filters/components/TimeColumn/transformProps.ts 22.22% <0.00%> (-11.12%) ⬇️
...end/src/filters/components/Range/transformProps.ts 12.50% <0.00%> (-7.50%) ⬇️
...nd/src/dashboard/containers/DashboardComponent.jsx 84.84% <0.00%> (-7.46%) ⬇️
...uperset-frontend/src/components/Form/FormLabel.tsx 64.70% <0.00%> (-4.05%) ⬇️
... and 30 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 a9d888a...29805cc. Read the comment docs.

@junlincc junlincc added the explore:drag&drop Related to drag&drop in Explore label May 20, 2021
@junlincc
Copy link
Member

@michael-s-molina @villebro thanks for reviewing! did you test locally? for some reasons i still see the select fields when i pull the PR

@kgabryje
Copy link
Member Author

@michael-s-molina @villebro thanks for reviewing! did you test locally? for some reasons i still see the select fields when i pull the PR

@junlincc Try on Country Map chart. I recorded those videos while implementing dnd controls for all charts (not available on master yet, PR coming in ~30 minutes 🙂)

@kgabryje kgabryje merged commit d03c608 into apache:master May 24, 2021
amitmiran137 pushed a commit to nielsen-oss/superset that referenced this pull request May 25, 2021
* master: (163 commits)
  fix(native-filters): Manage default value of filters by superset (apache#14785)
  fix: Additional ResultSet tests (apache#14741)
  chore: added BasicParametersMixin to Redshift (apache#14752)
  fix: make dataset list sort case insensitive (apache#14528)
  fix: use encodeURIComponent when getting table metadata (apache#14790)
  fix: ensure engine is outside parameters (apache#14787)
  database modal should close on connect with tab layout (apache#14771)
  feat(native-filters): add search all filter options (apache#14710)
  fix: extra query in Dashboard when native filter enabled (apache#14770)
  chore: Improves the native filters UI/UX - iteration 2 (apache#14753)
  fix(native filters): Fix explore state (apache#14779)
  fix(explore): DndColumnSelect not handling controls with "multi: false" (apache#14737)
  feat: Create BigQuery Parameters for DatabaseModal (apache#14721)
  feat: enable user impersonation in GSheets (apache#14767)
  fix: add DB should not say it's Postgres (apache#14766)
  Revert "fix(dashboard): multiple query trigger when native filter enabled (apache#14734)" (apache#14762)
  feat: save database with new dynamic form (apache#14583)
  fix: save non-parameter DBs (apache#14759)
  chore: Removes ColorSchemeControl.less (apache#14199)
  fix(explore): Icons width (apache#14717)
  ...
cccs-RyanS pushed a commit to CybercentreCanada/superset that referenced this pull request Dec 17, 2021
…e" (apache#14737)

* fix(explore): DndColumnSelect not handling controls with multi={false}

* Implement translations for singular and plural cases

* Fix test
QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 29, 2021
…e" (apache#14737)

* fix(explore): DndColumnSelect not handling controls with multi={false}

* Implement translations for singular and plural cases

* Fix test
cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024
…e" (apache#14737)

* fix(explore): DndColumnSelect not handling controls with multi={false}

* Implement translations for singular and plural cases

* Fix test
@mistercrunch 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
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 explore:drag&drop Related to drag&drop in Explore size/S 🚢 1.3.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants