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

package/README.md

@@ -71,10 +71,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']
 }

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)
@@ -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) {
@@ -1351,12 +1385,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
   });
@@ -1587,10 +1621,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 +1680,7 @@ function WorkflowTool(props) {
     direction: "column",
     height: "fill",
     overflow: "hidden",
-    children: [/* @__PURE__ */jsx(Validators, {
+    children: [/* @__PURE__ */jsx(Verify, {
       data,
       userList,
       states