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

package/README.md

@@ -12,6 +12,8 @@ With Sanity Studio you can [customize your content tools to support arbitrary wo
 
 This plugin is distributed as a **reference implementation** of these customization APIs and is not considered to be a feature-complete implementation of what workflow management requires in production. It is a starting point intended to be forked and customized to the needs of your organization and content creators.
 
+A key intention of this plugin is that it **does not influence or modify whether a document is in draft or published**. It only tracks the values of a separate "metadata" document. In this implementation, an "Approved" document could be a draft but will still need publishing. "Approving" the document simply removes it from the Workflow process. You will decide if Publishing the document happens in the Studio like normal, using the [Scheduled Publishing plugin](https://www.sanity.io/plugins/scheduled-publishing) or the [Scheduling API](https://www.sanity.io/docs/scheduling-api#fa3bb95f83ed).
+
 ![Screenshot 2023-03-21 at 12 11 24](https://user-images.githubusercontent.com/9684022/226602179-5bd3d91a-9c27-431e-be18-3c70f06c6ccb.png)
 
 ## Features
@@ -51,7 +53,7 @@ Add it as a plugin in sanity.config.ts (or .js):
             // schemaTypes: ['article', 'product'],
             schemaTypes: [],
             // Optional, see below
-            states: [],
+            // states: [],
          })
      ]
  })
@@ -101,10 +103,12 @@ Once the Workflow is complete, the metadata can be removed by using the "Complet
 
 This plugin is largely based on the original Workflow Demo built into a Sanity Studio v2 project. The major differences are:
 
-* This plugin can be more easily installed and configured, not just code examples built into a Studio project
-* Documents must "opt-in" to and removed from the Workflow, in the previous version all documents were in the workflow which would fill up the interface
-* User Roles and Assignments can affect the Workflow. Set rules to enforce which States documents can move between and if being assigned to a document is required to move it to a new State
-* Ability to filter Schema types and assigned Users
+* This plugin is not concerned with nor will modify whether a document is in draft or published.
+* This plugin can be more easily installed and configured, not just code examples built into a Studio project.
+* Documents must "opt-in" to and be removed from the Workflow. In the previous version, all documents were in the workflow which would fill up the interface and negatively affect performance.
+* Document validation status can be used as a way to prevent movement through the workflow.
+* User Roles and Assignments can affect the Workflow. Set rules to enforce which States documents can move between and if being assigned to a document is required to move it to a new State.
+* This plugin can filter Schema types and assigned Users.
 
 ## License
 

package/lib/index.esm.js

@@ -633,7 +633,7 @@ function useWorkflowDocuments(schemaTypes) {
       setLocalDocuments(data);
     }
   }, [data]);
