fix(sanity): preserve form (as readOnly) when reconnecting (#5884)

Author: bjoerge

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

@@ -10,7 +10,6 @@ import {
   FormBuilder,
   type FormDocumentValue,
   fromMutationPatches,
-  LoadingBlock,
   type PatchMsg,
   PresenceOverlay,
   useDocumentPresence,
@@ -48,6 +47,7 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
     ready,
     formState,
     onFocus,
+    connectionState,
     onBlur,
     onSetCollapsedPath,
     onPathOpen,
@@ -148,10 +148,6 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   //   [documentId]
   // )
 
-  if (!ready) {
-    return <LoadingBlock showText />
-  }
-
   return (
     <Container
       hidden={hidden}
@@ -163,49 +159,7 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
     >
       <PresenceOverlay margins={margins}>
         <Box as="form" onSubmit={preventDefault} ref={setRef}>
-          {ready ? (
-            formState === null || hidden ? (
-              <Box padding={2}>
-                <Text>{t('document-view.form-view.form-hidden')}</Text>
-              </Box>
-            ) : (
-              <>
-                <FormHeader
-                  documentId={documentId}
-                  schemaType={formState.schemaType}
-                  title={title}
-                />
-                <FormBuilder
-                  __internal_fieldActions={fieldActions}
-                  __internal_patchChannel={patchChannel}
-                  collapsedFieldSets={collapsedFieldSets}
-                  collapsedPaths={collapsedPaths}
-                  focusPath={formState.focusPath}
-                  changed={formState.changed}
-                  focused={formState.focused}
-                  groups={formState.groups}
-                  id="root"
-                  members={formState.members}
-                  onChange={onChange}
-                  onFieldGroupSelect={onSetActiveFieldGroup}
-                  onPathBlur={onBlur}
-                  onPathFocus={onFocus}
-                  onPathOpen={onPathOpen}
-                  onSetFieldSetCollapsed={onSetCollapsedFieldSet}
-                  onSetPathCollapsed={onSetCollapsedPath}
-                  presence={presence}
-                  readOnly={formState.readOnly}
-                  schemaType={formState.schemaType}
-                  validation={validation}
-                  value={
-                    // note: the form state doesn't have a typed concept of a "document" value
-                    // but these should be compatible
-                    formState.value as FormDocumentValue
-                  }
-                />
-              </>
-            )
-          ) : (
+          {connectionState === 'connecting' ? (
             <Delay ms={300}>
               {/* TODO: replace with loading block */}
               <Flex align="center" direction="column" height="fill" justify="center">
@@ -217,6 +171,42 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
                 </Box>
               </Flex>
             </Delay>
+          ) : formState === null || hidden ? (
+            <Box padding={2}>
+              <Text>{t('document-view.form-view.form-hidden')}</Text>
+            </Box>
+          ) : (
+            <>
+              <FormHeader documentId={documentId} schemaType={formState.schemaType} title={title} />
+              <FormBuilder
+                __internal_fieldActions={fieldActions}
+                __internal_patchChannel={patchChannel}
+                collapsedFieldSets={collapsedFieldSets}
+                collapsedPaths={collapsedPaths}
+                focusPath={formState.focusPath}
+                changed={formState.changed}
+                focused={formState.focused}
+                groups={formState.groups}
+                id="root"
+                members={formState.members}
+                onChange={onChange}
+                onFieldGroupSelect={onSetActiveFieldGroup}
+                onPathBlur={onBlur}
+                onPathFocus={onFocus}
+                onPathOpen={onPathOpen}
+                onSetFieldSetCollapsed={onSetCollapsedFieldSet}
+                onSetPathCollapsed={onSetCollapsedPath}
+                presence={presence}
+                readOnly={connectionState === 'reconnecting' || formState.readOnly}
+                schemaType={formState.schemaType}
+                validation={validation}
+                value={
+                  // note: the form state doesn't have a typed concept of a "document" value
+                  // but these should be compatible
+                  formState.value as FormDocumentValue
+                }
+              />
+            </>
           )}
         </Box>
       </PresenceOverlay>

packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx

@@ -6,7 +6,7 @@ import {useDocumentPane} from '../../useDocumentPane'
 
 export function DocumentHeaderTitle(): ReactElement {
   const {connectionState, schemaType, title, value: documentValue} = useDocumentPane()
-  const subscribed = Boolean(documentValue) && connectionState === 'connected'
+  const subscribed = Boolean(documentValue) && connectionState !== 'connecting'
 
   const {error, value} = useValuePreview({
     enabled: subscribed,
@@ -15,7 +15,7 @@ export function DocumentHeaderTitle(): ReactElement {
   })
   const {t} = useTranslation(structureLocaleNamespace)
 
-  if (connectionState !== 'connected') {
+  if (connectionState === 'connecting') {
     return <></>
   }
 

packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx

@@ -39,7 +39,7 @@ export const DocumentPanelHeader = memo(
       menuItemGroups,
       schemaType,
       timelineStore,
-      ready,
+      connectionState,
       views,
       unstable_languageFilter,
     } = useDocumentPane()
@@ -96,7 +96,7 @@ export const DocumentPanelHeader = memo(
         <PaneHeader
           border
           ref={ref}
-          loading={!ready}
+          loading={connectionState === 'connecting'}
           title={<DocumentHeaderTitle />}
           tabs={showTabs && <DocumentHeaderTabs />}
           tabIndex={tabIndex}

packages/sanity/src/structure/panes/document/useDocumentTitle.ts

@@ -23,15 +23,15 @@ interface UseDocumentTitle {
  */
 export function useDocumentTitle(): UseDocumentTitle {
   const {connectionState, schemaType, title, value: documentValue} = useDocumentPane()
-  const subscribed = Boolean(documentValue) && connectionState === 'connected'
+  const subscribed = Boolean(documentValue) && connectionState !== 'connecting'
 
   const {error, value} = useValuePreview({
     enabled: subscribed,
     schemaType,
     value: documentValue,
   })
 
-  if (connectionState !== 'connected') {
+  if (connectionState === 'connecting') {
     return {error: undefined, title: undefined}
   }