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

package/src/actions/AssignWorkflow.tsx

@@ -0,0 +1,49 @@
+import {UsersIcon} from '@sanity/icons'
+import {useState} from 'react'
+import {DocumentActionProps} from 'sanity'
+import {useProjectUsers} from 'sanity-plugin-utils'
+
+import UserAssignment from '../components/UserAssignment'
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
+
+export function AssignWorkflow(props: DocumentActionProps) {
+  const {id} = props
+  const {metadata, loading, error} = useWorkflowContext(id)
+  const [isDialogOpen, setDialogOpen] = useState(false)
+  const userList = useProjectUsers({apiVersion: API_VERSION})
+
+  if (error) {
+    console.error(error)
+  }
+
+  if (!metadata) {
+    return null
+  }
+
+  return {
+    icon: UsersIcon,
+    type: 'dialog',
+    disabled: !metadata || loading || error,
+    label: `Assign`,
+    title: metadata ? null : `Document is not in Workflow`,
+    dialog: isDialogOpen && {
+      type: 'popover',
+      onClose: () => {
+        setDialogOpen(false)
+      },
+      content: (
+        <UserAssignment
+          userList={userList}
+          assignees={
+            metadata && metadata.assignees.length > 0 ? metadata.assignees : []
+          }
+          documentId={id}
+        />
+      ),
+    },
+    onHandle: () => {
+      setDialogOpen(true)
+    },
+  }
+}

package/src/actions/BeginWorkflow.tsx

@@ -0,0 +1,63 @@
+import {SplitVerticalIcon} from '@sanity/icons'
+import {useToast} from '@sanity/ui'
+import {LexoRank} from 'lexorank'
+import {useCallback, useState} from 'react'
+import {DocumentActionProps, useClient} from 'sanity'
+
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
+
+export function BeginWorkflow(props: DocumentActionProps) {
+  const {id, draft} = props
+  const {metadata, loading, error, states} = useWorkflowContext(id)
+  const client = useClient({apiVersion: API_VERSION})
+  const toast = useToast()
+  const [beginning, setBeginning] = useState(false)
+  const [complete, setComplete] = useState(false)
+
+  if (error) {
+    console.error(error)
+  }
+
+  const handle = useCallback(async () => {
+    setBeginning(true)
+    const lowestOrderFirstState = await client.fetch(
+      `*[_type == "workflow.metadata" && state == $state]|order(orderRank)[0].orderRank`,
+      {state: states[0].id}
+    )
+    client
+      .createIfNotExists({
+        _id: `workflow-metadata.${id}`,
+        _type: `workflow.metadata`,
+        documentId: id,
+        state: states[0].id,
+        orderRank: lowestOrderFirstState
+          ? LexoRank.parse(lowestOrderFirstState).genNext().toString()
+          : LexoRank.min().toString(),
+      })
+      .then(() => {
+        toast.push({
+          status: 'success',
+          title: 'Workflow started',
+          description: `Document is now "${states[0].title}"`,
+        })
+        setBeginning(false)
+        // Optimistically remove action
+        setComplete(true)
+      })
+  }, [id, states, client, toast])
+
+  if (!draft || complete || metadata) {
+    return null
+  }
+
+  return {
+    icon: SplitVerticalIcon,
+    type: 'dialog',
+    disabled: metadata || loading || error || beginning || complete,
+    label: beginning ? `Beginning...` : `Begin Workflow`,
+    onHandle: () => {
+      handle()
+    },
+  }
+}

package/src/actions/CompleteWorkflow.tsx

@@ -0,0 +1,41 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {useCallback} from 'react'
+import {DocumentActionProps, useClient} from 'sanity'
+
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
+
+export function CompleteWorkflow(props: DocumentActionProps) {
+  const {id} = props
+  const {metadata, loading, error, states} = useWorkflowContext(id)
+  const client = useClient({apiVersion: API_VERSION})
+
+  if (error) {
+    console.error(error)
+  }
+
+  const handle = useCallback(() => {
+    client.delete(`workflow-metadata.${id}`)
+  }, [id, client])
+
+  if (!metadata) {
+    return null
+  }
+
+  const state = states.find((s) => s.id === metadata.state)
+  const isLastState = state?.id === states[states.length - 1].id
+
+  return {
+    icon: CheckmarkIcon,
+    type: 'dialog',
+    disabled: loading || error || !isLastState,
+    label: `Complete Workflow`,
+    title: isLastState
+      ? `Removes the document from the Workflow process`
+      : `Cannot remove from workflow until in the last state`,
+    onHandle: () => {
+      handle()
+    },
+    color: 'positive',
+  }
+}

package/src/actions/UpdateWorkflow.tsx

