@open-mercato/ui 0.6.5-develop.4516.1.88e6ab71a9 → 0.6.5-develop.4534.1.b459babe6d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.5-develop.4516.1.88e6ab71a9",
+  "version": "0.6.5-develop.4534.1.b459babe6d",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -145,13 +145,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4516.1.88e6ab71a9",
+    "@open-mercato/shared": "0.6.5-develop.4534.1.b459babe6d",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4516.1.88e6ab71a9",
+    "@open-mercato/shared": "0.6.5-develop.4534.1.b459babe6d",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -407,6 +407,62 @@ function readByDotPath(source: Record<string, unknown> | undefined, path: string
   return current
 }
 
+// Keys that would mutate the prototype chain if used as dot-path segments.
+// Guard against them so a declared field id such as `__proto__.polluted` can
+// never reach into Object.prototype (prototype-pollution hardening).
+const PROTO_POLLUTING_KEYS = new Set(['__proto__', 'prototype', 'constructor'])
+
+function isProtoPollutingKey(key: string): boolean {
+  return PROTO_POLLUTING_KEYS.has(key)
+}
+
+function writeByDotPath(target: Record<string, unknown>, path: string, value: unknown): void {
+  const segments = path.split('.').filter(Boolean)
+  if (segments.length === 0) return
+  if (segments.some(isProtoPollutingKey)) return
+  let current: Record<string, unknown> = target
+  for (let index = 0; index < segments.length - 1; index++) {
+    const segment = segments[index]
+    const existing = current[segment]
+    const isSafeObject =
+      !!existing &&
+      typeof existing === 'object' &&
+      !Array.isArray(existing) &&
+      (Object.getPrototypeOf(existing) === Object.prototype || Object.getPrototypeOf(existing) === null)
+
+    if (!isSafeObject) {
+      const created = Object.create(null) as Record<string, unknown>
+      current[segment] = created
+      current = created
+    } else {
+      current = existing as Record<string, unknown>
+    }
+  }
+  const finalSegment = segments[segments.length - 1]
+  if (isProtoPollutingKey(finalSegment)) return
+  current[finalSegment] = value
+}
+
+// Collapse flat dot-path keys (e.g. `metadata.category`) declared as base form
+// fields into the nested object the schema expects (`{ metadata: { category } }`).
+// The flat keys are preserved alongside the nested projection so that forms whose
+// schema declares the flat keys directly keep working — CrudForm's non-strict
+// schema.safeParse retains whichever representation the schema declares and strips
+// the other. See issue #2503 ("Latent framework gap").
+function collapseDotPathFields(
+  source: Record<string, unknown>,
+  dotPathFieldIds: ReadonlySet<string>,
+): Record<string, unknown> {
+  if (!dotPathFieldIds.size) return source
+  let result: Record<string, unknown> | null = null
+  for (const fieldId of dotPathFieldIds) {
+    if (!Object.prototype.hasOwnProperty.call(source, fieldId)) continue
+    if (!result) result = { ...source }
+    writeByDotPath(result, fieldId, source[fieldId])
+  }
+  return result ?? source
+}
+
 function readInitialCustomFieldValue(
   source: Record<string, unknown> | undefined,
   key: string,
@@ -1660,6 +1716,25 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     return new globalThis.Map(allFields.map((f) => [f.id, f]))
   }, [allFields])
 
