@open-mercato/ui 0.8.1-develop.7237.1.635faf2c7a → 0.8.1-develop.7238.1.3abe669ea5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.8.1-develop.7237.1.635faf2c7a",
+  "version": "0.8.1-develop.7238.1.3abe669ea5",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.8.1-develop.7237.1.635faf2c7a",
+    "@open-mercato/shared": "0.8.1-develop.7238.1.3abe669ea5",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.8.1-develop.7237.1.635faf2c7a",
+    "@open-mercato/shared": "0.8.1-develop.7238.1.3abe669ea5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/backend/CrudForm.tsx

@@ -417,6 +417,20 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   customFieldsManageMode?: 'inline' | 'page'
   // Optional injection spot ID for widget injection
   injectionSpotId?: string
+  /**
+   * One prior injection spot ID whose header, body (stack/group), and field
+   * (`:fields`) widgets are dual-published alongside `injectionSpotId` — a
+   * compatibility bridge for a host that changed its declared spot id, so a
+   * widget still targeting the old id keeps rendering. See
+   * BACKWARD_COMPATIBILITY.md §6 for the deprecation protocol this supports.
+   *
+   * Body, group, and `:fields` widgets are deduped by id (`mergeByKey`), so a
+   * widget registered on both `injectionSpotId` and `legacyInjectionSpotId`
+   * renders once. The header is the exception: it renders through two
+   * independent `<InjectionSpot>` elements (not the merged list), so a widget
+   * registered on both header spots renders twice.
+   */
+  legacyInjectionSpotId?: string
   replacementHandle?: string
   // Enable collapsible group headers with localStorage persistence.
   // Pass `true` to enable with auto-generated pageType, or `{ pageType }` for explicit key.
@@ -462,6 +476,16 @@ export type CrudFormGroup = {
   bare?: boolean
 }
 
+// Appends `legacy` entries not already present in `primary` (by `keyOf`), so a
+// `legacyInjectionSpotId` bridge never renders the same widget twice when it is
+// registered on both the primary and the legacy spot.
+function mergeByKey<T>(primary: T[], legacy: T[], keyOf: (item: T) => string): T[] {
+  if (!legacy.length) return primary
+  const seen = new Set(primary.map(keyOf))
+  const extra = legacy.filter((item) => !seen.has(keyOf(item)))
+  return extra.length ? [...primary, ...extra] : primary
+}
+
 function readByDotPath(source: Record<string, unknown> | undefined, path: string): unknown {
   if (!source || !path) return undefined
   if (Object.prototype.hasOwnProperty.call(source, path)) return source[path]
@@ -761,6 +785,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   customFieldsetBindings,
   customFieldsManageMode = 'inline',
   injectionSpotId,
+  legacyInjectionSpotId,
   replacementHandle,
   collapsibleGroups,
   sortableGroups,
@@ -867,7 +892,10 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const headerInjectionSpotId = resolvedInjectionSpotId
     ? extensionSpotChildId(resolvedInjectionSpotId, 'header')
     : undefined
-  
+  const legacyHeaderInjectionSpotId = legacyInjectionSpotId
+    ? extensionSpotChildId(legacyInjectionSpotId, 'header')
+    : undefined
+
   const recordId = React.useMemo(() => {
     const raw = values.id
     if (typeof raw === 'string') return raw
@@ -1144,16 +1172,33 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     }
   }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded])
 
-  const { widgets: injectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
+  const { widgets: primaryInjectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
+    context: injectionContext,
+    triggerOnLoad: true,
+  })
+  const { widgets: legacyInjectionWidgets } = useInjectionWidgets(legacyInjectionSpotId, {
     context: injectionContext,
     triggerOnLoad: true,
   })
-  const { widgets: injectedFieldWidgets } = useInjectionDataWidgets(
+  const injectionWidgets = React.useMemo(
+    () => mergeByKey(primaryInjectionWidgets, legacyInjectionWidgets, (w) => w.widgetId),
+    [primaryInjectionWidgets, legacyInjectionWidgets],
+  )
+  const { widgets: primaryFieldWidgets } = useInjectionDataWidgets(
     resolvedInjectionSpotId
       ? extensionSpotChildId(resolvedInjectionSpotId, 'fields')
       : '__disabled__:fields'
   )
-  
+  const { widgets: legacyFieldWidgets } = useInjectionDataWidgets(
+    legacyInjectionSpotId
+      ? extensionSpotChildId(legacyInjectionSpotId, 'fields')
+      : '__disabled__:fields'
+  )
+  const injectedFieldWidgets = React.useMemo(
+    () => mergeByKey(primaryFieldWidgets, legacyFieldWidgets, (w) => w.metadata.id),
+    [primaryFieldWidgets, legacyFieldWidgets],
+  )
+
   const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? '', injectionWidgets)
   const extendedInjectionEventsEnabled = CRUDFORM_EXTENDED_EVENTS_ENABLED && Boolean(resolvedInjectionSpotId)
 
