refactor(sanity): add changes to allow for comments in version docume…

…nts (#7404)

* refactor(sanity): add changes to allow for comments in version documents

* refactor(sanity): send version via prop to commentsListItemLayout

* docs(sanity): add comments for todo for readonly

* refactor(sanity): fix comments

* refactor(sanity): reverts changes to the potential ui for the future

* chore(sanity): remove "comments support" comment

* refactor(sanity): rename document ids and revert change in CommentsProvider for useEditState

* refactor(sanity): refactor solution for re-rendering panes when switching between versions

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

@@ -263,6 +263,9 @@ export const CommentsListItem = memo(function CommentsListItem(props: CommentsLi
     }
   }, [replies])
 
+  /* TODO - once we understand how to set up with "finished" releases
+  we need to add a condition to the readOnly prop in this component */
+
   const renderedReplies = useMemo(
     () =>
       splicedReplies.map((reply) => (

packages/sanity/src/core/comments/context/comments/CommentsProvider.tsx

@@ -68,7 +68,7 @@ type TransactionId = string
 export const CommentsProvider = memo(function CommentsProvider(props: CommentsProviderProps) {
   const {
     children,
-    documentId,
+    documentId: versionOrPublishedId,
     documentType,
     isCommentsOpen,
     onCommentsOpen,
@@ -84,14 +84,17 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
   const commentsEnabled = useCommentsEnabled()
   const [status, setStatus] = useState<CommentStatus>('open')
   const {client, createAddonDataset, isCreatingDataset} = useAddonDataset()
-  const publishedId = getPublishedId(documentId)
 
   const bundlePerspective = perspective?.startsWith('bundle.')
     ? perspective.split('bundle.').at(1)
     : undefined
 
-  // TODO: Allow versions to have separate comments.
-  const editState = useEditState(publishedId, documentType, 'default', bundlePerspective)
+  const editState = useEditState(
+    getPublishedId(versionOrPublishedId),
+    documentType,
+    'default',
+    bundlePerspective,
+  )
   const schemaType = useSchema().get(documentType)
   const currentUser = useCurrentUser()
 
@@ -120,7 +123,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
     error,
     loading,
   } = useCommentsStore({
-    documentId: publishedId,
+    documentId: versionOrPublishedId,
     client,
     transactionsIdMap,
     onLatestTransactionIdReceived: handleOnLatestTransactionIdReceived,
@@ -237,7 +240,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
         client,
         currentUser,
         dataset,
-        documentId: publishedId,
+        documentId: versionOrPublishedId,
         documentRevisionId,
         documentType,
         getComment,
@@ -265,7 +268,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
         client,
         currentUser,
         dataset,
-        publishedId,
+        versionOrPublishedId,
         documentRevisionId,
         documentType,
         getComment,
@@ -285,7 +288,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
 
   const ctxValue = useMemo(
     (): CommentsContextValue => ({
-      documentId,
+      documentId: versionOrPublishedId,
       documentType,
 
       isCreatingDataset,
@@ -318,7 +321,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
       mentionOptions,
     }),
     [
-      documentId,
+      versionOrPublishedId,
       documentType,
       isCreatingDataset,
       status,

packages/sanity/src/core/comments/store/useCommentsStore.ts

@@ -2,7 +2,7 @@ import {type ListenEvent, type ListenOptions, type SanityClient} from '@sanity/c
 import {useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react'
 import {catchError, of} from 'rxjs'
 
-import {getPublishedId} from '../../util'
+import {getPublishedId, isVersionId} from '../../util'
 import {type CommentDocument, type Loadable} from '../types'
 import {commentsReducer, type CommentsReducerAction, type CommentsReducerState} from './reducer'
 
@@ -64,7 +64,10 @@ export function useCommentsStore(opts: CommentsStoreOptions): CommentsStoreRetur
 
   const didInitialFetch = useRef<boolean>(false)
 
-  const params = useMemo(() => ({documentId: getPublishedId(documentId)}), [documentId])
+  const params = useMemo(
+    () => ({documentId: isVersionId(documentId) ? documentId : getPublishedId(documentId)}),
+    [documentId],
+  )
 
   const initialFetch = useCallback(async () => {
     if (!client) {

packages/sanity/src/structure/panes/document/DocumentPane.tsx

@@ -130,7 +130,7 @@ function DocumentPaneInner(props: DocumentPaneProviderProps) {
     <DocumentPaneProvider
       // this needs to be here to avoid formState from being re-used across (incompatible) document types
       // see https://github.com/sanity-io/sanity/discussions/3794 for a description of the problem
-      key={`${documentType}-${options.id}`}
+      key={`${documentType}-${options.id}-${paneRouter.perspective || ''}`}
       {...providerProps}
     >
       {/* NOTE: this is a temporary location for this provider until we */}

packages/sanity/src/structure/panes/document/comments/CommentsWrapper.tsx

@@ -1,8 +1,9 @@
-import {useCallback, useLayoutEffect, useRef} from 'react'
+import {useCallback, useLayoutEffect, useMemo, useRef} from 'react'
 import {
   COMMENTS_INSPECTOR_NAME,
   CommentsEnabledProvider,
   CommentsProvider,
+  getVersionId,
   useCommentsEnabled,
 } from 'sanity'
 import {useRouter} from 'sanity/router'
@@ -37,10 +38,14 @@ function CommentsProviderWrapper(props: CommentsWrapperProps) {
   const {children, documentId, documentType} = props
 
   const {enabled} = useCommentsEnabled()
-  const {connectionState, onPathOpen, inspector, openInspector} = useDocumentPane()
+  const {connectionState, onPathOpen, inspector, openInspector, version} = useDocumentPane()
   const router = useRouter()
   const {params, setParams, createPathWithParams, ...paneRouter} = usePaneRouter()
   const perspective = paneRouter.perspective ?? router.stickyParams.perspective
+  const versionOrPublishedId = useMemo(
+    () => (version ? getVersionId(documentId, version) : documentId),
+    [documentId, version],
+  )
 
   const selectedCommentId = params?.comment
   const paramsRef = useRef(params)
@@ -82,7 +87,7 @@ function CommentsProviderWrapper(props: CommentsWrapperProps) {
 
   return (
     <CommentsProvider
-      documentId={documentId}
+      documentId={versionOrPublishedId}
       documentType={documentType}
       getCommentLink={getCommentLink}
       isCommentsOpen={inspector?.name === COMMENTS_INSPECTOR_NAME}