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

package/src/helpers/generateMultipleOrderRanks.ts

@@ -0,0 +1,80 @@
+import {LexoRank} from 'lexorank'
+
+function generateMiddleValue(ranks: (LexoRank | undefined)[]) {
+  // Has no undefined values
+  if (!ranks.some((rank) => !rank)) {
+    return ranks
+  }
+
+  // Find the first undefined value
+  const firstUndefined = ranks.findIndex((rank) => !rank)
+
+  // Find the first defined value after the undefined value
+  const firstDefinedAfter = ranks.findIndex(
+    (rank, index) => rank && index > firstUndefined
+  )
+  // Find the first defined value before the undefined value
+  const firstDefinedBefore = ranks.findLastIndex(
+    (rank, index) => rank && index < firstUndefined
+  )
+
+  if (firstDefinedAfter === -1 || firstDefinedBefore === -1) {
+    throw new Error(
+      `Unable to generate middle value between indexes ${firstDefinedBefore} and ${firstDefinedAfter}`
+    )
+  }
+
+  const beforeRank = ranks[firstDefinedBefore]
+  const afterRank = ranks[firstDefinedAfter]
+
+  if (
+    !beforeRank ||
+    typeof beforeRank === 'undefined' ||
+    !afterRank ||
+    typeof afterRank === 'undefined'
+  ) {
+    throw new Error(
+      `Unable to generate middle value between indexes ${firstDefinedBefore} and ${firstDefinedAfter}`
+    )
+  }
+
+  // Generate a new value between the two
+  const between = beforeRank.between(afterRank)
+
+  // Calculate the middle index between the defined values
+  const middle = Math.floor((firstDefinedAfter + firstDefinedBefore) / 2)
+
+  if (ranks[middle]) {
+    throw new Error(`Should not have overwritten value at index ${middle}`)
+  }
+
+  // Insert the new value into the array
+  ranks[middle] = between
+
+  // Return as a new array
+  return ranks
+}
+
+// Generates an array of LexoRanks between two values
+export function generateMultipleOrderRanks(
+  count: number,
+  start?: LexoRank,
+  end?: LexoRank
+): LexoRank[] {
+  // Begin array with correct size
+  let ranks = [...Array(count)]
+
+  // Use or create default values
+  const rankStart = start ?? LexoRank.min().genNext().genNext()
+  const rankEnd = end ?? LexoRank.max().genPrev().genPrev()
+
+  ranks[0] = rankStart
+  ranks[count - 1] = rankEnd
+
+  // Keep processing the array until every value between undefined values is defined
+  for (let i = 0; i < count; i++) {
+    ranks = generateMiddleValue(ranks)
+  }
+
+  return ranks.sort((a, b) => a.toString().localeCompare(b.toString()))
+}

package/src/helpers/initialRank.ts

@@ -0,0 +1,13 @@
+import {LexoRank} from 'lexorank'
+
+// Use in initial value field by passing in the rank value of the last document
+// If not value passed, generate a sensibly low rank
+export default function initialRank(lastRankValue = ``): string {
+  const lastRank =
+    lastRankValue && typeof lastRankValue === 'string'
+      ? LexoRank.parse(lastRankValue)
+      : LexoRank.min()
+  const nextRank = lastRank.genNext().genNext()
+
+  return (nextRank as any).value
+}

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[]) => {
+    async (
+      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,
             },
           }
         }
