sanity-plugin-workflow 1.0.0-beta.1

package/src/components/DocumentCard/index.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable react/prop-types */
+import {
+  Box,
+  Button,
+  Card,
+  Flex,
+  Popover,
+  Stack,
+  useClickOutside,
+  useTheme,
+} from '@sanity/ui'
+import {AddIcon, DragHandleIcon} from '@sanity/icons'
+import React, {useState} from 'react'
+import {useSchema, SchemaType} from 'sanity'
+import {UserSelectMenu} from 'sanity-plugin-utils'
+import {Preview} from 'sanity'
+
+import EditButton from './EditButton'
+import {SanityDocumentWithMetadata, User} from '../../types'
+import AvatarGroup from './AvatarGroup'
+import UserAssignment from '../UserAssignment'
+
+type DocumentCardProps = {
+  userList: User[]
+  isDragging: boolean
+  item: SanityDocumentWithMetadata
+}
+
+export function DocumentCard(props: DocumentCardProps) {
+  const {userList, isDragging, item} = props
+  const {assignees = [], documentId} = item._metadata ?? {}
+  const schema = useSchema()
+
+  const isDarkMode = useTheme().sanity.color.dark
+  const defaultCardTone = isDarkMode ? 'transparent' : 'default'
+
+  // Open/close handler
+  // const [popoverRef, setPopoverRef] = useState(null)
+  // const [openId, setOpenId] = useState<string | undefined>(``)
+
+  // useClickOutside(() => setOpenId(``), [popoverRef])
+
+  // const handleKeyDown = React.useCallback((e) => {
+  //   if (e.key === 'Escape') {
+  //     setOpenId(``)
+  //   }
+  // }, [])
+
+  return (
+    <Box paddingY={2} paddingX={3}>
+      <Card
+        radius={2}
+        shadow={isDragging ? 3 : 1}
+        tone={isDragging ? 'positive' : defaultCardTone}
+      >
+        <Stack>
+          <Card
+            borderBottom
+            radius={2}
+            padding={3}
+            paddingLeft={2}
+            tone="inherit"
+            style={{pointerEvents: 'none'}}
+          >
+            <Flex align="center" justify="space-between" gap={1}>
+              <Preview
+                layout="default"
+                value={item}
+                schemaType={schema.get(item._type) as SchemaType}
+              />
+              <DragHandleIcon style={{flexShrink: 0}} />
+            </Flex>
+          </Card>
+
+          <Card padding={2} radius={2} tone="inherit">
+            <Flex align="center" justify="space-between" gap={1}>
+              {documentId && (
+                <UserAssignment
+                  userList={userList}
+                  assignees={assignees}
+                  documentId={documentId}
+                />
+              )}
+
+              <EditButton id={item._id} type={item._type} />
+            </Flex>
+          </Card>
+        </Stack>
+      </Card>
+    </Box>
+  )
+}

package/src/components/Mutate.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import {Card, useToast} from '@sanity/ui'
+import {useDocumentOperation} from 'sanity'
+
+import {State} from '../types'
+
+type MutateProps = {
+  _id: string
+  _type: string
+  state: State
+  documentId: string
+  onComplete: (id: string) => void
+}
+
+export default function Mutate(props: MutateProps) {
+  const {_id, _type, documentId, state, onComplete} = props
+  const ops = useDocumentOperation(documentId, _type)
+  const isDraft = _id.startsWith('drafts.')
+
+  const toast = useToast()
+
+  if (isDraft && state.operation === 'publish') {
+    if (!ops.publish.disabled) {
+      ops.publish.execute()
+      onComplete(_id)
+      toast.push({
+        title: 'Published Document',
+        description: documentId,
+        status: 'success',
+      })
+    }
+  } else if (!isDraft && state.operation === 'unpublish') {
+    if (!ops.unpublish.disabled) {
+      ops.unpublish.execute()
+      onComplete(_id)
+      toast.push({
+        title: 'Unpublished Document',
+        description: documentId,
+        status: 'success',
+      })
+    }
+  } else {
+    // Clean up if it's not going to un/publish
+    onComplete(_id)
+  }
+
+  // return null
+
+  return (
+    <Card padding={3} shadow={2} tone="primary">
+      Mutating: {_id} to {state.title}
+    </Card>
+  )
+}

package/src/components/StateTimeline.tsx

