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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "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/actions/UpdateWorkflow.tsx

@@ -1,25 +1,20 @@
-// import {useState} from 'react'
-import {ArrowRightIcon, ArrowLeftIcon} from '@sanity/icons'
+import {ArrowLeftIcon, ArrowRightIcon} from '@sanity/icons'
 import {useToast} from '@sanity/ui'
 import {useCurrentUser, useValidationStatus} from 'sanity'
 import {DocumentActionProps, useClient} from 'sanity'
 
-import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
 import {API_VERSION} from '../constants'
-import {State} from '../types'
 import {arraysContainMatchingString} from '../helpers/arraysContainMatchingString'
+import {useWorkflowMetadata} from '../hooks/useWorkflowMetadata'
+import {State} from '../types'
 
+// eslint-disable-next-line complexity
 export function UpdateWorkflow(
   props: DocumentActionProps,
   allStates: State[],
   actionState: State
 ) {
   const {id, type} = props
-  const {validation, isValidating} = useValidationStatus(id, type)
-  const hasValidationErrors =
-    !isValidating &&
-    validation?.length > 0 &&
-    validation.find((v) => v.level === 'error')
 
   const user = useCurrentUser()
   const client = useClient({apiVersion: API_VERSION})
@@ -30,6 +25,13 @@ export function UpdateWorkflow(
   const {state: currentState} = data
   const {assignees = []} = data?.metadata ?? {}
 
+  const {validation, isValidating} = useValidationStatus(id, type)
+  const hasValidationErrors =
+    currentState?.requireValidation &&
+    !isValidating &&
+    validation?.length > 0 &&
+    validation.find((v) => v.level === 'error')
+
   if (error) {
     console.error(error)
   }
@@ -80,8 +82,6 @@ export function UpdateWorkflow(
   const DirectionIcon = direction === 'promote' ? ArrowRightIcon : ArrowLeftIcon
   const directionLabel = direction === 'promote' ? 'Promote' : 'Demote'
 
-  let title = `${directionLabel} State to "${actionState.title}"`
-
   const userRoleCanUpdateState =
     user?.roles?.length && actionState?.roles?.length
       ? // If the Action state is limited to specific roles
@@ -93,10 +93,6 @@ export function UpdateWorkflow(
       : // No roles specified on the next state, so anyone can update
         actionState?.roles?.length !== 0
 
-  if (!userRoleCanUpdateState) {
-    title = `Your User role cannot ${directionLabel} State to "${actionState.title}"`
-  }
-
   const actionStateIsAValidTransition =
     currentState?.id && currentState.transitions.length
       ? // If the Current State limits transitions to specific States
@@ -105,10 +101,6 @@ export function UpdateWorkflow(
       : // Otherwise this isn't a problem
         true
 
-  if (!actionStateIsAValidTransition) {
-    title = `You cannot ${directionLabel} State to "${actionState.title}" from "${currentState?.title}"`
-  }
-
   const userAssignmentCanUpdateState = actionState.requireAssignment
     ? // If the Action State requires assigned users
       // Check the current user ID is in the assignees array
@@ -116,11 +108,17 @@ export function UpdateWorkflow(
     : // Otherwise this isn't a problem
       true
 
-  if (!userAssignmentCanUpdateState) {
-    title = `You must be assigned to the document to ${directionLabel} State to "${actionState.title}"`
-  }
+  let title = `${directionLabel} State to "${actionState.title}"`
 
-  if (hasValidationErrors) {
+  if (!userRoleCanUpdateState) {
+    title = `Your User role cannot ${directionLabel} State to "${actionState.title}"`
+  } else if (!actionStateIsAValidTransition) {
+    title = `You cannot ${directionLabel} State to "${actionState.title}" from "${currentState?.title}"`
+  } else if (!userAssignmentCanUpdateState) {
+    title = `You must be assigned to the document to ${directionLabel} State to "${actionState.title}"`
+  } else if (currentState?.requireValidation && isValidating) {
+    title = `Document is validating, cannot ${directionLabel} State to "${actionState.title}"`
+  } else if (hasValidationErrors) {
     title = `Document has validation errors, cannot ${directionLabel} State to "${actionState.title}"`
   }
 
@@ -129,7 +127,7 @@ export function UpdateWorkflow(
     disabled:
       loading ||
       error ||
-      isValidating ||
+      (currentState?.requireValidation && isValidating) ||
       hasValidationErrors ||
       !currentState ||
       !userRoleCanUpdateState ||

package/src/components/DocumentCard/Validate.tsx

@@ -0,0 +1,21 @@
+import {useEffect} from 'react'
+import {useValidationStatus, ValidationStatus} from 'sanity'
+
+type ValidateProps = {
+  documentId: string
+  type: string
+  onChange: (validation: ValidationStatus) => void
+}
+
+// Document validation is siloed into its own component
+// Because it's not performant to run on a lot of documents
+export default function Validate(props: ValidateProps) {
+  const {documentId, type, onChange} = props
+  const {isValidating, validation = []} = useValidationStatus(documentId, type)
+
+  useEffect(() => {
+    onChange({isValidating, validation})
+  }, [onChange, isValidating, validation])
+
+  return null
+}

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,22 @@
 /* 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 {useCallback, useEffect, useMemo, useState} from 'react'
+import {
+  SchemaType,
+  useSchema,
+  ValidationStatus as ValidationStatusType,
+} 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 Validate from './Validate'
 import {ValidationStatus} from './ValidationStatus'
-import CompleteButton from './CompleteButton'
 
 type DocumentCardProps = {
   isDragDisabled: boolean
@@ -38,6 +43,7 @@ export function DocumentCard(props: DocumentCardProps) {
   } = props
   const {assignees = [], documentId} = item._metadata ?? {}
   const schema = useSchema()
+  const state = states.find((s) => s.id === item._metadata?.state)
 
   // Perform document operations after State changes
   // If State has changed and the document needs to be un/published
@@ -80,10 +86,21 @@ export function DocumentCard(props: DocumentCardProps) {
 
   const isDarkMode = useTheme().sanity.color.dark
   const defaultCardTone = isDarkMode ? `transparent` : `default`
-  const {validation = [], isValidating} = useValidationStatus(
-    documentId ?? ``,
-    item._type
-  )
+
+  // Validation only runs if the state requests it
+  // Because it's not performant to run it on many documents simultaneously
+  // So we fake it here, and maybe set it inside <Validate />
+  const [optimisticValidation, setOptimisticValidation] =
+    useState<ValidationStatusType>({
+      isValidating: state?.requireValidation ?? false,
+      validation: [],
+    })
+
+  const {isValidating, validation} = optimisticValidation
+
+  const handleValidation = useCallback((updates: ValidationStatusType) => {
+    setOptimisticValidation(updates)
+  }, [])
 
   const cardTone = useMemo(() => {
     let tone: CardTone = defaultCardTone
@@ -92,7 +109,7 @@ export function DocumentCard(props: DocumentCardProps) {
     if (!documentId) return tone
     if (isDragging) tone = `positive`
 
-    if (!isValidating && validation.length > 0) {
+    if (state?.requireValidation && !isValidating && validation.length > 0) {
       if (validation.some((v) => v.level === 'error')) {
         tone = `critical`
       } else {
@@ -102,13 +119,14 @@ export function DocumentCard(props: DocumentCardProps) {
 
     return tone
   }, [
-    isDarkMode,
-    userRoleCanDrop,
     defaultCardTone,
+    userRoleCanDrop,
+    isDarkMode,
     documentId,
     isDragging,
-    validation,
     isValidating,
+    validation,
+    state?.requireValidation,
   ])
 
   // Update validation status
@@ -136,63 +154,72 @@ export function DocumentCard(props: DocumentCardProps) {
   )
 
   return (
-    <Box paddingBottom={3} paddingX={3}>
-      <Card radius={2} shadow={isDragging ? 3 : 1} tone={cardTone}>
-        <Stack>
-          <Card
-            borderBottom
-            radius={2}
-            padding={3}
-            paddingLeft={2}
-            tone={cardTone}
-            style={{pointerEvents: 'none'}}
-          >
-            <Flex align="center" justify="space-between" gap={1}>
-              <Box flex={1}>
-                <Preview
-                  layout="default"
-                  value={item}
-                  schemaType={schema.get(item._type) as SchemaType}
+    <>
+      {state?.requireValidation ? (
+        <Validate
+          documentId={documentId}
+          type={item._type}
+          onChange={handleValidation}
+        />
+      ) : null}
+      <Box paddingBottom={3} paddingX={3}>
+        <Card radius={2} shadow={isDragging ? 3 : 1} tone={cardTone}>
+          <Stack>
+            <Card
+              borderBottom
+              radius={2}
+              padding={3}
+              paddingLeft={2}
+              tone={cardTone}
+              style={{pointerEvents: 'none'}}
+            >
+              <Flex align="center" justify="space-between" gap={1}>
+                <Box flex={1}>
+                  <Preview
+                    layout="default"
+                    value={item}
+                    schemaType={schema.get(item._type) as SchemaType}
+                  />
+                </Box>
+                <Box style={{flexShrink: 0}}>
+                  {hasError || isDragDisabled ? null : <DragHandleIcon />}
+                </Box>
+              </Flex>
+            </Card>
+
+            <Card padding={2} radius={2} tone="inherit">
+              <Flex align="center" justify="space-between" gap={3}>
+                <Box flex={1}>
+                  {documentId && (
+                    <UserDisplay
+                      userList={userList}
+                      assignees={assignees}
+                      documentId={documentId}
+                      disabled={!userRoleCanDrop}
+                    />
+                  )}
+                </Box>
+                {validation.length > 0 ? (
+                  <ValidationStatus validation={validation} />
+                ) : null}
+                <DraftStatus document={item} />
+                <PublishedStatus document={item} />
+                <EditButton
+                  id={item._id}
+                  type={item._type}
+                  disabled={!userRoleCanDrop}
                 />
-              </Box>
-              <Box style={{flexShrink: 0}}>
-                {hasError || isDragDisabled ? null : <DragHandleIcon />}
-              </Box>
-            </Flex>
-          </Card>
-
-          <Card padding={2} radius={2} tone="inherit">
-            <Flex align="center" justify="space-between" gap={3}>
-              <Box flex={1}>
-                {documentId && (
-                  <UserDisplay
-                    userList={userList}
-                    assignees={assignees}
+                {isLastState ? (
+                  <CompleteButton
                     documentId={documentId}
                     disabled={!userRoleCanDrop}
                   />
-                )}
-              </Box>
-              {validation.length > 0 ? (
-                <ValidationStatus validation={validation} />
-              ) : null}
-              <DraftStatus document={item} />
-              <PublishedStatus document={item} />
-              <EditButton
-                id={item._id}
-                type={item._type}
-                disabled={!userRoleCanDrop}
-              />
-              {isLastState ? (
-                <CompleteButton
-                  documentId={documentId}
-                  disabled={!userRoleCanDrop}
-                />
-              ) : null}
-            </Flex>
-          </Card>
-        </Stack>
-      </Card>
-    </Box>
+                ) : null}
+              </Flex>
+            </Card>
+          </Stack>
+        </Card>
+      </Box>
+    </>
   )
 }

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 → Verify.tsx}

@@ -1,20 +1,24 @@
+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 = {
+type VerifyProps = {
   data: SanityDocumentWithMetadata[]
   userList: UserExtended[]
   states: State[]
 }
 
-export default function Validators({data, userList, states}: ValidatorsProps) {
+// This component checks the validity of the data in the Kanban
+// It will only render something it there is invalid date
+// And will render buttons to fix the data
+export default function Verify(props: VerifyProps) {
+  const {data, userList, states} = props
   const client = useClient({apiVersion: API_VERSION})
   const toast = useToast()
 
@@ -143,6 +147,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 +208,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={() =>