@byline/admin 4.18.0 → 5.0.0

package/src/forms/form-renderer.tsx

@@ -21,7 +21,7 @@ import type {
 import { getAdminConfig } from '@byline/core'
 import type { DocumentPatch } from '@byline/core/patches'
 import { useTranslation } from '@byline/i18n/react'
-import { Alert, Button, ComboButton } from '@byline/ui/react'
+import { Alert, Button, ComboButton, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { sliceFieldAdmin } from '../fields/field-admin'
@@ -80,6 +80,15 @@ export interface SystemFieldsSubmitPayload {
 
 /** Props shared by both the public FormRenderer and its internal FormContent component. */
 export interface FormRendererProps {
+  mutationIssue?: 'stale' | 'reload' | 'lock' | 'unavailable' | 'committed' | null
+  mutationsBlocked?: boolean
+  observedRevision?: number
+  onMutationError?: (error: unknown) => 'blocked' | 'committed' | null | void
+  onTreeMutationCommitted?: (receipt: import('@byline/core').StructuralMutationReceipt) => void
+  scheduledPublicationsNeedReconfirmation?: boolean
+  scheduledPublicationsHref?: string
+  /** Explicit discard action; defaults to a complete server reload. */
+  onReloadDocument?: () => void | Promise<void>
   mode: 'create' | 'edit'
   fields: Field[]
   onSubmit: (data: any) => void | Promise<void>
@@ -196,6 +205,14 @@ export interface FormRendererProps {
 
 const FormContent = ({
   mode,
+  mutationIssue,
+  mutationsBlocked = false,
+  observedRevision,
+  onMutationError,
+  onTreeMutationCommitted,
+  scheduledPublicationsNeedReconfirmation = false,
+  scheduledPublicationsHref,
+  onReloadDocument,
   fields,
   onSubmit,
   onCancel,
@@ -263,6 +280,10 @@ const FormContent = ({
   const [isUploading, setIsUploading] = useState(false)
   const submittingRef = useRef(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const isBusy = isUploading || isSubmitting
+  const formRef = useRef<HTMLFormElement>(null)
+  const focusBeforeBusyRef = useRef<HTMLElement | null>(null)
+  const restoreFocusAfterBusyRef = useRef(false)
   // Block-only "save first" guard. Set true when the editor triggers a
   // guarded action (status change, duplicate, copy-to-locale) while the form
   // is dirty — those actions operate on the saved version, so unsaved edits
@@ -279,6 +300,7 @@ const FormContent = ({
   // escalated notice, and the schedule modal — so its state lives here and the
   // surfaces are rendered where each belongs.
   const scheduling = useScheduledPublication({
+    disabled: mutationsBlocked,
     schedule: scheduledPublication ?? null,
     onSchedule: onSchedulePublication,
     onConfirm: onConfirmScheduledPublication,
@@ -369,7 +391,25 @@ const FormContent = ({
   // The guard hook is injected by the consuming framework (prop > context > no-op fallback).
   const guardFromContext = useNavigationGuardAdapter()
   const useGuard = useNavigationGuardProp ?? guardFromContext
-  const guard = useGuard(hasChanges)
+  const [discarding, setDiscarding] = useState(false)
+  const [reloadFailed, setReloadFailed] = useState(false)
+  const warningRef = useRef<HTMLDivElement>(null)
+  const mutationBlockedRef = useRef(mutationsBlocked)
+  mutationBlockedRef.current = mutationsBlocked || discarding
+  const guard = useGuard(hasChanges && !discarding)
+  useEffect(() => {
+    if (mutationIssue) warningRef.current?.focus()
+  }, [mutationIssue])
+  useEffect(() => {
+    if (!discarding) return
+    // Let the guard's beforeunload listener detach before the explicit discard.
+    Promise.resolve()
+      .then(() => (onReloadDocument ? onReloadDocument() : window.location.reload()))
+      .catch(() => {
+        setDiscarding(false)
+        setReloadFailed(true)
+      })
+  }, [discarding, onReloadDocument])
 
   // Compute available status transitions
   const currentStatus = initialData?.status
@@ -392,6 +432,39 @@ const FormContent = ({
     return subscribeMeta(() => setFormData(getFieldValues()))
   }, [subscribeMeta, getFieldValues])
 
+  // `inert` removes the active control from the tab order while a save is in
+  // flight. Restore the editor's position after React has removed `inert`;
+  // when the original control became disabled, fall back to the first usable
+  // form control instead of leaving focus on <body>.
+  useEffect(() => {
+    if (isBusy || !restoreFocusAfterBusyRef.current) return
+    restoreFocusAfterBusyRef.current = false
+
+    if (mutationIssue) {
+      warningRef.current?.focus()
+      focusBeforeBusyRef.current = null
+      return
+    }
+    const original = focusBeforeBusyRef.current
+    focusBeforeBusyRef.current = null
+    const originalCanReceiveFocus =
+      original?.isConnected === true && !original.matches(':disabled, [aria-disabled="true"]')
+    const target = originalCanReceiveFocus
+      ? original
+      : formRef.current?.querySelector<HTMLElement>(
+          'input:not(:disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])'
+        )
+    target?.focus({ preventScroll: true })
+  }, [isBusy, mutationIssue])
+
+  const captureFocusBeforeBusy = useCallback(() => {
+    if (focusBeforeBusyRef.current != null) return
+    const activeElement = document.activeElement
+    if (!(activeElement instanceof HTMLElement) || !formRef.current?.contains(activeElement)) return
+    focusBeforeBusyRef.current = activeElement
+    restoreFocusAfterBusyRef.current = true
+  }, [])
+
   const handleCancel = () => {
     if (onCancel && typeof onCancel === 'function') {
       onCancel()
@@ -406,9 +479,10 @@ const FormContent = ({
   // mid-flight; the mirrored state drives the Save button's disabled prop.
   const submitPayload = useCallback(
     async (payload: SystemFieldsSubmitPayload) => {
-      if (typeof onSubmit !== 'function') return
+      if (mutationBlockedRef.current || typeof onSubmit !== 'function') return
       if (submittingRef.current) return
       submittingRef.current = true
+      captureFocusBeforeBusy()
       setIsSubmitting(true)
       try {
         await onSubmit(payload)
@@ -421,10 +495,14 @@ const FormContent = ({
         setIsSubmitting(false)
       }
     },
-    [onSubmit, resetHasChanges]
+    [captureFocusBeforeBusy, onSubmit, resetHasChanges]
   )
 
   const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+    if (mutationBlockedRef.current) {
+      e.preventDefault()
+      return
+    }
     e.preventDefault()
 
     // Run field-level beforeValidate hooks (submit-time), then validate
@@ -438,9 +516,12 @@ const FormContent = ({
         return
       }
 
+      if (mutationBlockedRef.current) return
+
       // Execute any pending uploads before submitting
       const pendingUploads = getPendingUploads()
       if (pendingUploads.size > 0) {
+        captureFocusBeforeBusy()
         setIsUploading(true)
         try {
           const uploadResult = await executeUploadsWithProgress(
@@ -605,217 +686,329 @@ const FormContent = ({
     )
   }
 
+  const busyAnnouncement = isUploading
+    ? t('forms.actions.uploading')
+    : isSubmitting
+      ? t('forms.actions.saving')
+      : ''
+
   return (
-    <form
-      method="post"
-      noValidate
-      onSubmit={handleSubmit}
-      className={cx('byline-form', styles.form)}
-      inert={isUploading ? true : undefined}
-      aria-busy={isUploading}
-    >
-      <div className={cx('byline-form-heading-row', styles['heading-row'])}>
-        <h1 className={cx('byline-form-heading', styles.heading)}>{computedHeading}</h1>
-        {/* Source-locale anchor indicator removed pending heading-layout work.
+    <>
+      <span
+        className={cx('byline-form-busy-status', styles['busy-status'])}
+        role="status"
+        aria-live="polite"
+      >
+        {busyAnnouncement}
+      </span>
+      <div aria-busy={isBusy}>
+        <form
+          ref={formRef}
+          method="post"
+          noValidate
+          onSubmit={handleSubmit}
+          className={cx('byline-form', styles.form)}
+          inert={isBusy ? true : undefined}
+        >
+          <div className={cx('byline-form-heading-row', styles['heading-row'])}>
+            <h1 className={cx('byline-form-heading', styles.heading)}>{computedHeading}</h1>
+            {/* Source-locale anchor indicator removed pending heading-layout work.
             To re-enable: render `<SourceLocaleBadge locale={sourceLocale} />`
             here from `initialData.sourceLocale` (mismatch-only is the intended
             end state). See docs/08-internationalization/index.md. */}
-        {headerSlot}
-      </div>
-      <div className={cx('byline-form-status-bar', styles['status-bar'])}>
-        <div className={cx('byline-form-status-details', styles['status-details'])}>
-          <FormStatusDisplay
-            initialData={initialData}
-            workflowStatuses={workflowStatuses}
-            publishedVersion={publishedVersion}
-            onUnpublish={onUnpublish}
-            afterStatusCells={
-              <ScheduledPublicationCell state={scheduling.state} timeZone={scheduling.timeZone} />
-            }
-          />
-        </div>
-        <div className={cx('byline-form-actions', styles.actions)}>
-          <Button
-            className={cx('byline-form-actions-button', styles['actions-button'])}
-            size="sm"
-            intent="noeffect"
-            type="button"
-            onClick={handleCancel}
-          >
-            {hasChanges === false ? t('common.actions.close') : t('common.actions.cancel')}
-          </Button>
-          <Button
-            className={cx('byline-form-actions-button', styles['actions-button'])}
-            size="sm"
-            type="submit"
-            disabled={hasChanges === false || isUploading || isSubmitting}
-          >
-            {isUploading ? t('forms.actions.uploading') : t('common.actions.save')}
-          </Button>
-          {primaryStatus && onStatusChange && (
-            <div className={cx('byline-form-actions-status-wrap', styles['actions-status-wrap'])}>
-              <ComboButton
-                buttonClassName={cx(
-                  'byline-form-actions-combo-button',
-                  styles['actions-combo-button']
-                )}
-                triggerClassName={cx(
-                  'byline-form-actions-combo-trigger',
-                  styles['actions-combo-trigger']
-                )}
-                options={secondaryStatuses.map((s) => ({
-                  label: isTerminal
-                    ? t('forms.actions.revertTo', { label: s.label ?? s.name })
-                    : (s.verb ?? s.label ?? s.name),
-                  value: s.name,
-                }))}
-                sideOffset={5}
+            {headerSlot}
+          </div>
+          <div className={cx('byline-form-status-bar', styles['status-bar'])}>
+            <div className={cx('byline-form-status-details', styles['status-details'])}>
+              <FormStatusDisplay
+                disabled={mutationsBlocked || discarding}
+                initialData={initialData}
+                workflowStatuses={workflowStatuses}
+                publishedVersion={publishedVersion}
+                onUnpublish={onUnpublish}
+                afterStatusCells={
+                  <ScheduledPublicationCell
+                    state={scheduling.state}
+                    timeZone={scheduling.timeZone}
+                  />
+                }
+              />
+            </div>
+            <div className={cx('byline-form-actions', styles.actions)}>
+              <Button
+                className={cx('byline-form-actions-button', styles['actions-button'])}
                 size="sm"
+                intent="noeffect"
                 type="button"
-                intent={isTerminal ? 'info' : 'success'}
-                disabled={statusBusy}
-                onOptionSelect={async (value: string) => {
-                  if (hasChanges) {
-                    setShowUnsavedModal(true)
-                    return
-                  }
-                  setStatusBusy(true)
-                  try {
-                    await onStatusChange(value)
-                  } finally {
-                    setStatusBusy(false)
-                  }
-                }}
-                onButtonClick={
-                  isTerminal
-                    ? undefined
-                    : async () => {
-                        if (hasChanges) {
-                          setShowUnsavedModal(true)
-                          return
-                        }
-                        setStatusBusy(true)
-                        try {
-                          await onStatusChange(primaryStatus.name)
-                        } finally {
-                          setStatusBusy(false)
-                        }
-                      }
+                onClick={handleCancel}
+              >
+                {hasChanges === false ? t('common.actions.close') : t('common.actions.cancel')}
+              </Button>
+              <Button
+                className={cx('byline-form-actions-button', styles['actions-button'])}
+                size="sm"
+                type="submit"
+                disabled={
+                  mutationsBlocked ||
+                  discarding ||
+                  hasChanges === false ||
+                  isUploading ||
+                  isSubmitting
                 }
+                aria-label={isSubmitting ? t('common.actions.save') : undefined}
               >
-                {statusBusy
-                  ? '...'
-                  : isTerminal
-                    ? (primaryStatus.label ?? primaryStatus.name)
-                    : (primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name)}
-              </ComboButton>
+                {isUploading ? (
+                  t('forms.actions.uploading')
+                ) : (
+                  <span className={cx('byline-form-save-content', styles['save-content'])}>
+                    <span
+                      className={cx(
+                        'byline-form-save-label',
+                        styles['save-label'],
+                        isSubmitting && styles['save-label-hidden']
+                      )}
+                    >
+                      {t('common.actions.save')}
+                    </span>
+                    {isSubmitting ? (
+                      <span className={cx('byline-form-save-loader', styles['save-loader'])}>
+                        <LoaderEllipsis size={28} aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </span>
+                )}
+              </Button>
+              {primaryStatus && onStatusChange && (
+                <div
+                  className={cx('byline-form-actions-status-wrap', styles['actions-status-wrap'])}
+                >
+                  <ComboButton
+                    buttonClassName={cx(
+                      'byline-form-actions-combo-button',
+                      styles['actions-combo-button']
+                    )}
+                    triggerClassName={cx(
+                      'byline-form-actions-combo-trigger',
+                      styles['actions-combo-trigger']
+                    )}
+                    options={secondaryStatuses.map((s) => ({
+                      label: isTerminal
+                        ? t('forms.actions.revertTo', { label: s.label ?? s.name })
+                        : (s.verb ?? s.label ?? s.name),
+                      value: s.name,
+                    }))}
+                    sideOffset={5}
+                    size="sm"
+                    type="button"
+                    intent={isTerminal ? 'info' : 'success'}
+                    disabled={mutationsBlocked || discarding || statusBusy}
+                    onOptionSelect={async (value: string) => {
+                      if (mutationBlockedRef.current) return
+                      if (hasChanges) {
+                        setShowUnsavedModal(true)
+                        return
+                      }
+                      setStatusBusy(true)
+                      try {
+                        await onStatusChange(value)
+                      } catch (error) {
+                        onMutationError?.(error)
+                      } finally {
+                        setStatusBusy(false)
+                      }
+                    }}
+                    onButtonClick={
+                      isTerminal
+                        ? undefined
+                        : async () => {
+                            if (mutationBlockedRef.current) return
+                            if (hasChanges) {
+                              setShowUnsavedModal(true)
+                              return
+                            }
+                            setStatusBusy(true)
+                            try {
+                              await onStatusChange(primaryStatus.name)
+                            } catch (error) {
+                              onMutationError?.(error)
+                            } finally {
+                              setStatusBusy(false)
+                            }
+                          }
+                    }
+                  >
+                    {statusBusy
+                      ? '...'
+                      : isTerminal
+                        ? (primaryStatus.label ?? primaryStatus.name)
+                        : (primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name)}
+                  </ComboButton>
+                </div>
+              )}
+              <DocumentActions
+                disabled={mutationsBlocked || discarding}
+                publishedVersion={publishedVersion}
+                onUnpublish={onUnpublish}
+                onDelete={onDelete}
+                onDuplicate={onDuplicate}
+                sourceTitle={
+                  useAsTitle != null && initialData != null
+                    ? ((initialData as Record<string, unknown>)[useAsTitle] as
+                        | string
+                        | null
+                        | undefined)
+                    : null
+                }
+                onCopyToLocale={onCopyToLocale}
+                sourceLocale={contentLocale}
+                contentLocales={contentLocales}
+                hasUnsavedChanges={hasChanges}
+                onUnsavedChanges={() => setShowUnsavedModal(true)}
+                onDeleteLocale={onDeleteLocale}
+                defaultLocale={defaultLocale}
+                availableLocales={initialData?._availableVersionLocales as string[] | undefined}
+                scheduledPublicationState={scheduling.state}
+                onSchedulePublication={scheduling.openSchedule}
+                onConfirmScheduledPublication={scheduling.confirm}
+                onCancelScheduledPublication={scheduling.cancel}
+              />
+            </div>
+          </div>
+          {(mutationIssue || scheduledPublicationsNeedReconfirmation) && (
+            <div
+              ref={warningRef}
+              tabIndex={-1}
+              role="alert"
+              aria-live="assertive"
+              className={cx('byline-document-concurrency', styles.concurrency)}
+            >
+              {mutationIssue && (
+                <Alert
+                  intent="warning"
+                  icon
+                  close={false}
+                  title={t(`documentConcurrency.${mutationIssue}Title`)}
+                >
+                  <p>{t(`documentConcurrency.${mutationIssue}`)}</p>
+                  {mutationIssue !== 'committed' && (
+                    <Button
+                      type="button"
+                      disabled={discarding}
+                      onClick={() => {
+                        setReloadFailed(false)
+                        setDiscarding(true)
+                      }}
+                    >
+                      {t('documentConcurrency.reloadAction')}
+                    </Button>
+                  )}
+                  {reloadFailed && <p>{t('documentConcurrency.reloadFailed')}</p>}
+                </Alert>
+              )}
+              {scheduledPublicationsNeedReconfirmation && (
+                <Alert
+                  intent="warning"
+                  icon
+                  close={false}
+                  title={t('documentConcurrency.schedulesTitle')}
+                >
+                  <p>{t('documentConcurrency.schedules')}</p>
+                  {scheduledPublicationsHref && (
+                    <a href={scheduledPublicationsHref}>
+                      {t('documentConcurrency.reviewSchedules')}
+                    </a>
+                  )}
+                </Alert>
+              )}
             </div>
           )}
-          <DocumentActions
-            publishedVersion={publishedVersion}
-            onUnpublish={onUnpublish}
-            onDelete={onDelete}
-            onDuplicate={onDuplicate}
-            sourceTitle={
-              useAsTitle != null && initialData != null
-                ? ((initialData as Record<string, unknown>)[useAsTitle] as
-                    | string
-                    | null
-                    | undefined)
-                : null
-            }
-            onCopyToLocale={onCopyToLocale}
-            sourceLocale={contentLocale}
-            contentLocales={contentLocales}
-            hasUnsavedChanges={hasChanges}
-            onUnsavedChanges={() => setShowUnsavedModal(true)}
-            onDeleteLocale={onDeleteLocale}
-            defaultLocale={defaultLocale}
-            availableLocales={initialData?._availableVersionLocales as string[] | undefined}
-            scheduledPublicationState={scheduling.state}
-            onSchedulePublication={scheduling.openSchedule}
-            onConfirmScheduledPublication={scheduling.confirm}
-            onCancelScheduledPublication={scheduling.cancel}
+          <ScheduledPublicationNotice
+            state={scheduling.state}
+            timeZone={scheduling.timeZone}
+            busy={mutationsBlocked || discarding || scheduling.busy}
+            onConfirm={scheduling.confirm}
+            onReschedule={scheduling.openSchedule}
+            onCancel={scheduling.cancel}
           />
-        </div>
-      </div>
-      <ScheduledPublicationNotice
-        state={scheduling.state}
-        timeZone={scheduling.timeZone}
-        busy={scheduling.busy}
-        onConfirm={scheduling.confirm}
-        onReschedule={scheduling.openSchedule}
-        onCancel={scheduling.cancel}
-      />
-      {scheduling.modal}
-      {restoreWarnings && restoreWarnings.length > 0 && (
-        <Alert
-          className="m-0 mt-4"
-          intent="warning"
-          icon={true}
-          close={false}
-          title={t('forms.restoreWarnings.title')}
-        >
-          <p>{t('forms.restoreWarnings.body', { count: restoreWarnings.length })}</p>
-          <ul>
-            {restoreWarnings.map((w) => (
-              <li key={w}>{w}</li>
-            ))}
-          </ul>
-        </Alert>
-      )}
-      <div className={cx('byline-form-layout', styles.layout)}>
-        <div className={cx('byline-form-content', styles.content)}>
-          {layout.main.map((name) => renderItem(name))}
-        </div>
-        <div className={cx('byline-form-sidebar', styles.sidebar)}>
-          {showPath &&
-            (useAsPath ||
-              (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
-              <PathWidget
-                useAsPath={useAsPath}
-                collectionPath={collectionPath ?? ''}
-                defaultLocale={defaultLocale}
-                activeLocale={contentLocale}
-                mode={mode}
-                slugifier={pathSlugifier}
-                sourceLocked={pathSourceLocked}
-              />
-            )}
-          {tree && mode === 'edit' && typeof initialData?.id === 'string' && (
-            <TreePlacementWidget
-              collectionPath={collectionPath ?? ''}
-              documentId={initialData.id as string}
-              useAsTitle={useAsTitle}
-            />
+          {scheduling.modal}
+          {restoreWarnings && restoreWarnings.length > 0 && (
+            <Alert
+              className="m-0 mt-4"
+              intent="warning"
+              icon={true}
+              close={false}
+              title={t('forms.restoreWarnings.title')}
+            >
+              <p>{t('forms.restoreWarnings.body', { count: restoreWarnings.length })}</p>
+              <ul>
+                {restoreWarnings.map((w) => (
+                  <li key={w}>{w}</li>
+                ))}
+              </ul>
+            </Alert>
           )}
-          {advertiseLocales && (
-            <AvailableLocalesWidget
-              contentLocales={contentLocales ?? []}
-              availableVersionLocales={
-                (initialData?._availableVersionLocales as string[] | undefined) ?? []
-              }
+          <div className={cx('byline-form-layout', styles.layout)}>
+            <div className={cx('byline-form-content', styles.content)}>
+              {layout.main.map((name) => renderItem(name))}
+            </div>
+            <div className={cx('byline-form-sidebar', styles.sidebar)}>
+              {showPath &&
+                (useAsPath ||
+                  (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
+                  <PathWidget
+                    disabled={mutationsBlocked || discarding}
+                    useAsPath={useAsPath}
+                    collectionPath={collectionPath ?? ''}
+                    defaultLocale={defaultLocale}
+                    activeLocale={contentLocale}
+                    mode={mode}
+                    slugifier={pathSlugifier}
+                    sourceLocked={pathSourceLocked}
+                  />
+                )}
+              {tree && mode === 'edit' && typeof initialData?.id === 'string' && (
+                <TreePlacementWidget
+                  disabled={mutationsBlocked || discarding}
+                  onMutationError={onMutationError}
+                  onCommitted={onTreeMutationCommitted}
+                  expectedRevision={observedRevision ?? initialData.revision}
+                  collectionPath={collectionPath ?? ''}
+                  documentId={initialData.id as string}
+                  useAsTitle={useAsTitle}
+                />
+              )}
+              {advertiseLocales && (
+                <AvailableLocalesWidget
+                  disabled={mutationsBlocked || discarding}
+                  contentLocales={contentLocales ?? []}
+                  availableVersionLocales={
+                    (initialData?._availableVersionLocales as string[] | undefined) ?? []
+                  }
+                />
+              )}
+              {(layout.sidebar ?? []).map((name) => renderItem(name))}
+            </div>
+          </div>
+          {showUnsavedModal && <UnsavedChangesModal onClose={() => setShowUnsavedModal(false)} />}
+          {!mutationsBlocked && !discarding && pendingSystemFieldsSubmit != null && (
+            <SystemFieldsConfirmModal
+              contentDirty={pendingSystemFieldsSubmit.contentDirty}
+              pathDirty={pendingSystemFieldsSubmit.pathDirty}
+              availableLocalesDirty={pendingSystemFieldsSubmit.availableLocalesDirty}
+              onCancel={() => setPendingSystemFieldsSubmit(null)}
+              onConfirm={() => {
+                const payload = pendingSystemFieldsSubmit
+                setPendingSystemFieldsSubmit(null)
+                void submitPayload(payload)
+              }}
             />
           )}
-          {(layout.sidebar ?? []).map((name) => renderItem(name))}
-        </div>
+          {guard.isBlocked && (
+            <NavigationGuardModal onStay={guard.stay} onProceed={guard.proceed} />
+          )}
+        </form>
       </div>
-      {showUnsavedModal && <UnsavedChangesModal onClose={() => setShowUnsavedModal(false)} />}
-      {pendingSystemFieldsSubmit != null && (
-        <SystemFieldsConfirmModal
-          contentDirty={pendingSystemFieldsSubmit.contentDirty}
-          pathDirty={pendingSystemFieldsSubmit.pathDirty}
-          availableLocalesDirty={pendingSystemFieldsSubmit.availableLocalesDirty}
-          onCancel={() => setPendingSystemFieldsSubmit(null)}
-          onConfirm={() => {
-            const payload = pendingSystemFieldsSubmit
-            setPendingSystemFieldsSubmit(null)
-            void submitPayload(payload)
-          }}
-        />
-      )}
-      {guard.isBlocked && <NavigationGuardModal onStay={guard.stay} onProceed={guard.proceed} />}
-    </form>
+    </>
   )
 }