From ed88f42935e659484ded632f51067f8688b43f9a Mon Sep 17 00:00:00 2001
From: Rostislav Melkumyan <hello@rosti.no>
Date: Wed, 8 May 2024 17:39:14 +0200
Subject: [PATCH] feat(vision): add "save result as json/csv" buttons (#6158)

* feat(vision): add download as json/csv buttons

* fix(vision): use blob urls for downloads (#6213)

* fix(vision): use Translate component to avoid splitting i18n strings

* fix(vision): clean up i18n resources for result saving feature

---------

Co-authored-by: Espen Hovlandsdal <espen@hovlandsdal.com>
---
 packages/@sanity/vision/package.json          |  1 +
 .../src/components/SaveResultButtons.tsx      | 57 +++++++++++++++++++
 .../src/components/VisionGui.styled.tsx       | 21 ++++++-
 .../vision/src/components/VisionGui.tsx       | 33 +++++++++--
 packages/@sanity/vision/src/i18n/resources.ts |  4 ++
 .../@sanity/vision/src/util/getBlobUrl.ts     | 42 ++++++++++++++
 pnpm-lock.yaml                                | 21 +++++++
 7 files changed, 173 insertions(+), 6 deletions(-)
 create mode 100644 packages/@sanity/vision/src/components/SaveResultButtons.tsx
 create mode 100644 packages/@sanity/vision/src/util/getBlobUrl.ts

diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index bd6c84ab06c..6a1fbbca6a6 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -66,6 +66,7 @@
     "@sanity/ui": "^2.1.6",
     "@uiw/react-codemirror": "^4.11.4",
     "is-hotkey-esm": "^1.0.0",
+    "json-2-csv": "^5.5.1",
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
     "quick-lru": "^5.1.1"
diff --git a/packages/@sanity/vision/src/components/SaveResultButtons.tsx b/packages/@sanity/vision/src/components/SaveResultButtons.tsx
new file mode 100644
index 00000000000..b8cb466ae46
--- /dev/null
+++ b/packages/@sanity/vision/src/components/SaveResultButtons.tsx
@@ -0,0 +1,57 @@
+import {DocumentSheetIcon} from '@sanity/icons'
+import {Button, Tooltip} from '@sanity/ui'
+import {type MouseEvent} from 'react'
+import {useTranslation} from 'sanity'
+
+import {visionLocaleNamespace} from '../i18n'
+
+interface SaveButtonProps {
+  blobUrl: string | undefined
+}
+
+function preventSave(evt: MouseEvent<HTMLButtonElement>) {
+  return evt.preventDefault()
+}
+
+export function SaveCsvButton({blobUrl}: SaveButtonProps) {
+  const {t} = useTranslation(visionLocaleNamespace)
+  const isDisabled = !blobUrl
+
+  const button = (
+    <Button
+      as="a"
+      disabled={isDisabled}
+      download={isDisabled ? undefined : 'query-result.csv'}
+      href={blobUrl}
+      icon={DocumentSheetIcon}
+      mode="ghost"
+      onClick={isDisabled ? preventSave : undefined}
+      // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
+      text="CSV" // String is a File extension
+      tone="default"
+    />
+  )
+
+  return isDisabled ? (
+    <Tooltip content={t('result.save-result-as-csv.not-csv-encodable')} placement="top">
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  )
+}
+
+export function SaveJsonButton({blobUrl}: SaveButtonProps) {
+  return (
+    <Button
+      as="a"
+      download={'query-result.json'}
+      href={blobUrl}
+      icon={DocumentSheetIcon}
+      mode="ghost"
+      // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
+      text="JSON" // String is a File extension
+      tone="default"
+    />
+  )
+}
diff --git a/packages/@sanity/vision/src/components/VisionGui.styled.tsx b/packages/@sanity/vision/src/components/VisionGui.styled.tsx
index 3e8d763e3cd..ef308191aa3 100644
--- a/packages/@sanity/vision/src/components/VisionGui.styled.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.styled.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, Flex, Label, rem} from '@sanity/ui'
+import {Box, Card, Flex, Label, rem, Text} from '@sanity/ui'
 import {css, styled} from 'styled-components'
 
 export const Root = styled(Flex)`
@@ -127,7 +127,7 @@ export const Result = styled(Box)`
   z-index: 20;
 `
 
-export const TimingsFooter = styled(Box)`
+export const ResultFooter = styled(Flex)`
   border-top: 1px solid var(--card-border-color);
 `
 
@@ -151,6 +151,23 @@ export const TimingsTextContainer = styled(Flex)`
     )};
 `
 
+export const DownloadsCard = styled(Card)`
+  position: relative;
+`
+
+export const SaveResultLabel = styled(Text)`
+  transform: initial;
+  &:before,
+  &:after {
+    content: none;
+  }
+  > span {
+    display: flex !important;
+    gap: ${({theme}) => rem(theme.sanity.space[3])};
+    align-items: center;
+  }
+`
+
 export const ControlsContainer = styled(Box)`
   border-top: 1px solid var(--card-border-color);
 `
diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index 33913903a2a..5d491ec69a6 100644
--- a/packages/@sanity/vision/src/components/VisionGui.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -24,13 +24,14 @@ import {
 } from '@sanity/ui'
 import {isHotkey} from 'is-hotkey-esm'
 import {type ChangeEvent, createRef, PureComponent, type RefObject} from 'react'
-import {type TFunction} from 'sanity'
+import {type TFunction, Translate} from 'sanity'
 
 import {API_VERSIONS, DEFAULT_API_VERSION} from '../apiVersions'
 import {VisionCodeMirror} from '../codemirror/VisionCodeMirror'
 import {DEFAULT_PERSPECTIVE, isPerspective, PERSPECTIVES} from '../perspectives'
 import {type VisionProps} from '../types'
 import {encodeQueryString} from '../util/encodeQueryString'
+import {getCsvBlobUrl, getJsonBlobUrl} from '../util/getBlobUrl'
 import {getLocalStorage, type LocalStorageish} from '../util/localStorage'
 import {parseApiQueryString, type ParsedApiQueryString} from '../util/parseApiQueryString'
 import {prefixApiVersion} from '../util/prefixApiVersion'
@@ -42,8 +43,10 @@ import {ParamsEditor, type ParamsEditorChangeEvent} from './ParamsEditor'
 import {PerspectivePopover} from './PerspectivePopover'
 import {QueryErrorDialog} from './QueryErrorDialog'
 import {ResultView} from './ResultView'
+import {SaveCsvButton, SaveJsonButton} from './SaveResultButtons'
 import {
   ControlsContainer,
+  DownloadsCard,
   Header,
   InputBackgroundContainer,
   InputBackgroundContainerLeft,
@@ -51,13 +54,14 @@ import {
   QueryCopyLink,
   Result,
   ResultContainer,
+  ResultFooter,
   ResultInnerContainer,
   ResultOuterContainer,
   Root,
+  SaveResultLabel,
   SplitpaneContainer,
   StyledLabel,
   TimingsCard,
-  TimingsFooter,
   TimingsTextContainer,
 } from './VisionGui.styled'
 
@@ -669,6 +673,8 @@ export class VisionGui extends PureComponent<VisionGuiProps, VisionGuiState> {
       url,
     } = this.state
     const hasResult = !error && !queryInProgress && typeof queryResult !== 'undefined'
+    const jsonUrl = hasResult ? getJsonBlobUrl(queryResult) : ''
+    const csvUrl = hasResult ? getCsvBlobUrl(queryResult) : ''
 
     return (
       <Root
@@ -948,7 +954,7 @@ export class VisionGui extends PureComponent<VisionGuiProps, VisionGuiState> {
                 </ResultContainer>
               </ResultInnerContainer>
               {/* Execution time */}
-              <TimingsFooter>
+              <ResultFooter justify="space-between" direction={['column', 'column', 'row']}>
                 <TimingsCard paddingX={4} paddingY={3} sizing="border">
                   <TimingsTextContainer align="center">
                     <Box>
@@ -969,7 +975,26 @@ export class VisionGui extends PureComponent<VisionGuiProps, VisionGuiState> {
                     </Box>
                   </TimingsTextContainer>
                 </TimingsCard>
-              </TimingsFooter>
+
+                {hasResult && (
+                  <DownloadsCard paddingX={4} paddingY={3} sizing="border">
+                    <SaveResultLabel muted>
+                      <Translate
+                        components={{
+                          SaveResultButtons: () => (
+                            <>
+                              <SaveJsonButton blobUrl={jsonUrl} />
+                              <SaveCsvButton blobUrl={csvUrl} />
+                            </>
+                          ),
+                        }}
+                        i18nKey="result.save-result-as-format"
+                        t={t}
+                      />
+                    </SaveResultLabel>
+                  </DownloadsCard>
+                )}
+              </ResultFooter>
             </ResultOuterContainer>
           </SplitPane>
         </SplitpaneContainer>
diff --git a/packages/@sanity/vision/src/i18n/resources.ts b/packages/@sanity/vision/src/i18n/resources.ts
index a0f45903ce8..e28df6fee7f 100644
--- a/packages/@sanity/vision/src/i18n/resources.ts
+++ b/packages/@sanity/vision/src/i18n/resources.ts
@@ -44,6 +44,10 @@ const visionLocaleStrings = defineLocalesResources('vision', {
   'result.execution-time-label': 'Execution',
   /** Label for "Result" explorer/view */
   'result.label': 'Result',
+  /** Tooltip text shown when the query result is not encodable as CSV */
+  'result.save-result-as-csv.not-csv-encodable': 'Result cannot be encoded as CSV',
+  /** Label for "Save result as" result action */
+  'result.save-result-as-format': 'Save result as <SaveResultButtons/>',
   /**
    * "Not applicable" message for when there is no Execution time or End to End time information
    * available for the query (eg when the query has not been executed, or errored)
diff --git a/packages/@sanity/vision/src/util/getBlobUrl.ts b/packages/@sanity/vision/src/util/getBlobUrl.ts
new file mode 100644
index 00000000000..e75e77c342b
--- /dev/null
+++ b/packages/@sanity/vision/src/util/getBlobUrl.ts
@@ -0,0 +1,42 @@
+import {json2csv} from 'json-2-csv'
+
+function getBlobUrl(content: string, mimeType: string): string {
+  return URL.createObjectURL(
+    new Blob([content], {
+      type: mimeType,
+    }),
+  )
+}
+
+function getMemoizedBlobUrlResolver(mimeType: string, stringEncoder: (input: any) => string) {
+  return (() => {
+    let prevResult = ''
+    let prevContent = ''
+    return (input: unknown) => {
+      const content = stringEncoder(input)
+      if (typeof content !== 'string' || content === '') {
+        return undefined
+      }
+
+      if (content === prevContent) {
+        return prevResult
+      }
+
+      prevContent = content
+      if (prevResult) {
+        URL.revokeObjectURL(prevResult)
+      }
+
+      prevResult = getBlobUrl(content, mimeType)
+      return prevResult
+    }
+  })()
+}
+
+export const getJsonBlobUrl = getMemoizedBlobUrlResolver('application/json', (input) =>
+  JSON.stringify(input, null, 2),
+)
+
+export const getCsvBlobUrl = getMemoizedBlobUrlResolver('text/csv', (input) => {
+  return json2csv(Array.isArray(input) ? input : [input]).trim()
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6178f397e8..92ffd0d0d53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1381,6 +1381,9 @@ importers:
       is-hotkey-esm:
         specifier: ^1.0.0
         version: 1.0.0
+      json-2-csv:
+        specifier: ^5.5.1
+        version: 5.5.1
       json5:
         specifier: ^2.2.3
         version: 2.2.3
@@ -9948,6 +9951,11 @@ packages:
         optional: true
     dev: true
 
+  /deeks@3.1.0:
+    resolution: {integrity: sha512-e7oWH1LzIdv/prMQ7pmlDlaVoL64glqzvNgkgQNgyec9ORPHrT2jaOqMtRyqJuwWjtfb6v+2rk9pmaHj+F137A==}
+    engines: {node: '>= 16'}
+    dev: false
+
   /deep-equal@2.2.3:
     resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==}
     engines: {node: '>= 0.4'}
@@ -10157,6 +10165,11 @@ packages:
     hasBin: true
     dev: false
 
+  /doc-path@4.1.1:
+    resolution: {integrity: sha512-h1ErTglQAVv2gCnOpD3sFS6uolDbOKHDU1BZq+Kl3npPqroU3dYL42lUgMfd5UimlwtRgp7C9dLGwqQ5D2HYgQ==}
+    engines: {node: '>=16'}
+    dev: false
+
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -13987,6 +14000,14 @@ packages:
     hasBin: true
     dev: true
 
+  /json-2-csv@5.5.1:
+    resolution: {integrity: sha512-KgAtAXTQopRwe90gh8SgjRSxgt9bUWbGAPMo9W0TZLA8SqiQH7khtagFfeEUjG3NBPwJu/+9uX5pMvunKaPvrQ==}
+    engines: {node: '>= 16'}
+    dependencies:
+      deeks: 3.1.0
+      doc-path: 4.1.1
+    dev: false
+
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true