+  // Declared base fields whose id is a dot-path (e.g. `metadata.category`).
+  // Injected and custom (cf) fields already get dot-path/cf-path hydration and
+  // are excluded here so their dedicated handling is preserved. CrudForm hydrates
+  // these flat keys from nested initial values on load and projects them back into
+  // nested objects before schema.safeParse on submit. See issue #2503.
+  const dotPathBaseFieldIds = React.useMemo(() => {
+    const ids = new Set<string>()
+    const cfFieldIds = new Set(cfFields.map((field) => field.id))
+    for (const field of allFields) {
+      const fieldId = field.id
+      if (!fieldId.includes('.')) continue
+      if (injectedFieldIdSet.has(fieldId)) continue
+      if (fieldId.startsWith('cf_') || fieldId.startsWith('cf:')) continue
+      if (cfFieldIds.has(fieldId)) continue
+      ids.add(fieldId)
+    }
+    return ids
+  }, [allFields, injectedFieldIdSet, cfFields])
+
   const validateFieldOnBlur = React.useCallback(async (
     fieldId: string,
     sourceValues?: CrudFormValues<TValues>,
@@ -1732,7 +1807,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       for (const injectedId of injectedFieldIdSet) {
         delete coreValues[injectedId]
       }
-      const result = schema.safeParse(coreValues)
+      const result = schema.safeParse(collapseDotPathFields(coreValues, dotPathBaseFieldIds))
       if (!result.success) {
         const schemaFieldErrors: Record<string, string> = {}
         result.error.issues.forEach((issue) => {
@@ -1772,6 +1847,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   }, [
     cfDefinitions,
     customEntity,
+    dotPathBaseFieldIds,
     fieldById,
     formReadOnly,
     hiddenBaseFieldIds,
@@ -2177,6 +2253,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       initialValues,
       injectedFieldIds: injectedFieldDefinitions.map((definition) => definition.id),
       customFieldMappings: cfDefinitions.map((definition) => definition.key),
+      dotPathBaseFieldIds: Array.from(dotPathBaseFieldIds),
     })
     if (appliedInitialValuesSnapshotRef.current === snapshot) return
     appliedInitialValuesSnapshotRef.current = snapshot
@@ -2199,6 +2276,13 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           ;(merged as Record<string, unknown>)[targetId] = extracted
         }
       }
+      for (const fieldId of dotPathBaseFieldIds) {
+        if (merged[fieldId] !== undefined) continue
+        const extracted = readByDotPath(initialRecord, fieldId)
+        if (extracted !== undefined) {
+          ;(merged as Record<string, unknown>)[fieldId] = extracted
+        }
+      }
       mergedValues = merged
       return mergedValues
     })
