sanity-plugin-workflow 1.0.0-beta.1 → 1.0.0-beta.11

package/src/components/StateTitle/index.tsx

@@ -0,0 +1,78 @@
+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'
+
+const StyledStickyCard = styled(Card)(
+  () => css`
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  `
+)
+
+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,
+    documentCount,
+  } = props
+
+  let tone: BadgeTone = 'default'
+  const isSource = draggingFrom === state.id
+
+  if (draggingFrom) {
+    tone = isDropDisabled || isSource ? 'default' : 'positive'
+  }
+
+  return (
+    <StyledStickyCard paddingY={4} padding={3} tone="inherit">
+      <Flex gap={3} align="center">
+        <Badge
+          mode={
+            (draggingFrom && !isDropDisabled) || isSource
+              ? 'default'
+              : 'outline'
+          }
+          tone={tone}
+          muted={!userRoleCanDrop || isDropDisabled}
+        >
+          {state.title}
+        </Badge>
+        {userRoleCanDrop ? null : (
+          <Status
+            text="You do not have permissions to move documents to this State"
+            icon={InfoOutlineIcon}
+          />
+        )}
+        {requireAssignment ? (
+          <Status
+            text="You must be assigned to the document to move documents to this State"
+            icon={UserIcon}
+          />
+        ) : null}
+        <Box flex={1}>
+          {documentCount > 0 ? (
+            <Text weight="semibold" align="right" size={1}>
+              {documentCount}
+            </Text>
+          ) : null}
+        </Box>
+      </Flex>
+    </StyledStickyCard>
+  )
+}

package/src/components/UserAssignment.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import {Button, Popover, useToast} from '@sanity/ui'
-import {AddIcon} from '@sanity/icons'
+import {useToast} from '@sanity/ui'
 import {UserSelectMenu} from 'sanity-plugin-utils'
 import {useClient} from 'sanity'
 
-import AvatarGroup from './DocumentCard/AvatarGroup'
 import {User} from '../types'
