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

package/package.json

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

package/src/components/DocumentCard/CompleteButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import {Button, useToast} from '@sanity/ui'
 import {CheckmarkIcon} from '@sanity/icons'
+import {Box, Button, Text, Tooltip, useToast} from '@sanity/ui'
+import React from 'react'
 import {useClient} from 'sanity'
 
 import {API_VERSION} from '../../constants'
@@ -15,39 +15,54 @@ export default function CompleteButton(props: CompleteButtonProps) {
   const client = useClient({apiVersion: API_VERSION})
   const toast = useToast()
 
-  const handleComplete = React.useCallback(
-    (id: string) => {
-      client
-        .delete(`workflow-metadata.${id}`)
-        .then(() => {
-          toast.push({
-            status: 'success',
-            title: 'Workflow completed',
-            description: id,
+  const handleComplete: React.MouseEventHandler<HTMLButtonElement> =
+    React.useCallback(
+      (event) => {
+        const id = event.currentTarget.value
+
+        if (!id) {
+          return
+        }
+
+        client
+          .delete(`workflow-metadata.${id}`)
+          .then(() => {
+            toast.push({
+              status: 'success',
+              title: 'Workflow completed',
+            })
           })
-        })
-        .catch(() => {
-          toast.push({
-            status: 'error',
-            title: 'Could not complete Workflow',
-            description: id,
+          .catch(() => {
+            toast.push({
+              status: 'error',
+              title: 'Could not complete Workflow',
+            })
           })
-        })
-    },
-    [client, toast]
-  )
+      },
+      [client, toast]
+    )
 
   return (
-    <Button
-      onClick={() => handleComplete(documentId)}
-      text="Complete"
-      icon={CheckmarkIcon}
-      tone="positive"
-      mode="ghost"
-      fontSize={1}
-      padding={2}
-      tabIndex={-1}
-      disabled={disabled}
-    />
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>Remove this document from Workflow</Text>
+        </Box>
+      }
+    >
+      <Button
+        value={documentId}
+        onClick={handleComplete}
+        text="Complete"
+        icon={CheckmarkIcon}
+        tone="positive"
+        mode="ghost"
+        fontSize={1}
+        padding={2}
+        tabIndex={-1}
+        disabled={disabled}
+      />
+    </Tooltip>
   )
 }

package/src/components/DocumentCard/index.tsx

@@ -20,6 +20,7 @@ import {ValidationStatus} from './ValidationStatus'
 
 type DocumentCardProps = {
   isDragDisabled: boolean
+  isPatching: boolean
   userRoleCanDrop: boolean
   isDragging: boolean
   item: SanityDocumentWithMetadata
@@ -34,6 +35,7 @@ type DocumentCardProps = {
 export function DocumentCard(props: DocumentCardProps) {
   const {
     isDragDisabled,
+    isPatching,
     userRoleCanDrop,
     isDragging,
     item,
@@ -45,45 +47,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`
 
@@ -107,6 +70,7 @@ export function DocumentCard(props: DocumentCardProps) {
 
     if (!userRoleCanDrop) return isDarkMode ? `default` : `transparent`
     if (!documentId) return tone
+    if (isPatching) tone = isDarkMode ? `default` : `transparent`
     if (isDragging) tone = `positive`
 
     if (state?.requireValidation && !isValidating && validation.length > 0) {
@@ -121,6 +85,7 @@ export function DocumentCard(props: DocumentCardProps) {
   }, [
     defaultCardTone,
     userRoleCanDrop,
+    isPatching,
     isDarkMode,
     documentId,
     isDragging,
@@ -176,13 +141,18 @@ export function DocumentCard(props: DocumentCardProps) {
               <Flex align="center" justify="space-between" gap={1}>
                 <Box flex={1}>
                   <Preview
-                    layout="default"
+                    // Like as in desk lists, except it has an intermittent loading state
+                    // layout="default"
+                    // Like in the PTE, with no loading state
+                    layout="block"
                     value={item}
                     schemaType={schema.get(item._type) as SchemaType}
                   />
                 </Box>
                 <Box style={{flexShrink: 0}}>
-                  {hasError || isDragDisabled ? null : <DragHandleIcon />}
+                  {hasError || isDragDisabled || isPatching ? null : (
+                    <DragHandleIcon />
+                  )}
                 </Box>
               </Flex>
             </Card>
@@ -209,13 +179,21 @@ export function DocumentCard(props: DocumentCardProps) {
                   type={item._type}
                   disabled={!userRoleCanDrop}
                 />
-                {isLastState ? (
+                {isLastState && states.length <= 3 ? (
                   <CompleteButton
                     documentId={documentId}
                     disabled={!userRoleCanDrop}
                   />
                 ) : null}
               </Flex>
+              {isLastState && states.length > 3 ? (
+                <Stack paddingTop={2}>
+                  <CompleteButton
+                    documentId={documentId}
+                    disabled={!userRoleCanDrop}
+                  />
+                </Stack>
+              ) : null}
             </Card>
           </Stack>
         </Card>

package/src/components/DocumentList.tsx

@@ -11,6 +11,7 @@ import {DocumentCard} from './DocumentCard'
 type DocumentListProps = {
   data: SanityDocumentWithMetadata[]
   invalidDocumentIds: string[]
+  patchingIds: string[]
   selectedSchemaTypes: string[]
   selectedUserIds: string[]
   state: State
@@ -28,6 +29,7 @@ export default function DocumentList(props: DocumentListProps) {
   const {
     data = [],
     invalidDocumentIds,
+    patchingIds,
     selectedSchemaTypes,
     selectedUserIds,
     state,
@@ -51,7 +53,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) {
@@ -70,7 +72,6 @@ export default function DocumentList(props: DocumentListProps) {
         scrollBehavior: 'auto',
       }}
     >
-      {/* {dataFiltered.map((item, itemIndex) => { */}
       {rowVirtualizer.getVirtualItems().map((virtualItem) => {
         const item = dataFiltered[virtualItem.index]
 
@@ -83,6 +84,7 @@ export default function DocumentList(props: DocumentListProps) {
         const isInvalid = invalidDocumentIds.includes(documentId)
         const meInAssignees = user?.id ? assignees?.includes(user.id) : false
         const isDragDisabled =
+          patchingIds.includes(documentId) ||
           !userRoleCanDrop ||
           isInvalid ||
           !(state.requireAssignment
@@ -106,6 +108,7 @@ export default function DocumentList(props: DocumentListProps) {
                 <DocumentCard
                   userRoleCanDrop={userRoleCanDrop}
                   isDragDisabled={isDragDisabled}
+                  isPatching={patchingIds.includes(documentId)}
                   isDragging={draggableSnapshot.isDragging}
                   item={item}
                   toggleInvalidDocumentId={toggleInvalidDocumentId}

package/src/components/Filters.tsx

@@ -139,7 +139,7 @@ export default function Filters(props: FiltersProps) {
           )}
         </Flex>
 
-        {schemaTypes.length > 0 ? (
+        {schemaTypes.length > 1 ? (
           <Flex align="center" gap={1}>
             {schemaTypes.map((typeName) => {
               const schemaType = schema.get(typeName)

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[]) => {
@@ -118,17 +130,26 @@ export default function Verify(props: VerifyProps) {
         status: 'info',
       })
 
-      // Get first order value
-      const firstOrder = data[0]?._metadata?.orderRank
-      let newLexo =
+      // Get first and second order values
+      const [firstOrder, secondOrder] = [...data]
+        .slice(0, 2)
+        .map((d) => d._metadata?.orderRank)
+      const minLexo =
         firstOrder && data.length !== ids.length
           ? LexoRank.parse(firstOrder)
           : LexoRank.min()
+      const maxLexo =
+        secondOrder && data.length !== ids.length
+          ? LexoRank.parse(secondOrder)
+          : LexoRank.max()
+      let newLexo = minLexo.between(maxLexo)
+      const lastLexo = maxLexo
 
       const tx = client.transaction()
 
+      // Create a new in-between value for each document
       for (let index = 0; index < ids.length; index += 1) {
-        newLexo = newLexo.genNext().genNext()
+        newLexo = newLexo.between(lastLexo)
 
         tx.patch(`workflow-metadata.${ids[index]}`, {
           set: {orderRank: newLexo.toString()},
@@ -208,6 +229,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"