-  const move = React.useCallback((draggedId, destination, states, newOrder) => {
+  const move = React.useCallback(async (draggedId, destination, states, newOrder) => {
     const currentLocalData = localDocuments;
     const newLocalDocuments = localDocuments.map(item => {
       var _a;
@@ -680,25 +680,28 @@ function useWorkflowDocuments(schemaTypes) {
       _type
     } = document;
     const {
-      _rev,
-      documentId
+      documentId,
+      _rev
     } = document._metadata || {};
-    client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
+    await client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
       state: newStateId,
       orderRank: newOrder
-    }).commit().then(() => {
+    }).commit().then(res => {
       var _a;
-      return toast.push({
+      toast.push({
         title: "Moved to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
         status: "success"
       });
-    }).catch(() => {
+      return res;
+    }).catch(err => {
       var _a;
       setLocalDocuments(currentLocalData);
-      return toast.push({
+      toast.push({
         title: "Failed to move to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
+        description: err.message,
         status: "error"
       });
+      return null;
     });
     return {
       _id,
@@ -812,31 +815,44 @@ function CompleteButton(props) {
     apiVersion: API_VERSION
   });
   const toast = useToast();
-  const handleComplete = React.useCallback(id => {
+  const handleComplete = React.useCallback(event => {
+    const id = event.currentTarget.value;
+    if (!id) {
+      return;
+    }
     client.delete("workflow-metadata.".concat(id)).then(() => {
       toast.push({
         status: "success",
-        title: "Workflow completed",
-        description: id
+        title: "Workflow completed"
       });
     }).catch(() => {
       toast.push({
         status: "error",
-        title: "Could not complete Workflow",
-        description: id
+        title: "Could not complete Workflow"
       });
     });
   }, [client, toast]);
-  return /* @__PURE__ */jsx(Button, {
-    onClick: () => handleComplete(documentId),
-    text: "Complete",
-    icon: CheckmarkIcon,
-    tone: "positive",
-    mode: "ghost",
-    fontSize: 1,
-    padding: 2,
-    tabIndex: -1,
-    disabled
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: "Remove this document from Workflow"
+      })
+    }),
+    children: /* @__PURE__ */jsx(Button, {
+      value: documentId,
+      onClick: handleComplete,
+      text: "Complete",
+      icon: CheckmarkIcon,
+      tone: "positive",
+      mode: "ghost",
+      fontSize: 1,
+      padding: 2,
+      tabIndex: -1,
+      disabled
+    })
   });
 }
 function TimeAgo(_ref2) {
@@ -953,6 +969,7 @@ function DocumentCard(props) {
   var _a, _b;
   const {
     isDragDisabled,
+    isPatching,
     userRoleCanDrop,
     isDragging,
     item,
@@ -986,6 +1003,7 @@ function DocumentCard(props) {
     let tone = defaultCardTone;
     if (!userRoleCanDrop) return isDarkMode ? "default" : "transparent";
     if (!documentId) return tone;
+    if (isPatching) tone = isDarkMode ? "default" : "transparent";
     if (isDragging) tone = "positive";
     if ((state == null ? void 0 : state.requireValidation) && !isValidating && validation.length > 0) {
       if (validation.some(v => v.level === "error")) {
@@ -995,7 +1013,7 @@ function DocumentCard(props) {
       }
     }
     return tone;
-  }, [defaultCardTone, userRoleCanDrop, isDarkMode, documentId, isDragging, isValidating, validation, state == null ? void 0 : state.requireValidation]);
+  }, [defaultCardTone, userRoleCanDrop, isPatching, isDarkMode, documentId, isDragging, isValidating, validation, state == null ? void 0 : state.requireValidation]);
   useEffect(() => {
     if (!isValidating && validation.length > 0) {
       if (validation.some(v => v.level === "error")) {
@@ -1041,7 +1059,7 @@ function DocumentCard(props) {
               children: [/* @__PURE__ */jsx(Box, {
                 flex: 1,
                 children: /* @__PURE__ */jsx(Preview, {
-                  layout: "default",
+                  layout: "block",
                   value: item,
                   schemaType: schema.get(item._type)
                 })
@@ -1049,14 +1067,14 @@ function DocumentCard(props) {
                 style: {
                   flexShrink: 0
                 },
-                children: hasError || isDragDisabled ? null : /* @__PURE__ */jsx(DragHandleIcon, {})
+                children: hasError || isDragDisabled || isPatching ? null : /* @__PURE__ */jsx(DragHandleIcon, {})
               })]
             })
-          }), /* @__PURE__ */jsx(Card, {
+          }), /* @__PURE__ */jsxs(Card, {
             padding: 2,
             radius: 2,
             tone: "inherit",
-            children: /* @__PURE__ */jsxs(Flex, {
+            children: [/* @__PURE__ */jsxs(Flex, {
               align: "center",
               justify: "space-between",
               gap: 3,
@@ -1078,11 +1096,17 @@ function DocumentCard(props) {
                 id: item._id,
                 type: item._type,
                 disabled: !userRoleCanDrop
-              }), isLastState ? /* @__PURE__ */jsx(CompleteButton, {
+              }), isLastState && states.length <= 3 ? /* @__PURE__ */jsx(CompleteButton, {
                 documentId,
                 disabled: !userRoleCanDrop
               }) : null]
-            })
+            }), isLastState && states.length > 3 ? /* @__PURE__ */jsx(Stack, {
+              paddingTop: 2,
+              children: /* @__PURE__ */jsx(CompleteButton, {
+                documentId,
+                disabled: !userRoleCanDrop
+              })
+            }) : null]
           })]
         })
       })
@@ -1093,6 +1117,7 @@ function DocumentList(props) {
   const {
     data = [],
     invalidDocumentIds,
+    patchingIds,
     selectedSchemaTypes,
     selectedUserIds,
     state,
@@ -1114,7 +1139,7 @@ function DocumentList(props) {
       return (_c = (_b = (_a = dataFiltered[index]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.documentId) != null ? _c : index;
     },
     estimateSize: () => 113,
-    overscan: 5
+    overscan: 10
   });
   if (!data.length) {
     return null;
@@ -1141,7 +1166,7 @@ function DocumentList(props) {
       }
       const isInvalid = invalidDocumentIds.includes(documentId);
       const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
-      const isDragDisabled = !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
+      const isDragDisabled = patchingIds.includes(documentId) || !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
       return /* @__PURE__ */jsx(Draggable, {
         draggableId: documentId,
         index: virtualItem.index,
@@ -1153,6 +1178,7 @@ function DocumentList(props) {
           children: /* @__PURE__ */jsx(DocumentCard, {
             userRoleCanDrop,
             isDragDisabled,
+            isPatching: patchingIds.includes(documentId),
             isDragging: draggableSnapshot.isDragging,
             item,
             toggleInvalidDocumentId,
@@ -1278,7 +1304,7 @@ function Filters(props) {
             icon: ResetIcon
           }) : null]
         })
-      }), schemaTypes.length > 0 ? /* @__PURE__ */jsx(Flex, {
+      }), schemaTypes.length > 1 ? /* @__PURE__ */jsx(Flex, {
         align: "center",
         gap: 1,
         children: schemaTypes.map(typeName => {
@@ -1326,7 +1352,8 @@ function StateTitle(props) {
     requireAssignment,
     userRoleCanDrop,
     isDropDisabled,
-    draggingFrom
+    draggingFrom,
+    documentCount
   } = props;
   let tone = "default";
   const isSource = draggingFrom === state.id;
@@ -1351,7 +1378,15 @@ function StateTitle(props) {
       }), requireAssignment ? /* @__PURE__ */jsx(Status, {
         text: "You must be assigned to the document to move documents to this State",
         icon: UserIcon
-      }) : null]
+      }) : null, /* @__PURE__ */jsx(Box, {
+        flex: 1,
+        children: documentCount > 0 ? /* @__PURE__ */jsx(Text, {
+          weight: "semibold",
+          align: "right",
+          size: 1,
+          children: documentCount
+        }) : null
+      })]
     })
   });
 }
