sanity-plugin-workflow 1.0.0-beta.3 → 1.0.0-beta.5

package/src/components/WorkflowTool.tsx

@@ -1,26 +1,25 @@
-import React from 'react'
-import {Flex, Card, Grid, Spinner, Container, useTheme} from '@sanity/ui'
-import {Feedback, useProjectUsers} from 'sanity-plugin-utils'
-import {Tool, useCurrentUser} from 'sanity'
 import {
   DragDropContext,
+  DragStart,
   Droppable,
-  Draggable,
   DropResult,
-  DragStart,
-} from 'react-beautiful-dnd'
+} from '@hello-pangea/dnd'
+import {Box, Card, Container, Flex, Grid, Spinner, useTheme} 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 {useWorkflowDocuments} from '../hooks/useWorkflowDocuments'
-import {API_VERSION} from '../constants'
-
-import Validators from './Validators'
+import DocumentList from './DocumentList'
 import Filters from './Filters'
-import {filterItemsAndSort} from '../helpers/filterItemsAndSort'
-import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
 import StateTitle from './StateTitle'
-import {LexoRank} from 'lexorank'
+import Verify from './Verify'
 
 type WorkflowToolProps = {
   tool: Tool<WorkflowConfig>
@@ -154,14 +153,14 @@ export default function WorkflowTool(props: WorkflowToolProps) {
             : LexoRank.min().toString()
       } else {
         // Must be between two items
-        const itemBefore = destinationStateItems[destination.index]
+        const itemBefore = destinationStateItems[destination.index - 1]
         const itemBeforeRank = itemBefore?._metadata?.orderRank
-        const itemBeforeRankParsed = itemBefore._metadata.orderRank
+        const itemBeforeRankParsed = itemBeforeRank
           ? LexoRank.parse(itemBeforeRank)
           : LexoRank.min()
-        const itemAfter = destinationStateItems[destination.index + 1]
+        const itemAfter = destinationStateItems[destination.index]
         const itemAfterRank = itemAfter?._metadata?.orderRank
-        const itemAfterRankParsed = itemAfter._metadata.orderRank
+        const itemAfterRankParsed = itemAfterRank
           ? LexoRank.parse(itemAfterRank)
           : LexoRank.max()
 
@@ -173,6 +172,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     [data, move, states]
   )
 
+  // Used for the user filter UI
   const uniqueAssignedUsers = React.useMemo(() => {
     const uniqueUserIds = data.reduce((acc, item) => {
       const {assignees = []} = item._metadata ?? {}
@@ -185,6 +185,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     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)
   )
@@ -199,6 +200,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     setSelectedUserIds([])
   }, [])
 
+  // Selected schema types filter the visible workflow documents
   const [selectedSchemaTypes, setSelectedSchemaTypes] =
     React.useState<string[]>(schemaTypes)
   const toggleSelectedSchemaType = React.useCallback((schemaType: string) => {
@@ -209,6 +211,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
     )
   }, [])
 
+  // Document IDs that have validation errors
   const [invalidDocumentIds, setInvalidDocumentIds] = React.useState<string[]>(
     []
   )