+import {API_VERSION} from '../constants'
 
 type UserAssignmentProps = {
   userList: User[]
@@ -15,28 +14,28 @@ type UserAssignmentProps = {
 
 export default function UserAssignment(props: UserAssignmentProps) {
   const {assignees, userList, documentId} = props
-  const client = useClient()
+  const client = useClient({apiVersion: API_VERSION})
   const toast = useToast()
-  const [openId, setOpenId] = React.useState<string>(``)
 
   const addAssignee = React.useCallback(
     (userId: string) => {
-      if (!userId) {
+      const user = userList.find((u) => u.id === userId)
+
+      if (!userId || !user) {
         return toast.push({
           status: 'error',
-          title: 'No user selected',
+          title: 'Could not find User',
         })
       }
 
-      client
+      return client
         .patch(`workflow-metadata.${documentId}`)
         .setIfMissing({assignees: []})
         .insert(`after`, `assignees[-1]`, [userId])
         .commit()
         .then(() => {
           return toast.push({
-            title: `Assigned user to document`,
-            description: userId,
+            title: `Added ${user.displayName} to assignees`,
             status: 'success',
           })
         })
@@ -50,90 +49,73 @@ export default function UserAssignment(props: UserAssignmentProps) {
           })
         })
     },
-    [documentId, client, toast]
+    [documentId, client, toast, userList]
   )
 
   const removeAssignee = React.useCallback(
-    (id: string, userId: string) => {
-      client
-        .patch(`workflow-metadata.${id}`)
+    (userId: string) => {
+      const user = userList.find((u) => u.id === userId)
+
+      if (!userId || !user) {
+        return toast.push({
+          status: 'error',
+          title: 'Could not find User',
+        })
+      }
+
+      return client
+        .patch(`workflow-metadata.${documentId}`)
         .unset([`assignees[@ == "${userId}"]`])
         .commit()
-        .then((res) => res)
+        .then(() => {
+          return toast.push({
+            title: `Removed ${user.displayName} from assignees`,
+            status: 'success',
+          })
+        })
         .catch((err) => {
           console.error(err)
 
           return toast.push({
             title: `Failed to remove assignee`,
-            description: id,
+            description: documentId,
             status: 'error',
           })
         })
     },
-    [client, toast]
+    [client, toast, documentId, userList]
   )
 
-  const clearAssignees = React.useCallback(
-    (id: string) => {
-      client
-        .patch(`workflow-metadata.${id}`)
-        .unset([`assignees`])
-        .commit()
-        .then((res) => res)
-        .catch((err) => {
-          console.error(err)
+  const clearAssignees = React.useCallback(() => {
+    return client
+      .patch(`workflow-metadata.${documentId}`)
+      .unset([`assignees`])
+      .commit()
+      .then(() => {
+        return toast.push({
+          title: `Cleared assignees`,
+          status: 'success',
+        })
+      })
+      .catch((err) => {
+        console.error(err)
 
-          return toast.push({
-            title: `Failed to clear assignees`,
-            description: id,
-            status: 'error',
-          })
+        return toast.push({
+          title: `Failed to clear assignees`,
+          description: documentId,
+          status: 'error',
         })
-    },
-    [client, toast]
-  )
+      })
+  }, [client, toast, documentId])
 
   return (
-    <Popover
-      // @ts-ignore
-      // ref={setPopoverRef}
-      // onKeyDown={handleKeyDown}
-      content={
-        <UserSelectMenu
-          style={{maxHeight: 300}}
-          value={assignees || []}
-          userList={userList}
-          onAdd={addAssignee}
-          onClear={clearAssignees}
-          onRemove={removeAssignee}
-          open={openId === documentId}
-        />
-      }
-      portal
-      open={openId === documentId}
-    >
-      {!assignees || assignees.length === 0 ? (
-        <Button
-          onClick={() => setOpenId(documentId)}
-          fontSize={1}
-          padding={2}
-          tabIndex={-1}
-          icon={AddIcon}
-          text="Assign"
-          tone="positive"
-        />
-      ) : (
-        <Button
-          onClick={() => setOpenId(documentId)}
-          padding={0}
-          mode="bleed"
-          style={{width: `100%`}}
-        >
-          <AvatarGroup
-            users={userList.filter((u) => assignees.includes(u.id))}
-          />
-        </Button>
-      )}
-    </Popover>
+    <UserSelectMenu
+      style={{maxHeight: 300}}
+      value={assignees || []}
+      userList={userList}
+      onAdd={addAssignee}
+      onClear={clearAssignees}
+      onRemove={removeAssignee}
+    />
   )
 }

package/src/components/UserAssignmentInput.tsx

@@ -0,0 +1,27 @@
+import {Card} from '@sanity/ui'
+import {FunctionComponent} from 'react'
+import {ArraySchemaType, ArrayOfPrimitivesInputProps, useFormValue} from 'sanity'
+import {useProjectUsers} from 'sanity-plugin-utils'
+
+import {API_VERSION} from '../constants'
+import UserAssignment from './UserAssignment'
+
+const UserAssignmentInput: FunctionComponent<
+  ArrayOfPrimitivesInputProps<string | number | boolean, ArraySchemaType>
+> = (props) => {
+  const documentId = useFormValue([`documentId`])
+  const userList = useProjectUsers({apiVersion: API_VERSION})
+
+  const stringValue =
+    Array.isArray(props?.value) && props?.value?.length
+      ? props.value.map((item) => String(item))
+      : []
+
+  return (
+    <Card border padding={1}>
+      <UserAssignment userList={userList} assignees={stringValue} documentId={String(documentId)} />
+    </Card>
+  )
+}
+
+export default UserAssignmentInput

package/src/components/UserDisplay.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {Button, Grid, Popover, useClickOutside} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+
+import AvatarGroup from './DocumentCard/AvatarGroup'
+import {User} from '../types'
+import UserAssignment from './UserAssignment'
+
+type UserDisplayProps = {
+  userList: User[]
+  assignees: string[]
+  documentId: string
+  disabled?: boolean
+}
+
+export default function UserDisplay(props: UserDisplayProps) {
+  const {assignees, userList, documentId, disabled = false} = props
+
+  const [button] = React.useState(null)
+  const [popover, setPopover] = React.useState(null)
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const close = React.useCallback(() => setIsOpen(false), [])
+  const open = React.useCallback(() => setIsOpen(true), [])
+
+  useClickOutside(close, [button, popover])
+
+  return (
+    <Popover
+      // @ts-ignore
+      ref={setPopover}
+      content={<UserAssignment userList={userList} assignees={assignees} documentId={documentId} />}
+      portal
+      open={isOpen}
+    >
+      {!assignees || assignees.length === 0 ? (
+        <Button
+          onClick={open}
+          fontSize={1}
+          padding={2}
+          tabIndex={-1}
+          icon={AddIcon}
+          text="Assign"
+          tone="positive"
+          mode="ghost"
+          disabled={disabled}
+        />
+      ) : (
+        <Grid>
+          <Button onClick={open} padding={0} mode="bleed" disabled={disabled}>
+            <AvatarGroup users={userList.filter((u) => assignees.includes(u.id))} />
+          </Button>
+        </Grid>
+      )}
+    </Popover>
+  )
+}

package/src/components/Verify.tsx

@@ -0,0 +1,297 @@
+import {Button, useToast} from '@sanity/ui'
+import {LexoRank} from 'lexorank'
+import React from 'react'
+import {useClient} from 'sanity'
+import {UserExtended} from 'sanity-plugin-utils'
+
+import {API_VERSION} from '../constants'
+import {generateMultipleOrderRanks} from '../helpers/generateMultipleOrderRanks'
+import {SanityDocumentWithMetadata, State} from '../types'
+import FloatingCard from './FloatingCard'
+
+type VerifyProps = {
+  data: SanityDocumentWithMetadata[]
+  userList: UserExtended[]
+  states: State[]
+}
+
+// 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()
+
+  // A lot of error-checking
+  const documentsWithoutValidMetadataIds = data?.length
+    ? data.reduce((acc, cur) => {
+        const {documentId, state} = cur._metadata ?? {}
+        const stateExists = states.find((s) => s.id === state)
+
+        return !stateExists && documentId ? [...acc, documentId] : acc
+      }, [] as string[])
+    : []
+
+  const documentsWithInvalidUserIds =
+    data?.length && userList?.length
+      ? data.reduce((acc, cur) => {
+          const {documentId, assignees} = cur._metadata ?? {}
+          const allAssigneesExist = assignees?.length
+            ? assignees?.every((a) => userList.find((u) => u.id === a))
+            : true
+
+          return !allAssigneesExist && documentId ? [...acc, documentId] : acc
+        }, [] as string[])
+      : []
+
+  const documentsWithoutOrderIds = data?.length
+    ? data.reduce((acc, cur) => {
+        const {documentId, orderRank} = cur._metadata ?? {}
+
+        return !orderRank && documentId ? [...acc, documentId] : acc
+      }, [] 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[]) => {
+      toast.push({
+        title: 'Correcting...',
+        status: 'info',
+      })
+
+      const tx = ids.reduce((item, documentId) => {
+        return item.patch(`workflow-metadata.${documentId}`, {
+          set: {state: states[0].id},
+        })
+      }, client.transaction())
+
+      await tx.commit()
+
+      toast.push({
+        title: `Corrected ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [client, states, toast]
+  )
+
+  // Remove users that are no longer in the project from documents
+  const removeUsersFromDocuments = React.useCallback(
+    async (ids: string[]) => {
+      toast.push({
+        title: 'Removing users...',
+        status: 'info',
+      })
+
+      const tx = ids.reduce((item, documentId) => {
+        const {assignees} =
+          data.find((d) => d._id === documentId)?._metadata ?? {}
+        const validAssignees = assignees?.length
+          ? // eslint-disable-next-line max-nested-callbacks
+            assignees.filter((a) => userList.find((u) => u.id === a)?.id)
+          : []
+
+        return item.patch(`workflow-metadata.${documentId}`, {
+          set: {assignees: validAssignees},
+        })
+      }, client.transaction())
+
+      await tx.commit()
+
+      toast.push({
+        title: `Corrected ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [client, data, toast, userList]
+  )
+
+  // Add order value to metadata documents
+  const addOrderToDocuments = React.useCallback(
+    async (ids: string[]) => {
+      toast.push({
+        title: 'Adding ordering...',
+        status: 'info',
+      })
+
+      // Get first and second order values, if they exist
+      const [firstOrder, secondOrder] = [...data]
+        .slice(0, 2)
+        .map((d) => d._metadata?.orderRank)
+      const minLexo = firstOrder ? LexoRank.parse(firstOrder) : undefined
+      const maxLexo = secondOrder ? LexoRank.parse(secondOrder) : undefined
+      const ranks = generateMultipleOrderRanks(ids.length, minLexo, maxLexo)
+
+      const tx = client.transaction()
+
+      // Create a new in-between value for each document
+      for (let index = 0; index < ids.length; index += 1) {
+        tx.patch(`workflow-metadata.${ids[index]}`, {
+          set: {orderRank: ranks[index].toString()},
+        })
+      }
+
+      await tx.commit()
+
+      toast.push({
+        title: `Added order to ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [data, client, toast]
+  )
+
+  // Reset order value on all metadata documents
+  const resetOrderOfAllDocuments = React.useCallback(
+    async (ids: string[]) => {
+      toast.push({
+        title: 'Adding ordering...',
+        status: 'info',
+      })
+
+      const ranks = generateMultipleOrderRanks(ids.length)
+
+      const tx = client.transaction()
+
+      // Create a new in-between value for each document
+      for (let index = 0; index < ids.length; index += 1) {
+        tx.patch(`workflow-metadata.${ids[index]}`, {
+          set: {orderRank: ranks[index].toString()},
+        })
+      }
+
+      await tx.commit()
+
+      toast.push({
+        title: `Added order to ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [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 ? (
+        <Button
+          tone="caution"
+          mode="ghost"
+          onClick={() => correctDocuments(documentsWithoutValidMetadataIds)}
+          text={
+            documentsWithoutValidMetadataIds.length === 1
+              ? `Correct 1 Document State`
+              : `Correct ${documentsWithoutValidMetadataIds.length} Document States`
+          }
+        />
+      ) : null}
+      {documentsWithInvalidUserIds.length > 0 ? (
+        <Button
+          tone="caution"
+          mode="ghost"
+          onClick={() => removeUsersFromDocuments(documentsWithInvalidUserIds)}
+          text={
+            documentsWithInvalidUserIds.length === 1
+              ? `Remove Invalid Users from 1 Document`
+              : `Remove Invalid Users from ${documentsWithInvalidUserIds.length} Documents`
+          }
+        />
+      ) : null}
+      {documentsWithoutOrderIds.length > 0 ? (
+        <Button
+          tone="caution"
+          mode="ghost"
+          onClick={() => addOrderToDocuments(documentsWithoutOrderIds)}
+          text={
+            documentsWithoutOrderIds.length === 1
+              ? `Set Order for 1 Document`
+              : `Set Order for ${documentsWithoutOrderIds.length} Documents`
+          }
+        />
+      ) : null}
+      {documentsWithDuplicatedOrderIds.length > 0 ? (
+        <>
+          <Button
+            tone="caution"
+            mode="ghost"
+            onClick={() => addOrderToDocuments(documentsWithDuplicatedOrderIds)}
+            text={
+              documentsWithDuplicatedOrderIds.length === 1
+                ? `Set Unique Order for 1 Document`
+                : `Set Unique Order for ${documentsWithDuplicatedOrderIds.length} Documents`
+            }
+          />
+          <Button
+            tone="caution"
+            mode="ghost"
+            onClick={() =>
+              resetOrderOfAllDocuments(
+                data.map((doc) => String(doc._metadata?.documentId))
+              )
+            }
+            text={
+              data.length === 1
+                ? `Reset Order for 1 Document`
+                : `Reset Order for all ${data.length} Documents`
+            }
+          />
+        </>
+      ) : null}
+      {orphanedMetadataDocumentIds.length > 0 ? (
+        <Button
+          text="Cleanup orphaned metadata"
+          onClick={handleOrphans}
+          tone="caution"
+          mode="ghost"
+        />
+      ) : null}
+    </FloatingCard>
+  )
+}