feat(vision): add "save result as json/csv" buttons

[RostiMelk]

Description

Added "save result as" buttons to Vision result when a result is present. See bottom right corner of screenshot.

What to review

• Check that result is properly formatted before saving
• Show we say "Download as" or "Save as"?
• Are i18n names up to satisfaction?

Testing

• Query a document type
• Click save as ...

Notes for release

You can now save the Sanity vision result as JSON and CSV after querying

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview		Apr 27, 2024 1:00am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 27, 2024 1:00am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 27, 2024 1:00am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Apr 27, 2024 1:00am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Apr 27, 2024 1:04 AM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	35s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	27s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	13s	4	2	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	35s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 4s	15	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 6s	18	0	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	20s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	22s	9	0	0

[sjelfull]

Looks great! I noticed that CSV exports breaks if a column includes something non-string, like an object. Could you test it with different types of data and make sure they are encoded correctly?

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher

🚮 Removed packages: npm/archiver@7.0.1, npm/arrify@1.0.1, npm/arrify@2.0.1, npm/async-mutex@0.4.1, npm/boxen@4.2.0, npm/cac@6.7.14

View full report↗︎

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

[rexxars]

I think using blob urls is a little safer here than using data URLs (especially when not base64 encoded). I've made a PR that changes to using those instead - let me know what you think.

There is one change I'd like to see here; we do not encourage splitting internationalized strings into different parts, which we do here:

1. "Save result as"
2. "CSV" / "JSON"

The rationale is that some languages may need to put the format at the start or middle of the sentence, which this does not allow for.

What we can do is use the <Translate> component and pass in the format download button as a component, eg:

<Translate
  components={{DownloadFormatButton: JsonButton /* or CsvButton */}}
  i18nKey="result.save-result-as-format"
  t={t}
/>

And have the resource key be:

{
  // ...
  'result.save-result-as-format': 'Save result as <DownloadFormatButton/>'
}

This will allow translators to use the format anywhere they want in the string.

This will need a bit of CSS tweaking, however, since the button would be inline with the rest of the string

[RostiMelk]

@rexxars I've updated the PR with your suggestions now and ended up with the following structure:

<Translate
  components={{
    SaveResultButtons: () => (
      <>
        <SaveJsonButton blobUrl={jsonUrl} />
        <SaveCsvButton blobUrl={csvUrl} />
      </>
    ),
  }}
  i18nKey="result.save-result-as-format"
  t={t}
/>

For the buttons I ended up using a static string (CSV, JSON), as these are file extensions and afaik should not differ between languages(?)

Let me know what you think