fix: relay document listeners

dev/test-studio/package.json

@@ -22,7 +22,7 @@
     "@react-three/fiber": "^8.13.6",
     "@sanity/assist": "^3.0.2",
     "@sanity/block-tools": "3.41.1",
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/color": "^3.0.0",
     "@sanity/google-maps-input": "^4.0.0",
     "@sanity/icons": "^2.11.0",

dev/test-studio/schema/standard/booleans.ts

@@ -20,11 +20,23 @@ export default defineType({
       title: 'Title',
     },
     {
-      name: 'switchTest',
+      name: 'switch_doesnt_exist',
       type: 'boolean',
       title: `I'm a switch`,
       description: 'Try toggling me! This is the new switch design',
     },
+    {
+      name: 'switchTest',
+      type: 'boolean',
+      title: `true & Read only`,
+      readOnly: true,
+    },
+    {
+      name: 'switch',
+      type: 'boolean',
+      title: `false & Read only`,
+      readOnly: true,
+    },
     {
       name: 'switchIndeterminate2',
       type: 'boolean',
@@ -42,12 +54,6 @@ export default defineType({
         layout: 'checkbox',
       },
     },
-    {
-      name: 'switch',
-      type: 'boolean',
-      description: 'Should be either true or false',
-      title: 'Check me?',
-    },
     {
       name: 'checkbox',
       type: 'boolean',

package.json

@@ -101,7 +101,7 @@
     "@playwright/test": "1.41.2",
     "@repo/package.config": "workspace:*",
     "@repo/tsconfig": "workspace:*",
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/eslint-config-i18n": "1.0.0",
     "@sanity/eslint-config-studio": "^4.0.0",
     "@sanity/pkg-utils": "6.8.13",

packages/@sanity/cli/package.json

@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@babel/traverse": "^7.23.5",
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/codegen": "3.41.1",
     "@sanity/telemetry": "^0.7.6",
     "@sanity/util": "3.41.1",
@@ -66,7 +66,7 @@
     "decompress": "^4.2.0",
     "esbuild": "^0.21.0",
     "esbuild-register": "^3.4.1",
-    "get-it": "^8.4.28",
+    "get-it": "^8.4.29",
     "groq-js": "^1.8.0",
     "node-machine-id": "^1.1.12",
     "pkg-dir": "^5.0.0",

packages/@sanity/migrate/package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@bjoerge/mutiny": "^0.5.1",
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/types": "3.41.1",
     "@sanity/util": "3.41.1",
     "arrify": "^2.0.1",

packages/@sanity/types/package.json

@@ -49,7 +49,7 @@
     "watch": "pkg-utils watch"
   },
   "dependencies": {
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@types/react": "^18.0.25"
   },
   "devDependencies": {

packages/@sanity/util/package.json

@@ -122,7 +122,7 @@
     "watch": "pkg-utils watch"
   },
   "dependencies": {
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/types": "3.41.1",
     "get-random-values-esm": "1.0.2",
     "moment": "^2.29.4",

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"
@@ -74,7 +75,7 @@
     "@repo/package.config": "workspace:*",
     "@sanity/block-tools": "workspace:*",
     "@sanity/cli": "workspace:*",
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/codegen": "workspace:*",
     "@sanity/diff": "workspace:*",
     "@sanity/migrate": "workspace:*",

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"
+    />
+  )
+}

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);
 `

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,22 +43,25 @@ 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,
   InputContainer,
   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>

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)

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()
+})

packages/sanity/package.json

@@ -149,7 +149,7 @@
     "@sanity/bifur-client": "^0.3.1",
     "@sanity/block-tools": "3.41.1",
     "@sanity/cli": "3.41.1",
-    "@sanity/client": "^6.17.2",
+    "@sanity/client": "^6.18.0",
     "@sanity/color": "^3.0.0",
     "@sanity/diff": "3.41.1",
     "@sanity/diff-match-patch": "^3.1.1",
@@ -195,7 +195,7 @@
     "execa": "^2.0.0",
     "exif-component": "^1.0.1",
     "framer-motion": "11.0.8",
-    "get-it": "^8.4.28",
+    "get-it": "^8.4.29",
     "get-random-values-esm": "1.0.2",
     "groq-js": "^1.8.0",
     "history": "^5.3.0",