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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "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,52 +43,25 @@ export function DocumentCard(props: DocumentCardProps) {
   } = props
   const {assignees = [], documentId} = item._metadata ?? {}
   const schema = useSchema()
-
-  // 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
-  // const currentState = useMemo(
-  //   () => states.find((state) => state.id === item._metadata?.state),
-  //   [states, item]
-  // )
-  // const ops = useDocumentOperation(documentId ?? ``, item._type)
-  // const toast = useToast()
-
-  // useEffect(() => {
-  //   const isDraft = item._id.startsWith('drafts.')
-
-  //   if (isDraft && currentState?.operation === 'publish' && !item?._metadata?.optimistic) {
-  //     if (!ops.publish.disabled) {
-  //       ops.publish.execute()
-  //       toast.push({
-  //         title: 'Published Document',
-  //         description: documentId,
-  //         status: 'success',
-  //       })
-  //     }
-  //   } else if (
-  //     !isDraft &&
-  //     currentState?.operation === 'unpublish' &&
-  //     !item?._metadata?.optimistic
-  //   ) {
-  //     if (!ops.unpublish.disabled) {
-  //       ops.unpublish.execute()
-  //       toast.push({
-  //         title: 'Unpublished Document',
-  //         description: documentId,
-  //         status: 'success',
-  //       })
-  //     }
-  //   }
-  // }, [currentState, documentId, item, ops, toast])
+  const state = states.find((s) => s.id === item._metadata?.state)
 
   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 +70,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 +80,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 +115,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/DocumentList.tsx

