chore: Select component refactoring - SelectAsyncControl - Iteration 5 #16609

geido · 2021-09-06T16:53:40Z

SUMMARY

This PR replaces the react-select Select with the Antdesign Select in the SelectAsyncControl component.

BEFORE/AFTER

SelectAsyncControl_before.mp4

SelectAsyncControl_after.mp4

TESTING INSTRUCTIONS

Visit Explore
Click on "Edit dataset"
Click on "Settings"
Change owners and observe the behavior of the Select

ADDITIONAL INFORMATION

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

…e/select-component-refactoring-selectasynccontrol-iteration-5

codecov · 2021-09-06T17:20:22Z

Codecov Report

Merging #16609 (1c7ca57) into master (3f0756f) will decrease coverage by 0.00%.
The diff coverage is 79.48%.

@@            Coverage Diff             @@
##           master   #16609      +/-   ##
==========================================
- Coverage   76.93%   76.92%   -0.01%     
==========================================
  Files        1030     1030              
  Lines       55023    55043      +20     
  Branches     7463     7473      +10     
==========================================
+ Hits        42332    42344      +12     
- Misses      12438    12445       +7     
- Partials      253      254       +1

Flag	Coverage Δ
javascript	`70.91% <79.48%> (-0.01%)`	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/components/Select/Select.tsx	`92.25% <50.00%> (-0.30%)`	⬇️
...e/components/controls/SelectAsyncControl/index.tsx	`81.08% <81.08%> (ø)`
...ontend/src/dashboard/components/menu/HoverMenu.tsx	`90.00% <0.00%> (-10.00%)`	⬇️
...uperset-frontend/src/components/Menu/MenuRight.tsx	`91.22% <0.00%> (-1.08%)`	⬇️
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	`88.46% <0.00%> (-0.97%)`	⬇️
superset-frontend/src/chart/chartAction.js	`50.47% <0.00%> (-0.49%)`	⬇️
superset-frontend/src/views/menu.tsx	`0.00% <0.00%> (ø)`
...src/dashboard/components/gridComponents/Header.jsx	`100.00% <0.00%> (ø)`
...c/dashboard/components/gridComponents/Markdown.jsx	`83.16% <0.00%> (ø)`
...d/components/DashboardBuilder/DashboardBuilder.tsx	`90.17% <0.00%> (ø)`

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 3f0756f...1c7ca57. Read the comment docs.

…e/select-component-refactoring-selectasynccontrol-iteration-5

rusackas · 2021-09-13T03:50:24Z

superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx

