Custom Studio integrations

import {gdrUri, type Engine} from '@sanity/workflow-engine'
import {
  useDocumentWorkflows,
  useWorkflowEngine,
  useWorkflowSession,
} from '@sanity/workflow-studio'
import {useMemo, useState} from 'react'
import {useClient, type DocumentActionComponent} from 'sanity'

const workflowResource = {type: 'dataset', id: 'your-project.workflows'} as const

export const SubmitForReviewAction: DocumentActionComponent = (props) => {
  const [open, setOpen] = useState(false)
  const engine = useWorkflowEngine({workflowResource, tag: 'production'})
  const client = useClient({apiVersion: '2026-07-01'})
  const {projectId, dataset} = client.config()
  if (!projectId || !dataset) throw new Error('Studio client is missing its project or dataset')

  const document = useMemo(
    () => gdrUri({scheme: 'dataset', projectId, dataset, documentId: props.id}),
    [dataset, projectId, props.id],
  )
  const {instances, loading, unreadable, error} = useDocumentWorkflows({engine, document})
  const instance = instances?.find((candidate) => candidate.definition === 'article-review')
  const unavailable = error ?? (unreadable.length > 0 ? unreadable[0] : undefined)

  return {
    label: 'Submit for review',
    disabled: loading || unavailable !== undefined || instance === undefined,
    title:
      unavailable !== undefined
        ? 'Workflow state could not be read'
        : instance === undefined
          ? 'No active article review workflow'
          : undefined,
    onHandle: () => setOpen(true),
    dialog:
      open && instance
        ? {
            type: 'dialog',
            header: 'Submit for review',
            onClose: () => setOpen(false),
            content: (
              <SubmitDialog
                engine={engine}
                instanceId={instance._id}
                onClose={() => setOpen(false)}
              />
            ),
          }
        : false,
  }
}

function SubmitDialog({
  engine,
  instanceId,
  onClose,
}: {
  engine: Engine
  instanceId: string
  onClose: () => void
}) {
  const [submitting, setSubmitting] = useState(false)
  const [submitError, setSubmitError] = useState<unknown>()
  const {evaluation, ready, invalid, error, fireAction} = useWorkflowSession({engine, instanceId})
  const activity = evaluation?.currentStage.activities.find(
    (candidate) => candidate.activity.name === 'draft',
  )
  const submit = activity?.actions.find((candidate) => candidate.action.name === 'submit')

  if (invalid) return <p>This workflow instance cannot be read by this version.</p>
  if (error) return <p>Workflow state could not be loaded.</p>
  if (!ready || !evaluation) return <p>Loading workflow…</p>
  if (!activity || !submit) return <p>Submit is not available in the current stage.</p>

  const handleSubmit = async () => {
    setSubmitting(true)
    setSubmitError(undefined)
    try {
      await fireAction({activity: activity.activity.name, action: submit.action.name})
      onClose()
    } catch (caught) {
      setSubmitError(caught)
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div>
      <p>{submit.allowed ? 'The article is ready to submit.' : 'The article cannot be submitted yet.'}</p>
      {submitError ? <p>Submission failed. Try again.</p> : null}
      <button disabled={!submit.allowed || submitting} onClick={handleSubmit} type="button">
        {submitting ? 'Submitting…' : 'Submit'}
      </button>
    </div>
  )
}

import {defineConfig} from 'sanity'

import {SubmitForReviewAction} from './workflow-document-action'

export default defineConfig({
  projectId: 'your-project',
  dataset: 'production',
  document: {
    actions: (previous, context) =>
      context.schemaType === 'article' ? [SubmitForReviewAction, ...previous] : previous,
  },
})