@@ -245,8 +248,9 @@ export default function WorkflowTool(props: WorkflowToolProps) {
   }
 
   return (
-    <Card height="fill" overflow="hidden">
-      <Validators data={data} userList={userList} states={states} />
+    <Flex direction="column" height="fill" overflow="hidden">
+      <Verify data={data} userList={userList} states={states} />
+
       <Filters
         uniqueAssignedUsers={uniqueAssignedUsers}
         selectedUserIds={selectedUserIds}
@@ -270,100 +274,96 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                 key={state.id}
                 borderLeft={stateIndex > 0}
                 tone={defaultCardTone}
-                height="fill"
-                overflow="auto"
               >
-                <StateTitle
-                  state={state}
-                  requireAssignment={state.requireAssignment ?? false}
-                  userRoleCanDrop={userRoleCanDrop}
-                  // operation={state.operation}
-                  isDropDisabled={isDropDisabled}
-                  draggingFrom={draggingFrom}
-                />
-                <Droppable
-                  droppableId={state.id}
-                  isDropDisabled={isDropDisabled}
-                >
-                  {(provided, snapshot) => (
-                    <Card
-                      ref={provided.innerRef}
-                      tone={
-                        snapshot.isDraggingOver ? `primary` : defaultCardTone
-                      }
-                      height="fill"
-                      paddingTop={1}
+                <Flex direction="column" height="fill">
+                  <StateTitle
+                    state={state}
+                    requireAssignment={state.requireAssignment ?? false}
+                    userRoleCanDrop={userRoleCanDrop}
+                    // operation={state.operation}
+                    isDropDisabled={isDropDisabled}
+                    draggingFrom={draggingFrom}
+                  />
+                  <Box flex={1}>
+                    <Droppable
+                      droppableId={state.id}
+                      isDropDisabled={isDropDisabled}
+                      // props required for virtualization
+                      mode="virtual"
+                      // TODO: Render this as a memo/callback
+                      renderClone={(provided, snapshot, rubric) => {
+                        const item = data.find(
+                          (doc) =>
+                            doc?._metadata?.documentId === rubric.draggableId
+                        )
+
+                        return (
+                          <div
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            ref={provided.innerRef}
+                          >
+                            {item ? (
+                              <DocumentCard
+                                isDragDisabled={false}
+                                userRoleCanDrop={userRoleCanDrop}
+                                isDragging={snapshot.isDragging}
+                                item={item}
+                                states={states}
+                                toggleInvalidDocumentId={
+                                  toggleInvalidDocumentId
+                                }
+                                userList={userList}
+                              />
+                            ) : (
+                              <Feedback title="Item not found" tone="caution" />
+                            )}
+                          </div>
+                        )
+                      }}
                     >
-                      {loading ? (
-                        <Flex padding={5} align="center" justify="center">
-                          <Spinner muted />
-                        </Flex>
-                      ) : null}
-
-                      {data.length > 0 &&
-                        filterItemsAndSort(
-                          data,
-                          state.id,
-                          selectedUserIds,
-                          selectedSchemaTypes
-                        ).map((item, itemIndex) => {
-                          const isInvalid = invalidDocumentIds.includes(
-                            String(item?._metadata?.documentId)
-                          )
-                          const meInAssignees = user?.id
-                            ? item?._metadata?.assignees?.includes(user.id)
-                            : false
-                          const isDragDisabled =
-                            !userRoleCanDrop ||
-                            isInvalid ||
-                            !(state.requireAssignment
-                              ? state.requireAssignment && meInAssignees
-                              : true)
-                          const {documentId} = item._metadata ?? {}
-
-                          if (!documentId) {
-                            return null
+                      {(provided, snapshot) => (
+                        <Card
+                          ref={provided.innerRef}
+                          tone={
+                            snapshot.isDraggingOver
+                              ? `primary`
+                              : defaultCardTone
                           }
-
-                          return (
-                            <Draggable
-                              // The metadata's documentId is always the published one to avoid rerendering
-                              key={documentId}
-                              draggableId={documentId}
-                              index={itemIndex}
-                              isDragDisabled={isDragDisabled}
-                            >
-                              {(draggableProvided, draggableSnapshot) => (
-                                <div
-                                  ref={draggableProvided.innerRef}
-                                  {...draggableProvided.draggableProps}
-                                  {...draggableProvided.dragHandleProps}
-                                >
-                                  <DocumentCard
-                                    userRoleCanDrop={userRoleCanDrop}
-                                    isDragDisabled={isDragDisabled}
-                                    isDragging={draggableSnapshot.isDragging}
-                                    item={item}
-                                    toggleInvalidDocumentId={
-                                      toggleInvalidDocumentId
-                                    }
-                                    userList={userList}
-                                    states={states}
-                                  />
-                                </div>
-                              )}
-                            </Draggable>
-                          )
-                        })}
-                      {provided.placeholder}
-                    </Card>
-                  )}
-                </Droppable>
+                          height="fill"
+                          paddingTop={1}
+                        >
+                          {loading ? (
+                            <Flex padding={5} align="center" justify="center">
+                              <Spinner muted />
+                            </Flex>
+                          ) : null}
+
+                          <DocumentList
+                            data={data}
+                            invalidDocumentIds={invalidDocumentIds}
+                            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>
-    </Card>
+    </Flex>
   )
 }

package/src/constants/index.ts

@@ -1,4 +1,4 @@
-import {WorkflowConfig, defineStates} from '../types'
+import {defineStates, WorkflowConfig} from '../types'
 
 export const API_VERSION = `2023-01-01`
 
@@ -24,8 +24,8 @@ export const DEFAULT_CONFIG: WorkflowConfig = {
       title: 'Approved',
       color: 'success',
       roles: ['administrator'],
-      requireAssignment: true,
       transitions: ['changesRequested'],
+      requireAssignment: true,
     },
   ]),
 }

package/src/helpers/filterItemsAndSort.ts

@@ -8,6 +8,8 @@ export function filterItemsAndSort(
 ): 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

package/src/hooks/useWorkflowDocuments.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import {useListeningQuery} from 'sanity-plugin-utils'
+import {DraggableLocation} from '@hello-pangea/dnd'
 import {useToast} from '@sanity/ui'
-import {useClient} from 'sanity'
-import {DraggableLocation} from 'react-beautiful-dnd'
 import groq from 'groq'
+import React from 'react'
+import {useClient} from 'sanity'
+import {useListeningQuery} from 'sanity-plugin-utils'
 
-import {SanityDocumentWithMetadata, State} from '../types'
 import {API_VERSION} from '../constants'
