sanity-plugin-workflow 1.0.0-beta.9 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",
@@ -58,7 +58,7 @@
     "groq": "^3.3.1",
     "lexorank": "^1.0.5",
     "react-fast-compare": "^3.2.1",
-    "sanity-plugin-utils": "^1.3.0"
+    "sanity-plugin-utils": "^1.6.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",

package/src/actions/AssignWorkflow.tsx

@@ -1,33 +1,32 @@
 import {UsersIcon} from '@sanity/icons'
-import {DocumentActionProps} from 'sanity'
 import {useState} from 'react'
+import {DocumentActionProps} from 'sanity'
 import {useProjectUsers} from 'sanity-plugin-utils'
 
-import {API_VERSION} from '../constants'
 import UserAssignment from '../components/UserAssignment'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
-import {State} from '../types'
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
 
-export function AssignWorkflow(props: DocumentActionProps, states: State[]) {
+export function AssignWorkflow(props: DocumentActionProps) {
   const {id} = props
+  const {metadata, loading, error} = useWorkflowContext(id)
   const [isDialogOpen, setDialogOpen] = useState(false)
   const userList = useProjectUsers({apiVersion: API_VERSION})
-  const {data, loading, error} = useWorkflowMetadata(id, states)
 
   if (error) {
     console.error(error)
   }
 
-  if (!data?.metadata) {
+  if (!metadata) {
     return null
   }
 
   return {
     icon: UsersIcon,
     type: 'dialog',
-    disabled: !data || loading || error,
+    disabled: !metadata || loading || error,
     label: `Assign`,
-    title: data ? null : `Document is not in Workflow`,
+    title: metadata ? null : `Document is not in Workflow`,
     dialog: isDialogOpen && {
       type: 'popover',
       onClose: () => {
@@ -36,7 +35,7 @@ export function AssignWorkflow(props: DocumentActionProps, states: State[]) {
       content: (
         <UserAssignment
           userList={userList}
-          assignees={data.metadata?.assignees ?? []}
+          assignees={metadata?.assignees?.length > 0 ? metadata.assignees : []}
           documentId={id}
         />
       ),

package/src/actions/BeginWorkflow.tsx

@@ -1,16 +1,15 @@
-import {useCallback, useState} from 'react'
 import {SplitVerticalIcon} from '@sanity/icons'
-import {DocumentActionProps, useClient} from 'sanity'
 import {useToast} from '@sanity/ui'
 import {LexoRank} from 'lexorank'
+import {useCallback, useState} from 'react'
+import {DocumentActionProps, useClient} from 'sanity'
 
+import {useWorkflowContext} from '../components/WorkflowContext'
 import {API_VERSION} from '../constants'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
-import {State} from '../types'
 
-export function BeginWorkflow(props: DocumentActionProps, states: State[]) {
+export function BeginWorkflow(props: DocumentActionProps) {
   const {id, draft} = props
-  const {data, loading, error} = useWorkflowMetadata(id, states)
+  const {metadata, loading, error, states} = useWorkflowContext(id)
   const client = useClient({apiVersion: API_VERSION})
   const toast = useToast()
   const [beginning, setBeginning] = useState(false)
@@ -27,19 +26,15 @@ export function BeginWorkflow(props: DocumentActionProps, states: State[]) {
       {state: states[0].id}
     )
     client
-      .createIfNotExists(
-        {
-          _id: `workflow-metadata.${id}`,
-          _type: `workflow.metadata`,
-          documentId: id,
-          state: states[0].id,
-          orderRank: lowestOrderFirstState
-            ? LexoRank.parse(lowestOrderFirstState).genNext().toString()
-            : LexoRank.min().toString(),
-        },
-        // Faster!
-        {visibility: 'async'}
-      )
+      .createIfNotExists({
+        _id: `workflow-metadata.${id}`,
+        _type: `workflow.metadata`,
+        documentId: id,
+        state: states[0].id,
+        orderRank: lowestOrderFirstState
+          ? LexoRank.parse(lowestOrderFirstState).genNext().toString()
+          : LexoRank.min().toString(),
+      })
       .then(() => {
         toast.push({
           status: 'success',
@@ -52,14 +47,14 @@ export function BeginWorkflow(props: DocumentActionProps, states: State[]) {
       })
   }, [id, states, client, toast])
 
-  if (!draft || complete || data.metadata) {
+  if (!draft || complete || metadata) {
     return null
   }
 
   return {
     icon: SplitVerticalIcon,
     type: 'dialog',
-    disabled: data?.metadata || loading || error || beginning || complete,
+    disabled: metadata || loading || error || beginning || complete,
     label: beginning ? `Beginning...` : `Begin Workflow`,
     onHandle: () => {
       handle()

package/src/actions/CompleteWorkflow.tsx

@@ -1,14 +1,13 @@
-import {useCallback} from 'react'
 import {CheckmarkIcon} from '@sanity/icons'
+import {useCallback} from 'react'
 import {DocumentActionProps, useClient} from 'sanity'
 
+import {useWorkflowContext} from '../components/WorkflowContext'
 import {API_VERSION} from '../constants'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
-import {State} from '../types'
 
-export function CompleteWorkflow(props: DocumentActionProps, states: State[]) {
+export function CompleteWorkflow(props: DocumentActionProps) {
   const {id} = props
-  const {data, loading, error} = useWorkflowMetadata(id, states)
+  const {metadata, loading, error, states} = useWorkflowContext(id)
   const client = useClient({apiVersion: API_VERSION})
 
   if (error) {
@@ -19,12 +18,13 @@ export function CompleteWorkflow(props: DocumentActionProps, states: State[]) {
     client.delete(`workflow-metadata.${id}`)
   }, [id, client])
 
-  const isLastState = data?.state?.id === states[states.length - 1].id
-
-  if (!data.metadata) {
+  if (!metadata) {
     return null
   }
 
+  const state = states.find((s) => s.id === metadata.state)
+  const isLastState = state?.id === states[states.length - 1].id
+
   return {
     icon: CheckmarkIcon,
     type: 'dialog',

package/src/actions/UpdateWorkflow.tsx

@@ -3,17 +3,13 @@ import {useToast} from '@sanity/ui'
 import {useCurrentUser, useValidationStatus} from 'sanity'
 import {DocumentActionProps, useClient} from 'sanity'
 
+import {useWorkflowContext} from '../components/WorkflowContext'
 import {API_VERSION} from '../constants'
 import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
 import {State} from '../types'
 
 // eslint-disable-next-line complexity
-export function UpdateWorkflow(
-  props: DocumentActionProps,
-  allStates: State[],
-  actionState: State
-) {
+export function UpdateWorkflow(props: DocumentActionProps, actionState: State) {
   const {id, type} = props
 
   const user = useCurrentUser()
@@ -21,10 +17,11 @@ export function UpdateWorkflow(
   const toast = useToast()
   const currentUser = useCurrentUser()
 
-  const {data, loading, error} = useWorkflowMetadata(id, allStates)
-  const {state: currentState} = data
-  const {assignees = []} = data?.metadata ?? {}
+  const {metadata, loading, error, states} = useWorkflowContext(id)
+  const currentState = states.find((s) => s.id === metadata?.state)
+  const {assignees = []} = metadata ?? {}
 
+  // TODO: Shouldn't the document action props contain this?
   const {validation, isValidating} = useValidationStatus(id, type)
   const hasValidationErrors =
     currentState?.requireValidation &&
@@ -47,15 +44,6 @@ export function UpdateWorkflow(
           status: 'success',
           title: `Document state now "${newState.title}"`,
         })
-        // Perform document operations after State changes
-        // If State has changed and the document needs to be un/published
-        // This functionality was deemed too dangerous / unexpected
-        // Revisit with improved UX
-        // if (!ops.publish.disabled && nextOperation === 'publish') {
-        //   ops.publish.execute()
-        // } else if (!ops.unpublish.disabled && nextOperation === 'unpublish') {
-        //   ops.unpublish.execute()
-        // }
       })
       .catch((err) => {
         props.onComplete()
@@ -70,14 +58,12 @@ export function UpdateWorkflow(
   // Remove button if:
   // Document is not in Workflow OR
   // The current State is the same as this actions State
-  if (!data.metadata || (currentState && currentState.id === actionState.id)) {
+  if (!metadata || (currentState && currentState.id === actionState.id)) {
     return null
   }
 
-  const currentStateIndex = allStates.findIndex(
-    (s) => s.id === currentState?.id
-  )
-  const actionStateIndex = allStates.findIndex((s) => s.id === actionState.id)
+  const currentStateIndex = states.findIndex((s) => s.id === currentState?.id)
+  const actionStateIndex = states.findIndex((s) => s.id === actionState.id)
   const direction = actionStateIndex > currentStateIndex ? 'promote' : 'demote'
   const DirectionIcon = direction === 'promote' ? ArrowRightIcon : ArrowLeftIcon
   const directionLabel = direction === 'promote' ? 'Promote' : 'Demote'
@@ -94,7 +80,7 @@ export function UpdateWorkflow(
         actionState?.roles?.length !== 0
 
   const actionStateIsAValidTransition =
-    currentState?.id && currentState.transitions.length
+    currentState?.id && currentState?.transitions?.length
       ? // If the Current State limits transitions to specific States
         // Check that the Action State is in Current State's transitions array
         currentState.transitions.includes(actionState.id)
@@ -104,7 +90,7 @@ export function UpdateWorkflow(
   const userAssignmentCanUpdateState = actionState.requireAssignment
     ? // If the Action State requires assigned users
       // Check the current user ID is in the assignees array
-      currentUser && assignees.length && assignees.includes(currentUser.id)
+      currentUser && assignees?.length && assignees.includes(currentUser.id)
     : // Otherwise this isn't a problem
       true
 

package/src/badges/AssigneesBadge.tsx

@@ -1,17 +1,14 @@
 import {CurrentUser, DocumentBadgeDescription} from 'sanity'
 import {useProjectUsers} from 'sanity-plugin-utils'
-import {API_VERSION} from '../constants'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
 
-import {State} from '../types'
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
 
 export function AssigneesBadge(
-  states: State[],
   documentId: string,
   currentUser: CurrentUser | null
 ): DocumentBadgeDescription | null {
-  const {data, loading, error} = useWorkflowMetadata(documentId, states)
-  const {metadata} = data
+  const {metadata, loading, error} = useWorkflowContext(documentId)
   const userList = useProjectUsers({apiVersion: API_VERSION})
 
   if (loading || error || !metadata) {
@@ -29,7 +26,9 @@ export function AssigneesBadge(
   }
 
   const {assignees} = metadata ?? []
-  const hasMe = currentUser ? assignees.some((assignee) => assignee === currentUser.id) : false
+  const hasMe = currentUser
+    ? assignees.some((assignee) => assignee === currentUser.id)
+    : false
   const assigneesCount = hasMe ? assignees.length - 1 : assignees.length
   const assigneeUsers = userList.filter((user) => assignees.includes(user.id))
   const title = assigneeUsers.map((user) => user.displayName).join(', ')
@@ -39,7 +38,9 @@ export function AssigneesBadge(
   if (hasMe && assigneesCount === 0) {
     label = 'Assigned to Me'
   } else if (hasMe && assigneesCount > 0) {
-    label = `Me and ${assigneesCount} ${assigneesCount === 1 ? 'other' : 'others'}`
+    label = `Me and ${assigneesCount} ${
+      assigneesCount === 1 ? 'other' : 'others'
+    }`
   } else {
     label = `${assigneesCount} assigned`
   }

package/src/badges/StateBadge.tsx

@@ -1,11 +1,12 @@
 import {DocumentBadgeDescription} from 'sanity'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
 
-import {State} from '../types'
+import {useWorkflowContext} from '../components/WorkflowContext'
 
-export function StateBadge(states: State[], documentId: string): DocumentBadgeDescription | null {
-  const {data, loading, error} = useWorkflowMetadata(documentId, states)
-  const {state} = data
+export function StateBadge(
+  documentId: string
+): DocumentBadgeDescription | null {
+  const {metadata, loading, error, states} = useWorkflowContext(documentId)
+  const state = states.find((s) => s.id === metadata?.state)
 
   if (loading || error) {
     if (error) {

package/src/components/WorkflowContext.tsx

@@ -0,0 +1,71 @@
+import {useCallback, useContext, useState} from 'react'
+import {createContext} from 'react'
+import {LayoutProps} from 'sanity'
+
+import {DEFAULT_CONFIG} from '../constants'
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+import {KeyedMetadata, WorkflowConfig} from '../types'
+
+export type WorkflowContextValue = Required<WorkflowConfig> & {
+  data: KeyedMetadata
+  loading: boolean
+  error: boolean | unknown | ProgressEvent
+  ids: string[]
+  addId: (id: string) => void
+  removeId: (id: string) => void
+}
+
+const WorkflowContext = createContext<WorkflowContextValue>({
+  data: {},
+  loading: false,
+  error: false,
+  ids: [],
+  addId: () => null,
+  removeId: () => null,
+  ...DEFAULT_CONFIG,
+})
+
+export function useWorkflowContext(id?: string) {
+  const current = useContext(WorkflowContext)
+
+  return {...current, metadata: id ? current.data[id] : null}
+}
+
+type WorkflowProviderProps = LayoutProps & {workflow: Required<WorkflowConfig>}
+
+/**
+ * This Provider wraps the Studio and provides the workflow context to document actions and badges.
+ * This is so individual actions and badges do not need to all register their own listeners.
+ * Instead, each document "signals" its ID up to the provider, which then registers a single listener
+ * This is performed inside of a component loaded at the root level of the Document Form
+ */
+export function WorkflowProvider(props: WorkflowProviderProps) {
+  const [ids, setIds] = useState<string[]>([])
+  const addId = useCallback(
+    (id: string) =>
+      setIds((current) => (current.includes(id) ? current : [...current, id])),
+    []
+  )
+  const removeId = useCallback(
+    (id: string) => setIds((current) => current.filter((i) => i !== id)),
+    []
+  )
+  const {data, loading, error} = useWorkflowMetadata(ids)
+
+  return (
+    <WorkflowContext.Provider
+      value={{
+        data,
+        loading,
+        error,
+        ids,
+        addId,
+        removeId,
+        states: props.workflow.states,
+        schemaTypes: props.workflow.schemaTypes,
+      }}
+    >
+      {props.renderDefault(props)}
+    </WorkflowContext.Provider>
+  )
+}

package/src/components/WorkflowSignal.tsx

@@ -0,0 +1,30 @@
+import {useEffect} from 'react'
+import {ObjectInputProps} from 'sanity'
+
+import {useWorkflowContext} from './WorkflowContext'
+
+// This component is loaded at the root level of the Document Form
+// It is used to signal the document ID to the WorkflowProvider
+export default function WorkflowSignal(props: ObjectInputProps) {
+  const documentId = props?.value?._id
+    ? props.value._id.replace(`drafts.`, ``)
+    : null
+
+  const {addId, removeId} = useWorkflowContext()
+
+  useEffect(() => {
+    // On mount, add  to the query of listening documents
+    if (documentId) {
+      addId(documentId)
+    }
+
+    // On unmount, remove from the query of listening documents
+    return () => {
+      if (documentId) {
+        removeId(documentId)
+      }
+    }
+  }, [documentId, addId, removeId])
+
+  return props.renderDefault(props)
+}

package/src/constants/index.ts

@@ -2,7 +2,7 @@ import {defineStates, WorkflowConfig} from '../types'
 
 export const API_VERSION = `2023-01-01`
 
-export const DEFAULT_CONFIG: WorkflowConfig = {
+export const DEFAULT_CONFIG: Required<WorkflowConfig> = {
   schemaTypes: [],
   states: defineStates([
     {

package/src/hooks/useWorkflowDocuments.tsx

@@ -30,7 +30,7 @@ type WorkflowDocuments = {
   workflowData: {
     data: SanityDocumentWithMetadata[]
     loading: boolean
-    error: boolean
+    error: boolean | unknown | ProgressEvent
   }
   operations: {
     move: (

package/src/hooks/useWorkflowMetadata.tsx

@@ -1,43 +1,49 @@
+import {useMemo} from 'react'
 import {useListeningQuery} from 'sanity-plugin-utils'
 
-import {Metadata, State} from '../types'
+import {API_VERSION} from '../constants'
+import {KeyedMetadata, Metadata} from '../types'
 
 /**
- * Takes the published ID of a document and return the metadata and current state object
+ * Takes the published ID of documents and return the metadata for those documents.
  *
- * @param id Source document published ID
- * @param states Array of States defined in plugin config
- * @returns State
+ * @param ids Source document published IDs
  */
-export function useWorkflowMetadata(
-  id: string,
-  states: State[]
-): {
-  data: {metadata?: Metadata; state?: State}
+export function useWorkflowMetadata(ids: string[]): {
+  data: KeyedMetadata
   loading: boolean
-  error: boolean
+  error: boolean | unknown | ProgressEvent
 } {
   const {
-    data: metadata,
+    data: rawData,
     loading,
     error,
-  } = useListeningQuery<Metadata>(
-    `*[_type == "workflow.metadata" && documentId == $id][0]`,
+  } = useListeningQuery<Metadata[]>(
+    `*[_type == "workflow.metadata" && documentId in $ids]{
+      _id,
+      _type,
+      _rev,
+      assignees,
+      documentId,
+      state,
+      orderRank
+    }`,
     {
-      params: {id},
+      params: {ids},
+      options: {apiVersion: API_VERSION},
     }
   )
 
-  if (metadata?.state) {
-    return {
-      data: {
-        metadata,
-        state: states.find((s) => s.id === metadata.state),
-      },
-      loading,
-      error,
-    }
-  }
+  const keyedMetadata = useMemo(() => {
+    if (!rawData || rawData.length === 0) return {}
+
+    return rawData.reduce<KeyedMetadata>((acc, cur) => {
+      return {
+        ...acc,
+        [cur.documentId]: cur,
+      }
+    }, {})
+  }, [rawData])
 
-  return {data: {}, loading, error}
+  return {data: keyedMetadata, loading, error}
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-import {definePlugin, DocumentActionProps} from 'sanity'
+import {definePlugin, DocumentActionProps, isObjectInputProps} from 'sanity'
 
 import {AssignWorkflow} from './actions/AssignWorkflow'
 import {BeginWorkflow} from './actions/BeginWorkflow'
@@ -6,6 +6,8 @@ import {CompleteWorkflow} from './actions/CompleteWorkflow'
 import {UpdateWorkflow} from './actions/UpdateWorkflow'
 import {AssigneesBadge} from './badges/AssigneesBadge'
 import {StateBadge} from './badges/StateBadge'
+import {WorkflowProvider} from './components/WorkflowContext'
+import WorkflowSignal from './components/WorkflowSignal'
 import {DEFAULT_CONFIG} from './constants'
 import metadata from './schema/workflow/workflow.metadata'
 import {workflowTool} from './tools'
@@ -16,7 +18,11 @@ export const workflow = definePlugin<WorkflowConfig>(
     const {schemaTypes, states} = {...DEFAULT_CONFIG, ...config}
 
     if (!states?.length) {
-      throw new Error(`Workflow: Missing states in config`)
+      throw new Error(`Workflow plugin: Missing "states" in config`)
+    }
+
+    if (!schemaTypes?.length) {
+      throw new Error(`Workflow plugin: Missing "schemaTypes" in config`)
     }
 
     return {
@@ -26,27 +32,41 @@ export const workflow = definePlugin<WorkflowConfig>(
       },
       // TODO: Remove 'workflow.metadata' from list of new document types
       // ...
+      studio: {
+        components: {
+          layout: (props) =>
+            WorkflowProvider({...props, workflow: {schemaTypes, states}}),
+        },
+      },
+      form: {
+        components: {
+          input: (props) => {
+            if (
+              props.id === `root` &&
+              isObjectInputProps(props) &&
+              schemaTypes.includes(props.schemaType.name)
+            ) {
+              return WorkflowSignal(props)
+            }
+
+            return props.renderDefault(props)
+          },
+        },
+      },
       document: {
         actions: (prev, context) => {
           if (!schemaTypes.includes(context.schemaType)) {
             return prev
           }
 
-          // TODO: Augment 'publish' and 'unpublish' to be disabled if a document IS in Workflow
-          // This would be best done with a listening query here, but we don't have access to documentStore
-
-          // TODO: Performance improvements:
-          // Each of these actions registers their own listener!
-          // One should probably be responsible for listening and storing the response in context
-
           return [
-            (props) => BeginWorkflow(props, states),
-            (props) => AssignWorkflow(props, states),
+            (props) => BeginWorkflow(props),
+            (props) => AssignWorkflow(props),
             ...states.map(
               (state) => (props: DocumentActionProps) =>
-                UpdateWorkflow(props, states, state)
+                UpdateWorkflow(props, state)
             ),
-            (props) => CompleteWorkflow(props, states),
+            (props) => CompleteWorkflow(props),
             ...prev,
           ]
         },
@@ -62,13 +82,16 @@ export const workflow = definePlugin<WorkflowConfig>(
           }
 
           return [
-            () => StateBadge(states, documentId),
-            () => AssigneesBadge(states, documentId, currentUser),
+            () => StateBadge(documentId),
+            () => AssigneesBadge(documentId, currentUser),
             ...prev,
           ]
         },
       },
-      tools: [workflowTool({schemaTypes, states})],
+      tools: [
+        // TODO: These configs could be read from Context
+        workflowTool({schemaTypes, states}),
+      ],
     }
   }
 )

package/src/types/index.ts

@@ -60,6 +60,8 @@ export type Metadata = SanityDocumentLike & {
   orderRank: string
 }
 
+export type KeyedMetadata = {[key: string]: Metadata}
+
 export type SanityDocumentWithMetadata = {
   _metadata: Metadata
   _id: string