@byline/admin 6.2.1 → 6.4.0

package/src/fields/image/image-field.tsx

@@ -32,6 +32,7 @@ import {
   useIsDirty,
   useIsFieldUploading,
 } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import { useFieldChangeHandler } from '../use-field-change-handler'
 import styles from './image-field.module.css'
 import { ImageUploadField } from './image-upload-field'
@@ -103,6 +104,7 @@ export const ImageField = ({
 
   // Handle remove, including cleanup of pending uploads
   const handleRemove = () => {
+    if (field.readOnly) return
     if (isPending) {
       removePendingUpload(fieldPath)
     }
@@ -114,7 +116,7 @@ export const ImageField = ({
   const [lightboxOpen, setLightboxOpen] = useState(false)
   const canOpenLightbox = !isPending && !!incomingValue?.storageUrl
 
-  const htmlId = fieldPath
+  const htmlId = useScopedDomId(fieldPath)
 
   return (
     <div className={`byline-field-image ${field.name}`}>
@@ -136,7 +138,7 @@ export const ImageField = ({
           >
             {t('fields.upload.requireSavedDocument')}
           </div>
-        ) : collectionPath ? (
+        ) : collectionPath && !field.readOnly ? (
           <ImageUploadField
             field={field}
             collectionPath={collectionPath}
@@ -169,7 +171,7 @@ export const ImageField = ({
                 intent="noeffect"
                 onClick={handleRemove}
                 size="xs"
-                disabled={isUploading}
+                disabled={isUploading || field.readOnly}
                 aria-label={t('fields.image.removeAriaLabel')}
               >
                 <CloseIcon width="15px" height="15px" />
@@ -297,7 +299,7 @@ export const ImageField = ({
 
       {field.helpText && <HelpText text={field.helpText} />}
 
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
 
       {canOpenLightbox && incomingValue?.storageUrl && (
         <ImageLightbox

package/src/fields/numerical/numerical-field.tsx

@@ -20,6 +20,7 @@ import { normalizeNumericValue } from '@byline/core'
 import { Input } from '@byline/ui/react'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 
 type NumericalValue = string | number | null
 
@@ -48,7 +49,7 @@ export const NumericalField = ({
   const fieldValue = useFieldValue<NumericalValue | undefined>(fieldPath)
   const incomingValue =
     value !== undefined ? value : fieldValue !== undefined ? fieldValue : (defaultValue ?? null)
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
   const canonicalDisplay = incomingValue == null ? '' : String(incomingValue)
   const [displayValue, setDisplayValue] = useState(canonicalDisplay)
   const [isEditing, setIsEditing] = useState(false)

package/src/fields/relation/relation-field.tsx

@@ -28,6 +28,7 @@ import {
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import styles from './relation-field.module.css'
 import { RelationPicker } from './relation-picker'
 import { RelationSummary } from './relation-summary'
@@ -65,7 +66,7 @@ export const RelationField = ({
   path,
 }: RelationFieldProps) => {
   const fieldPath = path ?? field.name
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
   const fieldError = useFieldError(fieldPath)
   const fieldValue = useFieldValue<IncomingRelationValue | null | undefined>(fieldPath)
 
@@ -103,6 +104,7 @@ export const RelationField = ({
     targetCollectionId: string
     record?: Record<string, any>
   }) => {
+    if (field.readOnly) return
     setPickerOpen(false)
     if (selection.record) {
       setPickedRecord({ id: selection.targetDocumentId, record: selection.record })
@@ -116,6 +118,7 @@ export const RelationField = ({
   }
 
   const handleRemove = () => {
+    if (field.readOnly) return
     setPickedRecord(null)
     onChange?.(null)
   }
@@ -167,6 +170,7 @@ export const RelationField = ({
               />
               <div className={cx('byline-field-relation-actions', styles.actions)}>
                 <IconButton
+                  disabled={field.readOnly}
                   id={htmlId}
                   type="button"
                   intent="noeffect"
@@ -179,6 +183,7 @@ export const RelationField = ({
                   <EditIcon width="15px" height="15px" />
                 </IconButton>
                 <IconButton
+                  disabled={field.readOnly}
                   type="button"
                   intent="noeffect"
                   size="xs"
@@ -193,6 +198,7 @@ export const RelationField = ({
             </div>
           ) : (
             <Button
+              disabled={field.readOnly}
               id={htmlId}
               size="xs"
               variant="outlined"
@@ -208,7 +214,7 @@ export const RelationField = ({
 
       {field.helpText != null && <HelpText text={field.helpText} />}
 
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
 
       {!isUnknown && (
         <RelationPicker

package/src/fields/relation/relation-many-field.tsx

@@ -32,6 +32,7 @@ import {
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue, useFormContext } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import styles from './relation-field.module.css'
 import { RelationPicker, type RelationPickerSelection } from './relation-picker'
 import { RelationSummary } from './relation-summary'
@@ -60,12 +61,20 @@ interface RelationManyTileProps {
   id: string
   children: ReactNode
   onRemove: () => void
+  readOnly?: boolean
   removeAriaLabel: string
 }
 
-const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationManyTileProps) => {
+const RelationManyTile = ({
+  id,
+  children,
+  onRemove,
+  removeAriaLabel,
+  readOnly,
+}: RelationManyTileProps) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
+    disabled: readOnly,
     transition: { duration: 250, easing: 'cubic-bezier(0, 0.2, 0.2, 1)' },
   })
 
@@ -86,6 +95,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationM
       )}
     >
       <button
+        disabled={readOnly}
         type="button"
         className={cx('byline-field-relation-many-grip', styles['many-grip'])}
         {...attributes}
@@ -95,6 +105,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationM
       </button>
       <div className={cx('byline-field-relation-many-body', styles['many-body'])}>{children}</div>
       <IconButton
+        disabled={readOnly}
         type="button"
         size="xs"
         intent="noeffect"
@@ -117,7 +128,7 @@ interface RelationManyFieldProps {
 
 export const RelationManyField = ({ field, defaultValue, id, path }: RelationManyFieldProps) => {
   const fieldPath = path ?? field.name
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
   const { t } = useTranslation('byline-admin')
   const fieldError = useFieldError(fieldPath)
   const { getFieldValue, setFieldValue } = useFormContext()
@@ -151,6 +162,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
   }
 
   const handleAddMany = (selections: RelationPickerSelection[]) => {
+    if (field.readOnly) return
     setPickerOpen(false)
     const current = currentArray()
     // Dedup the batch against the current array — a target may appear at most
@@ -177,6 +189,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
   }
 
   const handleRemove = (targetDocumentId: string) => {
+    if (field.readOnly) return
     setFieldValue(
       fieldPath,
       currentArray().filter((v) => v.targetDocumentId !== targetDocumentId)
@@ -190,7 +203,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
     moveFromIndex: number
     moveToIndex: number
   }) => {
-    if (moveFromIndex === moveToIndex) return
+    if (field.readOnly || moveFromIndex === moveToIndex) return
     setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex))
   }
 
@@ -234,6 +247,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
               >
                 {items.map((value) => (
                   <RelationManyTile
+                    readOnly={field.readOnly}
                     key={value.targetDocumentId}
                     id={value.targetDocumentId}
                     onRemove={() => handleRemove(value.targetDocumentId)}
@@ -253,6 +267,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
 
             <div className={cx('byline-field-relation-many-add', styles['many-add'])}>
               <Button
+                disabled={field.readOnly}
                 id={htmlId}
                 size="xs"
                 variant="outlined"
@@ -268,7 +283,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
 
           {field.helpText != null && <HelpText text={field.helpText} />}
 
-          {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+          {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
 
           <RelationPicker
             multiple

package/src/fields/relation/relation-picker-create.test.tsx

@@ -0,0 +1,203 @@
+/**
+ * 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'
+
+// base-ui's Modal portals into a floating layer jsdom cannot position, and the
+// contract under test is what the picker puts *into* the modal.
+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,
+    Modal,
+    Search: ({ placeholder }: any) => <input aria-label="search" placeholder={placeholder} />,
+    LoaderRing: () => <span />,
+  }
+})
+
+import { BylineFieldServicesProvider } from '../field-services-context'
+import { RelationPicker } from './relation-picker'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'media',
+      labels: { singular: 'Media item', plural: 'Media' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const targetDefinition = {
+  path: 'media',
+  labels: { singular: 'Media item', plural: 'Media' },
+  fields: [{ name: 'title', label: 'Title', type: 'text' }],
+} as any
+
+const emptyList = async () => ({
+  docs: [],
+  meta: { totalPages: 1 },
+  included: { collection: { id: 'collection-1' } },
+})
+
+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 render = async (services: Record<string, unknown>, props: Record<string, unknown> = {}) => {
+  await act(async () => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={
+            { getCollectionDocuments: emptyList, uploadField: async () => ({}), ...services } as any
+          }
+        >
+          <RelationPicker
+            targetCollectionPath="media"
+            targetDefinition={targetDefinition}
+            displayField="title"
+            isOpen={true}
+            onSelect={() => {}}
+            onDismiss={() => {}}
+            {...(props as any)}
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const createLink = () =>
+  container.querySelector<HTMLAnchorElement>('.byline-field-relation-picker-create')
+
+const bothCapabilities = {
+  canCreateInCollection: () => true,
+  getCreateDocumentUrl: (path: string) => `/control-panel/collections/${path}/create`,
+}
+
+describe('relation picker create affordance', () => {
+  it('is absent when the host wires no capabilities', async () => {
+    await render({})
+
+    expect(createLink()).toBeNull()
+  })
+
+  /**
+   * Permission is unknowable without `canCreateInCollection`, and offering a link
+   * that leads to a refusal is worse than offering none.
+   */
+  it('is absent when only the url capability is wired', async () => {
+    await render({ getCreateDocumentUrl: (path: string) => `/x/${path}/create` })
+
+    expect(createLink()).toBeNull()
+  })
+
+  it('is absent when only the permission capability is wired', async () => {
+    await render({ canCreateInCollection: () => true })
+
+    expect(createLink()).toBeNull()
+  })
+
+  it('is absent when the viewer may not create in the target collection', async () => {
+    await render({ ...bothCapabilities, canCreateInCollection: () => false })
+
+    expect(createLink()).toBeNull()
+  })
+
+  it('asks about the target collection, not some other one', async () => {
+    const canCreateInCollection = vi.fn(() => true)
+    await render({ ...bothCapabilities, canCreateInCollection })
+
+    expect(canCreateInCollection).toHaveBeenCalledWith('media')
+  })
+
+  it('renders the host-supplied url when permitted', async () => {
+    await render(bothCapabilities)
+
+    expect(createLink()?.getAttribute('href')).toBe('/control-panel/collections/media/create')
+  })
+
+  /**
+   * A new tab is the whole point: the parent editor and this picker stay mounted
+   * with their unsaved state. `noopener` because the opened page must not reach
+   * back into this one through `window.opener`.
+   */
+  it('opens in a new tab without handing over a window reference', async () => {
+    await render(bothCapabilities)
+
+    expect(createLink()?.getAttribute('target')).toBe('_blank')
+    expect(createLink()?.getAttribute('rel')).toContain('noopener')
+  })
+
+  it('names the target collection so the reader knows what they are creating', async () => {
+    await render(bothCapabilities)
+
+    expect(createLink()?.textContent).toContain('Media item')
+  })
+
+  /**
+   * An anchor rather than a button calling `window.open`: keyboard and
+   * middle-click work for free, and popup blockers leave it alone.
+   */
+  it('is a real link, reachable by keyboard', async () => {
+    await render(bothCapabilities)
+
+    const link = createLink()
+    expect(link?.tagName).toBe('A')
+    expect(link?.getAttribute('href')).toBeTruthy()
+  })
+
+  it('does not dismiss the picker when followed', async () => {
+    const onDismiss = vi.fn()
+    await render(bothCapabilities, { onDismiss })
+
+    act(() => {
+      createLink()?.click()
+    })
+
+    expect(onDismiss).not.toHaveBeenCalled()
+  })
+})