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

package/src/components/WorkflowTool.tsx

@@ -1,69 +1,56 @@
-import React from 'react'
 import {
-  Flex,
-  Card,
+  DragDropContext,
+  DraggableChildrenFn,
+  DragStart,
+  Droppable,
+  DropResult,
+} from '@hello-pangea/dnd'
+import {
   Box,
+  Card,
+  Container,
+  Flex,
   Grid,
   Spinner,
-  Label,
-  useToast,
-  Container,
   useTheme,
-  Button,
+  useToast,
 } from '@sanity/ui'
+import {LexoRank} from 'lexorank'
+import React from 'react'
+import {Tool, useCurrentUser} from 'sanity'
 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 {API_VERSION} from '../constants'
+import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
+import {filterItemsAndSort} from '../helpers/filterItemsAndSort'
 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[]
-}
+import {State, WorkflowConfig} from '../types'
+import {DocumentCard} from './DocumentCard'
+import DocumentList from './DocumentList'
+import Filters from './Filters'
+import StateTitle from './StateTitle'
+import Verify from './Verify'
 
 type WorkflowToolProps = {
-  tool: Tool<WorkflowToolOptions>
-}
-
-type MutateProps = {
-  _id: string
-  _type: string
-  state: State
-  documentId: string
+  tool: Tool<WorkflowConfig>
 }
 
 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 toast = useToast()
+
+  const userList = useProjectUsers({apiVersion: API_VERSION})
+
+  const user = useCurrentUser()
+  const userRoleNames = user?.roles?.length
+    ? user?.roles.map((r) => r.name)
+    : []
 
-  const userList = useProjectUsers() || []
   const {workflowData, operations} = useWorkflowDocuments(schemaTypes)
+  const [patchingIds, setPatchingIds] = React.useState<string[]>([])
 
   // Data to display in cards
   const {data, loading, error} = workflowData