@@ -2229,6 +2313,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   }, [
     cfDefinitions,
     customEntity,
+    dotPathBaseFieldIds,
     extendedInjectionEventsEnabled,
     initialValues,
     injectedFieldDefinitions,
@@ -2426,7 +2511,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
     let parsedValues: TValues
     if (schema) {
-      const res = schema.safeParse(coreValues)
+      const res = schema.safeParse(collapseDotPathFields(coreValues, dotPathBaseFieldIds))
       if (!res.success) {
         const fieldErrors: Record<string, string> = {}
         res.error.issues.forEach((issue) => {
@@ -2456,7 +2541,9 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           for (const injectedId of injectedFieldIdSet) {
             delete projectedCoreValues[injectedId]
           }
-          coreSubmitValues = schema ? schema.parse(projectedCoreValues) : (projectedCoreValues as TValues)
+          coreSubmitValues = schema
+            ? schema.parse(collapseDotPathFields(projectedCoreValues, dotPathBaseFieldIds))
+            : (projectedCoreValues as TValues)
           if (result.applyToForm) {
             setValues(result.data as CrudFormValues<TValues>)
           }

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

@@ -0,0 +1,312 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+// Regression coverage for issue #2503 ("Latent framework gap"): CrudForm must
+// honor dot-path ids for declared base fields — hydrate the flat key from nested
+// initial values on load, and project the flat key back into a nested object
+// before schema.safeParse on submit. The fix coexists with forms whose schema
+// declares the flat dot-path key directly (the module-local remedy shipped in
+// PR #2513), because the non-strict parse keeps whichever shape the schema declares.
+
+const triggerEventMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({
+    confirm: jest.fn().mockResolvedValue(true),
+    ConfirmDialogElement: null,
+  }),
+}))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { z } from 'zod'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField } from '../CrudForm'
+
+const dict = { 'ui.forms.actions.save': 'Save' }
+
+const dotPathFields: CrudField[] = [
+  { id: 'workflowName', label: 'Name', type: 'text' },
+  { id: 'metadata.category', label: 'Category', type: 'text' },
+]
+
+function flushMicrotasks() {
+  return act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+describe('CrudForm dot-path base fields (issue #2503)', () => {
+  beforeEach(() => {
+    triggerEventMock.mockReset()
+    triggerEventMock.mockImplementation(async (event: string, data: Record<string, unknown>) => {
+      if (event === 'onBeforeSave') return { ok: true }
+      if (event === 'onAfterSave') return { ok: true }
+      return { ok: true, data }
+    })
+    window.history.replaceState({}, '', '/current')
+  })
+
+  it('hydrates a declared dot-path field from nested initial values on load', async () => {
+    renderWithProviders(
+      <CrudForm
+        title="Edit"
+        fields={dotPathFields}
+        initialValues={{ id: 'wf-1', workflowName: 'Pipeline', metadata: { category: 'Sales' } } as any}
+        onSubmit={() => {}}
+      />,
+      { dict },
+    )
+
+    await flushMicrotasks()
+
+    // The Category input reads values['metadata.category'], hydrated from the
+    // nested metadata.category in initialValues.
+    expect(screen.queryByDisplayValue('Sales')).toBeInTheDocument()
+  })
+
+  it('collapses the flat dot-path key into a nested object for a nested schema on save', async () => {
+    const schema = z.object({
+      workflowName: z.string(),
+      metadata: z
+        .object({ category: z.string().optional() })
+        .optional()
+        .nullable(),
+    })
+
+    function Harness() {
+      const [submitted, setSubmitted] = React.useState<Record<string, unknown> | null>(null)
+      return (
+        <>
+          <CrudForm
+            title="Edit"
+            fields={dotPathFields}
+            schema={schema as any}
+            initialValues={{ id: 'wf-1', workflowName: 'Pipeline', metadata: { category: 'Sales' } } as any}
+            onSubmit={(values) => setSubmitted(values as Record<string, unknown>)}
+          />
+          <div data-testid="submitted">{JSON.stringify(submitted)}</div>
+        </>
+      )
+    }
+
+    const { container } = renderWithProviders(<Harness />, { dict })
+    await flushMicrotasks()
+
+    const categoryInput = container.querySelector(
+      '[data-crud-field-id="metadata.category"] input[type="text"]',
+    ) as HTMLInputElement
+    const form = container.querySelector('form') as HTMLFormElement
+
+    await act(async () => {
+      fireEvent.change(categoryInput, { target: { value: 'qa-category-2466' } })
+      fireEvent.blur(categoryInput)
+    })
+
+    await act(async () => {
+      fireEvent.submit(form)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    const submitted = JSON.parse(screen.getByTestId('submitted').textContent || 'null')
+    expect(submitted).not.toBeNull()
+    // Edited value is reassembled into the nested metadata object the schema declares.
+    expect(submitted.metadata).toEqual({ category: 'qa-category-2466' })
+    // The flat dot-path key is stripped by the non-strict parse for a nested schema.
+    expect(submitted['metadata.category']).toBeUndefined()
+  })
+
+  it('preserves the flat dot-path key for a schema that declares it directly (PR #2513 coexistence)', async () => {
+    const schema = z.object({
+      workflowName: z.string(),
+      'metadata.category': z.string().optional(),
+    })
+
+    function Harness() {
+      const [submitted, setSubmitted] = React.useState<Record<string, unknown> | null>(null)
+      return (
+        <>
+          <CrudForm
+            title="Edit"
+            fields={dotPathFields}
+            schema={schema as any}
+            initialValues={{ id: 'wf-1', workflowName: 'Pipeline', metadata: { category: 'Sales' } } as any}
+            onSubmit={(values) => setSubmitted(values as Record<string, unknown>)}
+          />
+          <div data-testid="submitted">{JSON.stringify(submitted)}</div>
+        </>
+      )
+    }
+
+    const { container } = renderWithProviders(<Harness />, { dict })
+    await flushMicrotasks()
+
+    const categoryInput = container.querySelector(
+      '[data-crud-field-id="metadata.category"] input[type="text"]',
+    ) as HTMLInputElement
+    const form = container.querySelector('form') as HTMLFormElement
+
+    await act(async () => {
+      fireEvent.change(categoryInput, { target: { value: 'qa-category-2466' } })
+      fireEvent.blur(categoryInput)
+    })
+
+    await act(async () => {
+      fireEvent.submit(form)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    const submitted = JSON.parse(screen.getByTestId('submitted').textContent || 'null')
+    expect(submitted).not.toBeNull()
+    // A flat-key schema keeps the flat representation untouched.
+    expect(submitted['metadata.category']).toBe('qa-category-2466')
+    expect(submitted.metadata).toBeUndefined()
+  })
+
+  it('does not flag a required nested field on blur once the dot-path input is filled', async () => {
+    const schema = z.object({
+      workflowName: z.string(),
+      metadata: z.object({ category: z.string().min(1) }),
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Edit"
+        fields={dotPathFields}
+        schema={schema as any}
+        initialValues={{ id: 'wf-1', workflowName: 'Pipeline', metadata: { category: 'Sales' } } as any}
+        onSubmit={() => {}}
+      />,
+      { dict },
+    )
+
+    await flushMicrotasks()
+
+    const categoryInput = container.querySelector(
+      '[data-crud-field-id="metadata.category"] input[type="text"]',
+    ) as HTMLInputElement
+
+    await act(async () => {
+      fireEvent.change(categoryInput, { target: { value: 'qa-category-2466' } })
+      fireEvent.blur(categoryInput)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    // Blur validation collapses the flat key before schema.safeParse, so the
+    // required nested metadata.category is seen as satisfied — no error surfaces.
+    const fieldContainer = container.querySelector('[data-crud-field-id="metadata.category"]') as HTMLElement
+    expect(fieldContainer.querySelector('.text-status-error-text')).toBeNull()
+  })
+
+  it('merges multiple dot-path fields sharing a parent into one nested object', async () => {
+    const fields: CrudField[] = [
+      { id: 'workflowName', label: 'Name', type: 'text' },
+      { id: 'metadata.category', label: 'Category', type: 'text' },
+      { id: 'metadata.icon', label: 'Icon', type: 'text' },
+    ]
+    const schema = z.object({
+      workflowName: z.string(),
+      metadata: z
+        .object({ category: z.string().optional(), icon: z.string().optional() })
+        .optional(),
+    })
+
+    function Harness() {
+      const [submitted, setSubmitted] = React.useState<Record<string, unknown> | null>(null)
+      return (
+        <>
+          <CrudForm
+            title="Edit"
+            fields={fields}
+            schema={schema as any}
+            initialValues={{
+              id: 'wf-1',
+              workflowName: 'Pipeline',
+              metadata: { category: 'Sales', icon: 'shopping-cart' },
+            } as any}
+            onSubmit={(values) => setSubmitted(values as Record<string, unknown>)}
+          />
+          <div data-testid="submitted">{JSON.stringify(submitted)}</div>
+        </>
+      )
+    }
+
+    const { container } = renderWithProviders(<Harness />, { dict })
+    await flushMicrotasks()
+
+    const form = container.querySelector('form') as HTMLFormElement
+    await act(async () => {
+      fireEvent.submit(form)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    const submitted = JSON.parse(screen.getByTestId('submitted').textContent || 'null')
+    expect(submitted.metadata).toEqual({ category: 'Sales', icon: 'shopping-cart' })
+  })
+
+  it('does not pollute Object.prototype via a prototype-polluting dot-path field id', async () => {
+    const maliciousFields: CrudField[] = [
+      { id: 'workflowName', label: 'Name', type: 'text' },
+      { id: '__proto__.polluted', label: 'Evil', type: 'text' },
+    ]
+    const schema = z.object({ workflowName: z.string() }).passthrough()
+
+    function Harness() {
+      const [submitted, setSubmitted] = React.useState<Record<string, unknown> | null>(null)
+      return (
+        <>
+          <CrudForm
+            title="Edit"
+            fields={maliciousFields}
+            schema={schema as any}
+            initialValues={{ id: 'wf-1', workflowName: 'Pipeline', '__proto__.polluted': 'pwned' } as any}
+            onSubmit={(values) => setSubmitted(values as Record<string, unknown>)}
+          />
+          <div data-testid="submitted">{JSON.stringify(submitted)}</div>
+        </>
+      )
+    }
+
+    const { container } = renderWithProviders(<Harness />, { dict })
+    await flushMicrotasks()
+
+    const form = container.querySelector('form') as HTMLFormElement
+    await act(async () => {
+      fireEvent.submit(form)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    // The collapse step must skip prototype-polluting segments entirely, so
+    // neither a fresh object nor Object.prototype gains the injected key.
+    expect(({} as Record<string, unknown>).polluted).toBeUndefined()
+    expect((Object.prototype as Record<string, unknown>).polluted).toBeUndefined()
+    // The submit still completes for the legitimate fields.
+    const submitted = JSON.parse(screen.getByTestId('submitted').textContent || 'null')
+    expect(submitted).not.toBeNull()
+    expect(submitted.workflowName).toBe('Pipeline')
+  })
+})