+
+interface SelectAsyncControlProps extends SelectAsyncProps {
+  addDangerToast: (error: string) => void;
+  ariaLabel?: string;


Maybe at some point, we should make this required! 😄

True. However, we would need to act on superset-ui as well. ariaLabel is required for the Select component itself.

…e/select-component-refactoring-selectasynccontrol-iteration-5

michael-s-molina · 2021-09-17T11:40:27Z

/testenv up

github-actions · 2021-09-17T11:42:13Z

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

michael-s-molina · 2021-09-17T12:20:09Z

superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx

+  value,
+  ...props
+}: SelectAsyncControlProps) => {
+  const [options, setOptions] = useState<OptionsType>([]);


Do we need to keep the options state? Can't we just pass loadOptions directly to the Select?

There is a mutator function that is expecting to get an object with a result property. In order to make sure the mutator gets the right data this is the shortest path. Otherwise, we would need to wait for the options to be loaded by the Select component itself and then mutate those options, but that would require changing the mutator functions everywhere, also in superset-ui. I didn't want to make changes to the superset-ui a dependency for this PR.

michael-s-molina · 2021-09-17T12:21:10Z

superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx

+  }, [dataEndpoint, mutator]);
+
+  return (
+    <div data-test="SelectAsyncControl">


Do we need this div?

superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx

…ontrol/index.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

villebro

LGTM with one minor comment about the type checking code

villebro · 2021-09-21T11:30:39Z

superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx

+    if (Array.isArray(val)) {
+      const values = val.map(v =>
+        typeof v === 'object' && 'value' in v ? v.value : v,
+      );
+      onChangeVal = values as string[] | number[];
+    }
+    if (typeof val === 'object' && (val as LabeledValue)?.value) {
+      onChangeVal = (val as LabeledValue).value;
+    }


Could be nice to replace these type checks with type guards (I notice there's quite a few similar ones for AntdLabeledValue in Select/Select.tsx that could benefit from type guards, too)

This is a great suggestion @villebro. For now, I implemented it here but I do agree we should go back to the Select component and add type guards wherever it makes sense.

github-actions · 2021-10-07T11:21:02Z

Ephemeral environment shutdown and build artifacts deleted.

apache#16609) * Refactor Select * Implement onError * Separate async request * Lint * Allow clear * Improve type * Reconcile with Select latest changes * Fix handleOnChange * Clean up * Add placeholder * Accept null values * Update superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> * Clean up * Implement type guard * Fix lint * Catch error within loadOptions Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

#16609) * Refactor Select * Implement onError * Separate async request * Lint * Allow clear * Improve type * Reconcile with Select latest changes * Fix handleOnChange * Clean up * Add placeholder * Accept null values * Update superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> * Clean up * Implement type guard * Fix lint * Catch error within loadOptions Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

apache#16609) * Refactor Select * Implement onError * Separate async request * Lint * Allow clear * Improve type * Reconcile with Select latest changes * Fix handleOnChange * Clean up * Add placeholder * Accept null values * Update superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> * Clean up * Implement type guard * Fix lint * Catch error within loadOptions Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

geido added 6 commits September 6, 2021 17:56

Refactor Select

6e5712f

Merge branch 'master' of https://github.com/apache/superset into chor…

f2e1be6

…e/select-component-refactoring-selectasynccontrol-iteration-5

Implement onError

4c4d639

Separate async request

e67c8ad

Lint

dbb8de4

Allow clear

0ea923f

geido added hold:testing! On hold for testing risk:refactor High risk as it involves large refactoring work labels Sep 6, 2021

geido added this to In progress in AntD Transition (SIP-48) via automation Sep 6, 2021

superset-github-bot bot added the Flexiana label Sep 6, 2021

pull-request-size bot added the size/L label Sep 6, 2021

geido moved this from In progress to In review in AntD Transition (SIP-48) Sep 6, 2021

geido requested a review from michael-s-molina September 6, 2021 16:54

geido added 2 commits September 7, 2021 16:53

Merge branch 'master' of https://github.com/apache/superset into chor…

86e7650

…e/select-component-refactoring-selectasynccontrol-iteration-5

Improve type

9e2e7e4

rusackas reviewed Sep 13, 2021

View reviewed changes

geido added 4 commits September 16, 2021 12:38

Merge branch 'master' of https://github.com/apache/superset into chor…

b7c53da

…e/select-component-refactoring-selectasynccontrol-iteration-5

Reconcile with Select latest changes

a2de555

Fix handleOnChange

825350a

Clean up

7136a57

geido requested review from michael-s-molina, etr2460 and ktmud and removed request for michael-s-molina September 16, 2021 13:51

geido removed the hold:testing! On hold for testing label Sep 16, 2021

geido added 2 commits September 16, 2021 19:42

Add placeholder

96e8d3f

Accept null values

4cd0ea1

michael-s-molina reviewed Sep 17, 2021

View reviewed changes

junlincc added hold:testing! On hold for testing test_priority:high labels Sep 17, 2021

suddjian reviewed Sep 20, 2021

View reviewed changes

superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx Outdated Show resolved Hide resolved

geido and others added 2 commits September 21, 2021 13:54

Update superset-frontend/src/explore/components/controls/SelectAsyncC…

92f3a6c

…ontrol/index.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

Clean up

5b11c2f

villebro approved these changes Sep 21, 2021

View reviewed changes

geido added 2 commits September 21, 2021 12:20

Implement type guard

164b9aa

Fix lint

045887c

geido mentioned this pull request Sep 27, 2021

Owner names not rendered in React Datasource editor #11680

Closed

3 tasks

geido added 2 commits October 4, 2021 15:28

Merge

2c754d3

Catch error within loadOptions

1c7ca57

geido merged commit a782a62 into apache:master Oct 7, 2021

eschutho added the v1.4 label Nov 22, 2021

mistercrunch added 🍒 1.4.0 🍒 1.4.1 🍒 1.4.2 🏷️ 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

chore: Select component refactoring - SelectAsyncControl - Iteration 5 #16609

chore: Select component refactoring - SelectAsyncControl - Iteration 5 #16609

geido commented Sep 6, 2021

codecov bot commented Sep 6, 2021 •

edited

Loading

rusackas Sep 13, 2021

geido Sep 16, 2021

michael-s-molina commented Sep 17, 2021

github-actions bot commented Sep 17, 2021

michael-s-molina Sep 17, 2021

geido Sep 17, 2021 •

edited

Loading

michael-s-molina Sep 17, 2021

villebro left a comment

villebro Sep 21, 2021

geido Sep 21, 2021

github-actions bot commented Oct 7, 2021

chore: Select component refactoring - SelectAsyncControl - Iteration 5 #16609

chore: Select component refactoring - SelectAsyncControl - Iteration 5 #16609

Conversation

geido commented Sep 6, 2021

SUMMARY

BEFORE/AFTER

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Sep 6, 2021 • edited Loading

Codecov Report

rusackas Sep 13, 2021

Choose a reason for hiding this comment

geido Sep 16, 2021

Choose a reason for hiding this comment

michael-s-molina commented Sep 17, 2021

github-actions bot commented Sep 17, 2021

michael-s-molina Sep 17, 2021

Choose a reason for hiding this comment

geido Sep 17, 2021 • edited Loading

Choose a reason for hiding this comment

michael-s-molina Sep 17, 2021

Choose a reason for hiding this comment

villebro left a comment

Choose a reason for hiding this comment

villebro Sep 21, 2021

Choose a reason for hiding this comment

geido Sep 21, 2021

Choose a reason for hiding this comment

github-actions bot commented Oct 7, 2021

codecov bot commented Sep 6, 2021 •

edited

Loading

geido Sep 17, 2021 •

edited

Loading