feat: comments create error handling

dev/test-studio/schema/debug/comments.ts

@@ -36,13 +36,6 @@ export const commentsDebug = defineType({
         },
       ],
     },
-    {
-      name: 'image',
-      type: 'image',
-      title: 'Image title',
-      hidden: ({document}) => Boolean(document?.hideFields),
-      description: DESCRIPTION,
-    },
     {
       type: 'array',
       name: 'arrayOfObjects',
@@ -111,5 +104,12 @@ export const commentsDebug = defineType({
         },
       ],
     },
+    {
+      name: 'image',
+      type: 'image',
+      title: 'Image title',
+      hidden: ({document}) => Boolean(document?.hideFields),
+      description: DESCRIPTION,
+    },
   ],
 })

packages/sanity/src/core/comments/__workshop__/CommentDeleteDialogStory.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
+import {CommentDeleteDialog} from '../components'
+
+export default function CommentDeleteDialogStory() {
+  const isParent = useBoolean('Is parent', false, 'Props') || false
+  const error = useBoolean('Error', false, 'Props') || false
+  const loading = useBoolean('Loading', false, 'Props') || false
+
+  return (
+    <CommentDeleteDialog
+      commentId="123"
+      error={error ? new Error('Something went wrong') : null}
+      isParent={isParent}
+      loading={loading}
+      onClose={useAction('onClose')}
+      onConfirm={useAction('onConfirm')}
+    />
+  )
+}

packages/sanity/src/core/comments/__workshop__/CommentsListStory.tsx

@@ -156,6 +156,9 @@ export default function CommentsListStory() {
       onEdit={handleEdit}
       onReply={handleReplySubmit}
       status={status}
+      onCreateRetry={() => {
+        // ...
+      }}
       onNewThreadCreate={() => {
         // ...
       }}

packages/sanity/src/core/comments/__workshop__/CommentsProviderStory.tsx

@@ -46,6 +46,9 @@ function Inner() {
       onNewThreadCreate={create.execute}
       onReply={create.execute}
       status="open"
+      onCreateRetry={() => {
+        // ...
+      }}
     />
   )
 }

packages/sanity/src/core/comments/__workshop__/index.ts

@@ -30,5 +30,10 @@ export default defineScope({
       title: 'MentionsMenu',
       component: lazy(() => import('./MentionsMenuStory')),
     },
+    {
+      name: 'comment-delete-dialog',
+      title: 'CommentDeleteDialog',
+      component: lazy(() => import('./CommentDeleteDialogStory')),
+    },
   ],
 })

packages/sanity/src/core/comments/components/CommentDeleteDialog.tsx

@@ -1,5 +1,6 @@
 import {Dialog, Grid, Button, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {TextWithTone} from '../../components'
 
 const DIALOG_COPY: Record<
   'thread' | 'comment',
@@ -60,10 +61,14 @@ export function CommentDeleteDialog(props: CommentDeleteDialogProps) {
         </Grid>
       }
     >
-      {error && <span>Something went wrong</span>}
-
-      <Stack padding={4}>
+      <Stack padding={4} space={4}>
         <Text>{body}</Text>
+
+        {error && (
+          <TextWithTone tone="critical">
+            An error occurred while deleting the comment. Please try again.
+          </TextWithTone>
+        )}
       </Stack>
     </Dialog>
   )

