fix(structure): make sync document toast dismisable (#7209)

* fix(structure): make sync document toast dismissable

* fix(structure): close conditional toast when component unmounts

* chore(structure): remove the usePrevious hook in useConditionalToast

* fix(structure): update sync lock toast id to make it unique across documents

Author: pedrobonamin

packages/sanity/src/structure/panes/document/documentPanel/documentViews/FormView.tsx

@@ -67,13 +67,19 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   const isLocked = editState?.transactionSyncLock?.enabled
   const {t} = useTranslation(structureLocaleNamespace)
 
-  useConditionalToast({
-    id: `sync-lock-${documentId}`,
-    status: 'warning',
-    enabled: isLocked,
-    title: t('document-view.form-view.sync-lock-toast.title'),
-    description: t('document-view.form-view.sync-lock-toast.description'),
-  })
+  const conditionalToastParams = useMemo(
+    () => ({
+      id: `sync-lock`,
+      status: 'warning' as const,
+      enabled: isLocked,
+      title: t('document-view.form-view.sync-lock-toast.title'),
+      description: t('document-view.form-view.sync-lock-toast.description'),
+      closable: true,
+    }),
+    [isLocked, t],
+  )
+
+  useConditionalToast(conditionalToastParams)
 
   useEffect(() => {
     const sub = documentStore.pair

packages/sanity/src/structure/panes/document/documentPanel/documentViews/useConditionalToast.ts

@@ -1,13 +1,5 @@
 import {type ToastParams, useToast} from '@sanity/ui'
-import {useEffect, useRef} from 'react'
-
-function usePrevious<T>(value: T) {
-  const ref = useRef<T>()
-  useEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref.current
-}
+import {useEffect} from 'react'
 
 // https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
 const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
@@ -18,19 +10,20 @@ const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
 export function useConditionalToast(params: ToastParams & {id: string; enabled?: boolean}) {
   const toast = useToast()
 
-  const wasEnabled = usePrevious(params.enabled)
   // note1: there's a `duration || 0` in Sanity UI's pushToast(), so make it non-falsey
   // note2: cannot use `Infinity` as duration, since it exceeds setTimeout's maximum delay value
   useEffect(() => {
-    if (!wasEnabled && params.enabled) {
+    if (params.enabled) {
       toast.push({...params, duration: LONG_ENOUGH_BUT_NOT_TOO_LONG})
     }
-    if (wasEnabled && !params.enabled) {
-      toast.push({
-        ...params,
-        // Note: @sanity/ui fallbacks to the default duration of 4s in case of falsey values
-        duration: 0.01,
-      })
+    return () => {
+      if (params.enabled) {
+        toast.push({
+          ...params,
+          // Note: @sanity/ui fallbacks to the default duration of 4s in case of falsey values
+          duration: 0.01,
+        })
+      }
     }
-  }, [params, toast, wasEnabled])
+  }, [params, toast])
 }