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

package/lib/index.js

@@ -135,58 +135,99 @@ function UserAssignment(props) {
     onRemove: removeAssignee
   });
 }
-function useWorkflowMetadata(id, states) {
+function useWorkflowMetadata(ids) {
   const {
-    data: metadata,
+    data: rawData,
     loading,
     error
-  } = sanityPluginUtils.useListeningQuery("*[_type == \"workflow.metadata\" && documentId == $id][0]", {
+  } = sanityPluginUtils.useListeningQuery("*[_type == \"workflow.metadata\" && documentId in $ids]{\n      _id,\n      _type,\n      _rev,\n      assignees,\n      documentId,\n      state,\n      orderRank\n    }", {
     params: {
-      id
+      ids
+    },
+    options: {
+      apiVersion: API_VERSION
     }
   });
-  if (metadata == null ? void 0 : metadata.state) {
-    return {
-      data: {
-        metadata,
-        state: states.find(s => s.id === metadata.state)
-      },
-      loading,
-      error
-    };
-  }
+  const keyedMetadata = React.useMemo(() => {
+    if (!rawData || rawData.length === 0) return {};
+    return rawData.reduce((acc, cur) => {
+      return {
+        ...acc,
+        [cur.documentId]: cur
+      };
+    }, {});
+  }, [rawData]);
   return {
-    data: {},
+    data: keyedMetadata,
     loading,
     error
   };
 }
-function AssignWorkflow(props, states) {
-  var _a, _b;
+const WorkflowContext = React.createContext({
+  data: {},
+  loading: false,
+  error: false,
+  ids: [],
+  addId: () => null,
+  removeId: () => null,
+  ...DEFAULT_CONFIG
+});
+function useWorkflowContext(id) {
+  const current = React.useContext(WorkflowContext);
+  return {
+    ...current,
+    metadata: id ? current.data[id] : null
+  };
+}
+function WorkflowProvider(props) {
+  const [ids, setIds] = React.useState([]);
+  const addId = React.useCallback(id => setIds(current => current.includes(id) ? current : [...current, id]), []);
+  const removeId = React.useCallback(id => setIds(current => current.filter(i => i !== id)), []);
+  const {
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(ids);
+  return /* @__PURE__ */jsxRuntime.jsx(WorkflowContext.Provider, {
+    value: {
+      data,
+      loading,
+      error,
+      ids,
+      addId,
+      removeId,
+      states: props.workflow.states,
+      schemaTypes: props.workflow.schemaTypes
+    },
+    children: props.renderDefault(props)
+  });
+}
+function AssignWorkflow(props) {
+  var _a;
   const {
     id
   } = props;
+  const {
+    metadata,
+    loading,
+    error
+  } = useWorkflowContext(id);
   const [isDialogOpen, setDialogOpen] = React.useState(false);
   const userList = sanityPluginUtils.useProjectUsers({
     apiVersion: API_VERSION
   });
-  const {
-    data,
-    loading,
-    error
-  } = useWorkflowMetadata(id, states);
   if (error) {
     console.error(error);
   }
-  if (!(data == null ? void 0 : data.metadata)) {
+  if (!metadata) {
     return null;
   }
   return {
     icon: icons.UsersIcon,
     type: "dialog",
-    disabled: !data || loading || error,
+    disabled: !metadata || loading || error,
     label: "Assign",
-    title: data ? null : "Document is not in Workflow",
+    title: metadata ? null : "Document is not in Workflow",
     dialog: isDialogOpen && {
       type: "popover",
       onClose: () => {
@@ -194,7 +235,7 @@ function AssignWorkflow(props, states) {
       },
       content: /* @__PURE__ */jsxRuntime.jsx(UserAssignment, {
         userList,
-        assignees: (_b = (_a = data.metadata) == null ? void 0 : _a.assignees) != null ? _b : [],
+        assignees: ((_a = metadata == null ? void 0 : metadata.assignees) == null ? void 0 : _a.length) > 0 ? metadata.assignees : [],
         documentId: id
       })
     },
@@ -203,16 +244,17 @@ function AssignWorkflow(props, states) {
     }
   };
 }
-function BeginWorkflow(props, states) {
+function BeginWorkflow(props) {
   const {
     id,
     draft
   } = props;
   const {
-    data,
+    metadata,
     loading,
-    error
-  } = useWorkflowMetadata(id, states);
+    error,
+    states
+  } = useWorkflowContext(id);
   const client = sanity.useClient({
     apiVersion: API_VERSION
   });
@@ -233,10 +275,6 @@ function BeginWorkflow(props, states) {
       documentId: id,
       state: states[0].id,
       orderRank: lowestOrderFirstState ? lexorank.LexoRank.parse(lowestOrderFirstState).genNext().toString() : lexorank.LexoRank.min().toString()
-    },
-    // Faster!
-    {
-      visibility: "async"
     }).then(() => {
       toast.push({
         status: "success",
@@ -247,29 +285,29 @@ function BeginWorkflow(props, states) {
       setComplete(true);
     });
   }, [id, states, client, toast]);
-  if (!draft || complete || data.metadata) {
+  if (!draft || complete || metadata) {
     return null;
   }
   return {
     icon: icons.SplitVerticalIcon,
     type: "dialog",
-    disabled: (data == null ? void 0 : data.metadata) || loading || error || beginning || complete,
+    disabled: metadata || loading || error || beginning || complete,
     label: beginning ? "Beginning..." : "Begin Workflow",
     onHandle: () => {
       handle();
     }
   };
 }
-function CompleteWorkflow(props, states) {
-  var _a;
+function CompleteWorkflow(props) {
   const {
     id
   } = props;
   const {
-    data,
+    metadata,
     loading,
-    error
-  } = useWorkflowMetadata(id, states);
+    error,
+    states
+  } = useWorkflowContext(id);
   const client = sanity.useClient({
     apiVersion: API_VERSION
   });
@@ -279,10 +317,11 @@ function CompleteWorkflow(props, states) {
   const handle = React.useCallback(() => {
     client.delete("workflow-metadata.".concat(id));
   }, [id, client]);
-  const isLastState = ((_a = data == null ? void 0 : data.state) == null ? void 0 : _a.id) === states[states.length - 1].id;
-  if (!data.metadata) {
+  if (!metadata) {
     return null;
   }
+  const state = states.find(s => s.id === metadata.state);
+  const isLastState = (state == null ? void 0 : state.id) === states[states.length - 1].id;
   return {
     icon: icons.CheckmarkIcon,
     type: "dialog",
@@ -298,7 +337,7 @@ function CompleteWorkflow(props, states) {
 function arraysContainMatchingString(one, two) {
   return one.some(item => two.includes(item));
 }
-function UpdateWorkflow(props, allStates, actionState) {
+function UpdateWorkflow(props, actionState) {
   var _a, _b, _c, _d;
   const {
     id,
@@ -311,16 +350,15 @@ function UpdateWorkflow(props, allStates, actionState) {
   const toast = ui.useToast();
   const currentUser = sanity.useCurrentUser();
   const {
-    data,
+    metadata,
     loading,
-    error
-  } = useWorkflowMetadata(id, allStates);
-  const {
-    state: currentState
-  } = data;
+    error,
+    states
+  } = useWorkflowContext(id);
+  const currentState = states.find(s => s.id === (metadata == null ? void 0 : metadata.state));
   const {
     assignees = []
-  } = (_a = data == null ? void 0 : data.metadata) != null ? _a : {};
+  } = metadata != null ? metadata : {};
   const {
     validation,
     isValidating
@@ -347,21 +385,21 @@ function UpdateWorkflow(props, allStates, actionState) {
       });
     });
   };
-  if (!data.metadata || currentState && currentState.id === actionState.id) {
+  if (!metadata || currentState && currentState.id === actionState.id) {
     return null;
   }
-  const currentStateIndex = allStates.findIndex(s => s.id === (currentState == null ? void 0 : currentState.id));
-  const actionStateIndex = allStates.findIndex(s => s.id === actionState.id);
+  const currentStateIndex = states.findIndex(s => s.id === (currentState == null ? void 0 : currentState.id));
+  const actionStateIndex = states.findIndex(s => s.id === actionState.id);
   const direction = actionStateIndex > currentStateIndex ? "promote" : "demote";
   const DirectionIcon = direction === "promote" ? icons.ArrowRightIcon : icons.ArrowLeftIcon;
   const directionLabel = direction === "promote" ? "Promote" : "Demote";
-  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) ?
+  const userRoleCanUpdateState = ((_a = user == null ? void 0 : user.roles) == null ? void 0 : _a.length) && ((_b = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _b.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;
-  const actionStateIsAValidTransition = (currentState == null ? void 0 : currentState.id) && currentState.transitions.length ?
+  ((_c = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _c.length) !== 0;
+  const actionStateIsAValidTransition = (currentState == null ? void 0 : currentState.id) && ((_d = currentState == null ? void 0 : currentState.transitions) == null ? void 0 : _d.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) :
@@ -370,7 +408,7 @@ function UpdateWorkflow(props, allStates, actionState) {
   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) :
+  currentUser && (assignees == null ? void 0 : assignees.length) && assignees.includes(currentUser.id) :
   // Otherwise this isn't a problem
   true;
   let title = "".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
@@ -393,16 +431,13 @@ function UpdateWorkflow(props, allStates, actionState) {
     onHandle: () => onHandle(id, actionState)
   };
 }
-function AssigneesBadge(states, documentId, currentUser) {
+function AssigneesBadge(documentId, currentUser) {
   var _a;
   const {
-    data,
+    metadata,
     loading,
     error
-  } = useWorkflowMetadata(documentId, states);
-  const {
-    metadata
-  } = data;
+  } = useWorkflowContext(documentId);
   const userList = sanityPluginUtils.useProjectUsers({
     apiVersion: API_VERSION
   });
@@ -438,15 +473,14 @@ function AssigneesBadge(states, documentId, currentUser) {
     color: "primary"
   };
 }
-function StateBadge(states, documentId) {
+function StateBadge(documentId) {
   const {
-    data,
+    metadata,
     loading,
-    error
-  } = useWorkflowMetadata(documentId, states);
-  const {
-    state
-  } = data;
+    error,
+    states
+  } = useWorkflowContext(documentId);
+  const state = states.find(s => s.id === (metadata == null ? void 0 : metadata.state));
   if (loading || error) {
     if (error) {
       console.error(error);
@@ -462,6 +496,25 @@ function StateBadge(states, documentId) {
     color: state == null ? void 0 : state.color
   };
 }
+function WorkflowSignal(props) {
+  var _a;
+  const documentId = ((_a = props == null ? void 0 : props.value) == null ? void 0 : _a._id) ? props.value._id.replace("drafts.", "") : null;
+  const {
+    addId,
+    removeId
+  } = useWorkflowContext();
+  React.useEffect(() => {
+    if (documentId) {
+      addId(documentId);
+    }
+    return () => {
+      if (documentId) {
+        removeId(documentId);
+      }
+    };
+  }, [documentId, addId, removeId]);
+  return props.renderDefault(props);
+}
 function EditButton(props) {
   const {
     id,
@@ -1072,7 +1125,8 @@ function DocumentCard(props) {
               children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
                 flex: 1,
                 children: /* @__PURE__ */jsxRuntime.jsx(sanity.Preview, {
-                  layout: "block",
+                  layout: "default",
+                  skipVisibilityCheck: true,
                   value: item,
                   schemaType: schema.get(item._type)
                 })
@@ -1126,6 +1180,21 @@ function DocumentCard(props) {
     })]
   });
 }
+function getStyle(draggableStyle, virtualItem) {
+  let transform = "translateY(".concat(virtualItem.start, "px)");
+  if (draggableStyle && draggableStyle.transform) {
+    const draggableTransformY = parseInt(draggableStyle.transform.split(",")[1].split("px")[0], 10);
+    transform = "translateY(".concat(virtualItem.start + draggableTransformY, "px)");
+  }
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "".concat(virtualItem.size, "px"),
+    transform
+  };
+}
 function DocumentList(props) {
   const {
     data = [],
@@ -1144,17 +1213,20 @@ function DocumentList(props) {
     return data.length ? filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes) : [];
   }, [data, selectedSchemaTypes, selectedUserIds, state.id]);
   const parentRef = React.useRef(null);
-  const rowVirtualizer = reactVirtual.useVirtualizer({
-    count: data.length,
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: dataFiltered.length,
     getScrollElement: () => parentRef.current,
     getItemKey: index => {
       var _a, _b, _c;
       return (_c = (_b = (_a = dataFiltered[index]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.documentId) != null ? _c : index;
     },
-    estimateSize: () => 113,
-    overscan: 10
+    estimateSize: () => 115,
+    overscan: 7,
+    measureElement: element => {
+      return element.getBoundingClientRect().height || 115;
+    }
   });
-  if (!data.length) {
+  if (!data.length || !dataFiltered.length) {
     return null;
   }
   return /* @__PURE__ */jsxRuntime.jsx("div", {
@@ -1162,44 +1234,53 @@ function DocumentList(props) {
     style: {
       height: "100%",
       overflow: "auto",
-      paddingTop: 1,
       // Smooths scrollbar behaviour
       overflowAnchor: "none",
-      scrollBehavior: "auto"
+      scrollBehavior: "auto",
+      paddingTop: 1
     },
-    children: rowVirtualizer.getVirtualItems().map(virtualItem => {
-      var _a;
-      const item = dataFiltered[virtualItem.index];
-      const {
-        documentId,
-        assignees
-      } = (_a = item == null ? void 0 : item._metadata) != null ? _a : {};
-      if (!documentId) {
-        return null;
-      }
-      const isInvalid = invalidDocumentIds.includes(documentId);
-      const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
-      const isDragDisabled = patchingIds.includes(documentId) || !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
-      return /* @__PURE__ */jsxRuntime.jsx(dnd.Draggable, {
-        draggableId: documentId,
-        index: virtualItem.index,
-        isDragDisabled,
-        children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */jsxRuntime.jsx("div", {
-          ref: draggableProvided.innerRef,
-          ...draggableProvided.draggableProps,
-          ...draggableProvided.dragHandleProps,
-          children: /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
-            userRoleCanDrop,
-            isDragDisabled,
-            isPatching: patchingIds.includes(documentId),
-            isDragging: draggableSnapshot.isDragging,
-            item,
-            toggleInvalidDocumentId,
-            userList,
-            states
+    children: /* @__PURE__ */jsxRuntime.jsx("div", {
+      style: {
+        height: "".concat(virtualizer.getTotalSize(), "px"),
+        width: "100%",
+        position: "relative"
+      },
+      children: virtualizer.getVirtualItems().map(virtualItem => {
+        var _a;
+        const item = dataFiltered[virtualItem.index];
+        const {
+          documentId,
+          assignees
+        } = (_a = item == null ? void 0 : item._metadata) != null ? _a : {};
+        const isInvalid = invalidDocumentIds.includes(documentId);
+        const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
+        const isDragDisabled = patchingIds.includes(documentId) || !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
+        return /* @__PURE__ */jsxRuntime.jsx(dnd.Draggable, {
+          draggableId: documentId,
+          index: virtualItem.index,
+          isDragDisabled,
+          children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */jsxRuntime.jsx("div", {
+            ref: draggableProvided.innerRef,
+            ...draggableProvided.draggableProps,
+            ...draggableProvided.dragHandleProps,
+            style: getStyle(draggableProvided.draggableProps.style, virtualItem),
+            children: /* @__PURE__ */jsxRuntime.jsx("div", {
+              ref: virtualizer.measureElement,
+              "data-index": virtualItem.index,
+              children: /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
+                userRoleCanDrop,
+                isDragDisabled,
+                isPatching: patchingIds.includes(documentId),
+                isDragging: draggableSnapshot.isDragging,
+                item,
+                toggleInvalidDocumentId,
+                userList,
+                states
+              })
+            })
           })
-        })
-      }, virtualItem.key);
+        }, virtualItem.key);
+      })
     })
   });
 }
@@ -1926,7 +2007,6 @@ function WorkflowTool(props) {
                     ref: provided.innerRef,
                     tone: snapshot.isDraggingOver ? "primary" : defaultCardTone,
                     height: "fill",
-                    paddingTop: 1,
                     children: [loading ? /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
                       padding: 5,
                       align: "center",
@@ -1974,7 +2054,10 @@ const workflow = sanity.definePlugin(function () {
     ...config
   };
   if (!(states == null ? void 0 : states.length)) {
-    throw new Error("Workflow: Missing states in config");
+    throw new Error("Workflow plugin: Missing \"states\" in config");
+  }
+  if (!(schemaTypes == null ? void 0 : schemaTypes.length)) {
+    throw new Error("Workflow plugin: Missing \"schemaTypes\" in config");
   }
   return {
     name: "sanity-plugin-workflow",
@@ -1983,12 +2066,33 @@ const workflow = sanity.definePlugin(function () {
     },
     // TODO: Remove 'workflow.metadata' from list of new document types
     // ...
+    studio: {
+      components: {
+        layout: props => WorkflowProvider({
+          ...props,
+          workflow: {
+            schemaTypes,
+            states
+          }
+        })
+      }
+    },
+    form: {
+      components: {
+        input: props => {
+          if (props.id === "root" && sanity.isObjectInputProps(props) && schemaTypes.includes(props.schemaType.name)) {
+            return WorkflowSignal(props);
+          }
+          return props.renderDefault(props);
+        }
+      }
+    },
     document: {
       actions: (prev, context) => {
         if (!schemaTypes.includes(context.schemaType)) {
           return prev;
         }
-        return [props => BeginWorkflow(props, states), props => AssignWorkflow(props, states), ...states.map(state => props => UpdateWorkflow(props, states, state)), props => CompleteWorkflow(props, states), ...prev];
+        return [props => BeginWorkflow(props), props => AssignWorkflow(props), ...states.map(state => props => UpdateWorkflow(props, state)), props => CompleteWorkflow(props), ...prev];
       },
       badges: (prev, context) => {
         if (!schemaTypes.includes(context.schemaType)) {
@@ -2001,10 +2105,12 @@ const workflow = sanity.definePlugin(function () {
         if (!documentId) {
           return prev;
         }
-        return [() => StateBadge(states, documentId), () => AssigneesBadge(states, documentId, currentUser), ...prev];
+        return [() => StateBadge(documentId), () => AssigneesBadge(documentId, currentUser), ...prev];
       }
     },
-    tools: [workflowTool({
+    tools: [
+    // TODO: These configs could be read from Context
+    workflowTool({
       schemaTypes,
       states
     })]