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

package/src/components/DocumentCard/index.tsx

@@ -1,88 +1,194 @@
 /* eslint-disable react/prop-types */
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Popover,
-  Stack,
-  useClickOutside,
-  useTheme,
-} from '@sanity/ui'
-import {AddIcon, DragHandleIcon} from '@sanity/icons'
-import React, {useState} from 'react'
-import {useSchema, SchemaType} from 'sanity'
-import {UserSelectMenu} from 'sanity-plugin-utils'
+import {DragHandleIcon} from '@sanity/icons'
+import {Box, Card, CardTone, Flex, Stack, useTheme} from '@sanity/ui'
+import {useEffect, useMemo} from 'react'
+import {SchemaType, useSchema, useValidationStatus} from 'sanity'
 import {Preview} from 'sanity'
 
+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 {SanityDocumentWithMetadata, User} from '../../types'
-import AvatarGroup from './AvatarGroup'
-import UserAssignment from '../UserAssignment'
+import {ValidationStatus} from './ValidationStatus'
 
 type DocumentCardProps = {
-  userList: User[]
+  isDragDisabled: boolean
+  userRoleCanDrop: boolean
   isDragging: boolean
   item: SanityDocumentWithMetadata
+  states: State[]
+  toggleInvalidDocumentId: (
+    documentId: string,
+    action: 'ADD' | 'REMOVE'
+  ) => void
+  userList: User[]
 }
 
 export function DocumentCard(props: DocumentCardProps) {
-  const {userList, isDragging, item} = props
+  const {
+    isDragDisabled,
+    userRoleCanDrop,
+    isDragging,
+    item,
+    states,
+    toggleInvalidDocumentId,
+    userList,
+  } = props
   const {assignees = [], documentId} = item._metadata ?? {}
   const schema = useSchema()
 
+  // 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'
+  const defaultCardTone = isDarkMode ? `transparent` : `default`
+  const {validation = [], isValidating} = useValidationStatus(
+    documentId ?? ``,
+    item._type
+  )
 
-  // Open/close handler
-  // const [popoverRef, setPopoverRef] = useState(null)
-  // const [openId, setOpenId] = useState<string | undefined>(``)
+  const cardTone = useMemo(() => {
+    let tone: CardTone = defaultCardTone
 
-  // useClickOutside(() => setOpenId(``), [popoverRef])
+    if (!userRoleCanDrop) return isDarkMode ? `default` : `transparent`
+    if (!documentId) return tone
+    if (isDragging) tone = `positive`
 
-  // const handleKeyDown = React.useCallback((e) => {
-  //   if (e.key === 'Escape') {
-  //     setOpenId(``)
-  //   }
-  // }, [])
+    if (!isValidating && validation.length > 0) {
+      if (validation.some((v) => v.level === 'error')) {
+        tone = `critical`
+      } else {
+        tone = `caution`
+      }
+    }
+
+    return tone
+  }, [
+    isDarkMode,
+    userRoleCanDrop,
+    defaultCardTone,
+    documentId,
+    isDragging,
+    validation,
+    isValidating,
+  ])
+
+  // Update validation status
+  // Cannot be done in the above memo because it would set state during render
+  useEffect(() => {
+    if (!isValidating && validation.length > 0) {
+      if (validation.some((v) => v.level === 'error')) {
+        toggleInvalidDocumentId(documentId, 'ADD')
+      } else {
+        toggleInvalidDocumentId(documentId, 'REMOVE')
+      }
+    } else {
+      toggleInvalidDocumentId(documentId, 'REMOVE')
+    }
+  }, [documentId, isValidating, toggleInvalidDocumentId, validation])
+
+  const hasError = useMemo(
+    () => (isValidating ? false : validation.some((v) => v.level === 'error')),
+    [isValidating, validation]
+  )
+
+  const isLastState = useMemo(
+    () => states[states.length - 1].id === item._metadata?.state,
+    [states, item._metadata.state]
+  )
 
   return (
-    <Box paddingY={2} paddingX={3}>
-      <Card
-        radius={2}
-        shadow={isDragging ? 3 : 1}
-        tone={isDragging ? 'positive' : defaultCardTone}
-      >
+    <Box paddingBottom={3} paddingX={3}>
+      <Card radius={2} shadow={isDragging ? 3 : 1} tone={cardTone}>
         <Stack>
           <Card
             borderBottom
             radius={2}
             padding={3}
             paddingLeft={2}
-            tone="inherit"
+            tone={cardTone}
             style={{pointerEvents: 'none'}}
           >
             <Flex align="center" justify="space-between" gap={1}>
-              <Preview
-                layout="default"
-                value={item}
-                schemaType={schema.get(item._type) as SchemaType}
-              />
-              <DragHandleIcon style={{flexShrink: 0}} />
+              <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={1}>
-              {documentId && (
-                <UserAssignment
-                  userList={userList}
-                  assignees={assignees}
+            <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}
+              />
+              {isLastState ? (
+                <CompleteButton
                   documentId={documentId}
+                  disabled={!userRoleCanDrop}
                 />
-              )}
-
-              <EditButton id={item._id} type={item._type} />
+              ) : null}
             </Flex>
           </Card>
         </Stack>

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

@@ -0,0 +1,168 @@
+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 {UserExtended, UserSelectMenu} from 'sanity-plugin-utils'
+
+type FiltersProps = {
+  uniqueAssignedUsers: UserExtended[]
+  selectedUserIds: string[]
+  schemaTypes: string[]
+  selectedSchemaTypes: string[]
+  toggleSelectedUser: (userId: string) => void
+  resetSelectedUsers: () => void
+  toggleSelectedSchemaType: (schemaType: string) => void
+}
+
+export default function Filters(props: FiltersProps) {
+  const {
+    uniqueAssignedUsers = [],
+    selectedUserIds,
+    schemaTypes,
+    selectedSchemaTypes,
+    toggleSelectedUser,
+    resetSelectedUsers,
+    toggleSelectedSchemaType,
+  } = props
+
+  const currentUser = useCurrentUser()
+  const schema = useSchema()
+
+  const onAdd = useCallback(
+    (id: string) => {
+      if (!selectedUserIds.includes(id)) {
+        toggleSelectedUser(id)
+      }
+    },
+    [selectedUserIds, toggleSelectedUser]
+  )
+
+  const onRemove = useCallback(
+    (id: string) => {
+      if (selectedUserIds.includes(id)) {
+        toggleSelectedUser(id)
+      }
+    },
+    [selectedUserIds, toggleSelectedUser]
+  )
+
+  const onClear = useCallback(() => {
+    resetSelectedUsers()
+  }, [resetSelectedUsers])
+
+  if (uniqueAssignedUsers.length === 0 && schemaTypes.length < 2) {
+    return null
+  }
+
+  const meInUniqueAssignees =
+    currentUser?.id && uniqueAssignedUsers.find((u) => u.id === currentUser.id)
+  const uniqueAssigneesNotMe = uniqueAssignedUsers.filter(
+    (u) => u.id !== currentUser?.id
+  )
+
+  return (
+    <Card tone="primary" padding={2} borderBottom style={{overflowX: 'hidden'}}>
+      <Flex align="center">
+        <Flex align="center" gap={1} flex={1}>
+          {uniqueAssignedUsers.length > 5 ? (
+            <Card tone="default">
+              <MenuButton
+                button={
+                  <Button
+                    text="Filter Assignees"
+                    tone="primary"
+                    icon={UserIcon}
+                  />
+                }
+                id="user-filters"
+                menu={
+                  <Menu>
+                    <UserSelectMenu
+                      value={selectedUserIds}
+                      userList={uniqueAssignedUsers}
+                      onAdd={onAdd}
+                      onRemove={onRemove}
+                      onClear={onClear}
+                      labels={{
+                        addMe: 'Filter mine',
+                        removeMe: 'Clear mine',
+                        clear: 'Clear filters',
+                      }}
+                    />
+                  </Menu>
+                }
+                popover={{portal: true}}
+              />
+            </Card>
+          ) : (
+            <>
+              {meInUniqueAssignees ? (
+                <>
+                  <Button
+                    padding={0}
+                    mode={
+                      selectedUserIds.includes(currentUser.id)
+                        ? `default`
+                        : `bleed`
+                    }
+                    onClick={() => toggleSelectedUser(currentUser.id)}
+                  >
+                    <Flex padding={1} align="center" justify="center">
+                      <UserAvatar user={currentUser.id} size={1} withTooltip />
+                    </Flex>
+                  </Button>
+                  <Card borderRight style={{height: 30}} tone="inherit" />
+                </>
+              ) : null}
+              {uniqueAssigneesNotMe.map((user) => (
+                <Button
+                  key={user.id}
+                  padding={0}
+                  mode={selectedUserIds.includes(user.id) ? `default` : `bleed`}
+                  onClick={() => toggleSelectedUser(user.id)}
+                >
+                  <Flex padding={1} align="center" justify="center">
+                    <UserAvatar user={user} size={1} withTooltip />
+                  </Flex>
+                </Button>
+              ))}
+
+              {selectedUserIds.length > 0 ? (
+                <Button
+                  text="Clear"
+                  onClick={resetSelectedUsers}
+                  mode="ghost"
+                  icon={ResetIcon}
+                />
+              ) : null}
+            </>
+          )}
+        </Flex>
+
+        {schemaTypes.length > 0 ? (
+          <Flex align="center" gap={1}>
+            {schemaTypes.map((typeName) => {
+              const schemaType = schema.get(typeName)
+
+              if (!schemaType) {
+                return null
+              }
+
+              return (
+                <Button
+                  key={typeName}
+                  text={schemaType?.title ?? typeName}
+                  icon={schemaType?.icon ?? undefined}
+                  mode={
+                    selectedSchemaTypes.includes(typeName) ? `default` : `ghost`
+                  }
+                  onClick={() => toggleSelectedSchemaType(typeName)}
+                />
+              )
+            })}
+          </Flex>
+        ) : null}
+      </Flex>
+    </Card>
+  )
+}

package/src/components/FloatingCard.tsx

@@ -0,0 +1,29 @@
+import {PropsWithChildren} from 'react'
+import styled, {css} from 'styled-components'
+import {Card, Grid} from '@sanity/ui'
+import {motion, AnimatePresence} from 'framer-motion'
+
+const StyledFloatingCard = styled(Card)(
+  () => css`
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+  `
+)
+
+export default function FloatingCard({children}: PropsWithChildren) {
+  const childrenHaveValues = Array.isArray(children) ? children.some(Boolean) : Boolean(children)
+
+  return (
+    <AnimatePresence>
+      {childrenHaveValues ? (
+        <motion.div key="floater" initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}>
+          <StyledFloatingCard shadow={3} padding={3} margin={3} radius={3}>
+            <Grid gap={2}>{children}</Grid>
+          </StyledFloatingCard>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  )
+}

package/src/components/StateTitle/Status.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {Box, Text, Tooltip} from '@sanity/ui'
+
+type StatusProps = {
+  text: string
+  icon: React.ComponentType
+}
+
+export function Status(props: StatusProps) {
+  const {text, icon} = props
+  const Icon = icon
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>{text}</Text>
+        </Box>
+      }
+    >
+      <Text size={1}>
+        <Icon />
+      </Text>
+    </Tooltip>
+  )
+}

package/src/components/StateTitle/index.tsx

@@ -0,0 +1,73 @@
+import {Flex, Card, Badge, BadgeTone} from '@sanity/ui'
+import {InfoOutlineIcon, UserIcon} from '@sanity/icons'
+import styled, {css} from 'styled-components'
+
+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`
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  `
+)
+
+export default function StateTitle(props: StateTitleProps) {
+  const {state, requireAssignment, userRoleCanDrop, isDropDisabled, draggingFrom} = 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}
+        {/* {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} */}
+      </Flex>
+    </StyledStickyCard>
+  )
+}