@@ -0,0 +1,98 @@
+import {Button, Card, Text, Inline, Stack, useToast} from '@sanity/ui'
+import React, {useEffect} from 'react'
+import {ObjectInputProps, useClient} from 'sanity'
+
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+import {State} from '../types'
+
+type StateTimelineProps = ObjectInputProps & {
+  states: State[]
+  children: React.ReactNode
+}
+
+export default function StateTimeline(props: StateTimelineProps) {
+  //   return (
+  //     <Stack space={3}>
+  //       <StateTimeline {...props} states={states}>
+  //         {props.renderDefault(props)}
+  //       </StateTimeline>
+  //     </Stack>
+  //   )
+  console.log(props)
+  const {value, states, children} = props
+
+  const documentId = String(value?._id)
+
+  const {data, loading, error} = useWorkflowMetadata(documentId, states)
+  const {state} = data
+  const [mutatingToState, setMutatingToState] = React.useState<string | null>(
+    null
+  )
+
+  const client = useClient()
+  const toast = useToast()
+
+  // Just because the document is patched ...
+  // doesn't mean the latest data has been returned from the listener
+  useEffect(() => {
+    if (data) {
+      setMutatingToState(null)
+    }
+  }, [data])
+
+  const changeState = React.useCallback(
+    (publishedId: string, newState: State) => {
+      setMutatingToState(newState.id)
+
+      client
+        .patch(`workflow-metadata.${publishedId}`)
+        .set({state: newState.id})
+        .commit()
+        .then(() => {
+          toast.push({
+            status: 'success',
+            title: `Document moved to ${newState.title}`,
+          })
+        })
+        .catch((err) => {
+          console.error(err)
+          toast.push({
+            status: 'error',
+            title: `Document moved failed`,
+          })
+        })
+    },
+    [client, toast]
+  )
+
+  return (
+    <Stack space={3}>
+      <Text weight="medium" size={1}>
+        Workflow State
+      </Text>
+      <Card padding={1} radius={3} border tone="primary">
+        <Inline space={1}>
+          {states.map((s) => (
+            <Button
+              disabled={loading || error || Boolean(mutatingToState)}
+              fontSize={1}
+              tone="primary"
+              mode={
+                (!mutatingToState && s.id === state?.id) ||
+                s.id === mutatingToState
+                  ? `default`
+                  : `ghost`
+              }
+              key={s.id}
+              text={s.title}
+              radius={2}
+              onClick={() => changeState(documentId, s)}
+            />
+          ))}
+        </Inline>
+      </Card>
+
+      {children}
+    </Stack>
+  )
+}

package/src/components/UserAssignment.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import {Button, Popover, useToast} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+import {UserSelectMenu} from 'sanity-plugin-utils'
+import {useClient} from 'sanity'
+
+import AvatarGroup from './DocumentCard/AvatarGroup'
+import {User} from '../types'
+
+type UserAssignmentProps = {
+  userList: User[]
+  assignees: string[]
+  documentId: string
+}
+
+export default function UserAssignment(props: UserAssignmentProps) {
+  const {assignees, userList, documentId} = props
+  const client = useClient()
+  const toast = useToast()
+  const [openId, setOpenId] = React.useState<string>(``)
+
+  const addAssignee = React.useCallback(
+    (userId: string) => {
+      if (!userId) {
+        return toast.push({
+          status: 'error',
+          title: 'No user selected',
+        })
+      }
+
+      client
+        .patch(`workflow-metadata.${documentId}`)
+        .setIfMissing({assignees: []})
+        .insert(`after`, `assignees[-1]`, [userId])
+        .commit()
+        .then(() => {
+          return toast.push({
+            title: `Assigned user to document`,
+            description: userId,
+            status: 'success',
+          })
+        })
+        .catch((err) => {
+          console.error(err)
+
+          return toast.push({
+            title: `Failed to add assignee`,
+            description: userId,
+            status: 'error',
+          })
+        })
+    },
+    [documentId, client, toast]
+  )
+
+  const removeAssignee = React.useCallback(
+    (id: string, userId: string) => {
+      client
+        .patch(`workflow-metadata.${id}`)
+        .unset([`assignees[@ == "${userId}"]`])
+        .commit()
+        .then((res) => res)
+        .catch((err) => {
+          console.error(err)
+
+          return toast.push({
+            title: `Failed to remove assignee`,
+            description: id,
+            status: 'error',
+          })
+        })
+    },
+    [client, toast]
+  )
+
+  const clearAssignees = React.useCallback(
+    (id: string) => {
+      client
+        .patch(`workflow-metadata.${id}`)
+        .unset([`assignees`])
+        .commit()
+        .then((res) => res)
+        .catch((err) => {
+          console.error(err)
+
+          return toast.push({
+            title: `Failed to clear assignees`,
+            description: id,
+            status: 'error',
+          })
+        })
+    },
+    [client, toast]
+  )
+
+  return (
+    <Popover
+      // @ts-ignore
+      // ref={setPopoverRef}
+      // onKeyDown={handleKeyDown}
+      content={
+        <UserSelectMenu
+          style={{maxHeight: 300}}
+          value={assignees || []}
+          userList={userList}
+          onAdd={addAssignee}
+          onClear={clearAssignees}
+          onRemove={removeAssignee}
+          open={openId === documentId}
+        />
+      }
+      portal
+      open={openId === documentId}
+    >
+      {!assignees || assignees.length === 0 ? (
+        <Button
+          onClick={() => setOpenId(documentId)}
+          fontSize={1}
+          padding={2}
+          tabIndex={-1}
+          icon={AddIcon}
+          text="Assign"
+          tone="positive"
+        />
+      ) : (
+        <Button
+          onClick={() => setOpenId(documentId)}
+          padding={0}
+          mode="bleed"
+          style={{width: `100%`}}
+        >
+          <AvatarGroup
+            users={userList.filter((u) => assignees.includes(u.id))}
+          />
+        </Button>
+      )}
+    </Popover>
+  )
+}