@@ -0,0 +1,126 @@
+import {ArrowLeftIcon, ArrowRightIcon} from '@sanity/icons'
+import {useToast} from '@sanity/ui'
+import {useCurrentUser, useValidationStatus} from 'sanity'
+import {DocumentActionProps, useClient} from 'sanity'
+
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
+import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
+import {State} from '../types'
+
+// eslint-disable-next-line complexity
+export function UpdateWorkflow(props: DocumentActionProps, actionState: State) {
+  const {id, type} = props
+
+  const user = useCurrentUser()
+  const client = useClient({apiVersion: API_VERSION})
+  const toast = useToast()
+  const currentUser = useCurrentUser()
+
+  const {metadata, loading, error, states} = useWorkflowContext(id)
+  const currentState = states.find((s) => s.id === metadata?.state)
+  const {assignees = []} = metadata ?? {}
+
+  // TODO: Shouldn't the document action props contain this?
+  const {validation, isValidating} = useValidationStatus(id, type)
+  const hasValidationErrors =
+    currentState?.requireValidation &&
+    !isValidating &&
+    validation?.length > 0 &&
+    validation.find((v) => v.level === 'error')
+
+  if (error) {
+    console.error(error)
+  }
+
+  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 state now "${newState.title}"`,
+        })
+      })
+      .catch((err) => {
+        props.onComplete()
+        console.error(err)
+        toast.push({
+          status: 'error',
+          title: `Document state update failed`,
+        })
+      })
+  }
+
+  // Remove button if:
+  // Document is not in Workflow OR
+  // The current State is the same as this actions State
+  if (!metadata || (currentState && currentState.id === actionState.id)) {
+    return null
+  }
+
+  const currentStateIndex = states.findIndex((s) => s.id === 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 =
+    user?.roles?.length && actionState?.roles?.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
+        actionState?.roles?.length !== 0
+
+  const actionStateIsAValidTransition =
+    currentState?.id && currentState.transitions.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)
+      : // Otherwise this isn't a problem
+        true
+
+  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)
+    : // Otherwise this isn't a problem
+      true
+
+  let title = `${directionLabel} State to "${actionState.title}"`
+
+  if (!userRoleCanUpdateState) {
+    title = `Your User role cannot ${directionLabel} State to "${actionState.title}"`
+  } else if (!actionStateIsAValidTransition) {
+    title = `You cannot ${directionLabel} State to "${actionState.title}" from "${currentState?.title}"`
+  } else if (!userAssignmentCanUpdateState) {
+    title = `You must be assigned to the document to ${directionLabel} State to "${actionState.title}"`
+  } else if (currentState?.requireValidation && isValidating) {
+    title = `Document is validating, cannot ${directionLabel} State to "${actionState.title}"`
+  } else if (hasValidationErrors) {
+    title = `Document has validation errors, cannot ${directionLabel} State to "${actionState.title}"`
+  }
+
+  return {
+    icon: DirectionIcon,
+    disabled:
+      loading ||
+      error ||
+      (currentState?.requireValidation && isValidating) ||
+      hasValidationErrors ||
+      !currentState ||
+      !userRoleCanUpdateState ||
+      !actionStateIsAValidTransition ||
+      !userAssignmentCanUpdateState,
+    title,
+    label: actionState.title,
+    onHandle: () => onHandle(id, actionState),
+  }
+}

package/src/badges/AssigneesBadge.tsx

@@ -0,0 +1,53 @@
+import {CurrentUser, DocumentBadgeDescription} from 'sanity'
+import {useProjectUsers} from 'sanity-plugin-utils'
+
+import {useWorkflowContext} from '../components/WorkflowContext'
+import {API_VERSION} from '../constants'
+
+export function AssigneesBadge(
+  documentId: string,
+  currentUser: CurrentUser | null
+): DocumentBadgeDescription | null {
+  const {metadata, loading, error} = useWorkflowContext(documentId)
+  const userList = useProjectUsers({apiVersion: API_VERSION})
+
+  if (loading || error || !metadata) {
+    if (error) {
+      console.error(error)
+    }
+
+    return null
+  }
+
+  if (!metadata?.assignees?.length) {
+    return {
+      label: 'Unassigned',
+    }
+  }
+
+  const {assignees} = metadata ?? []
+  const hasMe = currentUser
+    ? assignees.some((assignee) => assignee === currentUser.id)
+    : false
+  const assigneesCount = hasMe ? assignees.length - 1 : assignees.length
+  const assigneeUsers = userList.filter((user) => assignees.includes(user.id))
+  const title = assigneeUsers.map((user) => user.displayName).join(', ')
+
+  let label
+
+  if (hasMe && assigneesCount === 0) {
+    label = 'Assigned to Me'
+  } else if (hasMe && assigneesCount > 0) {
+    label = `Me and ${assigneesCount} ${
+      assigneesCount === 1 ? 'other' : 'others'
+    }`
+  } else {
+    label = `${assigneesCount} assigned`
+  }
+
+  return {
+    label,
+    title,
+    color: 'primary',
+  }
+}

package/src/badges/StateBadge.tsx

@@ -0,0 +1,28 @@
+import {DocumentBadgeDescription} from 'sanity'
+
+import {useWorkflowContext} from '../components/WorkflowContext'
+
+export function StateBadge(
+  documentId: string
+): DocumentBadgeDescription | null {
+  const {metadata, loading, error, states} = useWorkflowContext(documentId)
+  const state = states.find((s) => s.id === metadata?.state)
+
+  if (loading || error) {
+    if (error) {
+      console.error(error)
+    }
+
+    return null
+  }
+
+  if (!state) {
+    return null
+  }
+
+  return {
+    label: state.title,
+    // title: state.title,
+    color: state?.color,
+  }
+}

package/src/components/DocumentCard/AvatarGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Box, Flex, Text} from '@sanity/ui'
-import {UserAvatar} from 'sanity'
+import {useCurrentUser, UserAvatar} from 'sanity'
 
 import {User} from '../../types'
 
@@ -10,22 +10,26 @@ type AvatarGroupProps = {
 }
 
 export default function AvatarGroup(props: AvatarGroupProps) {
-  const {users, max = 3} = props
+  const currentUser = useCurrentUser()
+  const {users, max = 4} = props
 
   const len = users?.length
-  const visibleUsers = React.useMemo(
-    () => users.slice(0, max),
-    [users]
-  ) as User[]
+  const {me, visibleUsers} = React.useMemo(() => {
+    return {
+      me: currentUser?.id ? users.find((u) => u.id === currentUser.id) : undefined,
+      visibleUsers: users.filter((u) => u.id !== currentUser?.id).slice(0, max - 1),
+    }
+  }, [users, max, currentUser])
 
   if (!users?.length) {
     return null
   }
 
   return (
-    <Flex align="center">
+    <Flex align="center" gap={1}>
+      {me ? <UserAvatar user={me} /> : null}
       {visibleUsers.map((user) => (
-        <Box key={user.id} style={{marginRight: -5}}>
+        <Box key={user.id} style={{marginRight: -8}}>
           <UserAvatar user={user} />
         </Box>
       ))}

package/src/components/DocumentCard/CompleteButton.tsx

@@ -0,0 +1,68 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Box, Button, Text, Tooltip, useToast} from '@sanity/ui'
+import React from 'react'
+import {useClient} from 'sanity'
+
+import {API_VERSION} from '../../constants'
+
+type CompleteButtonProps = {
+  documentId: string
+  disabled: boolean
+}
+
+export default function CompleteButton(props: CompleteButtonProps) {
+  const {documentId, disabled = false} = props
+  const client = useClient({apiVersion: API_VERSION})
+  const toast = useToast()
+
+  const handleComplete: React.MouseEventHandler<HTMLButtonElement> =
+    React.useCallback(
+      (event) => {
+        const id = event.currentTarget.value
+
+        if (!id) {
+          return
+        }
+
+        client
+          .delete(`workflow-metadata.${id}`)
+          .then(() => {
+            toast.push({
+              status: 'success',
+              title: 'Workflow completed',
+            })
+          })
+          .catch(() => {
+            toast.push({
+              status: 'error',
+              title: 'Could not complete Workflow',
+            })
+          })
+      },
+      [client, toast]
+    )
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>Remove this document from Workflow</Text>
+        </Box>
+      }
+    >
+      <Button
+        value={documentId}
+        onClick={handleComplete}
+        text="Complete"
+        icon={CheckmarkIcon}
+        tone="positive"
+        mode="ghost"
+        fontSize={1}
+        padding={2}
+        tabIndex={-1}
+        disabled={disabled}
+      />
+    </Tooltip>
+  )
+}

package/src/components/DocumentCard/EditButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Button} from '@sanity/ui'
 import {EditIcon} from '@sanity/icons'
 import {useRouter} from 'sanity/router'
@@ -6,10 +5,11 @@ import {useRouter} from 'sanity/router'
 type EditButtonProps = {
   id: string
   type: string
+  disabled?: boolean
 }
 
 export default function EditButton(props: EditButtonProps) {
-  const {id, type} = props
+  const {id, type, disabled = false} = props
   const {navigateIntent} = useRouter()
 
   return (
@@ -22,6 +22,7 @@ export default function EditButton(props: EditButtonProps) {
       tabIndex={-1}
       icon={EditIcon}
       text="Edit"
+      disabled={disabled}
     />
   )
 }

package/src/components/DocumentCard/Field.tsx

@@ -0,0 +1,38 @@
+import {Flex, Card, Spinner} from '@sanity/ui'
+import {Preview, SanityDocument, StringInputProps, useSchema} from 'sanity'
+import {useListeningQuery, Feedback} from 'sanity-plugin-utils'
+
+import EditButton from './EditButton'
+
+// TODO: Update this to use the same component as the Tool
+export default function Field(props: StringInputProps) {
+  const schema = useSchema()
+  const {data, loading, error} = useListeningQuery<SanityDocument>(
+    `*[_id in [$id, $draftId]]|order(_updatedAt)[0]`,
+    {
+      params: {
+        id: String(props.value),
+        draftId: `drafts.${String(props.value)}`,
+      },
+    }
+  )
+
+  if (loading) {
+    return <Spinner />
+  }
+
+  const schemaType = schema.get(data?._type ?? ``)
+
+  if (error || !data?._type || !schemaType) {
+    return <Feedback tone="critical" title="Error with query" />
+  }
+
+  return (
+    <Card border padding={2}>
+      <Flex align="center" justify="space-between" gap={2}>
+        <Preview layout="default" value={data} schemaType={schemaType} />
+        <EditButton id={data._id} type={data._type} />
+      </Flex>
+    </Card>
+  )
+}

package/src/components/DocumentCard/Validate.tsx

@@ -0,0 +1,21 @@
+import {useEffect} from 'react'
+import {useValidationStatus, ValidationStatus} from 'sanity'
+
+type ValidateProps = {
+  documentId: string
+  type: string
+  onChange: (validation: ValidationStatus) => void
+}
+
+// Document validation is siloed into its own component
+// Because it's not performant to run on a lot of documents
+export default function Validate(props: ValidateProps) {
+  const {documentId, type, onChange} = props
+  const {isValidating, validation = []} = useValidationStatus(documentId, type)
+
+  useEffect(() => {
+    onChange({isValidating, validation})
+  }, [onChange, isValidating, validation])
+
+  return null
+}

package/src/components/DocumentCard/ValidationStatus.tsx

@@ -0,0 +1,37 @@
+import {ErrorOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
+import {ValidationMarker} from '@sanity/types'
+import {Box, Text, Tooltip} from '@sanity/ui'
+import {TextWithTone} from 'sanity'
+
+type ValidationStatusProps = {
+  validation: ValidationMarker[]
+}
+
+export function ValidationStatus(props: ValidationStatusProps) {
+  const {validation = []} = props
+
+  if (!validation.length) {
+    return null
+  }
+
+  const hasError = validation.some((item) => item.level === 'error')
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>
+            {validation.length === 1
+              ? `1 validation issue`
+              : `${validation.length} validation issues`}
+          </Text>
+        </Box>
+      }
+    >
+      <TextWithTone tone={hasError ? `critical` : `caution`} size={1}>
+        {hasError ? <ErrorOutlineIcon /> : <WarningOutlineIcon />}
+      </TextWithTone>
+    </Tooltip>
+  )
+}

package/src/components/DocumentCard/core/DraftStatus.tsx

@@ -0,0 +1,32 @@
+import {EditIcon} from '@sanity/icons'
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {Box, Text, Tooltip} from '@sanity/ui'
+import {TextWithTone} from 'sanity'
+
+import {TimeAgo} from './TimeAgo'
+
+export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
+  const {document} = props
+  const updatedAt = document && '_updatedAt' in document && document._updatedAt
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>
+            {document ? (
+              <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
+            ) : (
+              <>No unpublished edits</>
+            )}
+          </Text>
+        </Box>
+      }
+    >
+      <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
+        <EditIcon />
+      </TextWithTone>
+    </Tooltip>
+  )
+}

package/src/components/DocumentCard/core/PublishedStatus.tsx

@@ -0,0 +1,39 @@
+import {PublishIcon} from '@sanity/icons'
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {Box, Text, Tooltip} from '@sanity/ui'
+import {TextWithTone} from 'sanity'
+
+import {TimeAgo} from './TimeAgo'
+
+export function PublishedStatus(props: {
+  document?: PreviewValue | Partial<SanityDocument> | null
+}) {
+  const {document} = props
+  const updatedAt = document && '_updatedAt' in document && document._updatedAt
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>
+            {document ? (
+              <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
+            ) : (
+              <>Not published</>
+            )}
+          </Text>
+        </Box>
+      }
+    >
+      <TextWithTone
+        tone="positive"
+        dimmed={!document}
+        muted={!document}
+        size={1}
+      >
+        <PublishIcon />
+      </TextWithTone>
+    </Tooltip>
+  )
+}

package/src/components/DocumentCard/core/TimeAgo.tsx

@@ -0,0 +1,11 @@
+import {useTimeAgo} from 'sanity'
+
+export interface TimeAgoProps {
+  time: string | Date
+}
+
+export function TimeAgo({time}: TimeAgoProps) {
+  const timeAgo = useTimeAgo(time)
+
+  return <span title={timeAgo}>{timeAgo} ago</span>
+}