+import {SanityDocumentWithMetadata, State} from '../types'
 
 const QUERY = groq`*[_type == "workflow.metadata"]|order(orderRank){
   "_metadata": {
@@ -24,7 +24,7 @@ const QUERY = groq`*[_type == "workflow.metadata"]|order(orderRank){
       _updatedAt 
     }
   )
-}[defined(_id)]`
+}`
 
 type WorkflowDocuments = {
   workflowData: {

package/src/index.ts

@@ -1,15 +1,15 @@
 import {definePlugin, DocumentActionProps} from 'sanity'
 
-import {DEFAULT_CONFIG} from './constants'
-import {WorkflowConfig} from './types'
-import {workflowTool} from './tools'
-import metadata from './schema/workflow/workflow.metadata'
 import {AssignWorkflow} from './actions/AssignWorkflow'
 import {BeginWorkflow} from './actions/BeginWorkflow'
 import {CompleteWorkflow} from './actions/CompleteWorkflow'
+import {UpdateWorkflow} from './actions/UpdateWorkflow'
 import {AssigneesBadge} from './badges/AssigneesBadge'
 import {StateBadge} from './badges/StateBadge'
-import {UpdateWorkflow} from './actions/UpdateWorkflow'
+import {DEFAULT_CONFIG} from './constants'
+import metadata from './schema/workflow/workflow.metadata'
+import {workflowTool} from './tools'
+import {WorkflowConfig} from './types'
 
 export const workflow = definePlugin<WorkflowConfig>(
   (config = DEFAULT_CONFIG) => {

package/src/schema/workflow/workflow.metadata.ts

@@ -1,4 +1,4 @@
-import {defineType, defineField} from 'sanity'
+import {defineField, defineType} from 'sanity'
 
 import Field from '../../components/DocumentCard/Field'
 import UserAssignmentInput from '../../components/UserAssignmentInput'

package/src/tools/index.ts

@@ -1,5 +1,5 @@
-import {Tool} from 'sanity'
 import {SplitVerticalIcon} from '@sanity/icons'
+import {Tool} from 'sanity'
 
 import WorkflowTool from '../components/WorkflowTool'
 import {WorkflowConfig} from '../types'

package/src/types/index.ts

@@ -9,6 +9,7 @@ export type State = {
   // operation?: Operation
   roles?: string[]
   requireAssignment?: boolean
+  requireValidation?: boolean
   // From document badges
   color?: 'primary' | 'success' | 'warning' | 'danger'
 }

package/src/actions/RequestReviewAction.js

@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import {EyeOpenIcon} from '@sanity/icons'
-
-import {inferMetadataState, useWorkflowMetadata} from '../../lib/workflow'
-import RequestReviewWizard from '../../components/RequestReviewWizard'
-
-export function RequestReviewAction(props) {
-  const [showWizardDialog, setShowWizardDialog] = React.useState(false)
-  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props))
-  const {state} = metadata.data
-
-  if (!props.draft || state === 'inReview' || state === 'approved') {
-    return null
-  }
-
-  const onHandle = () => {
-    if (!showWizardDialog) {
-      setShowWizardDialog(true)
-    }
-  }
-
-  const onSend = (assignees) => {
-    setShowWizardDialog(false)
-
-    if (assignees.length === 0) {
-      metadata.clearAssignees()
-    } else {
-      metadata.setAssignees(assignees)
-    }
-
-    metadata.setState('inReview')
-    props.onComplete()
-  }
-
-  const onClose = () => setShowWizardDialog(false)
-
-  return {
-    dialog: showWizardDialog && {
-      type: 'popover',
-      content: <RequestReviewWizard metadata={metadata.data} onClose={onClose} onSend={onSend} />,
-      onClose: props.onComplete,
-    },
-    disabled: showWizardDialog,
-    icon: EyeOpenIcon,
-    label: 'Request review',
-    onHandle,
-  }
-}
-
-RequestReviewAction.propTypes = {
-  draft: PropTypes.object,
-  id: PropTypes.string,
-  onComplete: PropTypes.func,
-}

package/src/actions/index.js

@@ -1,21 +0,0 @@
-import {ApproveAction} from './ApproveAction'
-import {DeleteAction} from './DeleteAction'
-import {DiscardChangesAction} from './DiscardChangesAction'
-import {PublishAction} from './PublishAction'
-import {RequestChangesAction} from './RequestChangesAction'
-import {RequestReviewAction} from './RequestReviewAction'
-import {SyncAction} from './SyncAction'
-import {UnpublishAction} from './Unpublish'
-
-export function resolveWorkflowActions(/* docInfo */) {
-  return [
-    SyncAction,
-    RequestReviewAction,
-    ApproveAction,
-    RequestChangesAction,
-    PublishAction,
-    UnpublishAction,
-    DiscardChangesAction,
-    DeleteAction,
-  ]
-}