sanity-plugin-workflow 1.0.0-beta.4 → 1.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",

package/src/actions/UpdateWorkflow.tsx

@@ -1,25 +1,20 @@
-// import {useState} from 'react'
-import {ArrowRightIcon, ArrowLeftIcon} from '@sanity/icons'
+import {ArrowLeftIcon, ArrowRightIcon} from '@sanity/icons'
 import {useToast} from '@sanity/ui'
 import {useCurrentUser, useValidationStatus} from 'sanity'
 import {DocumentActionProps, useClient} from 'sanity'
 
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
 import {API_VERSION} from '../constants'
-import {State} from '../types'
 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
 ) {
   const {id, type} = props
-  const {validation, isValidating} = useValidationStatus(id, type)
-  const hasValidationErrors =
-    !isValidating &&
-    validation?.length > 0 &&
-    validation.find((v) => v.level === 'error')
 
   const user = useCurrentUser()
   const client = useClient({apiVersion: API_VERSION})
@@ -30,6 +25,13 @@ export function UpdateWorkflow(
   const {state: currentState} = data
   const {assignees = []} = data?.metadata ?? {}
 
+  const {validation, isValidating} = useValidationStatus(id, type)
+  const hasValidationErrors =
+    currentState?.requireValidation &&
+    !isValidating &&
+    validation?.length > 0 &&
+    validation.find((v) => v.level === 'error')
+
   if (error) {
     console.error(error)
   }
@@ -80,8 +82,6 @@ export function UpdateWorkflow(
   const DirectionIcon = direction === 'promote' ? ArrowRightIcon : ArrowLeftIcon
   const directionLabel = direction === 'promote' ? 'Promote' : 'Demote'
 
-  let title = `${directionLabel} State to "${actionState.title}"`
-
   const userRoleCanUpdateState =
     user?.roles?.length && actionState?.roles?.length
       ? // If the Action state is limited to specific roles
@@ -93,10 +93,6 @@ export function UpdateWorkflow(
       : // No roles specified on the next state, so anyone can update
         actionState?.roles?.length !== 0
 
-  if (!userRoleCanUpdateState) {
-    title = `Your User role cannot ${directionLabel} State to "${actionState.title}"`
-  }
-
   const actionStateIsAValidTransition =
     currentState?.id && currentState.transitions.length
       ? // If the Current State limits transitions to specific States
@@ -105,10 +101,6 @@ export function UpdateWorkflow(
       : // Otherwise this isn't a problem
         true
 
-  if (!actionStateIsAValidTransition) {
-    title = `You cannot ${directionLabel} State to "${actionState.title}" from "${currentState?.title}"`
-  }
-
   const userAssignmentCanUpdateState = actionState.requireAssignment
     ? // If the Action State requires assigned users
       // Check the current user ID is in the assignees array
@@ -116,11 +108,17 @@ export function UpdateWorkflow(
     : // Otherwise this isn't a problem
       true
 
-  if (!userAssignmentCanUpdateState) {
-    title = `You must be assigned to the document to ${directionLabel} State to "${actionState.title}"`
-  }
+  let title = `${directionLabel} State to "${actionState.title}"`
 
-  if (hasValidationErrors) {
+  if (!userRoleCanUpdateState) {
+    title = `Your User role cannot ${directionLabel} State to "${actionState.title}"`
+  } else if (!actionStateIsAValidTransition) {
+    title = `You cannot ${directionLabel} State to "${actionState.title}" from "${currentState?.title}"`
+  } else if (!userAssignmentCanUpdateState) {
+    title = `You must be assigned to the document to ${directionLabel} State to "${actionState.title}"`
+  } else if (currentState?.requireValidation && isValidating) {
+    title = `Document is validating, cannot ${directionLabel} State to "${actionState.title}"`
+  } else if (hasValidationErrors) {
     title = `Document has validation errors, cannot ${directionLabel} State to "${actionState.title}"`
   }
 
@@ -129,7 +127,7 @@ export function UpdateWorkflow(
     disabled:
       loading ||
       error ||
-      isValidating ||
+      (currentState?.requireValidation && isValidating) ||
       hasValidationErrors ||
       !currentState ||
       !userRoleCanUpdateState ||

package/src/components/DocumentCard/Validate.tsx

@@ -0,0 +1,21 @@
+import {useEffect} from 'react'
+import {useValidationStatus, ValidationStatus} from 'sanity'
+
+type ValidateProps = {
+  documentId: string
+  type: string
+  onChange: (validation: ValidationStatus) => void
+}
+
+// Document validation is siloed into its own component
+// Because it's not performant to run on a lot of documents
+export default function Validate(props: ValidateProps) {
+  const {documentId, type, onChange} = props
+  const {isValidating, validation = []} = useValidationStatus(documentId, type)
+
+  useEffect(() => {
+    onChange({isValidating, validation})
+  }, [onChange, isValidating, validation])
+
+  return null
+}

package/src/components/DocumentCard/index.tsx

@@ -1,8 +1,12 @@
 /* eslint-disable react/prop-types */
 import {DragHandleIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Flex, Stack, useTheme} from '@sanity/ui'
-import {useEffect, useMemo} from 'react'
-import {SchemaType, useSchema, useValidationStatus} from 'sanity'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+import {
+  SchemaType,
+  useSchema,
+  ValidationStatus as ValidationStatusType,
+} from 'sanity'
 import {Preview} from 'sanity'
 
 import {SanityDocumentWithMetadata, State, User} from '../../types'
@@ -11,6 +15,7 @@ import CompleteButton from './CompleteButton'
 import {DraftStatus} from './core/DraftStatus'
 import {PublishedStatus} from './core/PublishedStatus'
 import EditButton from './EditButton'
+import Validate from './Validate'
 import {ValidationStatus} from './ValidationStatus'
 
 type DocumentCardProps = {
@@ -38,6 +43,7 @@ export function DocumentCard(props: DocumentCardProps) {
   } = props
   const {assignees = [], documentId} = item._metadata ?? {}
   const schema = useSchema()
+  const state = states.find((s) => s.id === item._metadata?.state)
 
   // Perform document operations after State changes
   // If State has changed and the document needs to be un/published
@@ -80,10 +86,21 @@ export function DocumentCard(props: DocumentCardProps) {
 
   const isDarkMode = useTheme().sanity.color.dark
   const defaultCardTone = isDarkMode ? `transparent` : `default`
-  const {validation = [], isValidating} = useValidationStatus(
-    documentId ?? ``,
-    item._type
-  )
+
+  // Validation only runs if the state requests it
+  // Because it's not performant to run it on many documents simultaneously
+  // So we fake it here, and maybe set it inside <Validate />
+  const [optimisticValidation, setOptimisticValidation] =
+    useState<ValidationStatusType>({
+      isValidating: state?.requireValidation ?? false,
+      validation: [],
+    })
+
+  const {isValidating, validation} = optimisticValidation
+
+  const handleValidation = useCallback((updates: ValidationStatusType) => {
+    setOptimisticValidation(updates)
+  }, [])
 
   const cardTone = useMemo(() => {
     let tone: CardTone = defaultCardTone
@@ -92,7 +109,7 @@ export function DocumentCard(props: DocumentCardProps) {
     if (!documentId) return tone
     if (isDragging) tone = `positive`
 
-    if (!isValidating && validation.length > 0) {
+    if (state?.requireValidation && !isValidating && validation.length > 0) {
       if (validation.some((v) => v.level === 'error')) {
         tone = `critical`
       } else {
@@ -102,13 +119,14 @@ export function DocumentCard(props: DocumentCardProps) {
 
     return tone
   }, [
-    isDarkMode,
-    userRoleCanDrop,
     defaultCardTone,
+    userRoleCanDrop,
+    isDarkMode,
     documentId,
     isDragging,
-    validation,
     isValidating,
+    validation,
+    state?.requireValidation,
   ])
 
   // Update validation status
@@ -136,63 +154,72 @@ export function DocumentCard(props: DocumentCardProps) {
   )
 
   return (
-    <Box paddingBottom={3} paddingX={3}>
-      <Card radius={2} shadow={isDragging ? 3 : 1} tone={cardTone}>
-        <Stack>
-          <Card
-            borderBottom
-            radius={2}
-            padding={3}
-            paddingLeft={2}
-            tone={cardTone}
-            style={{pointerEvents: 'none'}}
-          >
-            <Flex align="center" justify="space-between" gap={1}>
-              <Box flex={1}>
-                <Preview
-                  layout="default"
-                  value={item}
-                  schemaType={schema.get(item._type) as SchemaType}
+    <>
+      {state?.requireValidation ? (
+        <Validate
+          documentId={documentId}
+          type={item._type}
+          onChange={handleValidation}
+        />
+      ) : null}
+      <Box paddingBottom={3} paddingX={3}>
+        <Card radius={2} shadow={isDragging ? 3 : 1} tone={cardTone}>
+          <Stack>
+            <Card
+              borderBottom
+              radius={2}
+              padding={3}
+              paddingLeft={2}
+              tone={cardTone}
+              style={{pointerEvents: 'none'}}
+            >
+              <Flex align="center" justify="space-between" gap={1}>
+                <Box flex={1}>
+                  <Preview
+                    layout="default"
+                    value={item}
+                    schemaType={schema.get(item._type) as SchemaType}
+                  />
+                </Box>
+                <Box style={{flexShrink: 0}}>
+                  {hasError || isDragDisabled ? null : <DragHandleIcon />}
+                </Box>
+              </Flex>
+            </Card>
+
+            <Card padding={2} radius={2} tone="inherit">
+              <Flex align="center" justify="space-between" gap={3}>
+                <Box flex={1}>
+                  {documentId && (
+                    <UserDisplay
+                      userList={userList}
+                      assignees={assignees}
+                      documentId={documentId}
+                      disabled={!userRoleCanDrop}
+                    />
+                  )}
+                </Box>
+                {validation.length > 0 ? (
+                  <ValidationStatus validation={validation} />
+                ) : null}
+                <DraftStatus document={item} />
+                <PublishedStatus document={item} />
+                <EditButton
+                  id={item._id}
+                  type={item._type}
+                  disabled={!userRoleCanDrop}
                 />
-              </Box>
-              <Box style={{flexShrink: 0}}>
-                {hasError || isDragDisabled ? null : <DragHandleIcon />}
-              </Box>
-            </Flex>
-          </Card>
-
-          <Card padding={2} radius={2} tone="inherit">
-            <Flex align="center" justify="space-between" gap={3}>
-              <Box flex={1}>
-                {documentId && (
-                  <UserDisplay
-                    userList={userList}
-                    assignees={assignees}
+                {isLastState ? (
+                  <CompleteButton
                     documentId={documentId}
                     disabled={!userRoleCanDrop}
                   />
-                )}
-              </Box>
-              {validation.length > 0 ? (
-                <ValidationStatus validation={validation} />
-              ) : null}
-              <DraftStatus document={item} />
-              <PublishedStatus document={item} />
-              <EditButton
-                id={item._id}
-                type={item._type}
-                disabled={!userRoleCanDrop}
-              />
-              {isLastState ? (
-                <CompleteButton
-                  documentId={documentId}
-                  disabled={!userRoleCanDrop}
-                />
-              ) : null}
-            </Flex>
-          </Card>
-        </Stack>
-      </Card>
-    </Box>
+                ) : null}
+              </Flex>
+            </Card>
+          </Stack>
+        </Card>
+      </Box>
+    </>
   )
 }

package/src/components/{Validators.tsx → Verify.tsx}

@@ -8,13 +8,17 @@ import {API_VERSION} from '../constants'
 import {SanityDocumentWithMetadata, State} from '../types'
 import FloatingCard from './FloatingCard'
 
-type ValidatorsProps = {
+type VerifyProps = {
   data: SanityDocumentWithMetadata[]
   userList: UserExtended[]
   states: State[]
 }
 
-export default function Validators({data, userList, states}: ValidatorsProps) {
+// This component checks the validity of the data in the Kanban
+// It will only render something it there is invalid date
+// And will render buttons to fix the data
+export default function Verify(props: VerifyProps) {
+  const {data, userList, states} = props
   const client = useClient({apiVersion: API_VERSION})
   const toast = useToast()
 

package/src/components/WorkflowTool.tsx

@@ -19,7 +19,7 @@ import {DocumentCard} from './DocumentCard'
 import DocumentList from './DocumentList'
 import Filters from './Filters'
 import StateTitle from './StateTitle'
-import Validators from './Validators'
+import Verify from './Verify'
 
 type WorkflowToolProps = {
   tool: Tool<WorkflowConfig>
@@ -155,12 +155,12 @@ export default function WorkflowTool(props: WorkflowToolProps) {
         // Must be between two items
         const itemBefore = destinationStateItems[destination.index - 1]
         const itemBeforeRank = itemBefore?._metadata?.orderRank
-        const itemBeforeRankParsed = itemBefore._metadata.orderRank
+        const itemBeforeRankParsed = itemBeforeRank
           ? LexoRank.parse(itemBeforeRank)
           : LexoRank.min()
         const itemAfter = destinationStateItems[destination.index]
         const itemAfterRank = itemAfter?._metadata?.orderRank
-        const itemAfterRankParsed = itemAfter._metadata.orderRank
+        const itemAfterRankParsed = itemAfterRank
           ? LexoRank.parse(itemAfterRank)
           : LexoRank.max()
 
@@ -249,7 +249,8 @@ export default function WorkflowTool(props: WorkflowToolProps) {
 
   return (
     <Flex direction="column" height="fill" overflow="hidden">
-      <Validators data={data} userList={userList} states={states} />
+      <Verify data={data} userList={userList} states={states} />
+
       <Filters
         uniqueAssignedUsers={uniqueAssignedUsers}
         selectedUserIds={selectedUserIds}
@@ -289,6 +290,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                       isDropDisabled={isDropDisabled}
                       // props required for virtualization
                       mode="virtual"
+                      // TODO: Render this as a memo/callback
                       renderClone={(provided, snapshot, rubric) => {
                         const item = data.find(
                           (doc) =>

package/src/constants/index.ts

@@ -24,8 +24,8 @@ export const DEFAULT_CONFIG: WorkflowConfig = {
       title: 'Approved',
       color: 'success',
       roles: ['administrator'],
-      requireAssignment: true,
       transitions: ['changesRequested'],
+      requireAssignment: true,
     },
   ]),
 }

package/src/types/index.ts

@@ -9,6 +9,7 @@ export type State = {
   // operation?: Operation
   roles?: string[]
   requireAssignment?: boolean
+  requireValidation?: boolean
   // From document badges
   color?: 'primary' | 'success' | 'warning' | 'danger'
 }

package/src/actions/RequestReviewAction.js

@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import {EyeOpenIcon} from '@sanity/icons'
-
-import {inferMetadataState, useWorkflowMetadata} from '../../lib/workflow'
-import RequestReviewWizard from '../../components/RequestReviewWizard'
-
-export function RequestReviewAction(props) {
-  const [showWizardDialog, setShowWizardDialog] = React.useState(false)
-  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props))
-  const {state} = metadata.data
-
-  if (!props.draft || state === 'inReview' || state === 'approved') {
-    return null
-  }
-
-  const onHandle = () => {
-    if (!showWizardDialog) {
-      setShowWizardDialog(true)
-    }
-  }
-
-  const onSend = (assignees) => {
-    setShowWizardDialog(false)
-
-    if (assignees.length === 0) {
-      metadata.clearAssignees()
-    } else {
-      metadata.setAssignees(assignees)
-    }
-
-    metadata.setState('inReview')
-    props.onComplete()
-  }
-
-  const onClose = () => setShowWizardDialog(false)
-
-  return {
-    dialog: showWizardDialog && {
-      type: 'popover',
-      content: <RequestReviewWizard metadata={metadata.data} onClose={onClose} onSend={onSend} />,
-      onClose: props.onComplete,
-    },
-    disabled: showWizardDialog,
-    icon: EyeOpenIcon,
-    label: 'Request review',
-    onHandle,
-  }
-}
-
-RequestReviewAction.propTypes = {
-  draft: PropTypes.object,
-  id: PropTypes.string,
-  onComplete: PropTypes.func,
-}

package/src/actions/index.js

@@ -1,21 +0,0 @@
-import {ApproveAction} from './ApproveAction'
-import {DeleteAction} from './DeleteAction'
-import {DiscardChangesAction} from './DiscardChangesAction'
-import {PublishAction} from './PublishAction'
-import {RequestChangesAction} from './RequestChangesAction'
-import {RequestReviewAction} from './RequestReviewAction'
-import {SyncAction} from './SyncAction'
-import {UnpublishAction} from './Unpublish'
-
-export function resolveWorkflowActions(/* docInfo */) {
-  return [
-    SyncAction,
-    RequestReviewAction,
-    ApproveAction,
-    RequestChangesAction,
-    PublishAction,
-    UnpublishAction,
-    DiscardChangesAction,
-    DeleteAction,
-  ]
-}