packages/sanity/src/core/comments/components/avatars/SpacerAvatar.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
+export const AVATAR_HEIGHT = 25
+
 const INLINE_STYLE: React.CSSProperties = {
-  minWidth: 25,
+  minWidth: AVATAR_HEIGHT,
 }
 
 /**

packages/sanity/src/core/comments/components/list/CommentThreadLayout.tsx

@@ -43,6 +43,9 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
   } = props
   const createNewThreadInputRef = useRef<CommentInputHandle>(null)
   const [displayNewThreadInput, setDisplayNewThreadInput] = useState<boolean>(false)
+  const [newThreadButtonElement, setNewThreadButtonElement] = useState<HTMLButtonElement | null>(
+    null,
+  )
 
   const onCreateNewThreadClick = useCallback(() => {
     setDisplayNewThreadInput(true)
@@ -75,8 +78,11 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
 
       onNewThreadCreate?.(nextComment)
       setDisplayNewThreadInput(false)
+
+      // When the new thread is created, we focus the button again
+      newThreadButtonElement?.focus()
     },
-    [onNewThreadCreate, path],
+    [newThreadButtonElement, onNewThreadCreate, path],
   )
 
   return (
@@ -114,6 +120,7 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
               mode="bleed"
               onClick={onCreateNewThreadClick}
               padding={2}
+              ref={setNewThreadButtonElement}
             />
           </TextTooltip>
         )}

packages/sanity/src/core/comments/components/list/CommentsList.tsx

@@ -47,6 +47,7 @@ export interface CommentsListProps {
   error: Error | null
   loading: boolean
   mentionOptions: MentionOptionsHookValue
+  onCreateRetry: (id: string) => void
   onDelete: (id: string) => void
   onEdit: (id: string, payload: CommentEditPayload) => void
   onNewThreadCreate: (payload: CommentCreatePayload) => void
@@ -78,6 +79,7 @@ export const CommentsList = forwardRef<CommentsListHandle, CommentsListProps>(fu
     error,
     loading,
     mentionOptions,
+    onCreateRetry,
     onDelete,
     onEdit,
     onNewThreadCreate,
@@ -202,12 +204,18 @@ export const CommentsList = forwardRef<CommentsListHandle, CommentsListProps>(fu
                       // We use slice() to avoid mutating the original array.
                       const replies = item.replies.slice().reverse()
 
+                      const canReply =
+                        status === 'open' &&
+                        item.parentComment._state?.type !== 'createError' &&
+                        item.parentComment._state?.type !== 'createRetrying'
+
                       return (
                         <CommentsListItem
-                          canReply={status === 'open'}
+                          canReply={canReply}
                           currentUser={currentUser}
                           key={item.parentComment._id}
                           mentionOptions={mentionOptions}
+                          onCreateRetry={onCreateRetry}
                           onDelete={onDelete}
                           onEdit={onEdit}
                           onPathFocus={onPathFocus}

packages/sanity/src/core/comments/components/list/CommentsListItem.tsx

@@ -46,6 +46,7 @@ interface CommentsListItemProps {
   canReply?: boolean
   currentUser: CurrentUser
   mentionOptions: MentionOptionsHookValue
+  onCreateRetry: (id: string) => void
   onDelete: (id: string) => void
   onEdit: (id: string, payload: CommentEditPayload) => void
   onPathFocus?: (path: Path) => void
@@ -60,6 +61,7 @@ export function CommentsListItem(props: CommentsListItemProps) {
     canReply,
     currentUser,
     mentionOptions,
+    onCreateRetry,
     onDelete,
     onEdit,
     onPathFocus,
@@ -137,67 +139,77 @@ export function CommentsListItem(props: CommentsListItemProps) {
   return (
     <Stack space={2}>
       <StyledThreadCard>
-        <Stack paddingBottom={canReply ? undefined : 1}>
-          <Stack as="ul" space={4}>
-            <Stack as="li">
+        <Stack
+          as="ul"
+          // We add some extra padding to the bottom of the thread root if the thread is resolved
+          // since the reply input is hidden in that case.
+          paddingBottom={parentComment.status === 'resolved' ? 1 : undefined}
+          space={4}
+        >
+          <Stack as="li">
+            <CommentsListItemLayout
+              canDelete={parentComment.authorId === currentUser.id}
+              canEdit={parentComment.authorId === currentUser.id}
+              comment={parentComment}
+              currentUser={currentUser}
+              hasError={parentComment._state?.type === 'createError'}
+              isParent
+              isRetrying={parentComment._state?.type === 'createRetrying'}
+              mentionOptions={mentionOptions}
+              onCreateRetry={onCreateRetry}
+              onDelete={onDelete}
+              onEdit={onEdit}
+              onPathFocus={onPathFocus}
+              onStatusChange={onStatusChange}
+            />
+          </Stack>
+
+          {showCollapseButton && !didExpand.current && (
+            <Flex gap={1} paddingY={1} sizing="border">
+              <SpacerAvatar />
+
+              <ExpandButton
+                fontSize={1}
+                iconRight={ChevronDownIcon}
+                mode="bleed"
+                onClick={handleExpand}
+                padding={2}
+                space={2}
+                text={expandButtonText}
+              />
+            </Flex>
+          )}
+
+          {splicedReplies.map((reply) => (
+            <Stack as="li" key={reply._id}>
               <CommentsListItemLayout
-                canDelete={parentComment.authorId === currentUser.id}
-                canEdit={parentComment.authorId === currentUser.id}
-                comment={parentComment}
+                canDelete={reply.authorId === currentUser.id}
+                canEdit={reply.authorId === currentUser.id}
+                comment={reply}
                 currentUser={currentUser}
-                isParent
+                hasError={reply._state?.type === 'createError'}
+                isRetrying={reply._state?.type === 'createRetrying'}
                 mentionOptions={mentionOptions}
+                onCreateRetry={onCreateRetry}
                 onDelete={onDelete}
                 onEdit={onEdit}
-                onPathFocus={onPathFocus}
-                onStatusChange={onStatusChange}
               />
             </Stack>
-
-            {showCollapseButton && !didExpand.current && (
-              <Flex gap={1} paddingY={1} sizing="border">
-                <SpacerAvatar />
-
-                <ExpandButton
-                  fontSize={1}
-                  iconRight={ChevronDownIcon}
-                  mode="bleed"
-                  onClick={handleExpand}
-                  padding={2}
-                  space={2}
-                  text={expandButtonText}
-                />
-              </Flex>
-            )}
-
-            {splicedReplies.map((reply) => (
-              <Stack as="li" key={reply._id}>
-                <CommentsListItemLayout
-                  canDelete={reply.authorId === currentUser.id}
-                  canEdit={reply.authorId === currentUser.id}
-                  comment={reply}
-                  currentUser={currentUser}
-                  mentionOptions={mentionOptions}
-                  onDelete={onDelete}
-                  onEdit={onEdit}
-                />
-              </Stack>
-            ))}
-
-            {canReply && (
-              <CommentInput
-                currentUser={currentUser}
-                expandOnFocus
-                mentionOptions={mentionOptions}
-                onChange={setValue}
-                onEditDiscard={cancelEdit}
-                onSubmit={handleReplySubmit}
-                placeholder="Reply"
-                ref={replyInputRef}
-                value={value}
-              />
-            )}
-          </Stack>
+          ))}
+
+          {canReply && (
+            <CommentInput
+              currentUser={currentUser}
+              expandOnFocus
+              mentionOptions={mentionOptions}
+              onChange={setValue}
+              onEditDiscard={cancelEdit}
+              onSubmit={handleReplySubmit}
+              placeholder="Reply"
+              ref={replyInputRef}
+              value={value}
+            />
+          )}
         </Stack>
       </StyledThreadCard>
     </Stack>