sanity-plugin-workflow 1.0.6 → 2.0.1

package/src/actions/CompleteWorkflow.tsx

@@ -1,64 +0,0 @@
-import {CheckmarkIcon} from '@sanity/icons'
-import {ToastContextValue, useToast} from '@sanity/ui'
-import {useCallback} from 'react'
-import {DocumentActionProps, SanityClient, useClient} from 'sanity'
-
-import {useWorkflowContext} from '../components/WorkflowContext'
-import {API_VERSION} from '../constants'
-
-export const handleDeleteMetadata = async (
-  client: SanityClient,
-  toast: ToastContextValue,
-  id: string
-) => {
-  try {
-    await client.delete(`workflow-metadata.${id}`)
-    toast.push({
-      status: 'success',
-      title: 'Workflow completed',
-    })
-  } catch (error) {
-    console.error(error)
-    toast.push({
-      status: 'error',
-      title: 'Could not complete Workflow',
-    })
-  }
-}
-
-export function CompleteWorkflow(props: DocumentActionProps) {
-  const {id} = props
-  const {metadata, loading, error, states} = useWorkflowContext(id)
-  const client = useClient({apiVersion: API_VERSION})
-  const toast = useToast()
-
-  if (error) {
-    console.error(error)
-  }
-
-  const handle = useCallback(async () => {
-    await handleDeleteMetadata(client, toast, id)
-  }, [client, toast, id])
-
-  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: async () => {
-      await handle()
-      props.onComplete()
-    },
-    color: 'positive',
-  }
-}

package/src/actions/UpdateWorkflow.tsx

@@ -1,126 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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,43 +0,0 @@
-import React from 'react'
-import {Box, Flex, Text} from '@sanity/ui'
-import {useCurrentUser, UserAvatar} from 'sanity'
-
-import {User} from '../../types'
-
-type AvatarGroupProps = {
-  users: User[]
-  max?: number
-}
-
-export default function AvatarGroup(props: AvatarGroupProps) {
-  const currentUser = useCurrentUser()
-  const {users, max = 4} = props
-
-  const len = users?.length
-  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" gap={1}>
-      {me ? <UserAvatar user={me} /> : null}
-      {visibleUsers.map((user) => (
-        <Box key={user.id} style={{marginRight: -8}}>
-          <UserAvatar user={user} />
-        </Box>
-      ))}
-      {len > max && (
-        <Box paddingLeft={2}>
-          <Text size={1}>+{len - max}</Text>
-        </Box>
-      )}
-    </Flex>
-  )
-}

package/src/components/DocumentCard/CompleteButton.tsx

@@ -1,56 +0,0 @@
-import {CheckmarkIcon} from '@sanity/icons'
-import {Box, Button, Text, Tooltip, useToast} from '@sanity/ui'
-import React from 'react'
-import {useClient} from 'sanity'
-
-import {handleDeleteMetadata} from '../../actions/CompleteWorkflow'
-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
-        }
-
-        handleDeleteMetadata(client, toast, id)
-      },
-      [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,28 +0,0 @@
-import {Button} from '@sanity/ui'
-import {EditIcon} from '@sanity/icons'
-import {useRouter} from 'sanity/router'
-
-type EditButtonProps = {
-  id: string
-  type: string
-  disabled?: boolean
-}
-
-export default function EditButton(props: EditButtonProps) {
-  const {id, type, disabled = false} = props
-  const {navigateIntent} = useRouter()
-
-  return (
-    <Button
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick={() => navigateIntent('edit', {id, type})}
-      mode="ghost"
-      fontSize={1}
-      padding={2}
-      tabIndex={-1}
-      icon={EditIcon}
-      text="Edit"
-      disabled={disabled}
-    />
-  )
-}

package/src/components/DocumentCard/Field.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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>
-}