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

package/src/actions/BeginWorkflow.tsx

@@ -0,0 +1,68 @@
+import {useCallback, useState} from 'react'
+import {SplitVerticalIcon} from '@sanity/icons'
+import {DocumentActionProps, useClient} from 'sanity'
+import {useToast} from '@sanity/ui'
+import {LexoRank} from 'lexorank'
+
+import {API_VERSION} from '../constants'
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+import {State} from '../types'
+
+export function BeginWorkflow(props: DocumentActionProps, states: State[]) {
+  const {id, draft} = props
+  const {data, loading, error} = useWorkflowMetadata(id, states)
+  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(),
+        },
+        // Faster!
+        {visibility: 'async'}
+      )
+      .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 || data.metadata) {
+    return null
+  }
+
+  return {
+    icon: SplitVerticalIcon,
+    type: 'dialog',
+    disabled: data?.metadata || loading || error || beginning || complete,
+    label: beginning ? `Beginning...` : `Begin Workflow`,
+    onHandle: () => {
+      handle()
+    },
+  }
+}

package/src/actions/CompleteWorkflow.tsx

@@ -0,0 +1,41 @@
+import {useCallback} from 'react'
+import {CheckmarkIcon} from '@sanity/icons'
+import {DocumentActionProps, useClient} from 'sanity'
+
+import {API_VERSION} from '../constants'
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+import {State} from '../types'
+
+export function CompleteWorkflow(props: DocumentActionProps, states: State[]) {
+  const {id} = props
+  const {data, loading, error} = useWorkflowMetadata(id, states)
+  const client = useClient({apiVersion: API_VERSION})
+
+  if (error) {
+    console.error(error)
+  }
+
+  const handle = useCallback(() => {
+    client.delete(`workflow-metadata.${id}`)
+  }, [id, client])
+
+  const isLastState = data?.state?.id === states[states.length - 1].id
+
+  if (!data.metadata) {
+    return null
+  }
+
+  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/RequestReviewAction.js

@@ -38,13 +38,7 @@ export function RequestReviewAction(props) {
   return {
     dialog: showWizardDialog && {
       type: 'popover',
-      content: (
-        <RequestReviewWizard
-          metadata={metadata.data}
-          onClose={onClose}
-          onSend={onSend}
-        />
-      ),
+      content: <RequestReviewWizard metadata={metadata.data} onClose={onClose} onSend={onSend} />,
       onClose: props.onComplete,
     },
     disabled: showWizardDialog,

package/src/actions/UpdateWorkflow.tsx

@@ -0,0 +1,142 @@
+// import {useState} from 'react'
+import {ArrowRightIcon, ArrowLeftIcon} from '@sanity/icons'
+import {useToast} from '@sanity/ui'
+import {useCurrentUser, useValidationStatus} from 'sanity'
+import {DocumentActionProps, useClient} from 'sanity'
+
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+import {API_VERSION} from '../constants'
+import {State} from '../types'
+import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
+
+export function UpdateWorkflow(
+  props: DocumentActionProps,
+  allStates: State[],
+  actionState: State
+) {
+  const {id, type} = props
+  const {validation, isValidating} = useValidationStatus(id, type)
+  const hasValidationErrors =
+    !isValidating &&
+    validation?.length > 0 &&
+    validation.find((v) => v.level === 'error')
+
+  const user = useCurrentUser()
+  const client = useClient({apiVersion: API_VERSION})
+  const toast = useToast()
+  const currentUser = useCurrentUser()
+
+  const {data, loading, error} = useWorkflowMetadata(id, allStates)
+  const {state: currentState} = data
+  const {assignees = []} = data?.metadata ?? {}
+
+  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}"`,
+        })
+        // Perform document operations after State changes
+        // If State has changed and the document needs to be un/published
+        // This functionality was deemed too dangerous / unexpected
+        // Revisit with improved UX
+        // if (!ops.publish.disabled && nextOperation === 'publish') {
+        //   ops.publish.execute()
+        // } else if (!ops.unpublish.disabled && nextOperation === 'unpublish') {
+        //   ops.unpublish.execute()
+        // }
+      })
+      .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 (!data.metadata || (currentState && currentState.id === actionState.id)) {
+    return null
+  }
+
+  const currentStateIndex = allStates.findIndex(
+    (s) => s.id === currentState?.id
+  )
+  const actionStateIndex = allStates.findIndex((s) => s.id === actionState.id)
+  const direction = actionStateIndex > currentStateIndex ? 'promote' : 'demote'
+  const DirectionIcon = direction === 'promote' ? ArrowRightIcon : ArrowLeftIcon
+  const directionLabel = direction === 'promote' ? 'Promote' : 'Demote'
+
+  let title = `${directionLabel} State to "${actionState.title}"`
+
+  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
+
+  if (!userRoleCanUpdateState) {
+    title = `Your User role cannot ${directionLabel} State to "${actionState.title}"`
+  }
+
+  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
+
+  if (!actionStateIsAValidTransition) {
+    title = `You cannot ${directionLabel} State to "${actionState.title}" from "${currentState?.title}"`
+  }
+
+  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
+
+  if (!userAssignmentCanUpdateState) {
+    title = `You must be assigned to the document to ${directionLabel} State to "${actionState.title}"`
+  }
+
+  if (hasValidationErrors) {
+    title = `Document has validation errors, cannot ${directionLabel} State to "${actionState.title}"`
+  }
+
+  return {
+    icon: DirectionIcon,
+    disabled:
+      loading ||
+      error ||
+      isValidating ||
+      hasValidationErrors ||
+      !currentState ||
+      !userRoleCanUpdateState ||
+      !actionStateIsAValidTransition ||
+      !userAssignmentCanUpdateState,
+    title,
+    label: actionState.title,
+    onHandle: () => onHandle(id, actionState),
+  }
+}

