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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",
@@ -87,7 +87,7 @@
     "rimraf": "^4.1.2",
     "sanity": "^3.3.1",
     "semantic-release": "^20.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "@sanity/ui": "^1.2.2",

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
@@ -92,7 +94,8 @@ export default function DocumentList(props: DocumentListProps) {
         return (
           <Draggable
             // The metadata's documentId is always the published one to avoid rerendering
-            key={documentId}
+            // key={documentId}
+            key={virtualItem.key}
             draggableId={documentId}
             index={virtualItem.index}
             isDragDisabled={isDragDisabled}
@@ -106,6 +109,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

@@ -5,6 +5,7 @@ import {useClient} from 'sanity'
 import {UserExtended} from 'sanity-plugin-utils'
 
 import {API_VERSION} from '../constants'
+import {generateMultipleOrderRanks} from '../helpers/generateMultipleOrderRanks'
 import {SanityDocumentWithMetadata, State} from '../types'
 import FloatingCard from './FloatingCard'
 
@@ -32,16 +33,17 @@ export default function Verify(props: VerifyProps) {
       }, [] as string[])
     : []
 
-  const documentsWithInvalidUserIds = data?.length
-    ? data.reduce((acc, cur) => {
-        const {documentId, assignees} = cur._metadata ?? {}
-        const allAssigneesExist = assignees?.length
-          ? assignees?.every((a) => userList.find((u) => u.id === a))
-          : true
+  const documentsWithInvalidUserIds =
+    data?.length && userList?.length
+      ? data.reduce((acc, cur) => {
+          const {documentId, assignees} = cur._metadata ?? {}
+          const allAssigneesExist = assignees?.length
+            ? assignees?.every((a) => userList.find((u) => u.id === a))
+            : true
 
-        return !allAssigneesExist && documentId ? [...acc, documentId] : acc
-      }, [] as string[])
-    : []
+          return !allAssigneesExist && documentId ? [...acc, documentId] : acc
+        }, [] as string[])
+      : []
 
   const documentsWithoutOrderIds = data?.length
     ? data.reduce((acc, cur) => {
@@ -130,20 +132,51 @@ export default function Verify(props: VerifyProps) {
         status: 'info',
       })
 
-      // Get first order value
-      const firstOrder = data[0]?._metadata?.orderRank
-      let newLexo =
-        firstOrder && data.length !== ids.length
-          ? LexoRank.parse(firstOrder)
-          : LexoRank.min()
+      // Get first and second order values, if they exist
+      const [firstOrder, secondOrder] = [...data]
+        .slice(0, 2)
+        .map((d) => d._metadata?.orderRank)
+      const minLexo = firstOrder ? LexoRank.parse(firstOrder) : undefined
+      const maxLexo = secondOrder ? LexoRank.parse(secondOrder) : undefined
+      const ranks = generateMultipleOrderRanks(ids.length, minLexo, 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()
+        tx.patch(`workflow-metadata.${ids[index]}`, {
+          set: {orderRank: ranks[index].toString()},
+        })
+      }
+
+      await tx.commit()
+
+      toast.push({
+        title: `Added order to ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [data, client, toast]
+  )
+
+  // Reset order value on all metadata documents
+  const resetOrderOfAllDocuments = React.useCallback(
+    async (ids: string[]) => {
+      toast.push({
+        title: 'Adding ordering...',
+        status: 'info',
+      })
+
+      const ranks = generateMultipleOrderRanks(ids.length)
 
+      const tx = client.transaction()
+
+      // Create a new in-between value for each document
+      for (let index = 0; index < ids.length; index += 1) {
         tx.patch(`workflow-metadata.${ids[index]}`, {
-          set: {orderRank: newLexo.toString()},
+          set: {orderRank: ranks[index].toString()},
         })
       }
 
@@ -190,6 +223,7 @@ export default function Verify(props: VerifyProps) {
       {documentsWithoutValidMetadataIds.length > 0 ? (
         <Button
           tone="caution"
+          mode="ghost"
           onClick={() => correctDocuments(documentsWithoutValidMetadataIds)}
           text={
             documentsWithoutValidMetadataIds.length === 1
@@ -201,6 +235,7 @@ export default function Verify(props: VerifyProps) {
       {documentsWithInvalidUserIds.length > 0 ? (
         <Button
           tone="caution"
+          mode="ghost"
           onClick={() => removeUsersFromDocuments(documentsWithInvalidUserIds)}
           text={
             documentsWithInvalidUserIds.length === 1
@@ -212,6 +247,7 @@ export default function Verify(props: VerifyProps) {
       {documentsWithoutOrderIds.length > 0 ? (
         <Button
           tone="caution"
+          mode="ghost"
           onClick={() => addOrderToDocuments(documentsWithoutOrderIds)}
           text={
             documentsWithoutOrderIds.length === 1
@@ -221,36 +257,41 @@ export default function Verify(props: VerifyProps) {
         />
       ) : 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`
-          }
-        />
+        <>
+          <Button
+            tone="caution"
+            mode="ghost"
+            onClick={() => addOrderToDocuments(documentsWithDuplicatedOrderIds)}
+            text={
+              documentsWithDuplicatedOrderIds.length === 1
+                ? `Set Unique Order for 1 Document`
+                : `Set Unique Order for ${documentsWithDuplicatedOrderIds.length} Documents`
+            }
+          />
+          <Button
+            tone="caution"
+            mode="ghost"
+            onClick={() =>
+              resetOrderOfAllDocuments(
+                data.map((doc) => String(doc._metadata?.documentId))
+              )
+            }
+            text={
+              data.length === 1
+                ? `Reset Order for 1 Document`
+                : `Reset Order for all ${data.length} Documents`
+            }
+          />
+        </>
       ) : null}
       {orphanedMetadataDocumentIds.length > 0 ? (
         <Button
           text="Cleanup orphaned metadata"
           onClick={handleOrphans}
           tone="caution"
+          mode="ghost"
         />
       ) : null}
-      {/* <Button
-        tone="caution"
-        onClick={() =>
-          addOrderToDocuments(
-            data.map((doc) => String(doc._metadata?.documentId))
-          )
-        }
-        text={
-          data.length === 1
-            ? `Reset Order for 1 Document`
-            : `Reset Order for all ${data.length} Documents`
-        }
-      /> */}
     </FloatingCard>
   )
 }

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}