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

package/README.md

@@ -1,18 +1,14 @@
 > This is a **Sanity Studio v3** plugin.
 
-## Installation
-
-```sh
-npm install sanity-plugin-workflow
-```
-
 # Sanity Workflow Demo Plugin Example
 
 With Sanity Studio you can [customize your content tools to support arbitrary workflows like assignment and content pipelines](https://www.sanity.io/docs/custom-workflows).
 
-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.
+This plugin is distributed as an **example implementation** of customization APIs in the Sanity Studio V3 and is not considered to be a feature-complete implementation of what workflow management requires in production. It is meant as a starting point intended to be forked and customized to the needs of your organization and content creators, or simply as an illustration of what is possible in Sanity Studio V3.
+
+An intentional design choice 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 deletes the "metadata" and so removes it from the "Workflow" process. You choose 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).
 
-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).
+This plugin is considered finished in its current form. Your feedback for workflow features you would like to see in Sanity Studio would be appreciated and can be [shared in our Slack community](https://slack.sanity.io/).
 
 ![Screenshot 2023-03-21 at 12 11 24](https://user-images.githubusercontent.com/9684022/226602179-5bd3d91a-9c27-431e-be18-3c70f06c6ccb.png)
 
@@ -28,13 +24,13 @@ This work demonstrates how a single plugin can define:
 ## Installation
 
 ```
-npm install --save sanity-plugin-workflow@beta
+npm install --save sanity-plugin-workflow
 ```
 
 or
 
 ```
-yarn add sanity-plugin-workflow@beta
+yarn add sanity-plugin-workflow
 ```
 
 ## Usage
@@ -61,9 +57,9 @@ Add it as a plugin in sanity.config.ts (or .js):
 
 ## Configuring "States"
 
-The plugin comes with a default set of "States". These are tracked by the plugin creating a separate "metadata" document for each document that has begun the Workflow. 
+The plugin comes with a default set of "States". These are tracked by the plugin creating a separate "metadata" document for each document that has begun the Workflow.
 
-Documents can be promoted and demoted in the Workflow with the provided Document Actions as well as a drag-and-drop custom Tool. The settings below are not enforced by the API, custom access control rules could be used to do so. 
+Documents can be promoted and demoted in the Workflow with the provided Document Actions as well as a drag-and-drop custom Tool. The settings below are not enforced by the API, custom access control rules could be used to do so.
 
 ```ts
 {
@@ -78,7 +74,7 @@ Documents can be promoted and demoted in the Workflow with the provided Document
     // 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 
+    // 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']
@@ -103,12 +99,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 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.
+- 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.
+- 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. These are only enforced in the Studio and not the API.
+- This plugin can filter Schema types and assigned Users.
 
 ## License
 

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, useCurrentUser, useValidationStatus, useSchema, Preview, useFormValue, defineType, defineField, UserAvatar, useTimeAgo, TextWithTone, definePlugin } from 'sanity';
+import { useClient, useCurrentUser, useValidationStatus, useSchema, Preview, useFormValue, defineType, defineField, UserAvatar, useTimeAgo, TextWithTone, definePlugin, isObjectInputProps } 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, useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, createContext, useContext, useState, useCallback, useEffect, 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';
@@ -122,58 +122,99 @@ function UserAssignment(props) {
     onRemove: removeAssignee
   });
 }
-function useWorkflowMetadata(id, states) {
+function useWorkflowMetadata(ids) {
   const {
-    data: metadata,
+    data: rawData,
     loading,
     error
-  } = useListeningQuery("*[_type == \"workflow.metadata\" && documentId == $id][0]", {
+  } = 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 = 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 = createContext({
+  data: {},
+  loading: false,
+  error: false,
+  ids: [],
+  addId: () => null,
+  removeId: () => null,
+  ...DEFAULT_CONFIG
+});
+function useWorkflowContext(id) {
+  const current = useContext(WorkflowContext);
+  return {
+    ...current,
+    metadata: id ? current.data[id] : null
+  };
+}
+function WorkflowProvider(props) {
+  const [ids, setIds] = useState([]);
+  const addId = useCallback(id => setIds(current => current.includes(id) ? current : [...current, id]), []);
+  const removeId = useCallback(id => setIds(current => current.filter(i => i !== id)), []);
+  const {
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(ids);
+  return /* @__PURE__ */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] = useState(false);
   const userList = 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: 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: () => {
@@ -181,7 +222,7 @@ function AssignWorkflow(props, states) {
       },
       content: /* @__PURE__ */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
       })
     },
@@ -190,16 +231,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 = useClient({
     apiVersion: API_VERSION
   });
@@ -220,10 +262,6 @@ function BeginWorkflow(props, states) {
       documentId: id,
       state: states[0].id,
       orderRank: lowestOrderFirstState ? LexoRank.parse(lowestOrderFirstState).genNext().toString() : LexoRank.min().toString()
-    },
-    // Faster!
-    {
-      visibility: "async"
     }).then(() => {
       toast.push({
         status: "success",
@@ -234,29 +272,29 @@ function BeginWorkflow(props, states) {
       setComplete(true);
     });
   }, [id, states, client, toast]);
-  if (!draft || complete || data.metadata) {
+  if (!draft || complete || metadata) {
     return null;
   }
   return {
     icon: 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 = useClient({
     apiVersion: API_VERSION
   });
@@ -266,10 +304,11 @@ function CompleteWorkflow(props, states) {
   const handle = 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: CheckmarkIcon,
     type: "dialog",
@@ -285,7 +324,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,
@@ -298,16 +337,15 @@ function UpdateWorkflow(props, allStates, actionState) {
   const toast = useToast();
   const currentUser = 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
@@ -334,21 +372,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" ? ArrowRightIcon : 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) :
@@ -357,7 +395,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, "\"");
@@ -380,16 +418,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 = useProjectUsers({
     apiVersion: API_VERSION
   });
@@ -425,15 +460,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);
@@ -449,6 +483,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();
+  useEffect(() => {
+    if (documentId) {
+      addId(documentId);
+    }
+    return () => {
+      if (documentId) {
+        removeId(documentId);
+      }
+    };
+  }, [documentId, addId, removeId]);
+  return props.renderDefault(props);
+}
 function EditButton(props) {
   const {
     id,
@@ -1988,7 +2041,10 @@ const workflow = 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",
@@ -1997,12 +2053,33 @@ const workflow = 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" && 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)) {
@@ -2015,10 +2092,12 @@ const workflow = 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
     })]