@byline/admin 4.15.0 → 4.17.0

package/src/forms/document-actions.test.tsx

@@ -0,0 +1,157 @@
+/**
+ * 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'
+
+// Spread the REAL uikit and override only the three primitives that make
+// assertions hard. A factory mock replaces the whole module, so anything not
+// returned becomes `undefined` and React throws "Element type is invalid" on
+// mount — FormRenderer alone pulls in Alert, Button, and ComboButton
+// (`form-renderer.tsx:24`), and its field/presentation subtree pulls in more.
+// `@byline/ui` ships a built `dist` plus a `development` source condition, so
+// `importOriginal()` resolves without a prior build step.
+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,
+    // Overridden so `input[name=...]` is a stable selector for typing into
+    // fields; every other uikit export comes through from `actual`.
+    Input: ({ name, value, onChange }: any) => (
+      <input name={name} value={value ?? ''} onChange={onChange} />
+    ),
+  }
+})
+
+// Silences React's "not configured to support act(...)" warning. Copied from
+// `path-widget.test.tsx:76`.
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+
+// FormRenderer calls `getAdminConfig()` unconditionally (`form-renderer.tsx:279`)
+// to resolve the path widget's slugifier. The *use* of the result is gated on
+// `useAsPath`, but the call is not — with no config registered it throws
+// "Byline has not been configured yet" and the mount fails. `AdminConfig`
+// requires only `i18n` and `collections`, so register a real one rather than
+// mocking `@byline/core`; it lives on a global, so module scope runs it once.
+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, '-'),
+})
+
+// FormRenderer also calls `useBylineFieldServices()` unconditionally
+// (`form-renderer.tsx:271`), which throws when the provider is absent. Only
+// `getCollectionDocuments` and `uploadField` are required members; the tree
+// functions are optional. Cast the stub — these tests never invoke it, and
+// pinning the real signatures here would couple them to unrelated drift.
+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 { DocumentActions } from './document-actions'
+
+describe('DocumentActions', () => {
+  const render = (props: Record<string, unknown>) =>
+    renderInProvider(<DocumentActions {...(props as any)} />)
+
+  it('hides the Delete item when no onDelete handler is supplied', () => {
+    render({})
+    expect(container.textContent).not.toContain('Delete')
+  })
+
+  it('renders the Delete item when an onDelete handler is supplied', () => {
+    render({ onDelete: async () => {} })
+    expect(container.textContent).toContain('Delete')
+  })
+
+  it('renders no trigger at all when no actions are available', () => {
+    render({})
+    expect(container.querySelector('[data-testid="actions-trigger"]')).toBeNull()
+  })
+
+  it('renders the trigger when at least one action is available', () => {
+    render({ onDuplicate: async () => {} })
+    expect(container.querySelector('[data-testid="actions-trigger"]')).not.toBeNull()
+  })
+})

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')
+  })
+})