@asteby/metacore-runtime-react 37.0.1 → 37.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 37.0.2
+
+### Patch Changes
+
+- 653afe4: Never flash raw dotted i18n keys in ModelActionToolbar: humanizeActionLabel fallback + onActionIntent for Module Federation prefetch.
+
 ## 37.0.1
 
 ### Patch Changes

package/dist/model-action-toolbar.d.ts

@@ -17,11 +17,26 @@ export interface ModelActionToolbarProps {
     onChange?: () => void;
     /** Extra classes on the button row container. */
     className?: string;
+    /**
+     * Fired on hover/focus of an action button so the host can prefetch a
+     * federated remote (e.g. collections) before the click — Module Federation
+     * lazy load without blocking first paint of the list page.
+     */
+    onActionIntent?: (action: ActionDefinition) => void;
 }
+/**
+ * Last-resort label when `t(key)` has no translation yet: never flash the full
+ * dotted key in a primary CTA. Prefers the action/field segment over a trailing
+ * `.label` / `.confirm` leaf.
+ *   "receivables.action.collect_payment_create" → "Collect payment create"
+ *   "integration_github.action.create_issue.label" → "Create issue"
+ * Already-human labels pass through unchanged.
+ */
+export declare function humanizeActionLabel(label: string): string;
 /**
  * Returns the model's actions matching the requested placements. Reads from the
  * `actions` prop when provided, else the metadata cache, else fetches once.
  */
 export declare function useModelActions(model: string, placements?: ActionPlacement[], provided?: ActionDefinition[]): ActionDefinition[];
-export declare function ModelActionToolbar({ model, endpoint, actions, placements, onChange, className, }: ModelActionToolbarProps): import("react").JSX.Element | null;
+export declare function ModelActionToolbar({ model, endpoint, actions, placements, onChange, className, onActionIntent, }: ModelActionToolbarProps): import("react").JSX.Element | null;
 //# sourceMappingURL=model-action-toolbar.d.ts.map