@@ -71,54 +58,263 @@ export default function WorkflowTool(props: WorkflowToolProps) {
   // 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())
+  const [undroppableStates, setUndroppableStates] = React.useState<string[]>([])
+  const [draggingFrom, setDraggingFrom] = React.useState(``)
 
-    await tx.commit()
+  // When drag starts, check for any States we should not allow dropping on
+  // Because of either:
+  // 1. The "destination" State requires user assignment and the user is not assigned to the dragged document
+  // 2. The "source" State State has a list of transitions and the "destination" State is not in that list
+  const handleDragStart = React.useCallback(
+    (start: DragStart) => {
+      const {draggableId, source} = start
+      const {droppableId: currentStateId} = source
+      setDraggingFrom(currentStateId)
 
-    toast.push({
-      title: 'Imported documents',
-      status: 'success',
-    })
-  }, [])
+      const document = data.find(
+        (item) => item._metadata?.documentId === draggableId
+      )
+      const state = states.find((s) => s.id === currentStateId)
+
+      // This shouldn't happen but TypeScript
+      if (!document || !state) return
+
+      const undroppableStateIds = []
+      const statesThatRequireAssignmentIds = states
+        .filter((s) => s.requireAssignment)
+        .map((s) => s.id)
+
+      if (statesThatRequireAssignmentIds.length) {
+        const documentAssignees = document._metadata?.assignees ?? []
+        const userIsAssignedToDocument = user?.id
+          ? documentAssignees.includes(user.id)
+          : false
+
+        if (!userIsAssignedToDocument) {
+          undroppableStateIds.push(...statesThatRequireAssignmentIds)
+        }
+      }
+
+      const statesThatCannotBeTransitionedToIds =
+        state.transitions && state.transitions.length
+          ? states
+              .filter((s) => !state.transitions?.includes(s.id))
+              .map((s) => s.id)
+          : []
+
+      if (statesThatCannotBeTransitionedToIds.length) {
+        undroppableStateIds.push(...statesThatCannotBeTransitionedToIds)
+      }
+
+      // Remove currentStateId from undroppableStates
+      const undroppableExceptSelf = undroppableStateIds.filter(
+        (id) => id !== currentStateId
+      )
+
+      if (undroppableExceptSelf.length) {
+        setUndroppableStates(undroppableExceptSelf)
+      }
+    },
+    [data, states, user]
+  )
 
   const handleDragEnd = React.useCallback(
-    (result: DropResult) => {
+    async (result: DropResult) => {
+      // Reset undroppable states
+      setUndroppableStates([])
+      setDraggingFrom(``)
+
       const {draggableId, source, destination} = result
-      console.log(
-        `sending ${draggableId} from ${source.droppableId} to ${destination?.droppableId}`
-      )
 
-      if (!destination || destination.droppableId === source.droppableId) {
+      if (
+        // No destination?
+        !destination ||
+        // No change in position?
+        (destination.droppableId === source.droppableId &&
+          destination.index === source.index)
+      ) {
         return
       }
 
-      // The list of mutating docs is how we un/publish documents
-      const mutatingDoc = move(draggableId, destination, states)
+      // Find all items in current state
+      const destinationStateItems = [
+        ...filterItemsAndSort(data, destination.droppableId, [], null),
+      ]
+      const destinationStateIndex = states.findIndex(
+        (s) => s.id === destination.droppableId
+      )
+      const globalStateMinimumRank = data[0]._metadata.orderRank
+      const globalStateMaximumRank = data[data.length - 1]._metadata.orderRank
+
+      let newOrder
 
-      if (mutatingDoc) {
-        // @ts-ignore
-        // @todo not sure if these types should be updated. will documentId every be undefined here?
-        setMutatingDocs((current) => [...current, mutatingDoc])
+      if (!destinationStateItems.length) {
+        // Only item in state
+        // New minimum rank
+        if (destinationStateIndex === 0) {
+          // Only the first state should generate an absolute minimum rank
+          newOrder = LexoRank.min().toString()
+        } else {
+          // Otherwise create the next rank between min and the globally minimum rank
+          newOrder = LexoRank.parse(globalStateMinimumRank)
+            .between(LexoRank.min())
+            .toString()
+        }
+      } else if (destination.index === 0) {
+        // Now first item in order
+        const firstItemOrderRank = [...destinationStateItems].shift()?._metadata
+          ?.orderRank
+
+        if (firstItemOrderRank && typeof firstItemOrderRank === 'string') {
+          newOrder = LexoRank.parse(firstItemOrderRank).genPrev().toString()
+        } else if (destinationStateIndex === 0) {
+          // Only the first state should generate an absolute minimum rank
+          newOrder = LexoRank.min().toString()
+        } else {
+          // Otherwise create the next rank between min and the globally minimum rank
+          newOrder = LexoRank.parse(globalStateMinimumRank)
+            .between(LexoRank.min())
+            .toString()
+        }
+      } else if (destination.index + 1 === destinationStateItems.length) {
+        // Now last item in order
+        const lastItemOrderRank = [...destinationStateItems].pop()?._metadata
+          ?.orderRank
+
+        if (lastItemOrderRank && typeof lastItemOrderRank === 'string') {
+          newOrder = LexoRank.parse(lastItemOrderRank).genNext().toString()
+        } else if (destinationStateIndex === states.length - 1) {
+          // Only the last state should generate an absolute maximum rank
+          newOrder = LexoRank.max().toString()
+        } else {
+          // Otherwise create the next rank between max and the globally maximum rank
+          newOrder = LexoRank.parse(globalStateMaximumRank)
+            .between(LexoRank.min())
+            .toString()
+        }
+      } else {
+        // Must be between two items
+        const itemBefore = destinationStateItems[destination.index - 1]
+        const itemBeforeRank = itemBefore?._metadata?.orderRank
+        let itemBeforeRankParsed
+        if (itemBeforeRank) {
+          itemBeforeRankParsed = LexoRank.parse(itemBeforeRank)
+        } else if (destinationStateIndex === 0) {
+          itemBeforeRankParsed = LexoRank.min()
+        } else {
+          itemBeforeRankParsed = LexoRank.parse(globalStateMinimumRank)
+        }
+
+        const itemAfter = destinationStateItems[destination.index]
+        const itemAfterRank = itemAfter?._metadata?.orderRank
+        let itemAfterRankParsed
+        if (itemAfterRank) {
+          itemAfterRankParsed = LexoRank.parse(itemAfterRank)
+        } else if (destinationStateIndex === states.length - 1) {
+          itemAfterRankParsed = LexoRank.max()
+        } else {
+          itemAfterRankParsed = LexoRank.parse(globalStateMaximumRank)
+        }
+
+        newOrder = itemBeforeRankParsed.between(itemAfterRankParsed).toString()
       }
+
+      setPatchingIds([...patchingIds, draggableId])
+      toast.push({
+        status: 'info',
+        title: 'Updating document state...',
+      })
+      await move(draggableId, destination, states, newOrder)
+      setPatchingIds((ids: string[]) => ids.filter((id) => id !== draggableId))
     },
-    [move, states]
+    [data, patchingIds, toast, move, states]
+  )
+
+  // Used for the user filter UI
+  const uniqueAssignedUsers = React.useMemo(() => {
+    const uniqueUserIds = data.reduce((acc, item) => {
+      const {assignees = []} = item._metadata ?? {}
+      const newAssignees = assignees?.length
+        ? assignees.filter((a) => !acc.includes(a))
+        : []
+      return newAssignees.length ? [...acc, ...newAssignees] : acc
+    }, [] as string[])
+
+    return userList.filter((u) => uniqueUserIds.includes(u.id))
+  }, [data, userList])
+
+  // Selected user IDs filter the visible workflow documents
+  const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>(
+    uniqueAssignedUsers.map((u) => u.id)
+  )
+  const toggleSelectedUser = React.useCallback((userId: string) => {
+    setSelectedUserIds((prev) =>
+      prev.includes(userId)
+        ? prev.filter((u) => u !== userId)
+        : [...prev, userId]
+    )
+  }, [])
+  const resetSelectedUsers = React.useCallback(() => {
+    setSelectedUserIds([])
+  }, [])
+
+  // Selected schema types filter the visible workflow documents
+  const [selectedSchemaTypes, setSelectedSchemaTypes] =
+    React.useState<string[]>(schemaTypes)
+  const toggleSelectedSchemaType = React.useCallback((schemaType: string) => {
+    setSelectedSchemaTypes((prev) =>
+      prev.includes(schemaType)
+        ? prev.filter((u) => u !== schemaType)
+        : [...prev, schemaType]
+    )
+  }, [])
+
+  // Document IDs that have validation errors
+  const [invalidDocumentIds, setInvalidDocumentIds] = React.useState<string[]>(
+    []
+  )
+  const toggleInvalidDocumentId = React.useCallback(
+    (docId: string, action: 'ADD' | 'REMOVE') => {
+      setInvalidDocumentIds((prev) =>
+        action === 'ADD' ? [...prev, docId] : prev.filter((id) => id !== docId)
+      )
+    },
+    []
+  )
+
+  const Clone: DraggableChildrenFn = React.useCallback(
+    (provided, snapshot, rubric) => {
+      const item = data.find(
+        (doc) => doc?._metadata?.documentId === rubric.draggableId
+      )
+
+      return (
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+        >
+          {item ? (
+            <DocumentCard
+              // Assumed false, if it's dragging it's not disabled
+              isDragDisabled={false}
+              // Assumed false, if it's dragging it's not patching
+              isPatching={false}
+              // Assumed true, if you can drag it you can drop it
+              userRoleCanDrop
+              isDragging={snapshot.isDragging}
+              item={item}
+              states={states}
+              toggleInvalidDocumentId={toggleInvalidDocumentId}
+              userList={userList}
+            />
+          ) : (
+            <Feedback title="Item not found" tone="caution" />
+          )}
+        </div>
+      )
+    },
+    [data, states, toggleInvalidDocumentId, userList]
   )
 
   if (!states?.length) {
@@ -133,96 +329,111 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     )
   }
 
-  if (error) {
+  if (error && !data.length) {
     return (
       <Container width={1} padding={5}>
-        <Feedback tone="critical" title="Error with query" />
+        <Feedback
+          tone="critical"
+          title="Error querying for Workflow documents"
+        />
       </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}>
+    <Flex direction="column" height="fill" overflow="hidden">
+      <Verify data={data} userList={userList} states={states} />
+
+      <Filters
+        uniqueAssignedUsers={uniqueAssignedUsers}
+        selectedUserIds={selectedUserIds}
+        toggleSelectedUser={toggleSelectedUser}
+        resetSelectedUsers={resetSelectedUsers}
+        schemaTypes={schemaTypes}
+        selectedSchemaTypes={selectedSchemaTypes}
+        toggleSelectedSchemaType={toggleSelectedSchemaType}
+      />
+      <DragDropContext onDragStart={handleDragStart} 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>
-                        )
+          {states.map((state: State, stateIndex: number) => {
+            const userRoleCanDrop = state?.roles?.length
+              ? arraysContainMatchingString(state.roles, userRoleNames)
+              : true
+            const isDropDisabled =
+              !userRoleCanDrop || undroppableStates.includes(state.id)
+
+            return (
+              <Card
+                key={state.id}
+                borderLeft={stateIndex > 0}
+                tone={defaultCardTone}
+              >
+                <Flex direction="column" height="fill">
+                  <StateTitle
+                    state={state}
+                    requireAssignment={state.requireAssignment ?? false}
+                    userRoleCanDrop={userRoleCanDrop}
+                    isDropDisabled={isDropDisabled}
+                    draggingFrom={draggingFrom}
+                    documentCount={
+                      filterItemsAndSort(
+                        data,
+                        state.id,
+                        selectedUserIds,
+                        selectedSchemaTypes
+                      ).length
+                    }
+                  />
+                  <Box flex={1}>
+                    <Droppable
+                      droppableId={state.id}
+                      isDropDisabled={isDropDisabled}
+                      // props required for virtualization
+                      mode="virtual"
+                      renderClone={Clone}
+                    >
+                      {(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}
+
+                          <DocumentList
+                            data={data}
+                            invalidDocumentIds={invalidDocumentIds}
+                            patchingIds={patchingIds}
+                            selectedSchemaTypes={selectedSchemaTypes}
+                            selectedUserIds={selectedUserIds}
+                            state={state}
+                            states={states}
+                            toggleInvalidDocumentId={toggleInvalidDocumentId}
+                            user={user}
+                            userList={userList}
+                            userRoleCanDrop={userRoleCanDrop}
+                          />
+
+                          {/* Not required for virtualized lists */}
+                          {/* {provided.placeholder} */}
+                        </Card>
                       )}
-                  </Card>
-                )}
-              </Droppable>
-            </Card>
-          ))}
+                    </Droppable>
+                  </Box>
+                </Flex>
+              </Card>
+            )
+          })}
         </Grid>
       </DragDropContext>
