sanity-plugin-workflow 1.0.0-beta.1

package/src/hooks/useWorkflowDocuments.tsx

@@ -0,0 +1,166 @@
+import React from 'react'
+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}
+}`
+
+const INITIAL_DATA: DocumentsAndMetadata = {
+  documents: [],
+  metadata: [],
+}
+
+export function useWorkflowDocuments(schemaTypes: string[]) {
+  const toast = useToast()
+  const client = useClient()
+  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)
+    }
+  }, [data])
+
+  const move = React.useCallback(
+    (draggedId: string, destination: DraggableLocation, states: State[]) => {
+      // Optimistic update
+      const currentLocalData = localDocuments
+      const newLocalDocuments = localDocuments.map((item) => {
+        if (item?._metadata?.documentId === draggedId) {
+          return {
+            ...item,
+            _metadata: {
+              ...item._metadata,
+              state: destination.droppableId,
+            },
+          }
+        }
+
+        return item
+      })
+
+      setLocalDocuments(newLocalDocuments)
+
+      // Now client-side update
+      const newStateId = destination.droppableId
+      const newState = states.find((s) => s.id === newStateId)
+      const document = localDocuments.find(
+        (d) => d?._metadata?.documentId === draggedId
+      )
+
+      if (!newState?.id) {
+        toast.push({
+          title: `Could not find target state ${newStateId}`,
+          status: 'error',
+        })
+        return null
+      }
+
+      if (!document) {
+        toast.push({
+          title: `Could not find dragged document in data`,
+          status: 'error',
+        })
+        return null
+      }
+
+      // We need to know if it's a draft or not
+      const {_id, _type} = document
+
+      // Metadata + useDocumentOperation always uses Published id
+      const {_rev, documentId} = document._metadata || {}
+
+      client
+        .patch(`workflow-metadata.${documentId}`)
+        .ifRevisionId(_rev as string)
+        .set({state: newStateId})
+        .commit()
+        .then(() => {
+          return toast.push({
+            title: `Moved to "${newState?.title ?? newStateId}"`,
+            description: documentId,
+            status: 'success',
+          })
+        })
+        .catch(() => {
+          // Revert optimistic update
+          setLocalDocuments(currentLocalData)
+
+          return toast.push({
+            title: `Failed to move to "${newState?.title ?? newStateId}"`,
+            description: documentId,
+            status: 'error',
+          })
+        })
+
+      // Send back to the workflow board so a document update can happen
+      return {_id, _type, documentId, state: newState as State}
+    },
+    [client, toast, localDocuments]
+  )
+
+  return {
+    workflowData: {data: localDocuments, loading, error},
+    operations: {move},
+  }
+}

package/src/hooks/useWorkflowMetadata.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {useListeningQuery} from 'sanity-plugin-utils'
+
+import {Metadata, State} from '../types'
+
+/**
+ * Takes the published ID of a document and return the metadata and current state object
+ *
+ * @param id Source document published ID
+ * @param states Array of States defined in plugin config
+ * @returns State
+ */
+export function useWorkflowMetadata(
+  id: string,
+  states: State[]
+): {
+  data: {metadata?: Metadata; state?: State}
+  loading: boolean
+  error: boolean
+} {
+  const {
+    data: metadata,
+    loading,
+    error,
+  } = useListeningQuery<Metadata>(
+    `*[_type == "workflow.metadata" && documentId == $id][0]`,
+    {
+      params: {id},
+    }
+  )
+
+  if (metadata?.state) {
+    return {
+      data: {
+        metadata,
+        state: states.find((s) => s.id === metadata.state),
+      },
+      loading,
+      error,
+    }
+  }
+
+  return {data: {}, loading, error}
+}

package/src/index.ts

@@ -0,0 +1,94 @@
+import {definePlugin} from 'sanity'
+import {CheckmarkIcon, SplitVerticalIcon} from '@sanity/icons'
+
+import WorkflowTool from './components/WorkflowTool'
+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`)
+    }
+
+    return {
+      name: 'sanity-plugin-workflow',
+      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)
+      //     },
+      //   },
+      // },
+      document: {
+        actions: (prev, context) => {
+          if (!schemaTypes.includes(context.schemaType)) {
+            return prev
+          }
+
+          return [
+            (props) => PromoteAction(props, states),
+            (props) => DemoteAction(props, states),
+            ...prev,
+          ]
+        },
+        badges: (prev, context) => {
+          if (!schemaTypes.includes(context.schemaType)) {
+            return prev
+          }
+
+          return [(props) => StateBadge(props, states), ...prev]
+        },
+      },
+      tools: [
+        {
+          name: 'workflow',
+          title: 'Workflow',
+          component: WorkflowTool,
+          icon: SplitVerticalIcon,
+          options: {schemaTypes, states},
+        },
+      ],
+    }
+  }
+)

package/src/schema/workflow/metadata.ts

@@ -0,0 +1,38 @@
+import {defineType, defineField, defineArrayMember} from 'sanity'
+// import UserSelectInput from '../../components/UserSelectInput'
+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',
+        type: 'string',
+        options: {
+          list: states.map((state) => ({
+            value: state.id,
+            title: state.title,
+          })),
+        },
+      }),
+      defineField({
+        name: 'documentId',
+        title: 'Document ID',
+        type: 'string',
+        readOnly: true,
+      }),
+      defineField({
+        type: 'array',
+        name: 'assignees',
+        description:
+          'The people who are assigned to move this further in the workflow.',
+        of: [defineArrayMember({type: 'string'})],
+        // components: {input: UserSelectInput},
+      }),
+    ],
+  })

package/src/types/index.ts

@@ -0,0 +1,50 @@
+import React from 'react'
+import {SanityDocumentLike} from 'sanity'
+
+export type State = {
+  id: string
+  title: string
+  operation?: 'publish' | 'unpublish' | null
+  // From badge props
+  color?: 'primary' | 'success' | 'warning' | 'danger'
+  icon?: React.ReactNode | React.ComponentType
+}
+
+export type WorkflowConfig = {
+  schemaTypes: string[]
+  states?: State[]
+}
+
+export type User = {
+  createdAt: string
+  displayName: string
+  email: string
+  familyName: string
+  givenName: string
+  id: string
+  imageUrl: string
+  isCurrentUser: boolean
+  middleName: string
+  projectId: string
+  provider: string
+  sanityUserId: string
+  updatedAt: string
+}
+
+export type DragData = {
+  documentId?: string
+  x?: number
+  y?: number
+  state?: string
+}
+
+export type Metadata = SanityDocumentLike & {
+  _rev: string
+  assignees: string[]
+  documentId: string
+  state: string
+}
+
+export type SanityDocumentWithMetadata = SanityDocumentLike & {
+  _metadata: Metadata | null
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})