#1640: Turn SelectorSelectorWidget into a modal

[fregante]

What does this PR do?

• Fixes https://github.com/pixiebrix/pixiebrix-extension/issues/1640
• Similar problem and solution as https://github.com/pixiebrix/pixiebrix-extension/issues/2783

This is a simple solution to this issue, it matches the experience offered by the initial "Add -> Button" feature:

Add -> Button feature (pre-existing)

SelectorSelectorWidget (This PR)

https://user-images.githubusercontent.com/1402241/195785491-73afe016-8c05-4d7e-9b79-5bd6b73f5783.mov

Future Work

• [ ] Match style/wording of InsertMenuItemPane or merge into single component
• [ ] Move the multi-selector picker into this new overlay (avoids style conflicts + moves the focus back into the editor)
• [ ] https://github.com/pixiebrix/pixiebrix-extension/issues/3942#issuecomment-1236172382

Also:

• [ ] Rename to SelectorPickerWidget

Checklist

• [x] Add tests
• [x] Run Storybook and manually confirm that all stories are working
• [x] Designate a primary reviewer: @jcforest

[codecov[bot]]

Codecov Report

Merging #4451 (71391d2) into main (f078ed9) will increase coverage by 0.00%. The diff coverage is 40.00%.

@@           Coverage Diff           @@
##             main    #4451   +/-   ##
=======================================
  Coverage   50.00%   50.00%           
=======================================
  Files         907      907           
  Lines       26746    26750    +4     
  Branches     5442     5444    +2     
=======================================
+ Hits        13373    13376    +3     
- Misses      12446    12447    +1     
  Partials      927      927           

Impacted Files	Coverage Δ
src/pageEditor/fields/SelectorSelectorWidget.tsx	63.95% <25.00%> (+0.53%)	:arrow_up:
src/pageEditor/components/Centered.tsx	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[twschiller]

Thanks for the prototype @fregante . We did consider a modal, but decided not to use it for a couple reasons: https://www.notion.so/pixiebrix/Multi-element-Selector-Inference-15c6836a77d948f686398eef9e1b2e6e. See "UX Alternative/Considerations":

• Cover the Data Panel Preview pane.
• On small screens, extension creators undock the Page Editor. (So the Page Editor is in a separate window)

cc @corinnemayans

[fregante]

• Cover the Data Panel Preview pane.

This doesn't seem to be useful while the user is selecting items since it's not updated live, right? From my understanding, the operation should have a clear start and end, it shouldn't just be open indefinitely, so it's already technically modal.

• On small screens, extension creators undock the Page Editor. (So the Page Editor is in a separate window)

Gotcha, I think you're referring to my "Future work" proposal, what you're saying doesn't apply to this PR. Under this light, this PR makes even more sense since the user won't see that the page is awaiting their input; here's what it looks like before this PR:

https://user-images.githubusercontent.com/1402241/195979699-8df6f9f3-84d6-41f0-b106-09f6a91b42f3.mov

[twschiller]

This doesn't seem to be useful while the user is selecting items since it's not updated live, right?

Correct, it's not currently updated live. But ideally we'd move toward a world where can give a live preview (especially for data extraction)

Gotcha, I think you're referring to my "Future work" proposal, what you're saying doesn't apply to this PR.

Yep, that's correct

Under this light, this PR makes even more sense since the user won't see that the page is awaiting their input

In practice I haven't seen these be a problem. But I agree having some sort of indicator on the mode would be helpful when undocked

Overall, our plan is to do some user testing once we have the Selection Tool to better understand/explore user success considerations for selection