@@ -1524,14 +1569,27 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       autoCheckAcl={versionHistory?.autoCheckAcl}
     />
   )
-  const headerInjectionAction = headerInjectionSpotId ? (
-    <InjectionSpot
-      spotId={headerInjectionSpotId}
-      context={injectionContext}
-      data={values}
-      onDataChange={(newData) => setValues(newData as CrudFormValues<TValues>)}
-      disabled={pending}
-    />
+  const headerInjectionAction = (headerInjectionSpotId || legacyHeaderInjectionSpotId) ? (
+    <>
+      {headerInjectionSpotId ? (
+        <InjectionSpot
+          spotId={headerInjectionSpotId}
+          context={injectionContext}
+          data={values}
+          onDataChange={(newData) => setValues(newData as CrudFormValues<TValues>)}
+          disabled={pending}
+        />
+      ) : null}
+      {legacyHeaderInjectionSpotId ? (
+        <InjectionSpot
+          spotId={legacyHeaderInjectionSpotId}
+          context={injectionContext}
+          data={values}
+          onDataChange={(newData) => setValues(newData as CrudFormValues<TValues>)}
+          disabled={pending}
+        />
+      ) : null}
+    </>
   ) : null
   const headerExtraActions = versionHistoryEnabled || headerInjectionAction || extraActions ? (
     <>

package/src/backend/__tests__/CrudForm.fieldInjection.test.tsx

@@ -20,7 +20,14 @@ jest.mock('../injection/InjectionSpot', () => ({
 }))
 jest.mock('../injection/useInjectionDataWidgets', () => ({
   __esModule: true,
-  useInjectionDataWidgets: () => ({ widgets: injectedFieldWidgets, isLoading: false, error: null }),
+  // `CrudForm` also calls this for its (unused-here) legacy-bridge spot, which
+  // resolves to the `__disabled__:fields` sentinel — keep that call empty so it
+  // does not double up on the fixture below.
+  useInjectionDataWidgets: (spotId: string) => ({
+    widgets: spotId.startsWith('__disabled__') ? [] : injectedFieldWidgets,
+    isLoading: false,
+    error: null,
+  }),
 }))
 
 import * as React from 'react'

package/src/backend/__tests__/CrudForm.legacyInjectionBridge.test.tsx

@@ -0,0 +1,188 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+// Regression coverage for the `legacyInjectionSpotId` bridge added for issue #6017 /
+// PR #6063 (see BACKWARD_COMPATIBILITY.md "Customers Quick-Create Injection Spot
+// Bridge"). When a caller renames/narrows its declared `injectionSpotId`, passing
+// the prior id as `legacyInjectionSpotId` must keep every widget still targeting
+// that prior id rendering — header, body/group/stack, and `:fields` — without
+// double-rendering a widget registered under the same `widgetId` on both spots.
+let widgetsBySpot: Record<string, unknown[]> = {}
+let fieldWidgetsBySpot: Record<string, unknown[]> = {}
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: () => {} }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: (props: any) => {
+    const widgets = (props.widgetsOverride ?? widgetsBySpot[props.spotId] ?? []) as any[]
+    return (
+      <div data-testid={`injection-spot-${props.spotId}`}>
+        {widgets.map((w) => (
+          <w.module.Widget key={w.widgetId} context={props.context} data={props.data} onDataChange={() => {}} disabled={false} />
+        ))}
+      </div>
+    )
+  },
+  useInjectionWidgets: (spotId: string | undefined) => ({
+    widgets: spotId ? (widgetsBySpot[spotId] ?? []) : [],
+    loading: false,
+    error: null,
+  }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn(async () => ({ ok: true, data: {} })) }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: (spotId: string) => ({
+    widgets: fieldWidgetsBySpot[spotId] ?? [],
+    isLoading: false,
+    error: null,
+  }),
+}))
+
+import * as React from 'react'
+import { waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const PRIMARY_SPOT = 'crud-form:test.declared'
+const LEGACY_SPOT = 'crud-form:test.legacy'
+
+const fields: CrudField[] = [{ id: 'name', label: 'Name', type: 'text' }]
+const groups: CrudFormGroup[] = [{ id: 'main', label: 'Main', fields: ['name'] }]
+
+function makeWidget(widgetId: string, testId: string) {
+  return {
+    widgetId,
+    moduleId: 'test-module',
+    key: widgetId,
+    placement: { kind: 'stack' },
+    module: {
+      metadata: { id: widgetId, title: widgetId, description: '' },
+      Widget: () => <div data-testid={testId}>{testId}</div>,
+    },
+  }
+}
+
+function makeFieldWidget(fieldId: string) {
+  return {
+    metadata: { id: fieldId, title: fieldId, description: '' },
+    fields: [{ id: fieldId, label: fieldId, type: 'text', group: 'main' }],
+  }
+}
+
+function renderForm() {
+  return renderWithProviders(
+    React.createElement(CrudForm as never, {
+      title: 'Form',
+      injectionSpotId: PRIMARY_SPOT,
+      legacyInjectionSpotId: LEGACY_SPOT,
+      fields,
+      groups,
+      onSubmit: () => {},
+    }),
+  )
+}
+
+describe('CrudForm legacyInjectionSpotId bridge (#6017 / #6063)', () => {
+  afterEach(() => {
+    widgetsBySpot = {}
+    fieldWidgetsBySpot = {}
+  })
+
+  it('renders a widget registered only on the primary spot', async () => {
+    widgetsBySpot[PRIMARY_SPOT] = [makeWidget('primary-only', 'primary-only-widget')]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="primary-only-widget"]')).toBeTruthy()
+    })
+  })
+
+  it('renders a widget registered only on the legacy spot', async () => {
+    widgetsBySpot[LEGACY_SPOT] = [makeWidget('legacy-only', 'legacy-only-widget')]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="legacy-only-widget"]')).toBeTruthy()
+    })
+  })
+
+  it('renders a widget with the same widgetId on both spots exactly once', async () => {
+    widgetsBySpot[PRIMARY_SPOT] = [makeWidget('shared-widget', 'shared-widget')]
+    widgetsBySpot[LEGACY_SPOT] = [makeWidget('shared-widget', 'shared-widget')]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('[data-testid="shared-widget"]')).toHaveLength(1)
+    })
+  })
+
+  it('bridges the header injection spot for a widget still targeting the legacy id', async () => {
+    widgetsBySpot[`${LEGACY_SPOT}:header`] = [makeWidget('legacy-header', 'legacy-header-widget')]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelector(`[data-testid="injection-spot-${LEGACY_SPOT}:header"]`)).toBeTruthy()
+    })
+    expect(container.querySelector('[data-testid="legacy-header-widget"]')).toBeTruthy()
+  })
+
+  it('renders a widget with the same widgetId on both header spots twice (header is not deduped)', async () => {
+    widgetsBySpot[`${PRIMARY_SPOT}:header`] = [makeWidget('shared-header-widget', 'shared-header-widget')]
+    widgetsBySpot[`${LEGACY_SPOT}:header`] = [makeWidget('shared-header-widget', 'shared-header-widget')]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('[data-testid="shared-header-widget"]')).toHaveLength(2)
+    })
+  })
+
+  it('merges :fields widgets from both spots and dedupes a shared field id', async () => {
+    fieldWidgetsBySpot[`${PRIMARY_SPOT}:fields`] = [makeFieldWidget('cf:primary_field')]
+    fieldWidgetsBySpot[`${LEGACY_SPOT}:fields`] = [
+      makeFieldWidget('cf:legacy_field'),
+      makeFieldWidget('cf:primary_field'),
+    ]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="cf:legacy_field"]')).toBeTruthy()
+    })
+    // `[data-crud-field-id]` is nested onto both a field's wrapper and its inner
+    // control, so count distinct labels (one per rendered field) rather than nodes.
+    const primaryFieldLabels = Array.from(container.querySelectorAll('label')).filter(
+      (node) => node.textContent?.trim() === 'cf:primary_field',
+    )
+    expect(primaryFieldLabels).toHaveLength(1)
+  })
+
+  it('renders unchanged when legacyInjectionSpotId is omitted (every other CrudForm caller)', async () => {
+    widgetsBySpot[PRIMARY_SPOT] = [makeWidget('primary-only', 'primary-only-widget')]
+
+    const { container } = renderWithProviders(
+      React.createElement(CrudForm as never, {
+        title: 'Form',
+        injectionSpotId: PRIMARY_SPOT,
+        fields,
+        groups,
+        onSubmit: () => {},
+      }),
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="primary-only-widget"]')).toBeTruthy()
+    })
+    expect(container.querySelector(`[data-testid="injection-spot-${LEGACY_SPOT}:header"]`)).toBeNull()
+  })
+})