package/dist/model-action-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-action-toolbar.d.ts","sourceRoot":"","sources":["../src/model-action-toolbar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAiC,MAAM,SAAS,CAAA;AAE9E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,uBAAuB;IACpC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qEAAqE;IACrE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAmBD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE,MAAM,EACb,UAAU,GAAE,eAAe,EAAuB,EAClD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,GAC9B,gBAAgB,EAAE,CA2BpB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAA+B,EAC/B,QAAQ,EACR,SAAS,GACZ,EAAE,uBAAuB,sCA0DzB"}
+{"version":3,"file":"model-action-toolbar.d.ts","sourceRoot":"","sources":["../src/model-action-toolbar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAiC,MAAM,SAAS,CAAA;AAE9E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,uBAAuB;IACpC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qEAAqE;IACrE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACtD;AAID;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAgBzD;AAiBD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE,MAAM,EACb,UAAU,GAAE,eAAe,EAAuB,EAClD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,GAC9B,gBAAgB,EAAE,CA2BpB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAA+B,EAC/B,QAAQ,EACR,SAAS,EACT,cAAc,GACjB,EAAE,uBAAuB,sCAgEzB"}

package/dist/model-action-toolbar.js

@@ -27,6 +27,31 @@ import { DynamicIcon } from './dynamic-icon';
 import { ActionModalDispatcher } from './action-modal-dispatcher';
 import { useCan, modelCapability } from './permissions-context';
 const DEFAULT_PLACEMENTS = ['table', 'create'];
+/**
+ * Last-resort label when `t(key)` has no translation yet: never flash the full
+ * dotted key in a primary CTA. Prefers the action/field segment over a trailing
+ * `.label` / `.confirm` leaf.
+ *   "receivables.action.collect_payment_create" → "Collect payment create"
+ *   "integration_github.action.create_issue.label" → "Create issue"
+ * Already-human labels pass through unchanged.
+ */
+export function humanizeActionLabel(label) {
+    if (!label)
+        return label;
+    if (!label.includes('.') || /\s/.test(label))
+        return label;
+    const parts = label.split('.').filter(Boolean);
+    let leaf = parts[parts.length - 1] || label;
+    if ((leaf === 'label' || leaf === 'confirm' || leaf === 'title') &&
+        parts.length >= 2) {
+        leaf = parts[parts.length - 2];
+    }
+    return leaf
+        .split('_')
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ');
+}
 function toActionMetadata(a) {
     return {
         key: a.key,
@@ -71,7 +96,7 @@ export function useModelActions(model, placements = DEFAULT_PLACEMENTS, provided
     const all = provided ?? cached?.actions ?? fetched?.actions ?? [];
     return useMemo(() => all.filter((a) => placements.includes((a.placement ?? 'row'))), [all, placements]);
 }
-export function ModelActionToolbar({ model, endpoint, actions, placements = DEFAULT_PLACEMENTS, onChange, className, }) {
+export function ModelActionToolbar({ model, endpoint, actions, placements = DEFAULT_PLACEMENTS, onChange, className, onActionIntent, }) {
     const { t } = useTranslation();
     const all = useModelActions(model, placements, actions);
     // Capability gating — always-true without a <PermissionsProvider>. Custom
@@ -84,7 +109,10 @@ export function ModelActionToolbar({ model, endpoint, actions, placements = DEFA
         return null;
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: className ?? 'flex items-center gap-2', children: surfaced.map((a) => {
                     const isCreate = (a.placement ?? 'row') === 'create';
-                    return (_jsxs(Button, { variant: isCreate ? 'default' : 'outline', onClick: () => setActive(toActionMetadata(a)), style: a.color && !isCreate ? { borderColor: a.color, color: a.color } : undefined, children: [_jsx(DynamicIcon, { name: a.icon || (isCreate ? 'Plus' : 'Zap'), className: "mr-2 h-4 w-4" }), t(a.label, { defaultValue: a.label })] }, a.key));
+                    return (_jsxs(Button, { variant: isCreate ? 'default' : 'outline', onClick: () => {
+                            onActionIntent?.(a);
+                            setActive(toActionMetadata(a));
+                        }, onMouseEnter: () => onActionIntent?.(a), onFocus: () => onActionIntent?.(a), style: a.color && !isCreate ? { borderColor: a.color, color: a.color } : undefined, children: [_jsx(DynamicIcon, { name: a.icon || (isCreate ? 'Plus' : 'Zap'), className: "mr-2 h-4 w-4" }), t(a.label, { defaultValue: humanizeActionLabel(a.label) })] }, a.key));
                 }) }), active && (_jsx(ActionModalDispatcher, { open: !!active, onOpenChange: (open) => {
                     if (!open)
                         setActive(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "37.0.1",
+  "version": "37.0.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.7.0",
-    "@asteby/metacore-ui": "2.17.3"
+    "@asteby/metacore-ui": "2.17.3",
+    "@asteby/metacore-sdk": "3.7.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/model-action-toolbar-i18n.test.tsx

@@ -56,12 +56,13 @@ describe('ModelActionToolbar — translates addon action labels at render', () =
         const inst = makeI18n()
         renderToolbar(inst)
 
-        // Before the addon bundle loads the toolbar has only the key; with the
-        // fix it renders the key text (t() falls back to defaultValue = the key).
-        // The point of the test is the TRANSITION below.
+        // Before the addon bundle loads the toolbar must NOT flash the full
+        // dotted key — humanizeActionLabel turns the last segment into a
+        // readable fallback until addResourceBundle fires.
+        expect(screen.getByText('Create Issue')).toBeTruthy()
         expect(
-            screen.getByText('integration_github.action.create_issue.label'),
-        ).toBeTruthy()
+            screen.queryByText('integration_github.action.create_issue.label'),
+        ).toBeNull()
 
         // The addon locale bundle arrives asynchronously (OpsAddonLocaleLoader
         // fetch → addResourceBundle). It is NESTED, as the host loader now merges
@@ -79,8 +80,30 @@ describe('ModelActionToolbar — translates addon action labels at render', () =
         // The toolbar must re-render and show the translated label — the exact
         // behaviour that was missing (a bare {a.label} never re-derived).
         await waitFor(() => expect(screen.getByText('Crear issue')).toBeTruthy())
+        expect(screen.queryByText('Create Issue')).toBeNull()
+    })
+
+    it('humanizes collect_payment_create without flashing the receivables key', () => {
+        const inst = makeI18n()
+        render(
+            <I18nextProvider i18n={inst}>
+                <ApiProvider client={api}>
+                    <ModelActionToolbar
+                        model="account_statements"
+                        actions={[
+                            {
+                                key: 'collect_payment_create',
+                                label: 'receivables.action.collect_payment_create',
+                                placement: 'create',
+                            } as ActionDefinition,
+                        ]}
+                    />
+                </ApiProvider>
+            </I18nextProvider>,
+        )
+        expect(screen.getByText('Collect Payment Create')).toBeTruthy()
         expect(
-            screen.queryByText('integration_github.action.create_issue.label'),
+            screen.queryByText('receivables.action.collect_payment_create'),
         ).toBeNull()
     })
 

package/src/model-action-toolbar.tsx

@@ -46,10 +46,42 @@ export interface ModelActionToolbarProps {
     onChange?: () => void
     /** Extra classes on the button row container. */
     className?: string
+    /**
+     * Fired on hover/focus of an action button so the host can prefetch a
+     * federated remote (e.g. collections) before the click — Module Federation
+     * lazy load without blocking first paint of the list page.
+     */
+    onActionIntent?: (action: ActionDefinition) => void
 }
 
 const DEFAULT_PLACEMENTS: ActionPlacement[] = ['table', 'create']
 
+/**
+ * Last-resort label when `t(key)` has no translation yet: never flash the full
+ * dotted key in a primary CTA. Prefers the action/field segment over a trailing
+ * `.label` / `.confirm` leaf.
+ *   "receivables.action.collect_payment_create" → "Collect payment create"
+ *   "integration_github.action.create_issue.label" → "Create issue"
+ * Already-human labels pass through unchanged.
+ */
+export function humanizeActionLabel(label: string): string {
+    if (!label) return label
+    if (!label.includes('.') || /\s/.test(label)) return label
+    const parts = label.split('.').filter(Boolean)
+    let leaf = parts[parts.length - 1] || label
+    if (
+        (leaf === 'label' || leaf === 'confirm' || leaf === 'title') &&
+        parts.length >= 2
+    ) {
+        leaf = parts[parts.length - 2]
+    }
+    return leaf
+        .split('_')
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ')
+}
+
 function toActionMetadata(a: ActionDefinition): ActionMetadata {
     return {
         key: a.key,
@@ -109,6 +141,7 @@ export function ModelActionToolbar({
     placements = DEFAULT_PLACEMENTS,
     onChange,
     className,
+    onActionIntent,
 }: ModelActionToolbarProps) {
     const { t } = useTranslation()
     const all = useModelActions(model, placements, actions)
@@ -133,7 +166,12 @@ export function ModelActionToolbar({
                         <Button
                             key={a.key}
                             variant={isCreate ? 'default' : 'outline'}
-                            onClick={() => setActive(toActionMetadata(a))}
+                            onClick={() => {
+                                onActionIntent?.(a)
+                                setActive(toActionMetadata(a))
+                            }}
+                            onMouseEnter={() => onActionIntent?.(a)}
+                            onFocus={() => onActionIntent?.(a)}
                             style={a.color && !isCreate ? { borderColor: a.color, color: a.color } : undefined}
                         >
                             <DynamicIcon name={a.icon || (isCreate ? 'Plus' : 'Zap')} className="mr-2 h-4 w-4" />
@@ -142,8 +180,9 @@ export function ModelActionToolbar({
                                 locale bundle loads asynchronously, so translate at render — a
                                 bare `{a.label}` prints the raw key until (and after) the bundle
                                 lands because nothing re-derives it. defaultValue keeps an
-                                already-localized label untouched. */}
-                            {t(a.label, { defaultValue: a.label })}
+                                already-localized label untouched; humanizeLastSegment avoids
+                                flashing the full dotted key when the bundle is still in flight. */}
+                            {t(a.label, { defaultValue: humanizeActionLabel(a.label) })}
                         </Button>
                     )
                 })}