@open-mercato/ui 0.8.1-develop.7455.1.8f7e53badb → 0.8.1-develop.7458.1.3847638f67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.8.1-develop.7455.1.8f7e53badb",
+  "version": "0.8.1-develop.7458.1.3847638f67",
   "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.7455.1.8f7e53badb",
+    "@open-mercato/shared": "0.8.1-develop.7458.1.3847638f67",
     "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.7455.1.8f7e53badb",
+    "@open-mercato/shared": "0.8.1-develop.7458.1.3847638f67",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/backend/CrudForm.tsx

@@ -1638,6 +1638,15 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       {extraActions}
     </>
   ) : undefined
+  const renderFooterActions = !hideFooterActions && !formReadOnly
+  const embeddedExtraActions = renderFooterActions ? undefined : extraActions
+  const embeddedHeaderActions = versionHistoryEnabled || headerInjectionAction || embeddedExtraActions ? (
+    <>
+      {versionHistoryEnabled ? versionHistoryAction : null}
+      {headerInjectionAction}
+      {embeddedExtraActions}
+    </>
+  ) : undefined
 
   // Auto-append custom fields for this entityId
   React.useEffect(() => {
@@ -3919,8 +3928,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               submit: formReadOnly ? undefined : { formId, pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
             }}
           />
-        ) : headerExtraActions ? (
-          <div className="flex justify-end gap-2 mb-2">{headerExtraActions}</div>
+        ) : embeddedHeaderActions ? (
+          <div className="flex justify-end gap-2 mb-2">{embeddedHeaderActions}</div>
         ) : null}
         {contentHeader}
         <DataLoader
@@ -3958,7 +3967,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               {hasSecondaryColumn ? <div className={densityStackMd} data-crud-injection-region>{col2Content}</div> : null}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
-            {hideFooterActions || formReadOnly ? null : (
+            {renderFooterActions ? (
               <FormFooter
                 embedded={embedded}
                 className={dialogFooterClass}
@@ -3972,7 +3981,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                   submit: { pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
                 }}
               />
-            )}
+            ) : null}
             </form>,
           )}
         </DataLoader>
@@ -4002,8 +4011,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
             submit: formReadOnly ? undefined : { formId, pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
           }}
         />
-      ) : headerExtraActions ? (
-        <div className="flex justify-end gap-2 mb-2">{headerExtraActions}</div>
+      ) : embeddedHeaderActions ? (
+        <div className="flex justify-end gap-2 mb-2">{embeddedHeaderActions}</div>
       ) : null}
       {contentHeader}
       <DataLoader
@@ -4056,7 +4065,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               })}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
-            {hideFooterActions || formReadOnly ? null : (
+            {renderFooterActions ? (
               <FormFooter
                 embedded={embedded}
                 className={dialogFooterClass}
@@ -4070,7 +4079,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                   submit: { pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
                 }}
               />
-            )}
+            ) : null}
           </form>
           </div>,
         )}

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

@@ -0,0 +1,114 @@
+/** @jest-environment jsdom */
+
+/**
+ * An embedded CrudForm is the body of a dialog: its footer is the only action
+ * row the user sees, and hosts put the dialog's Cancel button there by passing
+ * it through `extraActions`. Rendering that same node again in the embedded
+ * header strip produced two Cancel buttons in one dialog (issue #6750).
+ *
+ * The contract pinned here:
+ *
+ *   1. embedded + a rendered footer  -> `extraActions` appear once, in the footer,
+ *   2. embedded + no footer          -> they fall back to the header strip rather
+ *                                       than disappearing, and
+ *   3. not embedded                  -> the intentional FormHeader/FormFooter
+ *                                       mirroring is untouched.
+ */
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn().mockResolvedValue(true), ConfirmDialogElement: null }),
+}))
+jest.mock('../custom-fields/FieldDefinitionsManager', () => {
+  const React = require('react')
+  return { __esModule: true, FieldDefinitionsManager: React.forwardRef(() => <div />) }
+})
+jest.mock('../utils/customFieldForms', () => ({
+  __esModule: true,
+  buildFormFieldFromCustomFieldDef: jest.fn(),
+  buildFormFieldsFromCustomFields: jest.fn(() => []),
+  fetchCustomFieldFormStructure: jest.fn(),
+}))
+
+import * as React from 'react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { Button } from '../../primitives/button'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [{ id: 'name', label: 'Name', type: 'text' }]
+const groups: CrudFormGroup[] = [{ id: 'basic', title: 'Basic', column: 1, fields: ['name'] }]
+
+type FormOptions = {
+  embedded?: boolean
+  hideFooterActions?: boolean
+  readOnly?: boolean
+}
+
+function renderForm({ embedded = true, hideFooterActions, readOnly }: FormOptions = {}) {
+  const { container } = renderWithProviders(
+    <CrudForm
+      fields={fields}
+      groups={groups}
+      initialValues={{ name: 'x' }}
+      onSubmit={jest.fn()}
+      submitLabel="Apply"
+      embedded={embedded}
+      hideFooterActions={hideFooterActions}
+      readOnly={readOnly}
+      extraActions={(
+        <Button type="button" variant="ghost">Cancel</Button>
+      )}
+    />,
+  )
+  return container
+}
+
+function cancelButtons(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('button')).filter(
+    (button) => button.textContent?.trim() === 'Cancel',
+  )
+}
+
+describe('CrudForm embedded extraActions', () => {
+  it('renders a single Cancel action, in the footer beside the submit button', () => {
+    const container = renderForm()
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+
+    const form = container.querySelector('form')
+    expect(form).not.toBeNull()
+    expect(form!.contains(cancels[0])).toBe(true)
+
+    const submit = container.querySelector<HTMLElement>('button[type="submit"]')
+    expect(submit?.textContent).toContain('Apply')
+    expect(cancels[0].parentElement).toBe(submit?.parentElement)
+  })
+
+  it('keeps the actions visible in the header strip when the footer is hidden', () => {
+    const container = renderForm({ hideFooterActions: true })
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+    expect(container.querySelector('form')?.contains(cancels[0])).toBe(false)
+  })
+
+  it('keeps the actions visible in the header strip when the form is read-only', () => {
+    const container = renderForm({ readOnly: true })
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+    expect(container.querySelector('form')?.contains(cancels[0])).toBe(false)
+  })
+
+  it('leaves the non-embedded header/footer mirroring in place', () => {
+    const container = renderForm({ embedded: false })
+
+    expect(cancelButtons(container)).toHaveLength(2)
+  })
+})