@sanity/sdk-react 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/hooks/dashboard/useNavigateToStudioDocument.test.ts

@@ -0,0 +1,178 @@
+import {type Status} from '@sanity/comlink'
+import {type DocumentHandle} from '@sanity/sdk'
+import {act, renderHook} from '@testing-library/react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {useNavigateToStudioDocument} from './useNavigateToStudioDocument'
+
+// Mock dependencies
+const mockSendMessage = vi.fn()
+const mockFetch = vi.fn()
+let mockWorkspacesByResourceId = {}
+let mockWorkspacesIsConnected = true
+let mockStatusCallback: ((status: Status) => void) | null = null
+
+vi.mock('../comlink/useWindowConnection', () => {
+  return {
+    useWindowConnection: ({onStatus}: {onStatus?: (status: Status) => void}) => {
+      mockStatusCallback = onStatus || null
+      return {
+        sendMessage: mockSendMessage,
+        fetch: mockFetch,
+      }
+    },
+  }
+})
+
+vi.mock('./useStudioWorkspacesByResourceId', () => {
+  return {
+    useStudioWorkspacesByResourceId: () => ({
+      workspacesByResourceId: mockWorkspacesByResourceId,
+      error: null,
+      isConnected: mockWorkspacesIsConnected,
+    }),
+  }
+})
+
+describe('useNavigateToStudioDocument', () => {
+  const mockDocumentHandle: DocumentHandle = {
+    _id: 'doc123',
+    _type: 'article',
+    resourceId: 'document:project1.dataset1:doc123',
+  }
+
+  const mockWorkspace = {
+    name: 'workspace1',
+    title: 'Workspace 1',
+    basePath: '/workspace1',
+    dataset: 'dataset1',
+    userApplicationId: 'user1',
+    url: 'https://test.sanity.studio',
+    _ref: 'workspace123',
+  }
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+    mockWorkspacesByResourceId = {
+      'project1:dataset1': [mockWorkspace],
+    }
+    mockWorkspacesIsConnected = true
+    mockStatusCallback = null
+  })
+
+  it('returns a function and connection status', () => {
+    const {result} = renderHook(() => useNavigateToStudioDocument(mockDocumentHandle))
+
+    // Initially not connected
+    expect(result.current.isConnected).toBe(false)
+
+    // Simulate connection
+    act(() => {
+      mockStatusCallback?.('connected')
+    })
+
+    expect(result.current).toEqual({
+      navigateToStudioDocument: expect.any(Function),
+      isConnected: true,
+    })
+  })
+
+  it('sends correct navigation message when called', () => {
+    const {result} = renderHook(() => useNavigateToStudioDocument(mockDocumentHandle))
+
+    // Simulate connection
+    act(() => {
+      mockStatusCallback?.('connected')
+    })
+
+    result.current.navigateToStudioDocument()
+
+    expect(mockSendMessage).toHaveBeenCalledWith('dashboard/v1/bridge/navigate-to-resource', {
+      resourceId: 'workspace123',
+      resourceType: 'studio',
+      path: '/intent/edit/id=doc123;type=article',
+    })
+  })
+
+  it('does not send message when not connected', () => {
+    mockWorkspacesByResourceId = {}
+    mockWorkspacesIsConnected = false
+
+    const {result} = renderHook(() => useNavigateToStudioDocument(mockDocumentHandle))
+
+    // Simulate connection
+    act(() => {
+      mockStatusCallback?.('connected')
+    })
+
+    result.current.navigateToStudioDocument()
+
+    expect(mockSendMessage).not.toHaveBeenCalled()
+  })
+
+  it('does not send message when no workspace is found', () => {
+    mockWorkspacesByResourceId = {}
+    mockWorkspacesIsConnected = true
+
+    const {result} = renderHook(() => useNavigateToStudioDocument(mockDocumentHandle))
+
+    // Simulate connection
+    act(() => {
+      mockStatusCallback?.('connected')
+    })
+
+    result.current.navigateToStudioDocument()
+
+    expect(mockSendMessage).not.toHaveBeenCalled()
+  })
+
+  it('handles invalid resourceId format', () => {
+    const invalidDocHandle: DocumentHandle = {
+      _id: 'doc123',
+      _type: 'article',
+      resourceId: 'document:project1.invalid:doc123' as `document:${string}.${string}:${string}`,
+    }
+
+    const {result} = renderHook(() => useNavigateToStudioDocument(invalidDocHandle))
+
+    // Simulate connection
+    act(() => {
+      mockStatusCallback?.('connected')
+    })
+
+    result.current.navigateToStudioDocument()
+
+    expect(mockSendMessage).not.toHaveBeenCalled()
+  })
+
+  it('warns when multiple workspaces are found', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const mockWorkspace2 = {...mockWorkspace, _ref: 'workspace2'}
+
+    mockWorkspacesByResourceId = {
+      'project1:dataset1': [mockWorkspace, mockWorkspace2],
+    }
+
+    const {result} = renderHook(() => useNavigateToStudioDocument(mockDocumentHandle))
+
+    // Simulate connection
+    act(() => {
+      mockStatusCallback?.('connected')
+    })
+
+    result.current.navigateToStudioDocument()
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Multiple workspaces found for document',
+      mockDocumentHandle.resourceId,
+    )
+    expect(mockSendMessage).toHaveBeenCalledWith(
+      'dashboard/v1/bridge/navigate-to-resource',
+      expect.objectContaining({
+        resourceId: mockWorkspace._ref,
+      }),
+    )
+
+    consoleSpy.mockRestore()
+  })
+})