-    </>
+    </Flex>
   )
 }

package/src/constants/index.ts

@@ -0,0 +1,31 @@
+import {defineStates, WorkflowConfig} from '../types'
+
+export const API_VERSION = `2023-01-01`
+
+export const DEFAULT_CONFIG: Required<WorkflowConfig> = {
+  schemaTypes: [],
+  states: defineStates([
+    {
+      id: 'inReview',
+      title: 'In review',
+      color: 'primary',
+      roles: ['editor', 'administrator'],
+      transitions: ['changesRequested', 'approved'],
+    },
+    {
+      id: 'changesRequested',
+      title: 'Changes requested',
+      color: 'warning',
+      roles: ['editor', 'administrator'],
+      transitions: ['approved'],
+    },
+    {
+      id: 'approved',
+      title: 'Approved',
+      color: 'success',
+      roles: ['administrator'],
+      transitions: ['changesRequested'],
+      requireAssignment: true,
+    },
+  ]),
+}

package/src/helpers/arraysContainMatchingString.ts

@@ -0,0 +1,6 @@
+export function arraysContainMatchingString(
+  one: string[],
+  two: string[]
+): boolean {
+  return one.some((item) => two.includes(item))
+}

package/src/helpers/filterItemsAndSort.ts

@@ -0,0 +1,41 @@
+import {SanityDocumentWithMetadata} from '../types'
+
+export function filterItemsAndSort(
+  items: SanityDocumentWithMetadata[],
+  stateId: string,
+  selectedUsers: string[] = [],
+  selectedSchemaTypes: null | string[] = []
+): SanityDocumentWithMetadata[] {
+  return (
+    items
+      // Only items that have existing documents
+      .filter((item) => item?._id)
+      // Only items of this state
+      .filter((item) => item?._metadata?.state === stateId)
+      // Only items with selected users, if the document has any assigned users
+      .filter((item) =>
+        selectedUsers.length && item._metadata?.assignees?.length
+          ? item._metadata?.assignees.some((assignee) =>
+              selectedUsers.includes(assignee)
+            )
+          : !selectedUsers.length
+      )
+      // Only items of selected schema types, if any are selected
+      .filter((item) => {
+        if (!selectedSchemaTypes) {
+          return true
+        }
+
+        return selectedSchemaTypes.length
+          ? selectedSchemaTypes.includes(item._type)
+          : false
+      })
+      // Sort by metadata orderRank, a string field
+      .sort((a, b) => {
+        const aOrderRank = a._metadata?.orderRank || '0'
+        const bOrderRank = b._metadata?.orderRank || '0'
+
+        return aOrderRank.localeCompare(bOrderRank)
+      })
+  )
+}