@@ -128,29 +122,33 @@ export function useWorkflowDocuments(schemaTypes: string[]) {
       const {_id, _type} = document
 
       // Metadata + useDocumentOperation always uses Published id
-      const {_rev, documentId} = document._metadata || {}
+      const {documentId, _rev} = document._metadata || {}
 
-      client
+      await client
         .patch(`workflow-metadata.${documentId}`)
-        .ifRevisionId(_rev as string)
-        .set({state: newStateId})
+        .ifRevisionId(_rev)
+        .set({state: newStateId, orderRank: newOrder})
         .commit()
-        .then(() => {
-          return toast.push({
-            title: `Moved to "${newState?.title ?? newStateId}"`,
-            description: documentId,
+        .then((res) => {
+          toast.push({
+            title:
+              newState.id === document._metadata.state
+                ? `Reordered in "${newState?.title ?? newStateId}"`
+                : `Moved to "${newState?.title ?? newStateId}"`,
             status: 'success',
           })
+          return res
         })
-        .catch(() => {
+        .catch((err) => {
           // Revert optimistic update
           setLocalDocuments(currentLocalData)
 
-          return toast.push({
+          toast.push({
             title: `Failed to move to "${newState?.title ?? newStateId}"`,
-            description: documentId,
+            description: err.message,
             status: 'error',
           })
+          return null
         })
 
       // Send back to the workflow board so a document update can happen

package/src/hooks/useWorkflowMetadata.tsx

@@ -1,44 +1,49 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {useListeningQuery} from 'sanity-plugin-utils'
 
-import {Metadata, State} from '../types'
+import {API_VERSION} from '../constants'
+import {KeyedMetadata, Metadata} from '../types'
 
 /**
- * Takes the published ID of a document and return the metadata and current state object
+ * Takes the published ID of documents and return the metadata for those documents.
  *
- * @param id Source document published ID
- * @param states Array of States defined in plugin config
- * @returns State
+ * @param ids Source document published IDs
  */
-export function useWorkflowMetadata(
-  id: string,
-  states: State[]
-): {
-  data: {metadata?: Metadata; state?: State}
+export function useWorkflowMetadata(ids: string[]): {
+  data: KeyedMetadata
   loading: boolean
   error: boolean
 } {
   const {
-    data: metadata,
+    data: rawData,
     loading,
     error,
-  } = useListeningQuery<Metadata>(
-    `*[_type == "workflow.metadata" && documentId == $id][0]`,
+  } = useListeningQuery<Metadata[]>(
+    `*[_type == "workflow.metadata" && documentId in $ids]{
+      _id,
+      _type,
+      _rev,
+      assignees,
+      documentId,
+      state,
+      orderRank
+    }`,
     {
-      params: {id},
+      params: {ids},
+      options: {apiVersion: API_VERSION},
     }
   )
 
-  if (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<KeyedMetadata>((acc, cur) => {
+      return {
+        ...acc,
+        [cur.documentId]: cur,
+      }
+    }, {})
+  }, [rawData])
 
-  return {data: {}, loading, error}
+  return {data: keyedMetadata, loading, error}
 }

package/src/index.ts

@@ -1,47 +1,28 @@
-import {definePlugin} from 'sanity'
-import {CheckmarkIcon, SplitVerticalIcon} from '@sanity/icons'
+import {definePlugin, DocumentActionProps, isObjectInputProps} 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 {WorkflowProvider} from './components/WorkflowContext'
+import WorkflowSignal from './components/WorkflowSignal'
+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) => {
     const {schemaTypes, states} = {...DEFAULT_CONFIG, ...config}
 
     if (!states?.length) {
-      throw new Error(`Workflow: Missing states in config`)
+      throw new Error(`Workflow plugin: Missing "states" in config`)
+    }
+
+    if (!schemaTypes?.length) {
+      throw new Error(`Workflow plugin: Missing "schemaTypes" in config`)
     }
 
     return {
@@ -49,17 +30,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
+      // ...
+      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)) {
@@ -67,8 +60,13 @@ export const workflow = definePlugin<WorkflowConfig>(
           }
 
           return [
-            (props) => PromoteAction(props, states),
-            (props) => DemoteAction(props, states),
+            (props) => BeginWorkflow(props),
+            (props) => AssignWorkflow(props),
+            ...states.map(
+              (state) => (props: DocumentActionProps) =>
+                UpdateWorkflow(props, state)
+            ),
+            (props) => CompleteWorkflow(props),
             ...prev,
           ]
         },
@@ -77,17 +75,22 @@ export const workflow = definePlugin<WorkflowConfig>(
             return prev
           }
 
-          return [(props) => StateBadge(props, states), ...prev]
+          const {documentId, currentUser} = context
+
+          if (!documentId) {
+            return prev
+          }
+
+          return [
+            () => StateBadge(documentId),
+            () => AssigneesBadge(documentId, currentUser),
+            ...prev,
+          ]
         },
       },
       tools: [
-        {
-          name: 'workflow',
-          title: 'Workflow',
-          component: WorkflowTool,
-          icon: SplitVerticalIcon,
-          options: {schemaTypes, states},
-        },
+        // TODO: These configs could be read from Context
+        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,34 @@
-import React from 'react'
 import {SanityDocumentLike} from 'sanity'
 
 export type State = {
   id: string
+  transitions: string[]
   title: string
-  operation?: 'publish' | 'unpublish' | null
-  // From badge props
+  roles?: string[]
+  requireAssignment?: boolean
+  requireValidation?: 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 +57,15 @@ export type Metadata = SanityDocumentLike & {
   assignees: string[]
   documentId: string
   state: string
+  orderRank: string
 }
 
-export type SanityDocumentWithMetadata = SanityDocumentLike & {
-  _metadata: Metadata | null
+export type KeyedMetadata = {[key: string]: Metadata}
+
+export type SanityDocumentWithMetadata = {
+  _metadata: Metadata
+  _id: string
+  _type: string
+  _rev: string
+  _updatedAt: string
 }