@@ -1421,6 +1456,17 @@ function Verify(props) {
     } = (_a = cur._metadata) != null ? _a : {};
     return !orderRank && documentId ? [...acc, documentId] : acc;
   }, []) : [];
+  const documentsWithDuplicatedOrderIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
+    var _a;
+    const {
+      documentId,
+      orderRank
+    } = (_a = cur._metadata) != null ? _a : {};
+    return orderRank && data.filter(d => {
+      var _a2;
+      return ((_a2 = d._metadata) == null ? void 0 : _a2.orderRank) === orderRank;
+    }).length > 1 && documentId ? [...acc, documentId] : acc;
+  }, []) : [];
   const correctDocuments = React.useCallback(async ids => {
     toast.push({
       title: "Correcting...",
@@ -1468,16 +1514,21 @@ function Verify(props) {
     });
   }, [client, data, toast, userList]);
   const addOrderToDocuments = React.useCallback(async ids => {
-    var _a, _b;
     toast.push({
       title: "Adding ordering...",
       status: "info"
     });
-    const firstOrder = (_b = (_a = data[0]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.orderRank;
-    let newLexo = firstOrder && data.length !== ids.length ? LexoRank.parse(firstOrder) : LexoRank.min();
+    const [firstOrder, secondOrder] = [...data].slice(0, 2).map(d => {
+      var _a;
+      return (_a = d._metadata) == null ? void 0 : _a.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();
     for (let index = 0; index < ids.length; index += 1) {
-      newLexo = newLexo.genNext().genNext();
+      newLexo = newLexo.between(lastLexo);
       tx.patch("workflow-metadata.".concat(ids[index]), {
         set: {
           orderRank: newLexo.toString()
@@ -1521,6 +1572,10 @@ function Verify(props) {
       tone: "caution",
       onClick: () => addOrderToDocuments(documentsWithoutOrderIds),
       text: documentsWithoutOrderIds.length === 1 ? "Set Order for 1 Document" : "Set Order for ".concat(documentsWithoutOrderIds.length, " Documents")
+    }) : null, documentsWithDuplicatedOrderIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+      tone: "caution",
+      onClick: () => addOrderToDocuments(documentsWithDuplicatedOrderIds),
+      text: documentsWithDuplicatedOrderIds.length === 1 ? "Set Unique Order for 1 Document" : "Set Unique Order for ".concat(documentsWithDuplicatedOrderIds.length, " Documents")
     }) : null, orphanedMetadataDocumentIds.length > 0 ? /* @__PURE__ */jsx(Button, {
       text: "Cleanup orphaned metadata",
       onClick: handleOrphans,
@@ -1536,6 +1591,7 @@ function WorkflowTool(props) {
   } = (_b = (_a = props == null ? void 0 : props.tool) == null ? void 0 : _a.options) != null ? _b : {};
   const isDarkMode = useTheme().sanity.color.dark;
   const defaultCardTone = isDarkMode ? "default" : "transparent";
+  const toast = useToast();
   const userList = useProjectUsers({
     apiVersion: API_VERSION
   });
@@ -1545,6 +1601,7 @@ function WorkflowTool(props) {
     workflowData,
     operations
   } = useWorkflowDocuments(schemaTypes);
+  const [patchingIds, setPatchingIds] = React.useState([]);
   const {
     data,
     loading,
@@ -1592,7 +1649,7 @@ function WorkflowTool(props) {
       setUndroppableStates(undroppableExceptSelf);
     }
   }, [data, states, user]);
-  const handleDragEnd = React.useCallback(result => {
+  const handleDragEnd = React.useCallback(async result => {
     var _a2, _b2, _c2, _d, _e, _f;
     setUndroppableStates([]);
     setDraggingFrom("");
@@ -1609,26 +1666,65 @@ function WorkflowTool(props) {
       return;
     }
     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) {
-      newOrder = LexoRank.min().toString();
+      if (destinationStateIndex === 0) {
+        newOrder = LexoRank.min().toString();
+      } else {
+        newOrder = LexoRank.parse(globalStateMinimumRank).between(LexoRank.min()).toString();
+      }
     } else if (destination.index === 0) {
       const firstItemOrderRank = (_b2 = (_a2 = [...destinationStateItems].shift()) == null ? void 0 : _a2._metadata) == null ? void 0 : _b2.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) {
+        newOrder = LexoRank.min().toString();
+      } else {
+        newOrder = LexoRank.parse(globalStateMinimumRank).between(LexoRank.min()).toString();
+      }
     } else if (destination.index + 1 === destinationStateItems.length) {
       const lastItemOrderRank = (_d = (_c2 = [...destinationStateItems].pop()) == null ? void 0 : _c2._metadata) == null ? void 0 : _d.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) {
+        newOrder = LexoRank.max().toString();
+      } else {
+        newOrder = LexoRank.parse(globalStateMaximumRank).between(LexoRank.min()).toString();
+      }
     } else {
       const itemBefore = destinationStateItems[destination.index - 1];
       const itemBeforeRank = (_e = itemBefore == null ? void 0 : itemBefore._metadata) == null ? void 0 : _e.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 = (_f = itemAfter == null ? void 0 : itemAfter._metadata) == null ? void 0 : _f.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);
-  }, [data, move, states]);
+    setPatchingIds([...patchingIds, draggableId]);
+    toast.push({
+      status: "info",
+      title: "Updating document state..."
+    });
+    await move(draggableId, destination, states, newOrder);
+    setPatchingIds(ids => ids.filter(id => id !== draggableId));
+  }, [data, patchingIds, toast, move, states]);
   const uniqueAssignedUsers = React.useMemo(() => {
     const uniqueUserIds = data.reduce((acc, item) => {
       var _a2;
@@ -1655,6 +1751,30 @@ function WorkflowTool(props) {
   const toggleInvalidDocumentId = React.useCallback((docId, action) => {
     setInvalidDocumentIds(prev => action === "ADD" ? [...prev, docId] : prev.filter(id => id !== docId));
   }, []);
+  const Clone = React.useCallback((provided, snapshot, rubric) => {
+    const item = data.find(doc => {
+      var _a2;
+      return ((_a2 = doc == null ? void 0 : doc._metadata) == null ? void 0 : _a2.documentId) === rubric.draggableId;
+    });
+    return /* @__PURE__ */jsx("div", {
+      ...provided.draggableProps,
+      ...provided.dragHandleProps,
+      ref: provided.innerRef,
+      children: item ? /* @__PURE__ */jsx(DocumentCard, {
+        isDragDisabled: false,
+        isPatching: false,
+        userRoleCanDrop: true,
+        isDragging: snapshot.isDragging,
+        item,
+        states,
+        toggleInvalidDocumentId,
+        userList
+      }) : /* @__PURE__ */jsx(Feedback, {
+        title: "Item not found",
+        tone: "caution"
+      })
+    });
+  }, [data, states, toggleInvalidDocumentId, userList]);
   if (!(states == null ? void 0 : states.length)) {
     return /* @__PURE__ */jsx(Container, {
       width: 1,
@@ -1713,36 +1833,15 @@ function WorkflowTool(props) {
                 requireAssignment: (_b2 = state.requireAssignment) != null ? _b2 : false,
                 userRoleCanDrop,
                 isDropDisabled,
-                draggingFrom
+                draggingFrom,
+                documentCount: filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes).length
               }), /* @__PURE__ */jsx(Box, {
                 flex: 1,
                 children: /* @__PURE__ */jsx(Droppable, {
                   droppableId: state.id,
                   isDropDisabled,
                   mode: "virtual",
-                  renderClone: (provided, snapshot, rubric) => {
-                    const item = data.find(doc => {
-                      var _a3;
-                      return ((_a3 = doc == null ? void 0 : doc._metadata) == null ? void 0 : _a3.documentId) === rubric.draggableId;
-                    });
-                    return /* @__PURE__ */jsx("div", {
-                      ...provided.draggableProps,
-                      ...provided.dragHandleProps,
-                      ref: provided.innerRef,
-                      children: item ? /* @__PURE__ */jsx(DocumentCard, {
-                        isDragDisabled: false,
-                        userRoleCanDrop,
-                        isDragging: snapshot.isDragging,
-                        item,
-                        states,
-                        toggleInvalidDocumentId,
-                        userList
-                      }) : /* @__PURE__ */jsx(Feedback, {
-                        title: "Item not found",
-                        tone: "caution"
-                      })
-                    });
-                  },
+                  renderClone: Clone,
                   children: (provided, snapshot) => /* @__PURE__ */jsxs(Card, {
                     ref: provided.innerRef,
                     tone: snapshot.isDraggingOver ? "primary" : defaultCardTone,
@@ -1758,6 +1857,7 @@ function WorkflowTool(props) {
                     }) : null, /* @__PURE__ */jsx(DocumentList, {
                       data,
                       invalidDocumentIds,
+                      patchingIds,
                       selectedSchemaTypes,
                       selectedUserIds,
                       state,