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

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: [],
          })
      ]
  })
@@ -71,10 +73,13 @@ Documents can be promoted and demoted in the Workflow with the provided Document
     // Optional settings:
     // Used for the color of the Document Badge
     color: 'success',
-    // Will enable document actions and drag-and-drop for only users with these Role
+    // Will limit document actions and drag-and-drop for only users with these Role
     roles: ['publisher', 'administrator'],
     // Requires the user to be "assigned" in order to update to this State
     requireAssignment: true,
+    // Requires the document to be valid before being promoted out of this State
+    // Warning: With many documents in the Kanban view this can negatively impact performance 
+    requireValidation: true,
     // Defines which States a document can be moved to from this one
     transitions: ['changesRequested', 'approved']
 }
@@ -98,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.d.ts

@@ -6,6 +6,7 @@ declare type State = {
   title: string
   roles?: string[]
   requireAssignment?: boolean
+  requireValidation?: boolean
   color?: 'primary' | 'success' | 'warning' | 'danger'
 }
 

package/lib/index.esm.js

@@ -1,9 +1,9 @@
 var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { useClient, useValidationStatus, useCurrentUser, useSchema, Preview, useFormValue, defineType, defineField, UserAvatar, useTimeAgo, TextWithTone, definePlugin } from 'sanity';
+import { useClient, useCurrentUser, useValidationStatus, useSchema, Preview, useFormValue, defineType, defineField, UserAvatar, useTimeAgo, TextWithTone, definePlugin } from 'sanity';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { UsersIcon, SplitVerticalIcon, CheckmarkIcon, ArrowRightIcon, ArrowLeftIcon, EditIcon, AddIcon, PublishIcon, ErrorOutlineIcon, WarningOutlineIcon, DragHandleIcon, UserIcon, ResetIcon, InfoOutlineIcon } from '@sanity/icons';
-import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { UserSelectMenu, useListeningQuery, useProjectUsers, Feedback } from 'sanity-plugin-utils';
 import { useToast, Button, Spinner, Card, Flex, Box, Text, useClickOutside, Popover, Grid, Tooltip, useTheme, Stack, MenuButton, Menu, Badge, Container } from '@sanity/ui';
 import { LexoRank } from 'lexorank';