@@ -51,7 +51,7 @@ export default function DocumentList(props: DocumentListProps) {
     getScrollElement: () => parentRef.current,
     getItemKey: (index) => dataFiltered[index]?._metadata?.documentId ?? index,
     estimateSize: () => 113,
-    overscan: 5,
+    overscan: 10,
   })
 
   if (!data.length) {

package/src/components/StateTitle/index.tsx

@@ -1,21 +1,9 @@
-import {Flex, Card, Badge, BadgeTone} from '@sanity/ui'
 import {InfoOutlineIcon, UserIcon} from '@sanity/icons'
+import {Badge, BadgeTone, Box, Card, Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
+import {State} from '../../types'
 import {Status} from './Status'
-import {
-  // Operation,
-  State,
-} from '../../types'
-
-type StateTitleProps = {
-  state: State
-  requireAssignment: boolean
-  userRoleCanDrop: boolean
-  isDropDisabled: boolean
-  draggingFrom: string
-  // operation?: Operation
-}
 
 const StyledStickyCard = styled(Card)(
   () => css`
@@ -25,8 +13,24 @@ const StyledStickyCard = styled(Card)(
   `
 )
 
+type StateTitleProps = {
+  state: State
+  requireAssignment: boolean
+  userRoleCanDrop: boolean
+  isDropDisabled: boolean
+  draggingFrom: string
+  documentCount: number
+}
+
 export default function StateTitle(props: StateTitleProps) {
-  const {state, requireAssignment, userRoleCanDrop, isDropDisabled, draggingFrom} = props
+  const {
+    state,
+    requireAssignment,
+    userRoleCanDrop,
+    isDropDisabled,
+    draggingFrom,
+    documentCount,
+  } = props
 
   let tone: BadgeTone = 'default'
   const isSource = draggingFrom === state.id
@@ -39,7 +43,11 @@ export default function StateTitle(props: StateTitleProps) {
     <StyledStickyCard paddingY={4} padding={3} tone="inherit">
       <Flex gap={3} align="center">
         <Badge
-          mode={(draggingFrom && !isDropDisabled) || isSource ? 'default' : 'outline'}
+          mode={
+            (draggingFrom && !isDropDisabled) || isSource
+              ? 'default'
+              : 'outline'
+          }
           tone={tone}
           muted={!userRoleCanDrop || isDropDisabled}
         >
@@ -57,16 +65,13 @@ export default function StateTitle(props: StateTitleProps) {
             icon={UserIcon}
           />
         ) : null}
-        {/* {operation ? (
-          <Status
-            text={
-              operation === 'publish'
-                ? `A document moved to this State will also publish the current Draft`
-                : `A document moved to this State will also unpublish the current Published version`
-            }
-            icon={operation === 'publish' ? PublishIcon : UnpublishIcon}
-          />
-        ) : null} */}
+        <Box flex={1}>
+          {documentCount > 0 ? (
+            <Text weight="semibold" align="right" size={1}>
+              {documentCount}
+            </Text>
+          ) : null}
+        </Box>
       </Flex>
     </StyledStickyCard>
   )

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()
 
@@ -47,6 +51,18 @@ export default function Validators({data, userList, states}: ValidatorsProps) {
       }, [] as string[])
     : []
 
+  const documentsWithDuplicatedOrderIds = data?.length
+    ? data.reduce((acc, cur) => {
+        const {documentId, orderRank} = cur._metadata ?? {}
+
+        return orderRank &&
+          data.filter((d) => d._metadata?.orderRank === orderRank).length > 1 &&
+          documentId
+          ? [...acc, documentId]
+          : acc
+      }, [] as string[])
+    : []
+
   // Updates metadata documents to a valid, existing state
   const correctDocuments = React.useCallback(
     async (ids: string[]) => {
@@ -204,6 +220,17 @@ export default function Validators({data, userList, states}: ValidatorsProps) {
           }
         />
       ) : null}
+      {documentsWithDuplicatedOrderIds.length > 0 ? (
+        <Button
+          tone="caution"
+          onClick={() => addOrderToDocuments(documentsWithDuplicatedOrderIds)}
+          text={
+            documentsWithDuplicatedOrderIds.length === 1
+              ? `Set Unique Order for 1 Document`
+              : `Set Unique Order for ${documentsWithDuplicatedOrderIds.length} Documents`
+          }
+        />
+      ) : null}
       {orphanedMetadataDocumentIds.length > 0 ? (
         <Button
           text="Cleanup orphaned metadata"

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>
@@ -107,7 +107,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
   )
 
   const handleDragEnd = React.useCallback(
-    (result: DropResult) => {
+    async (result: DropResult) => {
       // Reset undroppable states
       setUndroppableStates([])
       setDraggingFrom(``)
@@ -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}
@@ -279,9 +280,16 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                     state={state}
                     requireAssignment={state.requireAssignment ?? false}
                     userRoleCanDrop={userRoleCanDrop}
-                    // operation={state.operation}
                     isDropDisabled={isDropDisabled}
                     draggingFrom={draggingFrom}
+                    documentCount={
+                      filterItemsAndSort(
+                        data,
+                        state.id,
+                        selectedUserIds,
+                        selectedSchemaTypes
+                      ).length
+                    }
                   />
                   <Box flex={1}>
                     <Droppable
@@ -289,6 +297,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/hooks/useWorkflowDocuments.tsx

@@ -65,7 +65,7 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
   }, [data])
 
   const move = React.useCallback(
-    (
+    async (
       draggedId: string,
       destination: DraggableLocation,
       states: State[],
@@ -122,11 +122,13 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
       const {_id, _type} = document
 
       // Metadata + useDocumentOperation always uses Published id
-      const {_rev, documentId} = document._metadata || {}
+      const {documentId} = document._metadata || {}
 
-      client
+      await client
         .patch(`workflow-metadata.${documentId}`)
-        .ifRevisionId(_rev as string)
+        // Removed because it was effecting fast-updates between columns
+        // TODO: Prevent dragging while patching instead while keeping optimistic updates and revert when patch fails
+        // .ifRevisionId(document._metadata._rev)
         .set({state: newStateId, orderRank: newOrder})
         .commit()
         .then(() => {
@@ -135,12 +137,13 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
             status: 'success',
           })
         })
-        .catch(() => {
+        .catch((err) => {
           // Revert optimistic update
           setLocalDocuments(currentLocalData)
 
           return toast.push({
             title: `Failed to move to "${newState?.title ?? newStateId}"`,
+            description: err.message,
             status: 'error',
           })
         })

package/src/types/index.ts

@@ -1,14 +1,12 @@
 import {SanityDocumentLike} from 'sanity'
 
-// export type Operation = 'publish' | 'unpublish'
-
 export type State = {
   id: string
   transitions: string[]
   title: string
-  // operation?: Operation
   roles?: string[]
   requireAssignment?: boolean
+  requireValidation?: boolean
   // From document badges
   color?: 'primary' | 'success' | 'warning' | 'danger'
 }