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

package/src/hooks/useWorkflowDocuments.tsx

@@ -1,88 +1,76 @@
+import {DraggableLocation} from '@hello-pangea/dnd'
+import {useToast} from '@sanity/ui'
+import groq from 'groq'
 import React from 'react'
+import {useClient} from 'sanity'
 import {useListeningQuery} from 'sanity-plugin-utils'
-import {useToast} from '@sanity/ui'
-import {SanityDocumentLike, useClient} from 'sanity'
-import {DraggableLocation} from 'react-beautiful-dnd'
-import {SanityDocumentWithMetadata, Metadata, State} from '../types'
-
-type DocumentsAndMetadata = {
-  documents: SanityDocumentLike[]
-  metadata: Metadata[]
-}
 
-const DOCUMENT_LIST_QUERY = `*[_type in $schemaTypes]{ _id, _type, _rev }`
-const METADATA_LIST_QUERY = `*[_type == "workflow.metadata"]{
-  _rev,
-  assignees,
-  documentId,
-  state
-}`
-
-const COMBINED_QUERY = `{
-  "documents": ${DOCUMENT_LIST_QUERY},
-  "metadata": ${METADATA_LIST_QUERY}
+import {API_VERSION} from '../constants'
+import {SanityDocumentWithMetadata, State} from '../types'
+
+const QUERY = groq`*[_type == "workflow.metadata"]|order(orderRank){
+  "_metadata": {
+    _rev,
+    assignees,
+    documentId,
+    state,
+    orderRank
+  },
+  ...(
+    *[_id in [^.documentId, "drafts." + ^.documentId]]|order(_updatedAt)[0]{ 
+      _id, 
+      _type, 
+      _rev, 
+      _updatedAt 
+    }
+  )
 }`
 
-const INITIAL_DATA: DocumentsAndMetadata = {
-  documents: [],
-  metadata: [],
+type WorkflowDocuments = {
+  workflowData: {
+    data: SanityDocumentWithMetadata[]
+    loading: boolean
+    error: boolean
+  }
+  operations: {
+    move: (
+      draggedId: string,
+      destination: DraggableLocation,
+      states: State[],
+      newOrder: string
+    ) => void
+  }
 }
 
-export function useWorkflowDocuments(schemaTypes: string[]) {
+export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
   const toast = useToast()
-  const client = useClient()
+  const client = useClient({apiVersion: API_VERSION})
+
+  // Get and listen to changes on documents + workflow metadata documents
+  const {data, loading, error} = useListeningQuery<
+    SanityDocumentWithMetadata[]
+  >(QUERY, {
+    params: {schemaTypes},
+    initialValue: [],
+  })
+
   const [localDocuments, setLocalDocuments] = React.useState<
     SanityDocumentWithMetadata[]
   >([])
 
-  // Get and listen to changes on documents + workflow metadata documents
-  const {data, loading, error} = useListeningQuery<DocumentsAndMetadata>(
-    COMBINED_QUERY,
-    {
-      params: {schemaTypes},
-      initialValue: INITIAL_DATA,
-    }
-  )
-
-  // Store local state for optimistic updates
   React.useEffect(() => {
     if (data) {
-      // Combine metadata data into document
-      const documentsWithMetadata = data.documents.reduce(
-        (acc: SanityDocumentWithMetadata[], cur) => {
-          // Filter out documents without metadata
-          const curMeta = data.metadata.find(
-            (d) => d.documentId === cur._id.replace(`drafts.`, ``)
-          )
-
-          // Add _metadata as null so it can be shown as a document that needs to be imported into workflow
-          if (!curMeta) {
-            return [...acc, {_metadata: null, ...cur}]
-          }
-
-          const curWithMetadata = {_metadata: curMeta, ...cur}
-
-          // Remove `published` from array if `draft` exists
-          if (!cur._id.startsWith(`drafts.`)) {
-            // eslint-disable-next-line max-nested-callbacks
-            const alsoHasDraft: boolean = Boolean(
-              data.documents.find((doc) => doc._id === `drafts.${cur._id}`)
-            )
-
-            return alsoHasDraft ? acc : [...acc, curWithMetadata]
-          }
-
-          return [...acc, curWithMetadata]
-        },
-        []
-      )
-
-      setLocalDocuments(documentsWithMetadata)
+      setLocalDocuments(data)
     }
   }, [data])
 
   const move = React.useCallback(
-    (draggedId: string, destination: DraggableLocation, states: State[]) => {
+    (
+      draggedId: string,
+      destination: DraggableLocation,
+      states: State[],
+      newOrder: string
+    ) => {
       // Optimistic update
       const currentLocalData = localDocuments
       const newLocalDocuments = localDocuments.map((item) => {
@@ -92,6 +80,12 @@ export function useWorkflowDocuments(schemaTypes: string[]) {
             _metadata: {
               ...item._metadata,
               state: destination.droppableId,
+              orderRank: newOrder,
+              // This value won't be written to the document
+              // It's done so that un/publish operations don't happen twice
+              // Because a moved document's card will update once optimistically
+              // and then again when the document is updated
+              optimistic: true,
             },
           }
         }
@@ -133,12 +127,11 @@ export function useWorkflowDocuments(schemaTypes: string[]) {
       client
         .patch(`workflow-metadata.${documentId}`)
         .ifRevisionId(_rev as string)
-        .set({state: newStateId})
+        .set({state: newStateId, orderRank: newOrder})
         .commit()
         .then(() => {
           return toast.push({
             title: `Moved to "${newState?.title ?? newStateId}"`,
-            description: documentId,
             status: 'success',
           })
         })
@@ -148,7 +141,6 @@ export function useWorkflowDocuments(schemaTypes: string[]) {
 
           return toast.push({
             title: `Failed to move to "${newState?.title ?? newStateId}"`,
-            description: documentId,
             status: 'error',
           })
         })

package/src/hooks/useWorkflowMetadata.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {useListeningQuery} from 'sanity-plugin-utils'
 
 import {Metadata, State} from '../types'

package/src/index.ts

@@ -1,40 +1,15 @@
-import {definePlugin} from 'sanity'
-import {CheckmarkIcon, SplitVerticalIcon} from '@sanity/icons'
+import {definePlugin, DocumentActionProps} from 'sanity'
 
-import WorkflowTool from './components/WorkflowTool'
+import {AssignWorkflow} from './actions/AssignWorkflow'
+import {BeginWorkflow} from './actions/BeginWorkflow'
+import {CompleteWorkflow} from './actions/CompleteWorkflow'
+import {UpdateWorkflow} from './actions/UpdateWorkflow'
+import {AssigneesBadge} from './badges/AssigneesBadge'
+import {StateBadge} from './badges/StateBadge'
+import {DEFAULT_CONFIG} from './constants'
+import metadata from './schema/workflow/workflow.metadata'
+import {workflowTool} from './tools'
 import {WorkflowConfig} from './types'
-import metadata from './schema/workflow/metadata'
-import {StateBadge} from './badges'
-import {PromoteAction} from './actions/PromoteAction'
-import {DemoteAction} from './actions/DemoteAction'
-//import StateTimeline from './components/StateTimeline'
-
-const DEFAULT_CONFIG: WorkflowConfig = {
-  schemaTypes: [],
-  states: [
-    {id: 'draft', title: 'Draft', operation: 'unpublish'},
-    {id: 'inReview', title: 'In review', operation: null, color: 'primary'},
-    {
-      id: 'approved',
-      title: 'Approved',
-      operation: null,
-      color: 'success',
-      icon: CheckmarkIcon,
-    },
-    {
-      id: 'changesRequested',
-      title: 'Changes requested',
-      operation: null,
-      color: 'warning',
-    },
-    {
-      id: 'published',
-      title: 'Published',
-      operation: 'publish',
-      color: 'success',
-    },
-  ],
-}
 
 export const workflow = definePlugin<WorkflowConfig>(
   (config = DEFAULT_CONFIG) => {
@@ -49,26 +24,29 @@ export const workflow = definePlugin<WorkflowConfig>(
       schema: {
         types: [metadata(states)],
       },
-      // form: {
-      //   components: {
-      //     item: (props) => {
-      //       console.log(props)
-      //       // if (props.id === `root` && schemaTypes.includes(props.schemaType.name)) {
-      //       //   return StateTimeline(props)
-      //       // }
-      //       return props.renderDefault(props)
-      //     },
-      //   },
-      // },
+      // TODO: Remove 'workflow.metadata' from list of new document types
+      // ...
       document: {
         actions: (prev, context) => {
           if (!schemaTypes.includes(context.schemaType)) {
             return prev
           }
 
+          // TODO: Augment 'publish' and 'unpublish' to be disabled if a document IS in Workflow
+          // This would be best done with a listening query here, but we don't have access to documentStore
+
+          // TODO: Performance improvements:
+          // Each of these actions registers their own listener!
+          // One should probably be responsible for listening and storing the response in context
+
           return [
-            (props) => PromoteAction(props, states),
-            (props) => DemoteAction(props, states),
+            (props) => BeginWorkflow(props, states),
+            (props) => AssignWorkflow(props, states),
+            ...states.map(
+              (state) => (props: DocumentActionProps) =>
+                UpdateWorkflow(props, states, state)
+            ),
+            (props) => CompleteWorkflow(props, states),
             ...prev,
           ]
         },
@@ -77,18 +55,20 @@ export const workflow = definePlugin<WorkflowConfig>(
             return prev
           }
 
-          return [(props) => StateBadge(props, states), ...prev]
+          const {documentId, currentUser} = context
+
+          if (!documentId) {
+            return prev
+          }
+
+          return [
+            () => StateBadge(states, documentId),
+            () => AssigneesBadge(states, documentId, currentUser),
+            ...prev,
+          ]
         },
       },
-      tools: [
-        {
-          name: 'workflow',
-          title: 'Workflow',
-          component: WorkflowTool,
-          icon: SplitVerticalIcon,
-          options: {schemaTypes, states},
-        },
-      ],
+      tools: [workflowTool({schemaTypes, states})],
     }
   }
 )

package/src/schema/workflow/workflow.metadata.ts

@@ -0,0 +1,68 @@
+import {defineField, defineType} from 'sanity'
+
+import Field from '../../components/DocumentCard/Field'
+import UserAssignmentInput from '../../components/UserAssignmentInput'
+import {API_VERSION} from '../../constants'
+import initialRank from '../../helpers/initialRank'
+import {State} from '../../types'
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default (states: State[]) =>
+  defineType({
+    type: 'document',
+    name: 'workflow.metadata',
+    title: 'Workflow metadata',
+    liveEdit: true,
+    fields: [
+      defineField({
+        name: 'state',
+        description: `The current "State" of the document. Field is read only as changing it would not fire the state's "operation" setting. These are fired in the Document Actions and in the custom Tool.`,
+        readOnly: true,
+        type: 'string',
+        options: {
+          list: states.length
+            ? states.map((state) => ({
+                value: state.id,
+                title: state.title,
+              }))
+            : [],
+          layout: 'radio',
+        },
+      }),
+      defineField({
+        name: 'documentId',
+        title: 'Document ID',
+        description:
+          'Used to help identify the target document that this metadata is tracking state for.',
+        type: 'string',
+        readOnly: true,
+        components: {
+          input: Field,
+        },
+      }),
+      defineField({
+        name: 'orderRank',
+        description: 'Used to maintain order position of cards in the Tool.',
+        type: 'string',
+        readOnly: true,
+        initialValue: async (p, {getClient}) => {
+          const lastDocOrderRank = await getClient({
+            apiVersion: API_VERSION,
+          }).fetch(`*[_type == $type]|order(@[$order] desc)[0][$order]`, {
+            order: `orderRank`,
+            type: `workflow.metadata`,
+          })
+
+          return initialRank(lastDocOrderRank)
+        },
+      }),
+      defineField({
+        type: 'array',
+        name: 'assignees',
+        of: [{type: 'string'}],
+        components: {
+          input: UserAssignmentInput,
+        },
+      }),
+    ],
+  })