@@ -36,8 +36,8 @@ const DEFAULT_CONFIG = {
     title: "Approved",
     color: "success",
     roles: ["administrator"],
-    requireAssignment: true,
-    transitions: ["changesRequested"]
+    transitions: ["changesRequested"],
+    requireAssignment: true
   }])
 };
 function UserAssignment(props) {
@@ -291,11 +291,6 @@ function UpdateWorkflow(props, allStates, actionState) {
     id,
     type
   } = props;
-  const {
-    validation,
-    isValidating
-  } = useValidationStatus(id, type);
-  const hasValidationErrors = !isValidating && (validation == null ? void 0 : validation.length) > 0 && validation.find(v => v.level === "error");
   const user = useCurrentUser();
   const client = useClient({
     apiVersion: API_VERSION
@@ -313,6 +308,11 @@ function UpdateWorkflow(props, allStates, actionState) {
   const {
     assignees = []
   } = (_a = data == null ? void 0 : data.metadata) != null ? _a : {};
+  const {
+    validation,
+    isValidating
+  } = useValidationStatus(id, type);
+  const hasValidationErrors = (currentState == null ? void 0 : currentState.requireValidation) && !isValidating && (validation == null ? void 0 : validation.length) > 0 && validation.find(v => v.level === "error");
   if (error) {
     console.error(error);
   }
@@ -342,40 +342,39 @@ function UpdateWorkflow(props, allStates, actionState) {
   const direction = actionStateIndex > currentStateIndex ? "promote" : "demote";
   const DirectionIcon = direction === "promote" ? ArrowRightIcon : ArrowLeftIcon;
   const directionLabel = direction === "promote" ? "Promote" : "Demote";
-  let title = "".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
   const userRoleCanUpdateState = ((_b = user == null ? void 0 : user.roles) == null ? void 0 : _b.length) && ((_c = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _c.length) ?
   // If the Action state is limited to specific roles
   // check that the current user has one of those roles
   arraysContainMatchingString(user.roles.map(r => r.name), actionState.roles) :
   // No roles specified on the next state, so anyone can update
   ((_d = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _d.length) !== 0;
-  if (!userRoleCanUpdateState) {
-    title = "Your User role cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
-  }
   const actionStateIsAValidTransition = (currentState == null ? void 0 : currentState.id) && currentState.transitions.length ?
   // If the Current State limits transitions to specific States
   // Check that the Action State is in Current State's transitions array
   currentState.transitions.includes(actionState.id) :
   // Otherwise this isn't a problem
   true;
-  if (!actionStateIsAValidTransition) {
-    title = "You cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\" from \"").concat(currentState == null ? void 0 : currentState.title, "\"");
-  }
   const userAssignmentCanUpdateState = actionState.requireAssignment ?
   // If the Action State requires assigned users
   // Check the current user ID is in the assignees array
   currentUser && assignees.length && assignees.includes(currentUser.id) :
   // Otherwise this isn't a problem
   true;
-  if (!userAssignmentCanUpdateState) {
+  let title = "".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  if (!userRoleCanUpdateState) {
+    title = "Your User role cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  } else if (!actionStateIsAValidTransition) {
+    title = "You cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\" from \"").concat(currentState == null ? void 0 : currentState.title, "\"");
+  } else if (!userAssignmentCanUpdateState) {
     title = "You must be assigned to the document to ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
-  }
-  if (hasValidationErrors) {
+  } else if ((currentState == null ? void 0 : currentState.requireValidation) && isValidating) {
+    title = "Document is validating, cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  } else if (hasValidationErrors) {
     title = "Document has validation errors, cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
   }
   return {
     icon: DirectionIcon,
-    disabled: loading || error || isValidating || hasValidationErrors || !currentState || !userRoleCanUpdateState || !actionStateIsAValidTransition || !userAssignmentCanUpdateState,
+    disabled: loading || error || (currentState == null ? void 0 : currentState.requireValidation) && isValidating || hasValidationErrors || !currentState || !userRoleCanUpdateState || !actionStateIsAValidTransition || !userAssignmentCanUpdateState,
     title,
     label: actionState.title,
     onHandle: () => onHandle(id, actionState)
@@ -634,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;
@@ -681,10 +680,9 @@ function useWorkflowDocuments(schemaTypes) {
       _type
     } = document;
     const {
-      _rev,
       documentId
     } = document._metadata || {};
-    client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
+    await client.patch("workflow-metadata.".concat(documentId)).set({
       state: newStateId,
       orderRank: newOrder
     }).commit().then(() => {
@@ -693,11 +691,12 @@ function useWorkflowDocuments(schemaTypes) {
         title: "Moved to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
         status: "success"
       });
-    }).catch(() => {
+    }).catch(err => {
       var _a;
       setLocalDocuments(currentLocalData);
       return toast.push({
         title: "Failed to move to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
+        description: err.message,
         status: "error"
       });
     });
@@ -908,6 +907,24 @@ function PublishedStatus(props) {
     })
   });
 }
+function Validate(props) {
+  const {
+    documentId,
+    type,
+    onChange
+  } = props;
+  const {
+    isValidating,
+    validation = []
+  } = useValidationStatus(documentId, type);
+  useEffect(() => {
+    onChange({
+      isValidating,
+      validation
+    });
+  }, [onChange, isValidating, validation]);
+  return null;
+}
 function ValidationStatus(props) {
   const {
     validation = []
@@ -933,7 +950,7 @@ function ValidationStatus(props) {
   });
 }
 function DocumentCard(props) {
-  var _a;
+  var _a, _b;
   const {
     isDragDisabled,
     userRoleCanDrop,
@@ -948,18 +965,29 @@ function DocumentCard(props) {
     documentId
   } = (_a = item._metadata) != null ? _a : {};
   const schema = useSchema();
+  const state = states.find(s => {
+    var _a2;
+    return s.id === ((_a2 = item._metadata) == null ? void 0 : _a2.state);
+  });
   const isDarkMode = useTheme().sanity.color.dark;
   const defaultCardTone = isDarkMode ? "transparent" : "default";
+  const [optimisticValidation, setOptimisticValidation] = useState({
+    isValidating: (_b = state == null ? void 0 : state.requireValidation) != null ? _b : false,
+    validation: []
+  });
   const {
-    validation = [],
-    isValidating
-  } = useValidationStatus(documentId != null ? documentId : "", item._type);
+    isValidating,
+    validation
+  } = optimisticValidation;
+  const handleValidation = useCallback(updates => {
+    setOptimisticValidation(updates);
+  }, []);
   const cardTone = useMemo(() => {
     let tone = defaultCardTone;
     if (!userRoleCanDrop) return isDarkMode ? "default" : "transparent";
     if (!documentId) return tone;
     if (isDragging) tone = "positive";
-    if (!isValidating && validation.length > 0) {
+    if ((state == null ? void 0 : state.requireValidation) && !isValidating && validation.length > 0) {
       if (validation.some(v => v.level === "error")) {
         tone = "critical";
       } else {
@@ -967,7 +995,7 @@ function DocumentCard(props) {
       }
     }
     return tone;
-  }, [isDarkMode, userRoleCanDrop, defaultCardTone, documentId, isDragging, validation, isValidating]);
+  }, [defaultCardTone, userRoleCanDrop, isDarkMode, documentId, isDragging, isValidating, validation, state == null ? void 0 : state.requireValidation]);
   useEffect(() => {
     if (!isValidating && validation.length > 0) {
       if (validation.some(v => v.level === "error")) {
@@ -984,75 +1012,81 @@ function DocumentCard(props) {
     var _a2;
     return states[states.length - 1].id === ((_a2 = item._metadata) == null ? void 0 : _a2.state);
   }, [states, item._metadata.state]);
-  return /* @__PURE__ */jsx(Box, {
-    paddingBottom: 3,
-    paddingX: 3,
-    children: /* @__PURE__ */jsx(Card, {
-      radius: 2,
-      shadow: isDragging ? 3 : 1,
-      tone: cardTone,
-      children: /* @__PURE__ */jsxs(Stack, {
-        children: [/* @__PURE__ */jsx(Card, {
-          borderBottom: true,
-          radius: 2,
-          padding: 3,
-          paddingLeft: 2,
-          tone: cardTone,
-          style: {
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */jsxs(Flex, {
-            align: "center",
-            justify: "space-between",
-            gap: 1,
-            children: [/* @__PURE__ */jsx(Box, {
-              flex: 1,
-              children: /* @__PURE__ */jsx(Preview, {
-                layout: "default",
-                value: item,
-                schemaType: schema.get(item._type)
-              })
-            }), /* @__PURE__ */jsx(Box, {
-              style: {
-                flexShrink: 0
-              },
-              children: hasError || isDragDisabled ? null : /* @__PURE__ */jsx(DragHandleIcon, {})
-            })]
-          })
-        }), /* @__PURE__ */jsx(Card, {
-          padding: 2,
-          radius: 2,
-          tone: "inherit",
-          children: /* @__PURE__ */jsxs(Flex, {
-            align: "center",
-            justify: "space-between",
-            gap: 3,
-            children: [/* @__PURE__ */jsx(Box, {
-              flex: 1,
-              children: documentId && /* @__PURE__ */jsx(UserDisplay, {
-                userList,
-                assignees,
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [(state == null ? void 0 : state.requireValidation) ? /* @__PURE__ */jsx(Validate, {
+      documentId,
+      type: item._type,
+      onChange: handleValidation
+    }) : null, /* @__PURE__ */jsx(Box, {
+      paddingBottom: 3,
+      paddingX: 3,
+      children: /* @__PURE__ */jsx(Card, {
+        radius: 2,
+        shadow: isDragging ? 3 : 1,
+        tone: cardTone,
+        children: /* @__PURE__ */jsxs(Stack, {
+          children: [/* @__PURE__ */jsx(Card, {
+            borderBottom: true,
+            radius: 2,
+            padding: 3,
+            paddingLeft: 2,
+            tone: cardTone,
+            style: {
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              justify: "space-between",
+              gap: 1,
+              children: [/* @__PURE__ */jsx(Box, {
+                flex: 1,
+                children: /* @__PURE__ */jsx(Preview, {
+                  layout: "default",
+                  value: item,
+                  schemaType: schema.get(item._type)
+                })
+              }), /* @__PURE__ */jsx(Box, {
+                style: {
+                  flexShrink: 0
+                },
+                children: hasError || isDragDisabled ? null : /* @__PURE__ */jsx(DragHandleIcon, {})
+              })]
+            })
+          }), /* @__PURE__ */jsx(Card, {
+            padding: 2,
+            radius: 2,
+            tone: "inherit",
+            children: /* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              justify: "space-between",
+              gap: 3,
+              children: [/* @__PURE__ */jsx(Box, {
+                flex: 1,
+                children: documentId && /* @__PURE__ */jsx(UserDisplay, {
+                  userList,
+                  assignees,
+                  documentId,
+                  disabled: !userRoleCanDrop
+                })
+              }), validation.length > 0 ? /* @__PURE__ */jsx(ValidationStatus, {
+                validation
+              }) : null, /* @__PURE__ */jsx(DraftStatus, {
+                document: item
+              }), /* @__PURE__ */jsx(PublishedStatus, {
+                document: item
+              }), /* @__PURE__ */jsx(EditButton, {
+                id: item._id,
+                type: item._type,
+                disabled: !userRoleCanDrop
+              }), isLastState ? /* @__PURE__ */jsx(CompleteButton, {
                 documentId,
                 disabled: !userRoleCanDrop
-              })
-            }), validation.length > 0 ? /* @__PURE__ */jsx(ValidationStatus, {
-              validation
-            }) : null, /* @__PURE__ */jsx(DraftStatus, {
-              document: item
-            }), /* @__PURE__ */jsx(PublishedStatus, {
-              document: item
-            }), /* @__PURE__ */jsx(EditButton, {
-              id: item._id,
-              type: item._type,
-              disabled: !userRoleCanDrop
-            }), isLastState ? /* @__PURE__ */jsx(CompleteButton, {
-              documentId,
-              disabled: !userRoleCanDrop
-            }) : null]
-          })
-        })]
+              }) : null]
+            })
+          })]
+        })
       })
-    })
+    })]
   });
 }
 function DocumentList(props) {
@@ -1080,7 +1114,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;
@@ -1292,7 +1326,8 @@ function StateTitle(props) {
     requireAssignment,
     userRoleCanDrop,
     isDropDisabled,
-    draggingFrom
+    draggingFrom,
+    documentCount
   } = props;
   let tone = "default";
   const isSource = draggingFrom === state.id;
@@ -1317,7 +1352,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
+      })]
     })
   });
 }
