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

package/package.json

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

package/src/components/DocumentCard/CompleteButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import {Button, useToast} from '@sanity/ui'
 import {CheckmarkIcon} from '@sanity/icons'
+import {Box, Button, Text, Tooltip, useToast} from '@sanity/ui'
+import React from 'react'
 import {useClient} from 'sanity'
 
 import {API_VERSION} from '../../constants'
@@ -15,39 +15,54 @@ export default function CompleteButton(props: CompleteButtonProps) {
   const client = useClient({apiVersion: API_VERSION})
   const toast = useToast()
 
-  const handleComplete = React.useCallback(
-    (id: string) => {
-      client
-        .delete(`workflow-metadata.${id}`)
-        .then(() => {
-          toast.push({
-            status: 'success',
-            title: 'Workflow completed',
-            description: id,
+  const handleComplete: React.MouseEventHandler<HTMLButtonElement> =
+    React.useCallback(
+      (event) => {
+        const id = event.currentTarget.value
+
+        if (!id) {
+          return
+        }
+
+        client
+          .delete(`workflow-metadata.${id}`)
+          .then(() => {
+            toast.push({
+              status: 'success',
+              title: 'Workflow completed',
+            })
           })
-        })
-        .catch(() => {
-          toast.push({
-            status: 'error',
-            title: 'Could not complete Workflow',
-            description: id,
+          .catch(() => {
+            toast.push({
+              status: 'error',
+              title: 'Could not complete Workflow',
+            })
           })
-        })
-    },
-    [client, toast]
-  )
+      },
+      [client, toast]
+    )
 
   return (
-    <Button
-      onClick={() => handleComplete(documentId)}
-      text="Complete"
-      icon={CheckmarkIcon}
-      tone="positive"
-      mode="ghost"
-      fontSize={1}
-      padding={2}
-      tabIndex={-1}
-      disabled={disabled}
-    />
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>Remove this document from Workflow</Text>
+        </Box>
+      }
+    >
+      <Button
+        value={documentId}
+        onClick={handleComplete}
+        text="Complete"
+        icon={CheckmarkIcon}
+        tone="positive"
+        mode="ghost"
+        fontSize={1}
+        padding={2}
+        tabIndex={-1}
+        disabled={disabled}
+      />
+    </Tooltip>
   )
 }

package/src/components/DocumentCard/index.tsx

@@ -20,6 +20,7 @@ import {ValidationStatus} from './ValidationStatus'
 
 type DocumentCardProps = {
   isDragDisabled: boolean
+  isPatching: boolean
   userRoleCanDrop: boolean
   isDragging: boolean
   item: SanityDocumentWithMetadata
@@ -34,6 +35,7 @@ type DocumentCardProps = {
 export function DocumentCard(props: DocumentCardProps) {
   const {
     isDragDisabled,
+    isPatching,
     userRoleCanDrop,
     isDragging,
     item,
@@ -68,6 +70,7 @@ export function DocumentCard(props: DocumentCardProps) {
 
     if (!userRoleCanDrop) return isDarkMode ? `default` : `transparent`
     if (!documentId) return tone
+    if (isPatching) tone = isDarkMode ? `default` : `transparent`
     if (isDragging) tone = `positive`
 
     if (state?.requireValidation && !isValidating && validation.length > 0) {
@@ -82,6 +85,7 @@ export function DocumentCard(props: DocumentCardProps) {
   }, [
     defaultCardTone,
     userRoleCanDrop,
+    isPatching,
     isDarkMode,
     documentId,
     isDragging,
@@ -137,13 +141,18 @@ export function DocumentCard(props: DocumentCardProps) {
               <Flex align="center" justify="space-between" gap={1}>
                 <Box flex={1}>
                   <Preview
-                    layout="default"
+                    // Like as in desk lists, except it has an intermittent loading state
+                    // layout="default"
+                    // Like in the PTE, with no loading state
+                    layout="block"
                     value={item}
                     schemaType={schema.get(item._type) as SchemaType}
                   />
                 </Box>
                 <Box style={{flexShrink: 0}}>
-                  {hasError || isDragDisabled ? null : <DragHandleIcon />}
+                  {hasError || isDragDisabled || isPatching ? null : (
+                    <DragHandleIcon />
+                  )}
                 </Box>
               </Flex>
             </Card>
@@ -170,13 +179,21 @@ export function DocumentCard(props: DocumentCardProps) {
                   type={item._type}
                   disabled={!userRoleCanDrop}
                 />
-                {isLastState ? (
+                {isLastState && states.length <= 3 ? (
                   <CompleteButton
                     documentId={documentId}
                     disabled={!userRoleCanDrop}
                   />
                 ) : null}
               </Flex>
+              {isLastState && states.length > 3 ? (
+                <Stack paddingTop={2}>
+                  <CompleteButton
+                    documentId={documentId}
+                    disabled={!userRoleCanDrop}
+                  />
+                </Stack>
+              ) : null}
             </Card>
           </Stack>
         </Card>

package/src/components/DocumentList.tsx

@@ -11,6 +11,7 @@ import {DocumentCard} from './DocumentCard'
 type DocumentListProps = {
   data: SanityDocumentWithMetadata[]
   invalidDocumentIds: string[]
+  patchingIds: string[]
   selectedSchemaTypes: string[]
   selectedUserIds: string[]
   state: State
@@ -28,6 +29,7 @@ export default function DocumentList(props: DocumentListProps) {
   const {
     data = [],
     invalidDocumentIds,
+    patchingIds,
     selectedSchemaTypes,
     selectedUserIds,
     state,
@@ -70,7 +72,6 @@ export default function DocumentList(props: DocumentListProps) {
         scrollBehavior: 'auto',
       }}
     >
-      {/* {dataFiltered.map((item, itemIndex) => { */}
       {rowVirtualizer.getVirtualItems().map((virtualItem) => {
         const item = dataFiltered[virtualItem.index]
 
@@ -83,6 +84,7 @@ export default function DocumentList(props: DocumentListProps) {
         const isInvalid = invalidDocumentIds.includes(documentId)
         const meInAssignees = user?.id ? assignees?.includes(user.id) : false
         const isDragDisabled =
+          patchingIds.includes(documentId) ||
           !userRoleCanDrop ||
           isInvalid ||
           !(state.requireAssignment
@@ -106,6 +108,7 @@ export default function DocumentList(props: DocumentListProps) {
                 <DocumentCard
                   userRoleCanDrop={userRoleCanDrop}
                   isDragDisabled={isDragDisabled}
+                  isPatching={patchingIds.includes(documentId)}
                   isDragging={draggableSnapshot.isDragging}
                   item={item}
                   toggleInvalidDocumentId={toggleInvalidDocumentId}

package/src/components/Filters.tsx

@@ -139,7 +139,7 @@ export default function Filters(props: FiltersProps) {
           )}
         </Flex>
 
-        {schemaTypes.length > 0 ? (
+        {schemaTypes.length > 1 ? (
           <Flex align="center" gap={1}>
             {schemaTypes.map((typeName) => {
               const schemaType = schema.get(typeName)

package/src/components/Verify.tsx

@@ -130,17 +130,26 @@ export default function Verify(props: VerifyProps) {
         status: 'info',
       })
 
-      // Get first order value
-      const firstOrder = data[0]?._metadata?.orderRank
-      let newLexo =
+      // Get first and second order values
+      const [firstOrder, secondOrder] = [...data]
+        .slice(0, 2)
+        .map((d) => d._metadata?.orderRank)
+      const minLexo =
         firstOrder && data.length !== ids.length
           ? LexoRank.parse(firstOrder)
           : LexoRank.min()
+      const maxLexo =
+        secondOrder && data.length !== ids.length
+          ? LexoRank.parse(secondOrder)
+          : LexoRank.max()
+      let newLexo = minLexo.between(maxLexo)
+      const lastLexo = maxLexo
 
       const tx = client.transaction()
 
+      // Create a new in-between value for each document
       for (let index = 0; index < ids.length; index += 1) {
-        newLexo = newLexo.genNext().genNext()
+        newLexo = newLexo.between(lastLexo)
 
         tx.patch(`workflow-metadata.${ids[index]}`, {
           set: {orderRank: newLexo.toString()},

package/src/components/WorkflowTool.tsx

@@ -1,10 +1,20 @@
 import {
   DragDropContext,
+  DraggableChildrenFn,
   DragStart,
   Droppable,
   DropResult,
 } from '@hello-pangea/dnd'
-import {Box, Card, Container, Flex, Grid, Spinner, useTheme} from '@sanity/ui'
+import {
+  Box,
+  Card,
+  Container,
+  Flex,
+  Grid,
+  Spinner,
+  useTheme,
+  useToast,
+} from '@sanity/ui'
 import {LexoRank} from 'lexorank'
 import React from 'react'
 import {Tool, useCurrentUser} from 'sanity'
@@ -30,6 +40,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
 
   const isDarkMode = useTheme().sanity.color.dark
   const defaultCardTone = isDarkMode ? 'default' : 'transparent'
+  const toast = useToast()
 
   const userList = useProjectUsers({apiVersion: API_VERSION})
 
@@ -39,6 +50,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     : []
 
   const {workflowData, operations} = useWorkflowDocuments(schemaTypes)
+  const [patchingIds, setPatchingIds] = React.useState<string[]>([])
 
   // Data to display in cards
   const {data, loading, error} = workflowData
@@ -128,48 +140,94 @@ export default function WorkflowTool(props: WorkflowToolProps) {
       const destinationStateItems = [
         ...filterItemsAndSort(data, destination.droppableId, [], null),
       ]
+      const destinationStateIndex = states.findIndex(
+        (s) => s.id === destination.droppableId
+      )
+      const globalStateMinimumRank = data[0]._metadata.orderRank
+      const globalStateMaximumRank = data[data.length - 1]._metadata.orderRank
 
       let newOrder
 
       if (!destinationStateItems.length) {
         // Only item in state
         // New minimum rank
-        newOrder = LexoRank.min().toString()
+        if (destinationStateIndex === 0) {
+          // Only the first state should generate an absolute minimum rank
+          newOrder = LexoRank.min().toString()
+        } else {
+          // Otherwise create the next rank between min and the globally minimum rank
+          newOrder = LexoRank.parse(globalStateMinimumRank)
+            .between(LexoRank.min())
+            .toString()
+        }
       } else if (destination.index === 0) {
         // Now first item in order
         const firstItemOrderRank = [...destinationStateItems].shift()?._metadata
           ?.orderRank
-        newOrder =
-          firstItemOrderRank && typeof firstItemOrderRank === 'string'
-            ? LexoRank.parse(firstItemOrderRank).genPrev().toString()
-            : LexoRank.min().toString()
+
+        if (firstItemOrderRank && typeof firstItemOrderRank === 'string') {
+          newOrder = LexoRank.parse(firstItemOrderRank).genPrev().toString()
+        } else if (destinationStateIndex === 0) {
+          // Only the first state should generate an absolute minimum rank
+          newOrder = LexoRank.min().toString()
+        } else {
+          // Otherwise create the next rank between min and the globally minimum rank
+          newOrder = LexoRank.parse(globalStateMinimumRank)
+            .between(LexoRank.min())
+            .toString()
+        }
       } else if (destination.index + 1 === destinationStateItems.length) {
         // Now last item in order
         const lastItemOrderRank = [...destinationStateItems].pop()?._metadata
           ?.orderRank
-        newOrder =
-          lastItemOrderRank && typeof lastItemOrderRank === 'string'
-            ? LexoRank.parse(lastItemOrderRank).genNext().toString()
-            : LexoRank.min().toString()
+
+        if (lastItemOrderRank && typeof lastItemOrderRank === 'string') {
+          newOrder = LexoRank.parse(lastItemOrderRank).genNext().toString()
+        } else if (destinationStateIndex === states.length - 1) {
+          // Only the last state should generate an absolute maximum rank
+          newOrder = LexoRank.max().toString()
+        } else {
+          // Otherwise create the next rank between max and the globally maximum rank
+          newOrder = LexoRank.parse(globalStateMaximumRank)
+            .between(LexoRank.min())
+            .toString()
+        }
       } else {
         // Must be between two items
         const itemBefore = destinationStateItems[destination.index - 1]
         const itemBeforeRank = itemBefore?._metadata?.orderRank
-        const itemBeforeRankParsed = itemBeforeRank
-          ? LexoRank.parse(itemBeforeRank)
-          : LexoRank.min()
+        let itemBeforeRankParsed
+        if (itemBeforeRank) {
+          itemBeforeRankParsed = LexoRank.parse(itemBeforeRank)
+        } else if (destinationStateIndex === 0) {
+          itemBeforeRankParsed = LexoRank.min()
+        } else {
+          itemBeforeRankParsed = LexoRank.parse(globalStateMinimumRank)
+        }
+
         const itemAfter = destinationStateItems[destination.index]
         const itemAfterRank = itemAfter?._metadata?.orderRank
-        const itemAfterRankParsed = itemAfterRank
-          ? LexoRank.parse(itemAfterRank)
-          : LexoRank.max()
+        let itemAfterRankParsed
+        if (itemAfterRank) {
+          itemAfterRankParsed = LexoRank.parse(itemAfterRank)
+        } else if (destinationStateIndex === states.length - 1) {
+          itemAfterRankParsed = LexoRank.max()
+        } else {
+          itemAfterRankParsed = LexoRank.parse(globalStateMaximumRank)
+        }
 
         newOrder = itemBeforeRankParsed.between(itemAfterRankParsed).toString()
       }
 
-      move(draggableId, destination, states, newOrder)
+      setPatchingIds([...patchingIds, draggableId])
+      toast.push({
+        status: 'info',
+        title: 'Updating document state...',
+      })
+      await move(draggableId, destination, states, newOrder)
+      setPatchingIds((ids: string[]) => ids.filter((id) => id !== draggableId))
     },
-    [data, move, states]
+    [data, patchingIds, toast, move, states]
   )
 
   // Used for the user filter UI
@@ -224,6 +282,41 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     []
   )
 
+  const Clone: DraggableChildrenFn = React.useCallback(
+    (provided, snapshot, rubric) => {
+      const item = data.find(
+        (doc) => doc?._metadata?.documentId === rubric.draggableId
+      )
+
+      return (
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+        >
+          {item ? (
+            <DocumentCard
+              // Assumed false, if it's dragging it's not disabled
+              isDragDisabled={false}
+              // Assumed false, if it's dragging it's not patching
+              isPatching={false}
+              // Assumed true, if you can drag it you can drop it
+              userRoleCanDrop
+              isDragging={snapshot.isDragging}
+              item={item}
+              states={states}
+              toggleInvalidDocumentId={toggleInvalidDocumentId}
+              userList={userList}
+            />
+          ) : (
+            <Feedback title="Item not found" tone="caution" />
+          )}
+        </div>
+      )
+    },
+    [data, states, toggleInvalidDocumentId, userList]
+  )
+
   if (!states?.length) {
     return (
       <Container width={1} padding={5}>
@@ -297,37 +390,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) =>
-                            doc?._metadata?.documentId === rubric.draggableId
-                        )
-
-                        return (
-                          <div
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            ref={provided.innerRef}
-                          >
-                            {item ? (
-                              <DocumentCard
-                                isDragDisabled={false}
-                                userRoleCanDrop={userRoleCanDrop}
-                                isDragging={snapshot.isDragging}
-                                item={item}
-                                states={states}
-                                toggleInvalidDocumentId={
-                                  toggleInvalidDocumentId
-                                }
-                                userList={userList}
-                              />
-                            ) : (
-                              <Feedback title="Item not found" tone="caution" />
-                            )}
-                          </div>
-                        )
-                      }}
+                      renderClone={Clone}
                     >
                       {(provided, snapshot) => (
                         <Card
@@ -349,6 +412,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                           <DocumentList
                             data={data}
                             invalidDocumentIds={invalidDocumentIds}
+                            patchingIds={patchingIds}
                             selectedSchemaTypes={selectedSchemaTypes}
                             selectedUserIds={selectedUserIds}
                             state={state}

package/src/hooks/useWorkflowDocuments.tsx

@@ -122,30 +122,30 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
       const {_id, _type} = document
 
       // Metadata + useDocumentOperation always uses Published id
-      const {documentId} = document._metadata || {}
+      const {documentId, _rev} = document._metadata || {}
 
       await client
         .patch(`workflow-metadata.${documentId}`)
-        // 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)
+        .ifRevisionId(_rev)
         .set({state: newStateId, orderRank: newOrder})
         .commit()
-        .then(() => {
-          return toast.push({
+        .then((res) => {
+          toast.push({
             title: `Moved to "${newState?.title ?? newStateId}"`,
             status: 'success',
           })
+          return res
         })
         .catch((err) => {
           // Revert optimistic update
           setLocalDocuments(currentLocalData)
 
-          return toast.push({
+          toast.push({
             title: `Failed to move to "${newState?.title ?? newStateId}"`,
             description: err.message,
             status: 'error',
           })
+          return null
         })
 
       // Send back to the workflow board so a document update can happen