feat(react): add useNavigateToStudioDocument hook (#352)

Author: cngonzalez

apps/kitchensink-react/src/DocumentCollection/DocumentCoreInteractionsRoute.tsx

@@ -1,23 +1,27 @@
-import {useInfiniteList, useManageFavorite, useRecordDocumentHistoryEvent} from '@sanity/sdk-react'
+import {
+  DocumentHandle,
+  useInfiniteList,
+  useManageFavorite,
+  useNavigateToStudioDocument,
+  useRecordDocumentHistoryEvent,
+} from '@sanity/sdk-react'
 import {Box, Button, Flex, Heading} from '@sanity/ui'
 import {type JSX} from 'react'
 
 import {DocumentListLayout} from '../components/DocumentListLayout/DocumentListLayout'
 import {DocumentPreview} from './DocumentPreview'
 import {LoadMore} from './LoadMore'
 
-interface ActionButtonsProps {
-  document: {_id: string; _type: string}
-}
-
-function ActionButtons({document}: ActionButtonsProps) {
+function ActionButtons({document}: {document: DocumentHandle}) {
   const {
     favorite,
     unfavorite,
     isFavorited,
     isConnected: isFavoriteConnected,
   } = useManageFavorite(document)
   const {recordEvent, isConnected: isHistoryConnected} = useRecordDocumentHistoryEvent(document)
+  const {navigateToStudioDocument, isConnected: isNavigateConnected} =
+    useNavigateToStudioDocument(document)
 
   return (
     <Flex gap={2} padding={2}>
@@ -39,6 +43,12 @@ function ActionButtons({document}: ActionButtonsProps) {
         onClick={() => recordEvent('viewed')}
         text="Record view"
       />
+      <Button
+        mode="ghost"
+        disabled={!isNavigateConnected}
+        onClick={navigateToStudioDocument}
+        text="Edit in Studio"
+      />
     </Flex>
   )
 }
@@ -49,6 +59,10 @@ export function DocumentCoreInteractionsRoute(): JSX.Element {
     orderings: [{field: '_updatedAt', direction: 'desc'}],
   })
 
+  // since resourceIds are being refactored at the moment, hardcode the resourceId for now
+  // (ideally, they come from document handles returned in the "data" param per document)
+  const datasetResourceId = 'document:ppsg7ml5.test:' // Note: each doc._id will be appended to this
+
   return (
     <Box padding={4}>
       <Heading as="h1" size={5}>
@@ -59,7 +73,7 @@ export function DocumentCoreInteractionsRoute(): JSX.Element {
           {data.map((doc) => (
             <Box key={doc._id}>
               <DocumentPreview document={doc} />
-              <ActionButtons document={doc} />
+              <ActionButtons document={{...doc, resourceId: `${datasetResourceId}${doc._id}`}} />
             </Box>
           ))}
           <LoadMore hasMore={hasMore} isPending={isPending} onLoadMore={loadMore} />

packages/react/src/_exports/index.ts

@@ -26,6 +26,7 @@ export {
   type WindowMessageHandler,
 } from '../hooks/comlink/useWindowConnection'
 export {useSanityInstance} from '../hooks/context/useSanityInstance'
+export {useNavigateToStudioDocument} from '../hooks/dashboard/useNavigateToStudioDocument'
 export {useStudioWorkspacesByResourceId} from '../hooks/dashboard/useStudioWorkspacesByResourceId'
 export {useDatasets} from '../hooks/datasets/useDatasets'
 export {useApplyActions} from '../hooks/document/useApplyActions'

packages/react/src/hooks/dashboard/useNavigateToStudioDocument.ts

@@ -0,0 +1,97 @@
+import {type Status} from '@sanity/comlink'
+import {type DocumentHandle} from '@sanity/sdk'
+import {useCallback, useState} from 'react'
+
+import {useWindowConnection} from '../comlink/useWindowConnection'
+import {useStudioWorkspacesByResourceId} from './useStudioWorkspacesByResourceId'
+
+interface NavigateToResourceMessage {
+  type: 'core/v1/bridge/navigate-to-resource'
+  data: {
+    /**
+     * Resource ID
+     */
+    resourceId: string
+    /**
+     * Resource type
+     * @example 'application' | 'studio'
+     */
+    resourceType: string
+    /**
+     * Path within the resource to navigate to.
+     */
+    path?: string
+  }
+}
+
+interface NavigateToStudioResult {
+  navigateToStudioDocument: () => void
+  isConnected: boolean
+}
+
+/**
+ * @public
+ * Hook that provides a function to navigate to a studio document.
+ * @param documentHandle - The document handle containing document ID, type, and resource ID
+ * @returns An object containing:
+ * - navigateToStudioDocument - Function that when called will navigate to the studio document
+ * - isConnected - Boolean indicating if connection to Core UI is established
+ */
+export function useNavigateToStudioDocument(
+  documentHandle: DocumentHandle,
+): NavigateToStudioResult {
+  const {workspacesByResourceId, isConnected: workspacesConnected} =
+    useStudioWorkspacesByResourceId()
+  const [status, setStatus] = useState<Status>('idle')
+  const {sendMessage} = useWindowConnection<NavigateToResourceMessage, never>({
+    name: 'core/nodes/sdk',
+    connectTo: 'core/channels/sdk',
+    onStatus: setStatus,
+  })
+
+  const navigateToStudioDocument = useCallback(() => {
+    if (!workspacesConnected || status !== 'connected' || !documentHandle.resourceId) {
+      return
+    }
+
+    // Extract projectId and dataset from the resourceId (current format: document:projectId.dataset:documentId)
+    const [, projectAndDataset] = documentHandle.resourceId.split(':')
+    const [projectId, dataset] = projectAndDataset.split('.')
+    if (!projectId || !dataset) {
+      return
+    }
+
+    // Find the workspace for this document
+    const workspaces = workspacesByResourceId[`${projectId}:${dataset}`]
+    if (!workspaces?.length) {
+      // eslint-disable-next-line no-console
+      console.warn('No workspace found for document', documentHandle.resourceId)
+      return
+    }
+
+    if (workspaces.length > 1) {
+      // eslint-disable-next-line no-console
+      console.warn('Multiple workspaces found for document', documentHandle.resourceId)
+      // eslint-disable-next-line no-console
+      console.warn('Using the first one', workspaces[0])
+    }
+
+    const workspace = workspaces[0]
+
+    const message: NavigateToResourceMessage = {
+      type: 'core/v1/bridge/navigate-to-resource',
+      data: {
+        resourceId: workspace._ref,
+        resourceType: 'studio',
+        path: `/intent/edit/id=${documentHandle._id};type=${documentHandle._type}`,
+      },
+    }
+
+    sendMessage(message.type, message.data)
+  }, [documentHandle, workspacesConnected, status, sendMessage, workspacesByResourceId])
+
+  return {
+    navigateToStudioDocument,
+    isConnected: workspacesConnected && status === 'connected',
+  }
+}