package/src/components/UserSelectInput.tsx

@@ -0,0 +1,43 @@
+import {Card} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import type {ArrayOfPrimitivesInputProps} from 'sanity'
+import {setIfMissing, insert, unset} from 'sanity'
+import {UserSelectMenu, useProjectUsers} from 'sanity-plugin-utils'
+
+export default function UserSelectInput(props: ArrayOfPrimitivesInputProps) {
+  const {value = [], onChange} = props
+  const userList = useProjectUsers()
+
+  const onAssigneeAdd = useCallback(
+    (userId: string) => {
+      onChange([setIfMissing([]), insert([userId], `after`, [-1])])
+    },
+    [onChange]
+  )
+
+  const onAssigneeRemove = useCallback(
+    (userId: string) => {
+      const userIdIndex = value.findIndex((v) => v === userId)
+
+      onChange(unset([userIdIndex]))
+    },
+    [onChange, value]
+  )
+
+  const onAssigneesClear = useCallback(() => {
+    onChange(unset())
+  }, [onChange])
+
+  return (
+    <Card border radius={3} padding={1}>
+      <UserSelectMenu
+        open
+        value={value as string[]}
+        userList={userList}
+        onAdd={onAssigneeAdd}
+        onClear={onAssigneesClear}
+        onRemove={onAssigneeRemove}
+      />
+    </Card>
+  )
+}

package/src/components/WorkflowTool.tsx

