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

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/Validators.tsx

@@ -0,0 +1,196 @@
+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'
+
+type ValidatorsProps = {
+  data: SanityDocumentWithMetadata[]
+  userList: UserExtended[]
+  states: State[]
+}
+
+export default function Validators({data, userList, states}: ValidatorsProps) {
+  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
+    ? 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[])
+    : []
+
+  // 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 order value
+      const firstOrder = data[0]?._metadata?.orderRank
+      let newLexo =
+        firstOrder && data.length !== ids.length
+          ? LexoRank.parse(firstOrder)
+          : LexoRank.min()
+
+      const tx = client.transaction()
+
+      for (let index = 0; index < ids.length; index += 1) {
+        newLexo = newLexo.genNext().genNext()
+
+        tx.patch(`workflow-metadata.${ids[index]}`, {
+          set: {orderRank: newLexo.toString()},
+        })
+      }
+
+      await tx.commit()
+
+      toast.push({
+        title: `Added order to ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [data, client, toast]
+  )
+
+  return (
+    <FloatingCard>
+      {documentsWithoutValidMetadataIds.length > 0 ? (
+        <Button
+          tone="caution"
+          onClick={() => correctDocuments(documentsWithoutValidMetadataIds)}
+          text={
+            documentsWithoutValidMetadataIds.length === 1
+              ? `Correct 1 Document State`
+              : `Correct ${documentsWithoutValidMetadataIds.length} Document States`
+          }
+        />
+      ) : null}
+      {documentsWithInvalidUserIds.length > 0 ? (
+        <Button
+          tone="caution"
+          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"
+          onClick={() => addOrderToDocuments(documentsWithoutOrderIds)}
+          text={
+            documentsWithoutOrderIds.length === 1
+              ? `Set Order for 1 Document`
+              : `Set Order for ${documentsWithoutOrderIds.length} Documents`
+          }
+        />
+      ) : null}
+      {/* <Button
+        tone="caution"
+        onClick={() =>
+          addOrderToDocuments(
+            data.map((doc) => String(doc._metadata?.documentId))
+          )
+        }
+        text={
+          data.length === 1
+            ? `Reset Order for 1 Document`
+            : `Reset Order for all ${data.length} Documents`
+        }
+      /> */}
+    </FloatingCard>
+  )
+}