@@ -1351,12 +1394,12 @@ function FloatingCard(_ref3) {
     }, "floater") : null
   });
 }
-function Validators(_ref4) {
-  let {
+function Verify(props) {
+  const {
     data,
     userList,
     states
-  } = _ref4;
+  } = props;
   const client = useClient({
     apiVersion: API_VERSION
   });
@@ -1387,6 +1430,17 @@ function Validators(_ref4) {
     } = (_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...",
@@ -1487,6 +1541,10 @@ function Validators(_ref4) {
       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,
@@ -1558,7 +1616,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("");
@@ -1587,10 +1645,10 @@ function WorkflowTool(props) {
     } else {
       const itemBefore = destinationStateItems[destination.index - 1];
       const itemBeforeRank = (_e = itemBefore == null ? void 0 : itemBefore._metadata) == null ? void 0 : _e.orderRank;
-      const itemBeforeRankParsed = itemBefore._metadata.orderRank ? LexoRank.parse(itemBeforeRank) : LexoRank.min();
+      const itemBeforeRankParsed = itemBeforeRank ? LexoRank.parse(itemBeforeRank) : LexoRank.min();
       const itemAfter = destinationStateItems[destination.index];
       const itemAfterRank = (_f = itemAfter == null ? void 0 : itemAfter._metadata) == null ? void 0 : _f.orderRank;
-      const itemAfterRankParsed = itemAfter._metadata.orderRank ? LexoRank.parse(itemAfterRank) : LexoRank.max();
+      const itemAfterRankParsed = itemAfterRank ? LexoRank.parse(itemAfterRank) : LexoRank.max();
       newOrder = itemBeforeRankParsed.between(itemAfterRankParsed).toString();
     }
     move(draggableId, destination, states, newOrder);
@@ -1646,7 +1704,7 @@ function WorkflowTool(props) {
     direction: "column",
     height: "fill",
     overflow: "hidden",
-    children: [/* @__PURE__ */jsx(Validators, {
+    children: [/* @__PURE__ */jsx(Verify, {
       data,
       userList,
       states
@@ -1679,7 +1737,8 @@ 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, {