package/src/tools/index.ts

@@ -0,0 +1,15 @@
+import {SplitVerticalIcon} from '@sanity/icons'
+import {Tool} from 'sanity'
+
+import WorkflowTool from '../components/WorkflowTool'
+import {WorkflowConfig} from '../types'
+
+export type WorkflowToolConfig = (options: WorkflowConfig) => Tool
+
+export const workflowTool: WorkflowToolConfig = (options: WorkflowConfig) => ({
+  name: 'workflow',
+  title: 'Workflow',
+  component: WorkflowTool,
+  icon: SplitVerticalIcon,
+  options,
+})

package/src/types/index.ts

@@ -1,20 +1,36 @@
-import React from 'react'
 import {SanityDocumentLike} from 'sanity'
 
+// export type Operation = 'publish' | 'unpublish'
+
 export type State = {
   id: string
+  transitions: string[]
   title: string
-  operation?: 'publish' | 'unpublish' | null
-  // From badge props
+  // operation?: Operation
+  roles?: string[]
+  requireAssignment?: boolean
+  // From document badges
   color?: 'primary' | 'success' | 'warning' | 'danger'
-  icon?: React.ReactNode | React.ComponentType
 }
 
+export type StateCheck<Id, States> = {
+  id: Id
+  // Transitions is an array of State ids
+  transitions?: States extends {id: infer Id2}[] ? Id2[] : never
+} & State
+
 export type WorkflowConfig = {
   schemaTypes: string[]
   states?: State[]
 }
 
