@byline/admin 4.16.0 → 4.17.0

package/src/forms/document-actions.tsx

@@ -210,6 +210,16 @@ export function DocumentActions({
     }
   }
 
+  // Whether the ellipsis menu has anything to show. Every entry below is
+  // conditional, so with no available action the trigger would open an empty
+  // menu.
+  const hasAnyAction =
+    schedulingActions.length > 0 ||
+    copyToLocaleAvailable ||
+    deleteLocaleAvailable ||
+    onDuplicate != null ||
+    onDelete != null
+
   const handleOnDelete = () => {
     setShowDeleteConfirm(false)
     if (onDelete) {
@@ -298,25 +308,26 @@ export function DocumentActions({
 
   return (
     <>
-      <DropdownComponent.Root>
-        <DropdownComponent.Trigger
-          render={<IconButton variant="text" intent="noeffect" size="sm" />}
-        >
-          <EllipsisIcon
-            className={cx('byline-form-actions-icon', styles.icon)}
-            width="15px"
-            height="15px"
-          />
-        </DropdownComponent.Trigger>
-
-        <DropdownComponent.Portal>
-          <DropdownComponent.Content
-            className={cx('byline-form-actions-menu', styles.menu)}
-            align="end"
-            data-side="top"
-            sideOffset={10}
+      {hasAnyAction && (
+        <DropdownComponent.Root>
+          <DropdownComponent.Trigger
+            render={<IconButton variant="text" intent="noeffect" size="sm" />}
           >
-            {/*{publishedVersion && (
+            <EllipsisIcon
+              className={cx('byline-form-actions-icon', styles.icon)}
+              width="15px"
+              height="15px"
+            />
+          </DropdownComponent.Trigger>
+
+          <DropdownComponent.Portal>
+            <DropdownComponent.Content
+              className={cx('byline-form-actions-menu', styles.menu)}
+              align="end"
+              data-side="top"
+              sideOffset={10}
+            >
+              {/*{publishedVersion && (
               <>
                 <DropdownComponent.Item onClick={onUnpublish}>
                   <div className={cx('byline-form-actions-item', styles.item)}>
@@ -329,67 +340,75 @@ export function DocumentActions({
                 <DropdownComponent.Separator />
               </>
             )}*/}
-            {schedulingActions.length > 0 && (
-              <>
-                {schedulingActions.map((action) => (
-                  <DropdownComponent.Item key={action.key} onClick={action.onSelect}>
+              {schedulingActions.length > 0 && (
+                <>
+                  {schedulingActions.map((action) => (
+                    <DropdownComponent.Item 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>
+                        </span>
+                      </div>
+                    </DropdownComponent.Item>
+                  ))}
+                  <DropdownComponent.Separator />
+                </>
+              )}
+              {copyToLocaleAvailable && (
+                <DropdownComponent.Item 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>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>
+              )}
+              {deleteLocaleAvailable && (
+                <DropdownComponent.Item 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>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>
+              )}
+              {onDuplicate && (
+                <DropdownComponent.Item 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>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>
+              )}
+              {onDelete && (
+                <>
+                  <DropdownComponent.Separator />
+                  <DropdownComponent.Item
+                    onClick={() => {
+                      setShowDeleteConfirm(true)
+                    }}
+                  >
                     <div className={cx('byline-form-actions-item', styles.item)}>
+                      <span className={cx('byline-form-actions-item-icon', styles['item-icon'])}>
+                        <DeleteIcon width="16px" height="16px" />
+                      </span>
                       <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                        <button type="button">{action.label}</button>
+                        <button
+                          type="button"
+                          className={cx('byline-form-actions-delete', styles.delete)}
+                        >
+                          {t('common.actions.delete')}
+                        </button>
                       </span>
                     </div>
                   </DropdownComponent.Item>
-                ))}
-                <DropdownComponent.Separator />
-              </>
-            )}
-            {copyToLocaleAvailable && (
-              <DropdownComponent.Item 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>
-                  </span>
-                </div>
-              </DropdownComponent.Item>
-            )}
-            {deleteLocaleAvailable && (
-              <DropdownComponent.Item 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>
-                  </span>
-                </div>
-              </DropdownComponent.Item>
-            )}
-            {onDuplicate && (
-              <DropdownComponent.Item 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>
-                  </span>
-                </div>
-              </DropdownComponent.Item>
-            )}
-            <DropdownComponent.Separator />
-            <DropdownComponent.Item
-              onClick={() => {
-                setShowDeleteConfirm(true)
-              }}
-            >
-              <div className={cx('byline-form-actions-item', styles.item)}>
-                <span className={cx('byline-form-actions-item-icon', styles['item-icon'])}>
-                  <DeleteIcon width="16px" height="16px" />
-                </span>
-                <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                  <button type="button" className={cx('byline-form-actions-delete', styles.delete)}>
-                    {t('common.actions.delete')}
-                  </button>
-                </span>
-              </div>
-            </DropdownComponent.Item>
-          </DropdownComponent.Content>
-        </DropdownComponent.Portal>
-      </DropdownComponent.Root>
+                </>
+              )}
+            </DropdownComponent.Content>
+          </DropdownComponent.Portal>
+        </DropdownComponent.Root>
+      )}
 
       <Modal
         isOpen={showDeleteConfirm}

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

@@ -0,0 +1,155 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+
+vi.mock('@byline/ui/react', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  const Pass = ({ children }: any) => <div>{children}</div>
+  const Modal: any = ({ children, isOpen }: any) => (isOpen ? <div>{children}</div> : null)
+  Modal.Container = Pass
+  Modal.Header = Pass
+  Modal.Content = Pass
+  Modal.Actions = Pass
+  return {
+    ...actual,
+    Dropdown: {
+      Root: Pass,
+      Trigger: ({ children }: any) => <div data-testid="actions-trigger">{children}</div>,
+      Portal: Pass,
+      Content: Pass,
+      Item: ({ children, onClick }: any) => (
+        <div
+          onClick={onClick}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') onClick?.(event)
+          }}
+          role="menuitem"
+          tabIndex={0}
+        >
+          {children}
+        </div>
+      ),
+      Separator: () => <hr />,
+    },
+    Modal,
+    Input: ({ name, value, onChange }: any) => (
+      <input name={name} value={value ?? ''} onChange={onChange} />
+    ),
+  }
+})
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fieldServices = {
+  getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+  uploadField: async () => ({}),
+} as any
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const renderInProvider = (element: React.ReactNode) => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider services={fieldServices}>
+          {element}
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+import { FormRenderer } from './form-renderer'
+
+const baseProps = {
+  mode: 'edit' as const,
+  fields: [{ name: 'title', label: 'Title', type: 'text' as const }],
+  onSubmit: () => {},
+  onCancel: () => {},
+  collectionPath: 'pages',
+  initialData: { id: 'doc-1', path: 'about-us', fields: { title: 'About' } },
+}
+
+describe('FormRenderer capabilities', () => {
+  const render = (props: Record<string, unknown>) =>
+    renderInProvider(<FormRenderer {...(props as any)} />)
+
+  it('renders the path widget by default when initialData carries a path', () => {
+    render(baseProps)
+    const widget = container.querySelector('.byline-form-path')
+    expect(widget).not.toBeNull()
+    const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
+    expect(input?.value).toBe('about-us')
+  })
+
+  it('suppresses the path widget when showPath is false', () => {
+    render({ ...baseProps, showPath: false })
+    expect(container.querySelector('.byline-form-path')).toBeNull()
+    expect(container.querySelector('input[name="__systemPath__"]')).toBeNull()
+  })
+
+  it('uses the heading override verbatim instead of create/edit wording', () => {
+    render({
+      ...baseProps,
+      mode: 'create' as const,
+      headingLabel: 'Thing',
+      heading: 'Site settings',
+    })
+    const heading = container.querySelector('h1, h2, h3')
+    expect(heading?.textContent?.trim()).toBe('Site settings')
+  })
+
+  it('falls back to create wording when no heading override is given', () => {
+    render({ ...baseProps, mode: 'create' as const, headingLabel: 'Thing' })
+    const heading = container.querySelector('h1, h2, h3')
+    expect(heading?.textContent?.trim()).toBe('Create Thing')
+  })
+})

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

@@ -0,0 +1,194 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+
+vi.mock('@byline/ui/react', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  const Pass = ({ children }: any) => <div>{children}</div>
+  const Modal: any = ({ children, isOpen }: any) => (isOpen ? <div>{children}</div> : null)
+  Modal.Container = Pass
+  Modal.Header = Pass
+  Modal.Content = Pass
+  Modal.Actions = Pass
+  return {
+    ...actual,
+    Dropdown: {
+      Root: Pass,
+      Trigger: ({ children }: any) => <div data-testid="actions-trigger">{children}</div>,
+      Portal: Pass,
+      Content: Pass,
+      Item: ({ children, onClick }: any) => (
+        <div
+          onClick={onClick}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') onClick?.(event)
+          }}
+          role="menuitem"
+          tabIndex={0}
+        >
+          {children}
+        </div>
+      ),
+      Separator: () => <hr />,
+    },
+    Modal,
+    Input: ({ name, value, onChange }: any) => (
+      <input name={name} value={value ?? ''} onChange={onChange} />
+    ),
+  }
+})
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fieldServices = {
+  getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+  uploadField: async () => ({}),
+} as any
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const renderInProvider = (element: React.ReactNode) => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider services={fieldServices}>
+          {element}
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+import { FormRenderer } from './form-renderer'
+
+const fields = [{ name: 'title', label: 'Title', type: 'text' as const }]
+
+const typeIntoTitle = (value: string) => {
+  const input = container.querySelector<HTMLInputElement>('input[name="title"]')
+  if (input == null) throw new Error('title input not found')
+  const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set
+  act(() => {
+    setter?.call(input, value)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+const submitForm = () => {
+  const form = container.querySelector('form')
+  if (form == null) throw new Error('form not found')
+  act(() => {
+    form.requestSubmit()
+  })
+}
+
+describe('FormRenderer submit contract', () => {
+  const render = (props: Record<string, unknown>) =>
+    renderInProvider(<FormRenderer {...(props as any)} />)
+
+  const baseProps = {
+    mode: 'create' as const,
+    fields,
+    onCancel: () => {},
+    collectionPath: 'pages',
+  }
+
+  it('becomes dirty once a field is edited', () => {
+    render({ ...baseProps, onSubmit: async () => {} })
+    expect(container.textContent).toContain('Close')
+    typeIntoTitle('Hello')
+    expect(container.textContent).toContain('Cancel')
+  })
+
+  it('clears dirty state when onSubmit resolves', async () => {
+    const onSubmit = vi.fn(async () => {})
+    render({ ...baseProps, onSubmit })
+    typeIntoTitle('Hello')
+    submitForm()
+    await act(async () => {})
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    expect(container.textContent).toContain('Close')
+  })
+
+  it('preserves dirty state when onSubmit rejects', async () => {
+    const onSubmit = vi.fn(async () => {
+      throw new Error('save failed')
+    })
+    render({ ...baseProps, onSubmit })
+    typeIntoTitle('Hello')
+    submitForm()
+    await act(async () => {})
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    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
+    })
+    const onSubmit = vi.fn(async () => {
+      await gate
+    })
+    render({ ...baseProps, onSubmit })
+    typeIntoTitle('Hello')
+    submitForm()
+    submitForm()
+    // Submission first awaits the field-hook pipeline, so flush that
+    // microtask before counting host calls. An immediate assertion here
+    // would observe zero calls and would not test duplicate suppression.
+    await act(async () => {})
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    await act(async () => {
+      release()
+    })
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+})