feat(vision): migrate to v3

[rexxars]

Description

• Migrate to typescript
• Move configuration pattern to v3 style
• Use pkg-utils to bundle, update paths to point to correct files
• Use codemirror for query and params editor
• Build codemirror theme from @sanity/ui theme (supporting dark mode)
• Use react-json-inspector instead of react-json-view for results (aligns with desk tool inspector, may use something else later)
• Lazy load tool when used to reduce bundle size
• Drop "no results" logic, instead show result verbatim
• Push toasts to indicate subtle effects, such as copying URL to clipboard, handling pasted URLs, having established a listener etc
• Make URL paste handling more robust (check for dataset existing before using it, handle custom API versions correctly, save to localStorage on complete)
• Show spinner while waiting for first mutation event
• Allow cancelling the ongoing query

Screenshot:

Known issues

• The line number gutter is not fixed to same size in query editor/params editor (see above screenshot)
• The footer overlaps result view when result is larger than viewport height:

Would love some help with these two, and any other UI tweaks that you may find! @hermanwikner maybe? :)

What to review

The entire tool! Params, errors, results, listeners, settings, the inspector, dataset selection, custom api version selection,

Notes for release

• Upgraded @sanity/vision to work with v3

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
test-studio	✅ Ready (Inspect)	Visit Preview	Aug 11, 2022 at 6:16AM (UTC)

1 Ignored Deployment

Name	Status	Preview	Updated
studio-workshop	⬜️ Ignored (Inspect)		Aug 11, 2022 at 6:16AM (UTC)

[rexxars]

• Merely clicking the URL text input copies the url to clipboard - it strikes me as easy to accidentally overwrite the current clipboard content

True - this was the behavior in v2 so I didn't touch it, but I agree it is quite aggressive. Right now you have both the copy link above the field, you can click the actual field, and there is a copy icon/button to the right of the field. Will see if I can change this.

• Love the fact that you can paste an API url and was not aware that you could! It such a neat feature, so maybe it should be more discoverable? Either by adding placeholder/help text or by making the query url field always visible and writeable?

Agreed - it is quite hidden. Would love to get some designers to ponder what an intuitive way of showing this would be. Will leave it as-is for now.

• There's a tiny alignment issue with the Custom API version field in certain widths (see screenshot)

I think this is the same in v2, but will make a task to remind us to fix it!

• The scrollbar underneath the buttons are always visible, no matter how wide the pane is (you might need a mouse connected for the scrollbars to appear):

Ouch, will see if I can address that.

[alex289]

Does this mean Vision v3 is out?

[rexxars]

Does this mean Vision v3 is out?

Sorry, did not see your message until now! It was just released as part of v3.0.0-dev-preview.13