package/src/badges/AssigneesBadge.tsx

@@ -0,0 +1,52 @@
+import {CurrentUser, DocumentBadgeDescription} from 'sanity'
+import {useProjectUsers} from 'sanity-plugin-utils'
+import {API_VERSION} from '../constants'
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+
+import {State} from '../types'
+
+export function AssigneesBadge(
+  states: State[],
+  documentId: string,
+  currentUser: CurrentUser | null
+): DocumentBadgeDescription | null {
+  const {data, loading, error} = useWorkflowMetadata(documentId, states)
+  const {metadata} = data
+  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/{index.tsx → StateBadge.tsx}

@@ -1,14 +1,10 @@
-import {DocumentBadgeDescription, DocumentBadgeProps} from 'sanity'
+import {DocumentBadgeDescription} from 'sanity'
 import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
 
 import {State} from '../types'
 
-export function StateBadge(
-  props: DocumentBadgeProps,
-  states: State[]
-): DocumentBadgeDescription | null {
-  const {id} = props
-  const {data, loading, error} = useWorkflowMetadata(id, states)
+export function StateBadge(states: State[], documentId: string): DocumentBadgeDescription | null {
+  const {data, loading, error} = useWorkflowMetadata(documentId, states)
   const {state} = data
 
   if (loading || error) {
@@ -25,7 +21,7 @@ export function StateBadge(
 
   return {
     label: state.title,
-    title: 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,53 @@
+import React from 'react'
+import {Button, useToast} from '@sanity/ui'
+import {CheckmarkIcon} from '@sanity/icons'
+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.useCallback(
+    (id: string) => {
+      client
+        .delete(`workflow-metadata.${id}`)
+        .then(() => {
+          toast.push({
+            status: 'success',
+            title: 'Workflow completed',
+            description: id,
+          })
+        })
+        .catch(() => {
+          toast.push({
+            status: 'error',
+            title: 'Could not complete Workflow',
+            description: id,
+          })
+        })
+    },
+    [client, toast]
+  )
+
+  return (
+    <Button
+      onClick={() => handleComplete(documentId)}
+      text="Complete"
+      icon={CheckmarkIcon}
+      tone="positive"
+      mode="ghost"
+      fontSize={1}
+      padding={2}
+      tabIndex={-1}
+      disabled={disabled}
+    />
+  )
+}

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/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>
+}