@byline/admin 4.18.0 → 5.0.0

package/src/forms/document-actions.tsx

@@ -41,6 +41,7 @@ export interface DocumentActionsLocaleOption {
 }
 
 export function DocumentActions({
+  disabled = false,
   publishedVersion,
   onUnpublish,
   onDelete,
@@ -59,6 +60,7 @@ export function DocumentActions({
   onConfirmScheduledPublication,
   onCancelScheduledPublication,
 }: {
+  disabled?: boolean
   publishedVersion?: PublishedVersionInfo | null
   onUnpublish?: () => Promise<void>
   onDelete?: () => Promise<void>
@@ -221,24 +223,29 @@ export function DocumentActions({
     onDelete != null
 
   const handleOnDelete = () => {
+    if (disabled) return
     setShowDeleteConfirm(false)
     if (onDelete) {
-      onDelete()
+      void onDelete().catch(() => {})
     }
   }
 
   const handleOnDuplicate = async () => {
+    if (disabled) return
     if (!onDuplicate) return
     setDuplicateBusy(true)
     try {
       await onDuplicate()
       setShowDuplicateConfirm(false)
+    } catch {
+      // The host reports the failure and retains the editor observation.
     } finally {
       setDuplicateBusy(false)
     }
   }
 
   const handleOpenDuplicate = () => {
+    if (disabled) return
     // Duplicate copies the saved version — block when the form is dirty so
     // unsaved edits are not silently dropped from the copy.
     if (hasUnsavedChanges) {
@@ -249,6 +256,7 @@ export function DocumentActions({
   }
 
   const handleOpenCopyToLocale = () => {
+    if (disabled) return
     // Copy-to-Locale reads the saved version — block when the form is dirty.
     if (hasUnsavedChanges) {
       onUnsavedChanges?.()
@@ -263,17 +271,21 @@ export function DocumentActions({
   }
 
   const handleOnCopyToLocale = async () => {
+    if (disabled) return
     if (!onCopyToLocale || !copyTargetLocale) return
     setCopyToLocaleBusy(true)
     try {
       await onCopyToLocale({ targetLocale: copyTargetLocale, overwrite: copyOverwrite })
       setShowCopyToLocaleConfirm(false)
+    } catch {
+      // The host reports the failure and retains the editor observation.
     } finally {
       setCopyToLocaleBusy(false)
     }
   }
 
   const handleOpenDeleteLocale = () => {
+    if (disabled) return
     // Delete-Locale removes the saved version's locale content — block when
     // the form is dirty so the editor saves (or discards) first.
     if (hasUnsavedChanges) {
@@ -288,11 +300,14 @@ export function DocumentActions({
   }
 
   const handleOnDeleteLocale = async () => {
+    if (disabled) return
     if (!onDeleteLocale || !deleteTargetLocale) return
     setDeleteLocaleBusy(true)
     try {
       await onDeleteLocale({ targetLocale: deleteTargetLocale })
       setShowDeleteLocaleConfirm(false)
+    } catch {
+      // The host reports the failure and retains the editor observation.
     } finally {
       setDeleteLocaleBusy(false)
     }
@@ -311,6 +326,7 @@ export function DocumentActions({
       {hasAnyAction && (
         <DropdownComponent.Root>
           <DropdownComponent.Trigger
+            disabled={disabled}
             render={<IconButton variant="text" intent="noeffect" size="sm" />}
           >
             <EllipsisIcon
@@ -329,7 +345,7 @@ export function DocumentActions({
             >
               {/*{publishedVersion && (
               <>
-                <DropdownComponent.Item onClick={onUnpublish}>
+                <DropdownComponent.Item disabled={disabled} onClick={onUnpublish}>
                   <div className={cx('byline-form-actions-item', styles.item)}>
                     <span className={cx('byline-form-actions-item-icon', styles['item-icon'])} />
                     <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
@@ -343,10 +359,16 @@ export function DocumentActions({
               {schedulingActions.length > 0 && (
                 <>
                   {schedulingActions.map((action) => (
-                    <DropdownComponent.Item key={action.key} onClick={action.onSelect}>
+                    <DropdownComponent.Item
+                      disabled={disabled}
+                      key={action.key}
+                      onClick={action.onSelect}
+                    >
                       <div className={cx('byline-form-actions-item', styles.item)}>
                         <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                          <button type="button">{action.label}</button>
+                          <button type="button" disabled={disabled}>
+                            {action.label}
+                          </button>
                         </span>
                       </div>
                     </DropdownComponent.Item>
@@ -355,28 +377,34 @@ export function DocumentActions({
                 </>
               )}
               {copyToLocaleAvailable && (
-                <DropdownComponent.Item onClick={handleOpenCopyToLocale}>
+                <DropdownComponent.Item disabled={disabled} onClick={handleOpenCopyToLocale}>
                   <div className={cx('byline-form-actions-item', styles.item)}>
                     <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                      <button type="button">{t('documentActions.copyToLocaleMenuItem')}</button>
+                      <button type="button" disabled={disabled}>
+                        {t('documentActions.copyToLocaleMenuItem')}
+                      </button>
                     </span>
                   </div>
                 </DropdownComponent.Item>
               )}
               {deleteLocaleAvailable && (
-                <DropdownComponent.Item onClick={handleOpenDeleteLocale}>
+                <DropdownComponent.Item disabled={disabled} onClick={handleOpenDeleteLocale}>
                   <div className={cx('byline-form-actions-item', styles.item)}>
                     <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                      <button type="button">{t('documentActions.deleteLocale.menuItem')}</button>
+                      <button type="button" disabled={disabled}>
+                        {t('documentActions.deleteLocale.menuItem')}
+                      </button>
                     </span>
                   </div>
                 </DropdownComponent.Item>
               )}
               {onDuplicate && (
-                <DropdownComponent.Item onClick={handleOpenDuplicate}>
+                <DropdownComponent.Item disabled={disabled} onClick={handleOpenDuplicate}>
                   <div className={cx('byline-form-actions-item', styles.item)}>
                     <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                      <button type="button">{t('common.actions.duplicate')}</button>
+                      <button type="button" disabled={disabled}>
+                        {t('common.actions.duplicate')}
+                      </button>
                     </span>
                   </div>
                 </DropdownComponent.Item>
@@ -385,6 +413,7 @@ export function DocumentActions({
                 <>
                   <DropdownComponent.Separator />
                   <DropdownComponent.Item
+                    disabled={disabled}
                     onClick={() => {
                       setShowDeleteConfirm(true)
                     }}
@@ -454,7 +483,13 @@ export function DocumentActions({
             >
               {t('common.actions.cancel')}
             </Button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="danger" onClick={handleOnDelete}>
+            <Button
+              size="sm"
+              style={{ minWidth: '80px' }}
+              intent="danger"
+              disabled={disabled}
+              onClick={handleOnDelete}
+            >
               {t('common.actions.delete')}
             </Button>
           </Modal.Actions>
@@ -533,7 +568,7 @@ export function DocumentActions({
               onClick={() => {
                 if (!duplicateBusy) setShowDuplicateConfirm(false)
               }}
-              disabled={duplicateBusy}
+              disabled={disabled || duplicateBusy}
             >
               {t('common.actions.cancel')}
             </Button>
@@ -542,7 +577,7 @@ export function DocumentActions({
               style={{ minWidth: '80px' }}
               intent="primary"
               onClick={handleOnDuplicate}
-              disabled={duplicateBusy}
+              disabled={disabled || duplicateBusy}
             >
               {duplicateBusy
                 ? t('documentActions.duplicate.busyButton')
@@ -611,7 +646,7 @@ export function DocumentActions({
                 onValueChange={(value) => {
                   if (value != null) setCopyTargetLocale(value)
                 }}
-                disabled={copyToLocaleBusy}
+                disabled={disabled || copyToLocaleBusy}
               />
             </div>
             <div
@@ -623,7 +658,7 @@ export function DocumentActions({
                 name="overwrite"
                 label={t('documentActions.copyToLocale.overwriteLabel')}
                 checked={copyOverwrite}
-                disabled={copyToLocaleBusy}
+                disabled={disabled || copyToLocaleBusy}
                 helpText={t('documentActions.copyToLocale.overwriteHelp')}
                 onCheckedChange={(value) => {
                   setCopyOverwrite(value === true)
@@ -647,7 +682,7 @@ export function DocumentActions({
               onClick={() => {
                 if (!copyToLocaleBusy) setShowCopyToLocaleConfirm(false)
               }}
-              disabled={copyToLocaleBusy}
+              disabled={disabled || copyToLocaleBusy}
             >
               {t('common.actions.cancel')}
             </Button>
@@ -656,7 +691,7 @@ export function DocumentActions({
               style={{ minWidth: '80px' }}
               intent="primary"
               onClick={handleOnCopyToLocale}
-              disabled={copyToLocaleBusy || !copyTargetLocale}
+              disabled={disabled || copyToLocaleBusy || !copyTargetLocale}
             >
               {copyToLocaleBusy
                 ? t('documentActions.copyToLocale.busyButton')
@@ -711,7 +746,7 @@ export function DocumentActions({
                 onValueChange={(value) => {
                   if (value != null) setDeleteTargetLocale(value)
                 }}
-                disabled={deleteLocaleBusy}
+                disabled={disabled || deleteLocaleBusy}
               />
             </div>
             <p style={{ marginTop: 'var(--spacing-12)' }}>
@@ -734,7 +769,7 @@ export function DocumentActions({
               onClick={() => {
                 if (!deleteLocaleBusy) setShowDeleteLocaleConfirm(false)
               }}
-              disabled={deleteLocaleBusy}
+              disabled={disabled || deleteLocaleBusy}
             >
               {t('common.actions.cancel')}
             </Button>
@@ -743,7 +778,7 @@ export function DocumentActions({
               style={{ minWidth: '80px' }}
               intent="danger"
               onClick={handleOnDeleteLocale}
-              disabled={deleteLocaleBusy || !deleteTargetLocale}
+              disabled={disabled || deleteLocaleBusy || !deleteTargetLocale}
             >
               {deleteLocaleBusy
                 ? t('documentActions.deleteLocale.busyButton')

package/src/forms/form-renderer-submit.test.tsx

@@ -46,8 +46,8 @@ vi.mock('@byline/ui/react', async (importOriginal) => {
       Separator: () => <hr />,
     },
     Modal,
-    Input: ({ name, value, onChange }: any) => (
-      <input name={name} value={value ?? ''} onChange={onChange} />
+    Input: ({ id, name, value, onChange, disabled }: React.ComponentProps<'input'>) => (
+      <input id={id} name={name} disabled={disabled} value={value ?? ''} onChange={onChange} />
     ),
   }
 })
@@ -129,6 +129,16 @@ const submitForm = () => {
   })
 }
 
+const deferred = () => {
+  let resolve: () => void = () => {}
+  let reject: (reason?: unknown) => void = () => {}
+  const promise = new Promise<void>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise
+    reject = rejectPromise
+  })
+  return { promise, resolve, reject }
+}
+
 describe('FormRenderer submit contract', () => {
   const render = (props: Record<string, unknown>) =>
     renderInProvider(<FormRenderer {...(props as any)} />)
@@ -169,13 +179,97 @@ describe('FormRenderer submit contract', () => {
     expect(container.textContent).toContain('Cancel')
   })
 
-  it('ignores a second submit while the first is still in flight', async () => {
-    let release: () => void = () => {}
-    const gate = new Promise<void>((resolve) => {
-      release = resolve
+  it('shows a named busy indicator until onSubmit resolves', async () => {
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+    submitForm()
+    await act(async () => {})
+
+    const form = container.querySelector('form')
+    const busyRegion = form?.parentElement
+    const liveStatus = container.querySelector('[role="status"]')
+    const saveButton = container.querySelector<HTMLButtonElement>('button[type="submit"]')
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('true')
+    expect(form?.getAttribute('aria-busy')).toBeNull()
+    expect(form?.hasAttribute('inert')).toBe(true)
+    expect(liveStatus?.textContent).toBe('Saving…')
+    expect(busyRegion?.contains(liveStatus)).toBe(false)
+    expect(saveButton?.getAttribute('aria-label')).toBe('Save')
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).not.toBeNull()
+    expect(saveButton?.querySelector('.byline-form-save-label')?.textContent).toBe('Save')
+
+    await act(async () => {
+      submission.resolve()
+      await submission.promise
+    })
+
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('false')
+    expect(form?.hasAttribute('inert')).toBe(false)
+    expect(liveStatus?.textContent).toBe('')
+    expect(saveButton?.getAttribute('aria-label')).toBeNull()
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).toBeNull()
+  })
+
+  it('hides the busy indicator when onSubmit rejects', async () => {
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+    submitForm()
+    await act(async () => {})
+
+    const form = container.querySelector('form')
+    const busyRegion = form?.parentElement
+    const saveButton = container.querySelector<HTMLButtonElement>('button[type="submit"]')
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('true')
+    expect(form?.getAttribute('aria-busy')).toBeNull()
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).not.toBeNull()
+
+    await act(async () => {
+      submission.reject(new Error('save failed'))
+      try {
+        await submission.promise
+      } catch {
+        // FormRenderer intentionally handles host-reported submission failures.
+      }
+    })
+
+    expect(form?.getAttribute('aria-busy')).toBeNull()
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('false')
+    expect(form?.hasAttribute('inert')).toBe(false)
+    expect(saveButton?.getAttribute('aria-label')).toBeNull()
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).toBeNull()
+  })
+
+  it('restores keyboard focus after the inert submitting window closes', async () => {
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+    const input = container.querySelector<HTMLInputElement>('input[name="title"]')
+    if (input == null) throw new Error('title input not found')
+    input.focus()
+    expect(document.activeElement).toBe(input)
+
+    submitForm()
+    await act(async () => {})
+
+    document.body.tabIndex = -1
+    document.body.focus()
+    expect(document.activeElement).toBe(document.body)
+
+    await act(async () => {
+      submission.resolve()
+      await submission.promise
     })
+
+    expect(document.activeElement).toBe(input)
+    document.body.removeAttribute('tabindex')
+  })
+
+  it('ignores a second submit while the first is still in flight', async () => {
+    const submission = deferred()
     const onSubmit = vi.fn(async () => {
-      await gate
+      await submission.promise
     })
     render({ ...baseProps, onSubmit })
     typeIntoTitle('Hello')
@@ -187,8 +281,137 @@ describe('FormRenderer submit contract', () => {
     await act(async () => {})
     expect(onSubmit).toHaveBeenCalledTimes(1)
     await act(async () => {
-      release()
+      submission.resolve()
     })
     expect(onSubmit).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('persistent document concurrency recovery', () => {
+  const original = {
+    id: 'doc',
+    versionId: 'v1',
+    revision: 7,
+    path: 'opened',
+    status: 'draft',
+    fields: { title: 'Opened' },
+    _availableVersionLocales: ['en'],
+  }
+  const props = {
+    mode: 'edit' as const,
+    fields,
+    initialData: original,
+    collectionPath: 'pages',
+    useAsPath: 'title',
+    advertiseLocales: true,
+    contentLocales: [{ code: 'en', label: 'English' }],
+    workflowStatuses: [
+      { name: 'draft', label: 'Draft' },
+      { name: 'published', label: 'Published' },
+    ],
+  }
+  it.each(['stale', 'reload', 'lock', 'unavailable'] as const)(
+    'retains dirty fields and blocks mutations for %s',
+    async (mutationIssue) => {
+      const onSubmit = vi.fn()
+      const onDelete = vi.fn()
+      const onStatusChange = vi.fn()
+      const guard = vi.fn(() => ({ isBlocked: false, stay() {}, proceed() {} }))
+      const render = (blocked: boolean) =>
+        renderInProvider(
+          <FormRenderer
+            {...props}
+            onSubmit={onSubmit}
+            onDelete={onDelete}
+            onStatusChange={onStatusChange}
+            mutationsBlocked={blocked}
+            mutationIssue={blocked ? mutationIssue : null}
+            useNavigationGuard={guard}
+          />
+        )
+      render(false)
+      typeIntoTitle('Unsaved text to copy')
+      render(true)
+      expect(container.querySelector<HTMLInputElement>('input[name="title"]')?.value).toBe(
+        'Unsaved text to copy'
+      )
+      expect(container.querySelector<HTMLInputElement>('input[name="title"]')?.disabled).toBe(false)
+      expect(guard).toHaveBeenLastCalledWith(true)
+      expect(container.querySelector<HTMLButtonElement>('button[type="submit"]')?.disabled).toBe(
+        true
+      )
+      expect(container.querySelector<HTMLInputElement>('#system-path')?.disabled).toBe(true)
+      expect(container.querySelector<HTMLInputElement>('#available-locale-en')?.disabled).toBe(true)
+      const warning = container.querySelector('.byline-document-concurrency')
+      expect(warning?.getAttribute('role')).toBe('alert')
+      expect(document.activeElement).toBe(warning)
+      submitForm()
+      await act(async () => {})
+      expect(onSubmit).not.toHaveBeenCalled()
+      expect(onDelete).not.toHaveBeenCalled()
+      expect(onStatusChange).not.toHaveBeenCalled()
+    }
+  )
+  it('disables the dirty navigation guard only after explicit discard and retains it on reload failure', async () => {
+    const guard = vi.fn(() => ({ isBlocked: false, stay() {}, proceed() {} }))
+    const reload = vi.fn(async () => {
+      throw new Error('reload failed')
+    })
+    const render = (blocked: boolean) =>
+      renderInProvider(
+        <FormRenderer
+          {...props}
+          onSubmit={async () => {}}
+          mutationsBlocked={blocked}
+          mutationIssue={blocked ? 'stale' : null}
+          useNavigationGuard={guard}
+          onReloadDocument={reload}
+        />
+      )
+    render(false)
+    typeIntoTitle('Keep until I discard')
+    render(true)
+    expect(reload).not.toHaveBeenCalled()
+    expect(guard).toHaveBeenLastCalledWith(true)
+    const reloadButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Reload and discard my changes'
+    )
+    expect(reloadButton).toBeDefined()
+    await act(async () => {
+      reloadButton?.click()
+    })
+    expect(reload).toHaveBeenCalledTimes(1)
+    expect(guard).toHaveBeenCalledWith(false)
+    expect(guard).toHaveBeenLastCalledWith(true)
+    expect(container.textContent).toContain('Reload failed. Your unsaved changes are still here.')
+    expect(container.querySelector<HTMLInputElement>('input[name="title"]')?.value).toBe(
+      'Keep until I discard'
+    )
+  })
+  it('shows structural schedule suspension separately without marking the form stale or clearing edits', () => {
+    const render = (notice: boolean) =>
+      renderInProvider(
+        <FormRenderer
+          {...props}
+          onSubmit={async () => {}}
+          scheduledPublicationsNeedReconfirmation={notice}
+          scheduledPublicationsHref="/admin/scheduled-publications"
+        />
+      )
+    render(false)
+    typeIntoTitle('Draft retained after tree move')
+    render(true)
+    expect(container.textContent).toContain('The structure was saved.')
+    expect(
+      container.querySelector<HTMLAnchorElement>('a[href="/admin/scheduled-publications"]')
+        ?.textContent
+    ).toBe('Review scheduled publications')
+    expect(container.textContent).not.toContain('Your changes were not saved.')
+    expect(container.querySelector<HTMLButtonElement>('button[type="submit"]')?.disabled).toBe(
+      false
+    )
+    expect(container.querySelector<HTMLInputElement>('input[name="title"]')?.value).toBe(
+      'Draft retained after tree move'
+    )
+  })
+})

package/src/forms/form-renderer.module.css

@@ -20,6 +20,10 @@
  *   .byline-form-actions-status-wrap    — relative positioned wrapper around the ComboButton
  *   .byline-form-actions-combo-button   — ComboButton's main button minimums
  *   .byline-form-actions-combo-trigger  — ComboButton's trigger button minimums
+ *   .byline-form-busy-status            — visually-hidden save/upload announcement
+ *   .byline-form-save-content           — stable-width Save label/loader wrapper
+ *   .byline-form-save-label             — visible label that determines button width
+ *   .byline-form-save-loader            — centered progress overlay
  *
  *   .byline-form-layout                 — main + sidebar grid wrapper
  *   .byline-form-content                — main column
@@ -206,6 +210,44 @@
   min-height: 28px;
 }
 
+.busy-status,
+:global(.byline-form-busy-status) {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.save-content,
+:global(.byline-form-save-content) {
+  position: relative;
+  display: inline-block;
+}
+
+.save-label,
+:global(.byline-form-save-label) {
+  display: inline-block;
+}
+
+.save-label-hidden {
+  visibility: hidden;
+}
+
+.save-loader,
+:global(.byline-form-save-loader) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-flex;
+  transform: translate(-50%, -50%);
+}
+
 .actions-status-wrap,
 :global(.byline-form-actions-status-wrap) {
   position: relative;
@@ -223,6 +265,26 @@
   min-height: 28px;
 }
 
+/*
+ * Concurrency alerts (stale document, lock conflict, schedule reconfirmation).
+ * Separated from the status bar above and from the form layout below, which
+ * otherwise carries its standing top padding on top of the alert's own gap.
+ */
+.concurrency,
+:global(.byline-document-concurrency) {
+  margin-top: var(--spacing-16);
+}
+
+.concurrency button,
+:global(.byline-document-concurrency) button {
+  margin-top: var(--spacing-12);
+}
+
+.concurrency ~ .layout,
+:global(.byline-document-concurrency) ~ :global(.byline-form-layout) {
+  padding-top: var(--spacing-16);
+}
+
 .layout,
 :global(.byline-form-layout) {
   display: flex;