@@ -0,0 +1,228 @@
+import React from 'react'
+import {
+  Flex,
+  Card,
+  Box,
+  Grid,
+  Spinner,
+  Label,
+  useToast,
+  Container,
+  useTheme,
+  Button,
+} from '@sanity/ui'
+import {Feedback, useProjectUsers} from 'sanity-plugin-utils'
+import {Tool, useClient} from 'sanity'
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from 'react-beautiful-dnd'
+
+import {SanityDocumentWithMetadata, State} from '../types'
+import {DocumentCard} from './DocumentCard'
+import Mutate from './Mutate'
+import {useWorkflowDocuments} from '../hooks/useWorkflowDocuments'
+
+function filterItemsByState(
+  items: SanityDocumentWithMetadata[],
+  stateId: string
+) {
+  return items.filter((item) => item?._metadata?.state === stateId)
+}
+
+type WorkflowToolOptions = {
+  schemaTypes: string[]
+  states: State[]
+}
+
+type WorkflowToolProps = {
+  tool: Tool<WorkflowToolOptions>
+}
+
+type MutateProps = {
+  _id: string
+  _type: string
+  state: State
+  documentId: string
+}
+
+export default function WorkflowTool(props: WorkflowToolProps) {
+  const {schemaTypes = [], states = []} = props?.tool?.options ?? {}
+
+  const [mutatingDocs, setMutatingDocs] = React.useState<MutateProps[]>([])
+  const mutationFinished = React.useCallback((documentId: string) => {
+    setMutatingDocs((docs) => docs.filter((doc) => doc._id !== documentId))
+  }, [])
+
+  const client = useClient()
+  const toast = useToast()
+
+  const isDarkMode = useTheme().sanity.color.dark
+  const defaultCardTone = isDarkMode ? 'default' : 'transparent'
+
+  const userList = useProjectUsers() || []
+  const {workflowData, operations} = useWorkflowDocuments(schemaTypes)
+
+  // Data to display in cards
+  const {data, loading, error} = workflowData
+
+  // Operations to perform on cards
+  const {move} = operations
+
+  const documentsWithoutMetadataIds = data
+    .filter((doc) => !doc._metadata)
+    .map((d) => d._id.replace(`drafts.`, ``))
+
+  const importDocuments = React.useCallback(async (ids: string[]) => {
+    toast.push({
+      title: 'Importing documents',
+      status: 'info',
+    })
+
+    const tx = ids.reduce((item, documentId) => {
+      return item.createOrReplace({
+        _id: `workflow-metadata.${documentId}`,
+        _type: 'workflow.metadata',
+        state: states[0].id,
+        documentId,
+      })
+    }, client.transaction())
+
+    await tx.commit()
+
+    toast.push({
+      title: 'Imported documents',
+      status: 'success',
+    })
+  }, [])
+
+  const handleDragEnd = React.useCallback(
+    (result: DropResult) => {
+      const {draggableId, source, destination} = result
+      console.log(
+        `sending ${draggableId} from ${source.droppableId} to ${destination?.droppableId}`
+      )
+
+      if (!destination || destination.droppableId === source.droppableId) {
+        return
+      }
+
+      // The list of mutating docs is how we un/publish documents
+      const mutatingDoc = move(draggableId, destination, states)
+
+      if (mutatingDoc) {
+        // @ts-ignore
+        // @todo not sure if these types should be updated. will documentId every be undefined here?
+        setMutatingDocs((current) => [...current, mutatingDoc])
+      }
+    },
+    [move, states]
+  )
+
+  if (!states?.length) {
+    return (
+      <Container width={1} padding={5}>
+        <Feedback
+          tone="caution"
+          title="Plugin options error"
+          description="No States defined in plugin config"
+        />
+      </Container>
+    )
+  }
+
+  if (error) {
+    return (
+      <Container width={1} padding={5}>
+        <Feedback tone="critical" title="Error with query" />
+      </Container>
+    )
+  }
+
+  return (
+    <>
+      {mutatingDocs.length ? (
+        <div style={{position: `absolute`, bottom: 0, background: 'red'}}>
+          {mutatingDocs.map((mutate) => (
+            <Mutate
+              key={mutate._id}
+              {...mutate}
+              onComplete={mutationFinished}
+            />
+          ))}
+        </div>
+      ) : null}
+      {documentsWithoutMetadataIds.length > 0 && (
+        <Box padding={5}>
+          <Card border padding={3} tone="caution">
+            <Flex align="center" justify="center">
+              <Button
+                onClick={() => importDocuments(documentsWithoutMetadataIds)}
+              >
+                Import {documentsWithoutMetadataIds.length} Missing{' '}
+                {documentsWithoutMetadataIds.length === 1
+                  ? `Document`
+                  : `Documents`}{' '}
+                into Workflow
+              </Button>
+            </Flex>
+          </Card>
+        </Box>
+      )}
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Grid columns={states.length} height="fill">
+          {states.map((state: State, stateIndex: number) => (
+            <Card key={state.id} borderLeft={stateIndex > 0}>
+              <Card paddingY={4} padding={3} style={{pointerEvents: `none`}}>
+                <Label>{state.title}</Label>
+              </Card>
+              <Droppable droppableId={state.id}>
+                {(provided, snapshot) => (
+                  <Card
+                    ref={provided.innerRef}
+                    tone={snapshot.isDraggingOver ? `primary` : defaultCardTone}
+                    height="fill"
+                  >
+                    {loading ? (
+                      <Flex padding={5} align="center" justify="center">
+                        <Spinner muted />
+                      </Flex>
+                    ) : null}
+
+                    {data.length > 0 &&
+                      filterItemsByState(data, state.id).map(
+                        (item, itemIndex) => (
+                          // The metadata's documentId is always the published one
+                          <Draggable
+                            key={item?._metadata?.documentId as string}
+                            draggableId={item?._metadata?.documentId as string}
+                            index={itemIndex}
+                          >
+                            {(draggableProvided, draggableSnapshot) => (
+                              <div
+                                ref={draggableProvided.innerRef}
+                                {...draggableProvided.draggableProps}
+                                {...draggableProvided.dragHandleProps}
+                              >
+                                <DocumentCard
+                                  isDragging={draggableSnapshot.isDragging}
+                                  item={item}
+                                  userList={userList}
+                                />
+                              </div>
+                            )}
+                          </Draggable>
+                        )
+                      )}
+                  </Card>
+                )}
+              </Droppable>
+            </Card>
+          ))}
+        </Grid>
+      </DragDropContext>
+    </>
+  )
+}