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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.8",
+  "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",
@@ -85,8 +85,8 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^4.1.2",
-    "sanity": "^3.3.1",
-    "semantic-release": "^20.1.0",
+    "sanity": "^3.9.1",
+    "semantic-release": "^20.1.3",
     "typescript": "^5.0.0"
   },
   "peerDependencies": {

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/DocumentCard/index.tsx

@@ -141,10 +141,8 @@ export function DocumentCard(props: DocumentCardProps) {
               <Flex align="center" justify="space-between" gap={1}>
                 <Box flex={1}>
                   <Preview
-                    // Like as in desk lists, except it has an intermittent loading state
-                    // layout="default"
-                    // Like in the PTE, with no loading state
-                    layout="block"
+                    layout="default"
+                    skipVisibilityCheck
                     value={item}
                     schemaType={schema.get(item._type) as SchemaType}
                   />

package/src/components/DocumentList.tsx

@@ -1,6 +1,6 @@
-import {Draggable} from '@hello-pangea/dnd'
-import {useVirtualizer} from '@tanstack/react-virtual'
-import {useMemo, useRef} from 'react'
+import {Draggable, DraggableStyle} from '@hello-pangea/dnd'
+import {useVirtualizer, VirtualItem} from '@tanstack/react-virtual'
+import {CSSProperties, useMemo, useRef} from 'react'
 import {CurrentUser} from 'sanity'
 import {UserExtended} from 'sanity-plugin-utils'
 
@@ -25,6 +25,35 @@ type DocumentListProps = {
   userRoleCanDrop: boolean
 }
 
+function getStyle(
+  draggableStyle: DraggableStyle | undefined,
+  virtualItem: VirtualItem
+): CSSProperties {
+  // Default transform required by tanstack virtual for positioning
+  let transform = `translateY(${virtualItem.start}px)`
+
+  // If a card is being dragged over, this card needs to move up or down
+  if (draggableStyle && draggableStyle.transform) {
+    // So get the transform value from beautiful-dnd
+    const draggableTransformY = parseInt(
+      draggableStyle.transform.split(',')[1].split('px')[0],
+      10
+    )
+
+    // And apply it to the card
+    transform = `translateY(${virtualItem.start + draggableTransformY}px)`
+  }
+
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: `${virtualItem.size}px`,
+    transform,
+  }
+}
+
 export default function DocumentList(props: DocumentListProps) {
   const {
     data = [],
@@ -48,15 +77,18 @@ export default function DocumentList(props: DocumentListProps) {
 
   const parentRef = useRef(null)
 
-  const rowVirtualizer = useVirtualizer({
-    count: data.length,
+  const virtualizer = useVirtualizer({
+    count: dataFiltered.length,
     getScrollElement: () => parentRef.current,
     getItemKey: (index) => dataFiltered[index]?._metadata?.documentId ?? index,
-    estimateSize: () => 113,
-    overscan: 10,
+    estimateSize: () => 115,
+    overscan: 7,
+    measureElement: (element) => {
+      return element.getBoundingClientRect().height || 115
+    },
   })
 
-  if (!data.length) {
+  if (!data.length || !dataFiltered.length) {
     return null
   }
 
@@ -66,61 +98,72 @@ export default function DocumentList(props: DocumentListProps) {
       style={{
         height: `100%`,
         overflow: 'auto',
-        paddingTop: 1,
         // Smooths scrollbar behaviour
         overflowAnchor: 'none',
         scrollBehavior: 'auto',
+        paddingTop: 1,
       }}
     >
-      {rowVirtualizer.getVirtualItems().map((virtualItem) => {
-        const item = dataFiltered[virtualItem.index]
-
-        const {documentId, assignees} = item?._metadata ?? {}
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const item = dataFiltered[virtualItem.index]
 
-        if (!documentId) {
-          return null
-        }
+          const {documentId, assignees} = item?._metadata ?? {}
 
-        const isInvalid = invalidDocumentIds.includes(documentId)
-        const meInAssignees = user?.id ? assignees?.includes(user.id) : false
-        const isDragDisabled =
-          patchingIds.includes(documentId) ||
-          !userRoleCanDrop ||
-          isInvalid ||
-          !(state.requireAssignment
-            ? state.requireAssignment && meInAssignees
-            : true)
+          const isInvalid = invalidDocumentIds.includes(documentId)
+          const meInAssignees = user?.id ? assignees?.includes(user.id) : false
+          const isDragDisabled =
+            patchingIds.includes(documentId) ||
+            !userRoleCanDrop ||
+            isInvalid ||
+            !(state.requireAssignment
+              ? state.requireAssignment && meInAssignees
+              : true)
 
-        return (
-          <Draggable
-            // The metadata's documentId is always the published one to avoid rerendering
-            // key={documentId}
-            key={virtualItem.key}
-            draggableId={documentId}
-            index={virtualItem.index}
-            isDragDisabled={isDragDisabled}
-          >
-            {(draggableProvided, draggableSnapshot) => (
-              <div
-                ref={draggableProvided.innerRef}
-                {...draggableProvided.draggableProps}
-                {...draggableProvided.dragHandleProps}
-              >
-                <DocumentCard
-                  userRoleCanDrop={userRoleCanDrop}
-                  isDragDisabled={isDragDisabled}
-                  isPatching={patchingIds.includes(documentId)}
-                  isDragging={draggableSnapshot.isDragging}
-                  item={item}
-                  toggleInvalidDocumentId={toggleInvalidDocumentId}
-                  userList={userList}
-                  states={states}
-                />
-              </div>
-            )}
-          </Draggable>
-        )
-      })}
+          return (
+            <Draggable
+              key={virtualItem.key}
+              draggableId={documentId}
+              index={virtualItem.index}
+              isDragDisabled={isDragDisabled}
+            >
+              {(draggableProvided, draggableSnapshot) => (
+                <div
+                  ref={draggableProvided.innerRef}
+                  {...draggableProvided.draggableProps}
+                  {...draggableProvided.dragHandleProps}
+                  style={getStyle(
+                    draggableProvided.draggableProps.style,
+                    virtualItem
+                  )}
+                >
+                  <div
+                    ref={virtualizer.measureElement}
+                    data-index={virtualItem.index}
+                  >
+                    <DocumentCard
+                      userRoleCanDrop={userRoleCanDrop}
+                      isDragDisabled={isDragDisabled}
+                      isPatching={patchingIds.includes(documentId)}
+                      isDragging={draggableSnapshot.isDragging}
+                      item={item}
+                      toggleInvalidDocumentId={toggleInvalidDocumentId}
+                      userList={userList}
+                      states={states}
+                    />
+                  </div>
+                </div>
+              )}
+            </Draggable>
+          )
+        })}
+      </div>
     </div>
   )
 }

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/components/WorkflowTool.tsx

@@ -401,7 +401,6 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                               : defaultCardTone
                           }
                           height="fill"
-                          paddingTop={1}
                         >
                           {loading ? (
                             <Flex padding={5} align="center" justify="center">

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: (