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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",
@@ -49,13 +49,14 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^16.2.0",
     "@sanity/icons": "^2.2.2",
     "@sanity/incompatible-plugin": "^1.0.4",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "@types/styled-components": "^5.1.26",
     "framer-motion": "^10.6.1",
     "groq": "^3.3.1",
     "lexorank": "^1.0.5",
-    "react-beautiful-dnd": "^13.1.1",
     "react-fast-compare": "^3.2.1",
     "sanity-plugin-utils": "^1.3.0"
   },
@@ -66,7 +67,6 @@
     "@sanity/plugin-kit": "^3.1.4",
     "@sanity/semantic-release-preset": "^4.0.1",
     "@types/react": "^18.0.27",
-    "@types/react-beautiful-dnd": "^13.1.2",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "eslint": "^8.33.0",
@@ -75,6 +75,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
     "npm-run-all": "^4.1.5",

package/src/components/DocumentCard/core/PublishedStatus.tsx

@@ -1,11 +1,13 @@
 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'
-import {TextWithTone} from 'sanity'
 
-export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
+export function PublishedStatus(props: {
+  document?: PreviewValue | Partial<SanityDocument> | null
+}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
 
@@ -24,7 +26,12 @@ export function PublishedStatus(props: {document?: PreviewValue | Partial<Sanity
         </Box>
       }
     >
-      <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
+      <TextWithTone
+        tone="positive"
+        dimmed={!document}
+        muted={!document}
+        size={1}
+      >
         <PublishIcon />
       </TextWithTone>
     </Tooltip>

package/src/components/DocumentCard/index.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable react/prop-types */
-import {useEffect, useMemo} from 'react'
-import {Box, Card, CardTone, Flex, Stack, useTheme} from '@sanity/ui'
 import {DragHandleIcon} from '@sanity/icons'
-import {useSchema, SchemaType, useValidationStatus} from 'sanity'
+import {Box, Card, CardTone, Flex, Stack, useTheme} from '@sanity/ui'
+import {useEffect, useMemo} from 'react'
+import {SchemaType, useSchema, useValidationStatus} from 'sanity'
 import {Preview} from 'sanity'
 
-import EditButton from './EditButton'
 import {SanityDocumentWithMetadata, State, User} from '../../types'
 import UserDisplay from '../UserDisplay'
+import CompleteButton from './CompleteButton'
 import {DraftStatus} from './core/DraftStatus'
 import {PublishedStatus} from './core/PublishedStatus'
+import EditButton from './EditButton'
 import {ValidationStatus} from './ValidationStatus'
-import CompleteButton from './CompleteButton'
 
 type DocumentCardProps = {
   isDragDisabled: boolean

package/src/components/DocumentList.tsx

@@ -0,0 +1,122 @@
+import {Draggable} from '@hello-pangea/dnd'
+import {useVirtualizer} from '@tanstack/react-virtual'
+import {useMemo, useRef} from 'react'
+import {CurrentUser} from 'sanity'
+import {UserExtended} from 'sanity-plugin-utils'
+
+import {filterItemsAndSort} from '../helpers/filterItemsAndSort'
+import {SanityDocumentWithMetadata, State} from '../types'
+import {DocumentCard} from './DocumentCard'
+
+type DocumentListProps = {
+  data: SanityDocumentWithMetadata[]
+  invalidDocumentIds: string[]
+  selectedSchemaTypes: string[]
+  selectedUserIds: string[]
+  state: State
+  states: State[]
+  toggleInvalidDocumentId: (
+    documentId: string,
+    action: 'ADD' | 'REMOVE'
+  ) => void
+  user: CurrentUser | null
+  userList: UserExtended[]
+  userRoleCanDrop: boolean
+}
+
+export default function DocumentList(props: DocumentListProps) {
+  const {
+    data = [],
+    invalidDocumentIds,
+    selectedSchemaTypes,
+    selectedUserIds,
+    state,
+    states,
+    toggleInvalidDocumentId,
+    user,
+    userList,
+    userRoleCanDrop,
+  } = props
+
+  const dataFiltered = useMemo(() => {
+    return data.length
+      ? filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes)
+      : []
+  }, [data, selectedSchemaTypes, selectedUserIds, state.id])
+
+  const parentRef = useRef(null)
+
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => parentRef.current,
+    getItemKey: (index) => dataFiltered[index]?._metadata?.documentId ?? index,
+    estimateSize: () => 113,
+    overscan: 5,
+  })
+
+  if (!data.length) {
+    return null
+  }
+
+  return (
+    <div
+      ref={parentRef}
+      style={{
+        height: `100%`,
+        overflow: 'auto',
+        paddingTop: 1,
+        // Smooths scrollbar behaviour
+        overflowAnchor: 'none',
+        scrollBehavior: 'auto',
+      }}
+    >
+      {/* {dataFiltered.map((item, itemIndex) => { */}
+      {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+        const item = dataFiltered[virtualItem.index]
+
+        const {documentId, assignees} = item?._metadata ?? {}
+
+        if (!documentId) {
+          return null
+        }
+
+        const isInvalid = invalidDocumentIds.includes(documentId)
+        const meInAssignees = user?.id ? assignees?.includes(user.id) : false
+        const isDragDisabled =
+          !userRoleCanDrop ||
+          isInvalid ||
+          !(state.requireAssignment
+            ? state.requireAssignment && meInAssignees
+            : true)
+
+        return (
+          <Draggable
+            // The metadata's documentId is always the published one to avoid rerendering
+            key={documentId}
+            draggableId={documentId}
+            index={virtualItem.index}
+            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>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/Filters.tsx

@@ -1,8 +1,8 @@
-import {MenuButton, Menu, Flex, Card, Button} from '@sanity/ui'
+import {ResetIcon, UserIcon} from '@sanity/icons'
+import {Button, Card, Flex, Menu, MenuButton} from '@sanity/ui'
+import {useCallback} from 'react'
 import {useCurrentUser, UserAvatar, useSchema} from 'sanity'
-import {UserIcon, ResetIcon} from '@sanity/icons'
 import {UserExtended, UserSelectMenu} from 'sanity-plugin-utils'
-import {useCallback} from 'react'
 
 type FiltersProps = {
   uniqueAssignedUsers: UserExtended[]

package/src/components/Validators.tsx

@@ -1,12 +1,12 @@
+import {Button, useToast} from '@sanity/ui'
+import {LexoRank} from 'lexorank'
 import React from 'react'
-import {useToast, Button} from '@sanity/ui'
 import {useClient} from 'sanity'
 import {UserExtended} from 'sanity-plugin-utils'
-import {LexoRank} from 'lexorank'
 
-import FloatingCard from './FloatingCard'
 import {API_VERSION} from '../constants'
 import {SanityDocumentWithMetadata, State} from '../types'
+import FloatingCard from './FloatingCard'
 
 type ValidatorsProps = {
   data: SanityDocumentWithMetadata[]
@@ -143,6 +143,32 @@ export default function Validators({data, userList, states}: ValidatorsProps) {
     [data, client, toast]
   )
 
+  // A document could be deleted and the workflow metadata left behind
+  const orphanedMetadataDocumentIds = React.useMemo(() => {
+    return data.length
+      ? data.filter((doc) => !doc?._id).map((doc) => doc._metadata.documentId)
+      : []
+  }, [data])
+
+  const handleOrphans = React.useCallback(() => {
+    toast.push({
+      title: 'Removing orphaned metadata...',
+      status: 'info',
+    })
+
+    const tx = client.transaction()
+    orphanedMetadataDocumentIds.forEach((id) => {
+      tx.delete(`workflow-metadata.${id}`)
+    })
+
+    tx.commit()
+
+    toast.push({
+      title: `Removed ${orphanedMetadataDocumentIds.length} orphaned metadata documents`,
+      status: 'success',
+    })
+  }, [client, orphanedMetadataDocumentIds, toast])
+
   return (
     <FloatingCard>
       {documentsWithoutValidMetadataIds.length > 0 ? (
@@ -178,6 +204,13 @@ export default function Validators({data, userList, states}: ValidatorsProps) {
           }
         />
       ) : null}
+      {orphanedMetadataDocumentIds.length > 0 ? (
+        <Button
+          text="Cleanup orphaned metadata"
+          onClick={handleOrphans}
+          tone="caution"
+        />
+      ) : null}
       {/* <Button
         tone="caution"
         onClick={() =>

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 Validators from './Validators'
 
 type WorkflowToolProps = {
   tool: Tool<WorkflowConfig>
@@ -154,12 +153,12 @@ 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
           ? 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
           ? LexoRank.parse(itemAfterRank)
@@ -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,7 +248,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
   }
 
   return (
-    <Card height="fill" overflow="hidden">
+    <Flex direction="column" height="fill" overflow="hidden">
       <Validators data={data} userList={userList} states={states} />
       <Filters
         uniqueAssignedUsers={uniqueAssignedUsers}
@@ -270,100 +273,95 @@ 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"
+                      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`
 

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'