@open-mercato/ui 0.6.6-develop.6410.1.2ad881013e → 0.6.6-develop.6412.1.e99f3c32d9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.6-develop.6410.1.2ad881013e",
+  "version": "0.6.6-develop.6412.1.e99f3c32d9",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6410.1.2ad881013e",
+    "@open-mercato/shared": "0.6.6-develop.6412.1.e99f3c32d9",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6410.1.2ad881013e",
+    "@open-mercato/shared": "0.6.6-develop.6412.1.e99f3c32d9",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -103,6 +103,7 @@ import { SortableGroupHandleProvider, type SortableGroupHandleProps } from './cr
 import { useGroupOrder } from './crud/useGroupOrder'
 import { InjectedField } from './injection/InjectedField'
 import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
+import { insertByInjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
 import { evaluateInjectedVisibility } from './injection/visibility-utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { RichEditor, type RichEditorLabels } from '../primitives/rich-editor'
@@ -1762,21 +1763,27 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   )
 
   const injectedCrudFields = React.useMemo<CrudField[]>(() => {
-    return injectedFieldDefinitions.map((definition) => ({
-      id: definition.id,
-      label: definition.label,
-      type: 'custom',
-      readOnly: definition.readOnly,
-      component: ({ value, setValue, values: formValues }) => (
-        <InjectedField
-          field={definition}
-          value={value}
-          onChange={(_, nextValue) => setValue(nextValue)}
-          context={injectedFieldContext}
-          formData={(formValues ?? values) as Record<string, unknown>}
-        />
-      ),
-    }))
+    return injectedFieldDefinitions.map((definition) => {
+      // InjectedField renders its own i18n-resolved <Label> for every field type
+      // except a custom component (type 'custom' + customComponent). Suppress the
+      // CrudForm row label in those cases so it is not rendered twice (#3047).
+      const injectedFieldRendersOwnLabel = !(definition.type === 'custom' && definition.customComponent)
+      return {
+        id: definition.id,
+        label: injectedFieldRendersOwnLabel ? '' : definition.label,
+        type: 'custom',
+        readOnly: definition.readOnly,
+        component: ({ value, setValue, values: formValues }) => (
+          <InjectedField
+            field={definition}
+            value={value}
+            onChange={(_, nextValue) => setValue(nextValue)}
+            context={injectedFieldContext}
+            formData={(formValues ?? values) as Record<string, unknown>}
+          />
+        ),
+      }
+    })
   }, [injectedFieldContext, injectedFieldDefinitions, values])
 
   const allFields = React.useMemo(() => {
@@ -1997,10 +2004,18 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       }
       if (index < 0) continue
       const fieldEntries = cloned[index].fields ?? []
-      if (!fieldEntries.some((entry) => typeof entry === 'string' && entry === definition.id)) {
-        fieldEntries.push(definition.id)
-      }
-      cloned[index].fields = fieldEntries
+      const alreadyPresent = fieldEntries.some((entry) => {
+        const entryId = typeof entry === 'string' ? entry : entry.id
+        return entryId === definition.id
+      })
+      cloned[index].fields = alreadyPresent
+        ? fieldEntries
+        : insertByInjectionPlacement(
+            fieldEntries,
+            definition.id,
+            definition.placement,
+            (entry) => (typeof entry === 'string' ? entry : entry.id),
+          )
     }
     return cloned
   }, [groups, injectedFieldDefinitions])

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

@@ -0,0 +1,134 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+// Injected field definitions for the CrudForm `:fields` injection spot. The
+// hook is mocked so the test drives `injectedFieldDefinitions` directly without
+// standing up the full injection registry/bootstrap. See issue #3047.
+let injectedFieldWidgets: Array<{ fields: 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: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn(async () => ({ ok: true, data: {} })) }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: injectedFieldWidgets, 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'
+import { InjectionPosition } from '@open-mercato/shared/modules/widgets/injection-position'
+
+const baseFields: CrudField[] = [
+  { id: 'firstName', label: 'First name', type: 'text' },
+  { id: 'lastName', label: 'Last name', type: 'text' },
+  // A trailing field so that "after lastName" is distinct from "end of group":
+  // the buggy unconditional push would land the injected field after `email`.
+  { id: 'email', label: 'Email', type: 'text' },
+]
+
+const groups: CrudFormGroup[] = [
+  { id: 'personalData', label: 'Personal data', fields: ['firstName', 'lastName', 'email'] },
+]
+
+function orderedFieldIds(container: HTMLElement): string[] {
+  const seen: string[] = []
+  container.querySelectorAll('[data-crud-field-id]').forEach((node) => {
+    const id = node.getAttribute('data-crud-field-id')
+    if (id && !seen.includes(id)) seen.push(id)
+  })
+  return seen
+}
+
+describe('CrudForm group field injection (#3047)', () => {
+  afterEach(() => {
+    injectedFieldWidgets = []
+  })
+
+  it('honors placement when injecting a field into an existing group', async () => {
+    injectedFieldWidgets = [
+      {
+        fields: [
+          {
+            id: 'cf:middle_name',
+            label: 'Middle name',
+            type: 'text',
+            group: 'personalData',
+            placement: { position: InjectionPosition.After, relativeTo: 'lastName' },
+          },
+        ],
+      },
+    ]
+
+    const { container } = renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'customers:person',
+        fields: baseFields,
+        groups,
+        onSubmit: () => {},
+      }),
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="cf:middle_name"]')).toBeTruthy()
+    })
+
+    const ids = orderedFieldIds(container)
+    const lastNameIdx = ids.indexOf('lastName')
+    const middleIdx = ids.indexOf('cf:middle_name')
+    const firstNameIdx = ids.indexOf('firstName')
+    const emailIdx = ids.indexOf('email')
+    expect(firstNameIdx).toBeGreaterThanOrEqual(0)
+    expect(lastNameIdx).toBeGreaterThan(firstNameIdx)
+    // Injected field lands directly after `lastName` (placement honored), not at
+    // the end of the group after `email` (the pre-fix append behavior).
+    expect(middleIdx).toBe(lastNameIdx + 1)
+    expect(emailIdx).toBe(middleIdx + 1)
+  })
+
+  it('renders the injected field label exactly once', async () => {
+    injectedFieldWidgets = [
+      {
+        fields: [
+          {
+            id: 'cf:middle_name',
+            label: 'Middle name',
+            type: 'text',
+            group: 'personalData',
+            placement: { position: InjectionPosition.After, relativeTo: 'lastName' },
+          },
+        ],
+      },
+    ]
+
+    const { container } = renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'customers:person',
+        fields: baseFields,
+        groups,
+        onSubmit: () => {},
+      }),
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="cf:middle_name"]')).toBeTruthy()
+    })
+
+    const labelMatches = Array.from(container.querySelectorAll('label')).filter(
+      (node) => node.textContent?.trim() === 'Middle name',
+    )
+    expect(labelMatches).toHaveLength(1)
+  })
+})