fix(select): fix typing for customLabel

[ktmud]

SUMMARY

Typing for option.customLabel in the Select component is not correctly applied because it extended the wrong source type. This should fix it. No changes to code functionalities whatsoever.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

.customLabel is any where it was referenced:

After

.customLabel is ReactNode

TESTING INSTRUCTIONS

CI

ADDITIONAL INFORMATION

• Has associated issue: this issue was caught while I was working on feat: remove loading indicator when typing in select #18799
• 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]

Codecov Report

Merging #18952 (b9d5b8a) into master (0994217) will decrease coverage by 0.01%.
The diff coverage is 82.75%.

❗ Current head b9d5b8a differs from pull request most recent head 75908ca. Consider uploading reports for the commit 75908ca to get more accurate results

@@            Coverage Diff             @@
##           master   #18952      +/-   ##
==========================================
- Coverage   66.39%   66.37%   -0.02%     
==========================================
  Files        1641     1641              
  Lines       63503    63518      +15     
  Branches     6418     6422       +4     
==========================================
+ Hits        42162    42163       +1     
- Misses      19681    19694      +13     
- Partials     1660     1661       +1     

Flag	Coverage Δ
javascript	51.01% <80.76%> (+0.01%)	⬆️
mysql	?

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

Impacted Files	Coverage Δ
...perset-ui-chart-controls/src/utils/D3Formatting.ts	100.00% <ø> (ø)
...reset-chart-deckgl/src/utilities/Shared_DeckGL.jsx	84.21% <ø> (ø)
...acy-preset-chart-deckgl/src/utilities/controls.jsx	11.11% <ø> (-8.89%)	⬇️
superset-frontend/src/SqlLab/reducers/sqlLab.js	33.15% <ø> (ø)
...perset-frontend/src/addSlice/AddSliceContainer.tsx	61.76% <0.00%> (ø)
...et-frontend/src/components/TableSelector/index.tsx	62.65% <ø> (ø)
...l/AdhocFilterEditPopoverSimpleTabContent/index.tsx	65.07% <0.00%> (ø)
...d/src/SqlLab/components/TabbedSqlEditors/index.jsx	57.44% <75.00%> (+1.05%)	⬆️
superset-frontend/src/components/Select/Select.tsx	87.35% <90.90%> (ø)
...ges/superset-ui-core/src/query/buildQueryObject.ts	100.00% <100.00%> (ø)
... and 7 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 0994217...75908ca. Read the comment docs.

[michael-s-molina]

Just a nit, but do you think we could make SelectValue internal instead of exporting it? I can see the use cases for the other types but I think when we are using a Select we already defined if their values will be RawValue or LabeledValue. Considering that we are not mixing the types for the same Select.

[ktmud]

I'm fine with either way. But ideally the Select component itself should probably be generic. Similar to this: https://github.com/ktmud/chakra-ui-select/blob/dee16e260ba4bd64cfead81cf6ab4cf2af12877f/Select/Select.tsx#L75-L78

[michael-s-molina]

I like the use of generics as you mentioned. Maybe it can be a future improvement.

[michael-s-molina]

The idea when introducing the customLabel prop was that label would always be a string that could be searched/compared and customLabel would be used when you want a React.Node. The hasOption function is comparing the labels as strings. One example of this use is the tables select where label is the name of the table, customLabel is a node with an icon and the name, and value is the id of the table.

[ktmud]

I understand the intention but changing it to ReactNode will cause too many incompatibility in other references of the Select component. Ideally we should probably refactor customLabel to something akin to optionalRenderer. It also doesn't feel right for a data fetching API (the options promise) to return ReactNode. Data fetching and rendering should be two separate things.

[michael-s-molina]

Thank you so much for the improvements @ktmud! I left a couple of comments.

[ktmud]

Closing for not in favor of refactor out customLabel later.