package/src/hooks/dashboard/useNavigateToStudioDocument.ts

@@ -0,0 +1,123 @@
+import {type Status} from '@sanity/comlink'
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {type DocumentHandle} from '@sanity/sdk'
+import {useCallback, useState} from 'react'
+
+import {useWindowConnection} from '../comlink/useWindowConnection'
+import {useStudioWorkspacesByResourceId} from './useStudioWorkspacesByResourceId'
+
+interface NavigateToResourceMessage {
+  type: 'dashboard/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.
+ * Currently, requires a document handle with a resourceId.
+ * That resourceId is currently formatted like: `document:projectId.dataset:documentId`
+ * If the hook you used to retrieve the document handle doesn't provide a resourceId like this,
+ * you can construct it according to the above format with the document handle's _id.
+ *
+ * This will only work if you have deployed a studio with a workspace
+ * with this projectId / dataset combination.
+ * It may be able to take a custom URL in the future.
+ *
+ * This will likely change in the future.
+ * @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 Dashboard is established
+ *
+ * @example
+ * ```ts
+ * import {navigateToStudioDocument, type DocumentHandle} from '@sanity/sdk'
+ *
+ * function MyComponent({documentHandle}: {documentHandle: DocumentHandle}) {
+ *   const {navigateToStudioDocument, isConnected} = useNavigateToStudioDocument(documentHandle)
+ *
+ *   return (
+ *     <button onClick={navigateToStudioDocument} disabled={!isConnected}>
+ *       Navigate to Studio Document
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useNavigateToStudioDocument(
+  documentHandle: DocumentHandle,
+): NavigateToStudioResult {
+  const {workspacesByResourceId, isConnected: workspacesConnected} =
+    useStudioWorkspacesByResourceId()
+  const [status, setStatus] = useState<Status>('idle')
+  const {sendMessage} = useWindowConnection<NavigateToResourceMessage, never>({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+    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: 'dashboard/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',
+  }
+}

package/src/hooks/dashboard/useStudioWorkspacesByResourceId.test.tsx

@@ -0,0 +1,278 @@
+import {type Message, type Status} from '@sanity/comlink'
+import {renderHook, waitFor} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useWindowConnection, type WindowConnection} from '../comlink/useWindowConnection'
+import {useStudioWorkspacesByResourceId} from './useStudioWorkspacesByResourceId'
+
+vi.mock('../comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(),
+}))
+
+const mockWorkspaceData = {
+  context: {
+    availableResources: [
+      {
+        projectId: 'project1',
+        workspaces: [
+          {
+            name: 'workspace1',
+            title: 'Workspace 1',
+            basePath: '/workspace1',
+            dataset: 'dataset1',
+            userApplicationId: 'user1',
+            url: 'https://test.sanity.studio',
+            _ref: 'user1-workspace1',
+          },
+          {
+            name: 'workspace2',
+            title: 'Workspace 2',
+            basePath: '/workspace2',
+            dataset: 'dataset1',
+            userApplicationId: 'user1',
+            url: 'https://test.sanity.studio',
+            _ref: 'user1-workspace2',
+          },
+        ],
+      },
+      {
+        projectId: 'project2',
+        workspaces: [
+          {
+            name: 'workspace3',
+            title: 'Workspace 3',
+            basePath: '/workspace3',
+            dataset: 'dataset2',
+            userApplicationId: 'user2',
+            url: 'https://test.sanity.studio',
+            _ref: 'user2-workspace3',
+          },
+        ],
+      },
+      {
+        // Project without workspaces
+        projectId: 'project3',
+        workspaces: [],
+      },
+    ],
+  },
+}
+
+describe('useStudioWorkspacesByResourceId', () => {
+  it('should return empty workspaces and connected=false when not connected', async () => {
+    // Create a mock that captures the onStatus callback
+    let capturedOnStatus: ((status: Status) => void) | undefined
+
+    vi.mocked(useWindowConnection).mockImplementation(({onStatus}) => {
+      capturedOnStatus = onStatus
+
+      return {
+        fetch: undefined,
+        sendMessage: vi.fn(),
+      } as unknown as WindowConnection<Message>
+    })
+
+    const {result} = renderHook(() => useStudioWorkspacesByResourceId())
+
+    // Call onStatus with 'idle' to simulate not connected
+    if (capturedOnStatus) capturedOnStatus('idle')
+
+    expect(result.current).toEqual({
+      workspacesByResourceId: {},
+      error: null,
+      isConnected: false,
+    })
+  })
+
+  it('should process workspaces into lookup by projectId:dataset', async () => {
+    const mockFetch = vi.fn().mockResolvedValue(mockWorkspaceData)
+    let capturedOnStatus: ((status: Status) => void) | undefined
+
+    vi.mocked(useWindowConnection).mockImplementation(({onStatus}) => {
+      capturedOnStatus = onStatus
+
+      return {
+        fetch: mockFetch,
+        sendMessage: vi.fn(),
+      } as unknown as WindowConnection<Message>
+    })
+
+    const {result} = renderHook(() => useStudioWorkspacesByResourceId())
+
+    // Call onStatus with 'connected' to simulate connected state
+    if (capturedOnStatus) capturedOnStatus('connected')
+
+    await waitFor(() => {
+      expect(result.current.workspacesByResourceId).toEqual({
+        'project1:dataset1': [
+          {
+            name: 'workspace1',
+            title: 'Workspace 1',
+            basePath: '/workspace1',
+            dataset: 'dataset1',
+            userApplicationId: 'user1',
+            url: 'https://test.sanity.studio',
+            _ref: 'user1-workspace1',
+          },
+          {
+            name: 'workspace2',
+            title: 'Workspace 2',
+            basePath: '/workspace2',
+            dataset: 'dataset1',
+            userApplicationId: 'user1',
+            url: 'https://test.sanity.studio',
+            _ref: 'user1-workspace2',
+          },
+        ],
+        'project2:dataset2': [
+          {
+            name: 'workspace3',
+            title: 'Workspace 3',
+            basePath: '/workspace3',
+            dataset: 'dataset2',
+            userApplicationId: 'user2',
+            url: 'https://test.sanity.studio',
+            _ref: 'user2-workspace3',
+          },
+        ],
+      })
+      expect(result.current.error).toBeNull()
+      expect(result.current.isConnected).toBe(true)
+    })
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      'dashboard/v1/bridge/context',
+      undefined,
+      expect.any(Object),
+    )
+  })
+
+  it('should handle fetch errors', async () => {
+    const mockFetch = vi.fn().mockRejectedValue(new Error('Failed to fetch'))
+    let capturedOnStatus: ((status: Status) => void) | undefined
+
+    vi.mocked(useWindowConnection).mockImplementation(({onStatus}) => {
+      capturedOnStatus = onStatus
+
+      return {
+        fetch: mockFetch,
+        sendMessage: vi.fn(),
+      } as unknown as WindowConnection<Message>
+    })
+
+    const {result} = renderHook(() => useStudioWorkspacesByResourceId())
+
+    // Call onStatus with 'connected' to simulate connected state
+    if (capturedOnStatus) capturedOnStatus('connected')
+
+    await waitFor(() => {
+      expect(result.current.workspacesByResourceId).toEqual({})
+      expect(result.current.error).toBe('Failed to fetch workspaces')
+      expect(result.current.isConnected).toBe(true)
+    })
+  })
+
+  it('should handle AbortError silently', async () => {
+    const abortError = new Error('Aborted')
+    abortError.name = 'AbortError'
+    const mockFetch = vi.fn().mockRejectedValue(abortError)
+    let capturedOnStatus: ((status: Status) => void) | undefined
+
+    vi.mocked(useWindowConnection).mockImplementation(({onStatus}) => {
+      capturedOnStatus = onStatus
+
+      return {
+        fetch: mockFetch,
+        sendMessage: vi.fn(),
+      } as unknown as WindowConnection<Message>
+    })
+
+    const {result} = renderHook(() => useStudioWorkspacesByResourceId())
+
+    // Call onStatus with 'connected' to simulate connected state
+    if (capturedOnStatus) capturedOnStatus('connected')
+
+    await waitFor(() => {
+      expect(result.current.workspacesByResourceId).toEqual({})
+      expect(result.current.error).toBeNull()
+      expect(result.current.isConnected).toBe(true)
+    })
+  })
+
+  it('should handle projects without workspaces', async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      context: {
+        availableResources: [
+          {
+            projectId: 'project1',
+            workspaces: [],
+          },
+        ],
+      },
+    })
+    let capturedOnStatus: ((status: Status) => void) | undefined
+
+    vi.mocked(useWindowConnection).mockImplementation(({onStatus}) => {
+      capturedOnStatus = onStatus
+
+      return {
+        fetch: mockFetch,
+        sendMessage: vi.fn(),
+      } as unknown as WindowConnection<Message>
+    })
+
+    const {result} = renderHook(() => useStudioWorkspacesByResourceId())
+
+    // Call onStatus with 'connected' to simulate connected state
+    if (capturedOnStatus) capturedOnStatus('connected')
+
+    await waitFor(() => {
+      expect(result.current.workspacesByResourceId).toEqual({})
+      expect(result.current.error).toBeNull()
+      expect(result.current.isConnected).toBe(true)
+    })
+  })
+
+  it('should handle projects without projectId', async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      context: {
+        availableResources: [
+          {
+            workspaces: [
+              {
+                name: 'workspace1',
+                title: 'Workspace 1',
+                basePath: '/workspace1',
+                dataset: 'dataset1',
+                userApplicationId: 'user1',
+                url: 'https://test.sanity.studio',
+                _ref: 'user1-workspace1',
+              },
+            ],
+          },
+        ],
+      },
+    })
+    let capturedOnStatus: ((status: Status) => void) | undefined
+
+    vi.mocked(useWindowConnection).mockImplementation(({onStatus}) => {
+      capturedOnStatus = onStatus
+
+      return {
+        fetch: mockFetch,
+        sendMessage: vi.fn(),
+      } as unknown as WindowConnection<Message>
+    })
+
+    const {result} = renderHook(() => useStudioWorkspacesByResourceId())
+
+    // Call onStatus with 'connected' to simulate connected state
+    if (capturedOnStatus) capturedOnStatus('connected')
+
+    await waitFor(() => {
+      expect(result.current.workspacesByResourceId).toEqual({})
+      expect(result.current.error).toBeNull()
+      expect(result.current.isConnected).toBe(true)
+    })
+  })
+})

package/src/hooks/dashboard/useStudioWorkspacesByResourceId.ts

@@ -0,0 +1,92 @@
+import {type Status} from '@sanity/comlink'
+import {SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+import {useEffect, useState} from 'react'
+
+import {useWindowConnection} from '../comlink/useWindowConnection'
+
+interface Workspace {
+  name: string
+  title: string
+  basePath: string
+  dataset: string
+  userApplicationId: string
+  url: string
+  _ref: string
+}
+
+interface WorkspacesByResourceId {
+  [key: string]: Workspace[] // key format: `${projectId}:${dataset}`
+}
+
+interface StudioWorkspacesResult {
+  workspacesByResourceId: WorkspacesByResourceId
+  error: string | null
+  isConnected: boolean
+}
+
+/**
+ * Hook that fetches studio workspaces and organizes them by projectId:dataset
+ * @internal
+ */
+export function useStudioWorkspacesByResourceId(): StudioWorkspacesResult {
+  const [workspacesByResourceId, setWorkspacesByResourceId] = useState<WorkspacesByResourceId>({})
+  const [status, setStatus] = useState<Status>('idle')
+  const [error, setError] = useState<string | null>(null)
+
+  const {fetch} = useWindowConnection({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+    onStatus: setStatus,
+  })
+
+  // Once computed, this should probably be in a store and poll for changes
+  // However, our stores are currently being refactored
+  useEffect(() => {
+    if (!fetch || status !== 'connected') return
+
+    async function fetchWorkspaces(signal: AbortSignal) {
+      try {
+        const data = await fetch<{
+          context: {availableResources: Array<{projectId: string; workspaces: Workspace[]}>}
+        }>('dashboard/v1/bridge/context', undefined, {signal})
+
+        const workspaceMap: WorkspacesByResourceId = {}
+
+        data.context.availableResources.forEach((resource) => {
+          if (!resource.projectId || !resource.workspaces?.length) return
+
+          resource.workspaces.forEach((workspace) => {
+            const key = `${resource.projectId}:${workspace.dataset}`
+            if (!workspaceMap[key]) {
+              workspaceMap[key] = []
+            }
+            workspaceMap[key].push(workspace)
+          })
+        })
+
+        setWorkspacesByResourceId(workspaceMap)
+        setError(null)
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          if (err.name === 'AbortError') {
+            return
+          }
+          setError('Failed to fetch workspaces')
+        }
+      }
+    }
+
+    const controller = new AbortController()
+    fetchWorkspaces(controller.signal)
+
+    return () => {
+      controller.abort()
+    }
+  }, [fetch, status])
+
+  return {
+    workspacesByResourceId,
+    error,
+    isConnected: status === 'connected',
+  }
+}