+export function defineStates<
+  Id extends string,
+  States extends StateCheck<Id, States>[]
+>(states: States): States {
+  return states
+}
+
 export type User = {
   createdAt: string
   displayName: string
@@ -43,8 +59,13 @@ export type Metadata = SanityDocumentLike & {
   assignees: string[]
   documentId: string
   state: string
+  orderRank: string
 }
 
-export type SanityDocumentWithMetadata = SanityDocumentLike & {
-  _metadata: Metadata | null
+export type SanityDocumentWithMetadata = {
+  _metadata: Metadata
+  _id: string
+  _type: string
+  _rev: string
+  _updatedAt: string
 }

package/src/actions/DemoteAction.tsx

@@ -1,62 +0,0 @@
-import {ArrowLeftIcon} from '@sanity/icons'
-import {useToast} from '@sanity/ui'
-import {DocumentActionProps, useClient} from 'sanity'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
-
-import {State} from '../types'
-
-export function DemoteAction(props: DocumentActionProps, states: State[]) {
-  const {id} = props
-  const {data, loading, error} = useWorkflowMetadata(id, states)
-  const {state} = data
-  const client = useClient()
-  const toast = useToast()
-
-  if (loading || error) {
-    if (error) {
-      console.error(error)
-    }
-
-    return null
-  }
-
-  if (!state) {
-    return null
-  }
-
-  const onHandle = (documentId: string, newState: State) => {
-    client
-      .patch(`workflow-metadata.${documentId}`)
-      .set({state: newState.id})
-      .commit()
-      .then(() => {
-        props.onComplete()
-        toast.push({
-          status: 'success',
-          title: `Document demoted to ${newState.title}`,
-        })
-      })
-      .catch((err) => {
-        props.onComplete()
-        console.error(err)
-        toast.push({
-          status: 'error',
-          title: `Document demotion failed`,
-        })
-      })
-  }
-
-  const currentStateIndex = states.findIndex((s) => s.id === state.id)
-  const prevState = states[currentStateIndex - 1]
-
-  if (!prevState) {
-    return null
-  }
-
-  return {
-    icon: ArrowLeftIcon,
-    label: `Demote`,
-    title: `Demote State to "${prevState.title}"`,
-    onHandle: () => onHandle(id, prevState),
-  }
-}

package/src/actions/PromoteAction.tsx

@@ -1,62 +0,0 @@
-import {ArrowRightIcon} from '@sanity/icons'
-import {useToast} from '@sanity/ui'
-import {DocumentActionProps, useClient} from 'sanity'
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
-
-import {State} from '../types'
-
-export function PromoteAction(props: DocumentActionProps, states: State[]) {
-  const {id} = props
-  const {data, loading, error} = useWorkflowMetadata(id, states)
-  const {state} = data
-  const client = useClient()
-  const toast = useToast()
-
-  if (loading || error) {
-    if (error) {
-      console.error(error)
-    }
-
-    return null
-  }
-
-  if (!state) {
-    return null
-  }
-
-  const onHandle = (documentId: string, newState: State) => {
-    client
-      .patch(`workflow-metadata.${documentId}`)
-      .set({state: newState.id})
-      .commit()
-      .then(() => {
-        props.onComplete()
-        toast.push({
-          status: 'success',
-          title: `Document promoted to ${newState.title}`,
-        })
-      })
-      .catch((err) => {
-        props.onComplete()
-        console.error(err)
-        toast.push({
-          status: 'error',
-          title: `Document promotion failed`,
-        })
-      })
-  }
-
-  const currentStateIndex = states.findIndex((s) => s.id === state.id)
-  const nextState = states[currentStateIndex + 1]
-
-  if (!nextState) {
-    return null
-  }
-
-  return {
-    icon: ArrowRightIcon,
-    label: `Promote`,
-    title: `Promote State to "${nextState.title}"`,
-    onHandle: () => onHandle(id, nextState),
-  }
-}

package/src/components/Mutate.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import {Card, useToast} from '@sanity/ui'
-import {useDocumentOperation} from 'sanity'
-
-import {State} from '../types'
-
-type MutateProps = {
-  _id: string
-  _type: string
-  state: State
-  documentId: string
-  onComplete: (id: string) => void
-}
-
-export default function Mutate(props: MutateProps) {
-  const {_id, _type, documentId, state, onComplete} = props
-  const ops = useDocumentOperation(documentId, _type)
-  const isDraft = _id.startsWith('drafts.')
-
-  const toast = useToast()
-
-  if (isDraft && state.operation === 'publish') {
-    if (!ops.publish.disabled) {
-      ops.publish.execute()
-      onComplete(_id)
-      toast.push({
-        title: 'Published Document',
-        description: documentId,
-        status: 'success',
-      })
-    }
-  } else if (!isDraft && state.operation === 'unpublish') {
-    if (!ops.unpublish.disabled) {
-      ops.unpublish.execute()
-      onComplete(_id)
-      toast.push({
-        title: 'Unpublished Document',
-        description: documentId,
-        status: 'success',
-      })
-    }
-  } else {
-    // Clean up if it's not going to un/publish
-    onComplete(_id)
-  }
-
-  // return null
-
-  return (
-    <Card padding={3} shadow={2} tone="primary">
-      Mutating: {_id} to {state.title}
-    </Card>
-  )
-}