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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",

package/src/components/DocumentCard/index.tsx

@@ -45,45 +45,6 @@ export function DocumentCard(props: DocumentCardProps) {
   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
-  // This functionality was deemed too dangerous / unexpected
-  // Revisit with improved UX
-  // const currentState = useMemo(
-  //   () => states.find((state) => state.id === item._metadata?.state),
-  //   [states, item]
-  // )
-  // const ops = useDocumentOperation(documentId ?? ``, item._type)
-  // const toast = useToast()
-
-  // useEffect(() => {
-  //   const isDraft = item._id.startsWith('drafts.')
-
-  //   if (isDraft && currentState?.operation === 'publish' && !item?._metadata?.optimistic) {
-  //     if (!ops.publish.disabled) {
-  //       ops.publish.execute()
-  //       toast.push({
-  //         title: 'Published Document',
-  //         description: documentId,
-  //         status: 'success',
-  //       })
-  //     }
-  //   } else if (
-  //     !isDraft &&
-  //     currentState?.operation === 'unpublish' &&
-  //     !item?._metadata?.optimistic
-  //   ) {
-  //     if (!ops.unpublish.disabled) {
-  //       ops.unpublish.execute()
-  //       toast.push({
-  //         title: 'Unpublished Document',
-  //         description: documentId,
-  //         status: 'success',
-  //       })
-  //     }
-  //   }
-  // }, [currentState, documentId, item, ops, toast])
-
   const isDarkMode = useTheme().sanity.color.dark
   const defaultCardTone = isDarkMode ? `transparent` : `default`
 

package/src/components/DocumentList.tsx

@@ -51,7 +51,7 @@ export default function DocumentList(props: DocumentListProps) {
     getScrollElement: () => parentRef.current,
     getItemKey: (index) => dataFiltered[index]?._metadata?.documentId ?? index,
     estimateSize: () => 113,
-    overscan: 5,
+    overscan: 10,
   })
 
   if (!data.length) {

package/src/components/StateTitle/index.tsx

@@ -1,21 +1,9 @@
-import {Flex, Card, Badge, BadgeTone} from '@sanity/ui'
 import {InfoOutlineIcon, UserIcon} from '@sanity/icons'
+import {Badge, BadgeTone, Box, Card, Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
+import {State} from '../../types'
 import {Status} from './Status'
-import {
-  // Operation,
-  State,
-} from '../../types'
-
-type StateTitleProps = {
-  state: State
-  requireAssignment: boolean
-  userRoleCanDrop: boolean
-  isDropDisabled: boolean
-  draggingFrom: string
-  // operation?: Operation
-}
 
 const StyledStickyCard = styled(Card)(
   () => css`
@@ -25,8 +13,24 @@ const StyledStickyCard = styled(Card)(
   `
 )
 
+type StateTitleProps = {
+  state: State
+  requireAssignment: boolean
+  userRoleCanDrop: boolean
+  isDropDisabled: boolean
+  draggingFrom: string
+  documentCount: number
+}
+
 export default function StateTitle(props: StateTitleProps) {
-  const {state, requireAssignment, userRoleCanDrop, isDropDisabled, draggingFrom} = props
+  const {
+    state,
+    requireAssignment,
+    userRoleCanDrop,
+    isDropDisabled,
+    draggingFrom,
+    documentCount,
+  } = props
 
   let tone: BadgeTone = 'default'
   const isSource = draggingFrom === state.id
@@ -39,7 +43,11 @@ export default function StateTitle(props: StateTitleProps) {
     <StyledStickyCard paddingY={4} padding={3} tone="inherit">
       <Flex gap={3} align="center">
         <Badge
-          mode={(draggingFrom && !isDropDisabled) || isSource ? 'default' : 'outline'}
+          mode={
+            (draggingFrom && !isDropDisabled) || isSource
+              ? 'default'
+              : 'outline'
+          }
           tone={tone}
           muted={!userRoleCanDrop || isDropDisabled}
         >
@@ -57,16 +65,13 @@ export default function StateTitle(props: StateTitleProps) {
             icon={UserIcon}
           />
         ) : null}
-        {/* {operation ? (
-          <Status
-            text={
-              operation === 'publish'
-                ? `A document moved to this State will also publish the current Draft`
-                : `A document moved to this State will also unpublish the current Published version`
-            }
-            icon={operation === 'publish' ? PublishIcon : UnpublishIcon}
-          />
-        ) : null} */}
+        <Box flex={1}>
+          {documentCount > 0 ? (
+            <Text weight="semibold" align="right" size={1}>
+              {documentCount}
+            </Text>
+          ) : null}
+        </Box>
       </Flex>
     </StyledStickyCard>
   )

package/src/components/Verify.tsx

@@ -51,6 +51,18 @@ export default function Verify(props: VerifyProps) {
       }, [] as string[])
     : []
 
+  const documentsWithDuplicatedOrderIds = data?.length
+    ? data.reduce((acc, cur) => {
+        const {documentId, orderRank} = cur._metadata ?? {}
+
+        return orderRank &&
+          data.filter((d) => d._metadata?.orderRank === orderRank).length > 1 &&
+          documentId
+          ? [...acc, documentId]
+          : acc
+      }, [] as string[])
+    : []
+
   // Updates metadata documents to a valid, existing state
   const correctDocuments = React.useCallback(
     async (ids: string[]) => {
@@ -208,6 +220,17 @@ export default function Verify(props: VerifyProps) {
           }
         />
       ) : null}
+      {documentsWithDuplicatedOrderIds.length > 0 ? (
+        <Button
+          tone="caution"
+          onClick={() => addOrderToDocuments(documentsWithDuplicatedOrderIds)}
+          text={
+            documentsWithDuplicatedOrderIds.length === 1
+              ? `Set Unique Order for 1 Document`
+              : `Set Unique Order for ${documentsWithDuplicatedOrderIds.length} Documents`
+          }
+        />
+      ) : null}
       {orphanedMetadataDocumentIds.length > 0 ? (
         <Button
           text="Cleanup orphaned metadata"

package/src/components/WorkflowTool.tsx

@@ -107,7 +107,7 @@ export default function WorkflowTool(props: WorkflowToolProps) {
   )
 
   const handleDragEnd = React.useCallback(
-    (result: DropResult) => {
+    async (result: DropResult) => {
       // Reset undroppable states
       setUndroppableStates([])
       setDraggingFrom(``)
@@ -280,9 +280,16 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                     state={state}
                     requireAssignment={state.requireAssignment ?? false}
                     userRoleCanDrop={userRoleCanDrop}
-                    // operation={state.operation}
                     isDropDisabled={isDropDisabled}
                     draggingFrom={draggingFrom}
+                    documentCount={
+                      filterItemsAndSort(
+                        data,
+                        state.id,
+                        selectedUserIds,
+                        selectedSchemaTypes
+                      ).length
+                    }
                   />
                   <Box flex={1}>
                     <Droppable

package/src/hooks/useWorkflowDocuments.tsx

@@ -65,7 +65,7 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
   }, [data])
 
   const move = React.useCallback(
-    (
+    async (
       draggedId: string,
       destination: DraggableLocation,
       states: State[],
@@ -122,11 +122,13 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
       const {_id, _type} = document
 
       // Metadata + useDocumentOperation always uses Published id
-      const {_rev, documentId} = document._metadata || {}
+      const {documentId} = document._metadata || {}
 
-      client
+      await client
         .patch(`workflow-metadata.${documentId}`)
-        .ifRevisionId(_rev as string)
+        // Removed because it was effecting fast-updates between columns
+        // TODO: Prevent dragging while patching instead while keeping optimistic updates and revert when patch fails
+        // .ifRevisionId(document._metadata._rev)
         .set({state: newStateId, orderRank: newOrder})
         .commit()
         .then(() => {
@@ -135,12 +137,13 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
             status: 'success',
           })
         })
-        .catch(() => {
+        .catch((err) => {
           // Revert optimistic update
           setLocalDocuments(currentLocalData)
 
           return toast.push({
             title: `Failed to move to "${newState?.title ?? newStateId}"`,
+            description: err.message,
             status: 'error',
           })
         })

package/src/types/index.ts

@@ -1,12 +1,9 @@
 import {SanityDocumentLike} from 'sanity'
 
-// export type Operation = 'publish' | 'unpublish'
-
 export type State = {
   id: string
   transitions: string[]
   title: string
-  // operation?: Operation
   roles?: string[]
   requireAssignment?: boolean
   requireValidation?: boolean