sanity-plugin-workflow 1.0.6 → 2.0.1

package/src/components/WorkflowTool.tsx

@@ -1,437 +0,0 @@
-import {
-  DragDropContext,
-  DraggableChildrenFn,
-  DragStart,
-  Droppable,
-  DropResult,
-} from '@hello-pangea/dnd'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Grid,
-  Spinner,
-  useTheme,
-  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 {API_VERSION} from '../constants'
-import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
-import {filterItemsAndSort} from '../helpers/filterItemsAndSort'
-import {useWorkflowDocuments} from '../hooks/useWorkflowDocuments'
-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<WorkflowConfig>
-}
-
-export default function WorkflowTool(props: WorkflowToolProps) {
-  const {schemaTypes = [], states = []} = props?.tool?.options ?? {}
-
-  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 {workflowData, operations} = useWorkflowDocuments(schemaTypes)
-  const [patchingIds, setPatchingIds] = React.useState<string[]>([])
-
-  // Data to display in cards
-  const {data, loading, error} = workflowData
-
-  // Operations to perform on cards
-  const {move} = operations
-
-  const [undroppableStates, setUndroppableStates] = React.useState<string[]>([])
-  const [draggingFrom, setDraggingFrom] = React.useState(``)
-
-  // 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)
-
-      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(
-    async (result: DropResult) => {
-      // Reset undroppable states
-      setUndroppableStates([])
-      setDraggingFrom(``)
-
-      const {draggableId, source, destination} = result
-
-      if (
-        // No destination?
-        !destination ||
-        // No change in position?
-        (destination.droppableId === source.droppableId &&
-          destination.index === source.index)
-      ) {
-        return
-      }
-
-      // 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 (!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 one rank above the minimum
-          newOrder = LexoRank.min().genNext().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))
-    },
-    [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) {
-    return (
-      <Container width={1} padding={5}>
-        <Feedback
-          tone="caution"
-          title="Plugin options error"
-          description="No States defined in plugin config"
-        />
-      </Container>
-    )
-  }
-
-  if (error && !data.length) {
-    return (
-      <Container width={1} padding={5}>
-        <Feedback
-          tone="critical"
-          title="Error querying for Workflow documents"
-        />
-      </Container>
-    )
-  }
-
-  return (
-    <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) => {
-            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>
-                      )}
-                    </Droppable>
-                  </Box>
-                </Flex>
-              </Card>
-            )
-          })}
-        </Grid>
-      </DragDropContext>
-    </Flex>
-  )
-}

package/src/constants/index.ts

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

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

package/src/helpers/filterItemsAndSort.ts

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

package/src/helpers/generateMultipleOrderRanks.ts

@@ -1,80 +0,0 @@
-import {LexoRank} from 'lexorank'
-
-function generateMiddleValue(ranks: (LexoRank | undefined)[]) {
-  // Has no undefined values
-  if (!ranks.some((rank) => !rank)) {
-    return ranks
-  }
-
-  // Find the first undefined value
-  const firstUndefined = ranks.findIndex((rank) => !rank)
-
-  // Find the first defined value after the undefined value
-  const firstDefinedAfter = ranks.findIndex(
-    (rank, index) => rank && index > firstUndefined
-  )
-  // Find the first defined value before the undefined value
-  const firstDefinedBefore = ranks.findLastIndex(
-    (rank, index) => rank && index < firstUndefined
-  )
-
-  if (firstDefinedAfter === -1 || firstDefinedBefore === -1) {
-    throw new Error(
-      `Unable to generate middle value between indexes ${firstDefinedBefore} and ${firstDefinedAfter}`
-    )
-  }
-
-  const beforeRank = ranks[firstDefinedBefore]
-  const afterRank = ranks[firstDefinedAfter]
-
-  if (
-    !beforeRank ||
-    typeof beforeRank === 'undefined' ||
-    !afterRank ||
-    typeof afterRank === 'undefined'
-  ) {
-    throw new Error(
-      `Unable to generate middle value between indexes ${firstDefinedBefore} and ${firstDefinedAfter}`
-    )
-  }
-
-  // Generate a new value between the two
-  const between = beforeRank.between(afterRank)
-
-  // Calculate the middle index between the defined values
-  const middle = Math.floor((firstDefinedAfter + firstDefinedBefore) / 2)
-
-  if (ranks[middle]) {
-    throw new Error(`Should not have overwritten value at index ${middle}`)
-  }
-
-  // Insert the new value into the array
-  ranks[middle] = between
-
-  // Return as a new array
-  return ranks
-}
-
-// Generates an array of LexoRanks between two values
-export function generateMultipleOrderRanks(
-  count: number,
-  start?: LexoRank,
-  end?: LexoRank
-): LexoRank[] {
-  // Begin array with correct size
-  let ranks = [...Array(count)]
-
-  // Use or create default values
-  const rankStart = start ?? LexoRank.min().genNext().genNext()
-  const rankEnd = end ?? LexoRank.max().genPrev().genPrev()
-
-  ranks[0] = rankStart
-  ranks[count - 1] = rankEnd
-
-  // Keep processing the array until every value between undefined values is defined
-  for (let i = 0; i < count; i++) {
-    ranks = generateMiddleValue(ranks)
-  }
-
-  return ranks.sort((a, b) => a.toString().localeCompare(b.toString()))
-}

package/src/helpers/initialRank.ts

@@ -1,13 +0,0 @@
-import {LexoRank} from 'lexorank'
-
-// Use in initial value field by passing in the rank value of the last document
-// If not value passed, generate a sensibly low rank
-export default function initialRank(lastRankValue = ``): string {
-  const lastRank =
-    lastRankValue && typeof lastRankValue === 'string'
-      ? LexoRank.parse(lastRankValue)
-      : LexoRank.min()
-  const nextRank = lastRank.genNext().genNext()
-
-  return (nextRank as any).value
-}