@asteby/metacore-runtime-react 23.7.0 → 23.7.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @asteby/metacore-runtime-react
 
+## 23.7.1
+
+### Patch Changes
+
+- a3538da: fix(runtime-react): translate addon action labels at render (toolbar + modal)
+
+  `ModelActionToolbar` and `ActionModalDispatcher` rendered an action's `label`
+  (and each field's `label`) verbatim. For an addon's custom action these are i18n
+  keys (e.g. `integration_github.action.create_issue.label`) whose locale bundle
+  loads asynchronously, so the create button, the modal title/submit, and the
+  field labels showed the raw key — and never re-derived once the bundle landed.
+  They now translate at render with `t(label, { defaultValue: label })`, so the
+  label resolves the moment the addon i18n arrives (via the i18next store `added`
+  event) and an already-localized string passes through unchanged.
+
 ## 23.7.0
 
 ### Minor Changes

package/dist/action-modal-dispatcher.js

@@ -111,6 +111,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
     const { t } = useTranslation();
     const api = useApi();
     const [executing, setExecuting] = useState(false);
+    // `action.label` is an addon-contributed i18n key; its locale bundle loads
+    // asynchronously, so translate at render (defaultValue keeps an already
+    // localized label unchanged).
+    const label = t(action.label, { defaultValue: action.label });
     const execute = async () => {
         setExecuting(true);
         try {
@@ -132,10 +136,14 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
             setExecuting(false);
         }
     };
-    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), _jsx(AlertDialogDescription, { children: action.confirmMessage || `${action.label}?` })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: executing, children: t('common.cancel') }), _jsxs(AlertDialogAction, { onClick: (e) => { e.preventDefault(); execute(); }, disabled: executing, style: action.color ? { backgroundColor: action.color } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
+    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), label] }), _jsx(AlertDialogDescription, { children: action.confirmMessage || `${label}?` })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: executing, children: t('common.cancel') }), _jsxs(AlertDialogAction, { onClick: (e) => { e.preventDefault(); execute(); }, disabled: executing, style: action.color ? { backgroundColor: action.color } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), label] })] })] }) }));
 }
 function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }) {
     const { t } = useTranslation();
+    // Addon-contributed labels (action + fields) are i18n keys whose locale
+    // bundle loads asynchronously; translate at render so they don't render raw.
+    // defaultValue keeps an already-localized string unchanged.
+    const tl = (s) => t(s, { defaultValue: s });
     const api = useApi();
     const [formData, setFormData] = useState({});
     const [executing, setExecuting] = useState(false);
@@ -194,13 +202,13 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 if (isLineItemsField(field)) {
                     const rows = formData[field.key];
                     if (!Array.isArray(rows) || rows.length === 0) {
-                        toast.error(`${field.label} requiere al menos un renglón`);
+                        toast.error(`${tl(field.label)} requiere al menos un renglón`);
                         return;
                     }
                     continue;
                 }
                 if (!formData[field.key] && formData[field.key] !== false) {
-                    toast.error(`${field.label} es requerido`);
+                    toast.error(`${tl(field.label)} es requerido`);
                     return;
                 }
             }
@@ -239,12 +247,12 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
         : hasLineItems
             ? '820px'
             : undefined;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-xl'), style: { maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4", children: _jsxs(FieldGrid, { children: [action.fields?.map((field) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-xl'), style: { maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), tl(action.label)] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4", children: _jsxs(FieldGrid, { children: [action.fields?.map((field) => {
                                 const fullWidth = isLineItemsField(field) ||
                                     resolveWidget(field) === 'textarea' ||
                                     resolveWidget(field) === 'richtext';
-                                return (_jsxs(FieldCell, { fullWidth: fullWidth, children: [_jsx(FieldLabel, { htmlFor: field.key, required: field.required, children: field.label }), renderField(field, formData[field.key], (v) => updateField(field.key, v), formData)] }, field.key));
-                            }), relations.length > 0 && (_jsx(FieldCell, { fullWidth: true, children: _jsx(DynamicRelations, { record: record, relations: relations }) }))] }) }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
+                                return (_jsxs(FieldCell, { fullWidth: fullWidth, children: [_jsx(FieldLabel, { htmlFor: field.key, required: field.required, children: tl(field.label) }), renderField(field, formData[field.key], (v) => updateField(field.key, v), formData)] }, field.key));
+                            }), relations.length > 0 && (_jsx(FieldCell, { fullWidth: true, children: _jsx(DynamicRelations, { record: record, relations: relations }) }))] }) }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), tl(action.label)] })] })] }) }));
 }
 function renderField(field, value, onChange, 
 // Full current form values — lets a line-items grid (and any cascading

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":"AA0BA,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,sCAmDzB"}
+{"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"}

package/dist/model-action-toolbar.js

@@ -19,6 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // it internally, and bespoke host pages (e.g. ops `/m/$model`) mount it directly
 // next to their own toolbar. Hosts never reimplement action-button plumbing.
 import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@asteby/metacore-ui/primitives';
 import { useApi } from './api-context';
 import { useMetadataCache } from './metadata-cache';
@@ -71,6 +72,7 @@ export function useModelActions(model, placements = DEFAULT_PLACEMENTS, provided
     return useMemo(() => all.filter((a) => placements.includes((a.placement ?? 'row'))), [all, placements]);
 }
 export function ModelActionToolbar({ model, endpoint, actions, placements = DEFAULT_PLACEMENTS, onChange, className, }) {
+    const { t } = useTranslation();
     const all = useModelActions(model, placements, actions);
     // Capability gating — always-true without a <PermissionsProvider>. Custom
     // table/create actions map onto `lowercase(model).<action_key>`.
@@ -82,7 +84,7 @@ 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" }), a.label] }, a.key));
+                    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));
                 }) }), active && (_jsx(ActionModalDispatcher, { open: !!active, onOpenChange: (open) => {
                     if (!open)
                         setActive(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.7.0",
+  "version": "23.7.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+import i18next from 'i18next'
+import { I18nextProvider } from 'react-i18next'
+
+import { ModelActionToolbar } from '../model-action-toolbar'
+import { ApiProvider } from '../api-context'
+import type { ActionDefinition } from '../types'
+
+afterEach(cleanup)
+
+// Stub api client — the toolbar only calls it when it must fetch metadata, and
+// we pass `actions` directly so it never does. Present only to satisfy useApi().
+const api = {
+    get: async () => ({ data: { data: {} } }),
+    post: async () => ({ data: { success: true } }),
+} as never
+
+// A fresh i18next configured EXACTLY like the failing prod instance: keySeparator
+// default and ignoreJSONStructure:false, so a flat literal key would NOT resolve
+// — the fix must build/read a nested tree AND translate at render time.
+function makeI18n() {
+    const inst = i18next.createInstance()
+    inst.init({
+        lng: 'es',
+        fallbackLng: 'es',
+        ignoreJSONStructure: false,
+        react: { bindI18nStore: 'added removed', useSuspense: false },
+        resources: { es: { translation: {} } },
+    })
+    return inst
+}
+
+// The addon's create action exactly as the metadata endpoint ships it: the
+// label is an i18n KEY, not display text (backend does not localize action
+// labels — see the raw-key bug).
+const createAction: ActionDefinition = {
+    key: 'create_issue',
+    label: 'integration_github.action.create_issue.label',
+    placement: 'create',
+} as ActionDefinition
+
+function renderToolbar(inst: ReturnType<typeof makeI18n>) {
+    return render(
+        <I18nextProvider i18n={inst}>
+            <ApiProvider client={api}>
+                <ModelActionToolbar model="github_issues" actions={[createAction]} />
+            </ApiProvider>
+        </I18nextProvider>,
+    )
+}
+
+describe('ModelActionToolbar — translates addon action labels at render', () => {
+    it('shows the translation once the addon bundle lands (no raw key)', async () => {
+        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.
+        expect(
+            screen.getByText('integration_github.action.create_issue.label'),
+        ).toBeTruthy()
+
+        // The addon locale bundle arrives asynchronously (OpsAddonLocaleLoader
+        // fetch → addResourceBundle). It is NESTED, as the host loader now merges
+        // it. This fires the i18next store 'added' event.
+        act(() => {
+            inst.addResourceBundle(
+                'es',
+                'translation',
+                { integration_github: { action: { create_issue: { label: 'Crear issue' } } } },
+                true,
+                true,
+            )
+        })
+
+        // 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('integration_github.action.create_issue.label'),
+        ).toBeNull()
+    })
+
+    it('leaves an already-localized label untouched (defaultValue passthrough)', () => {
+        const inst = makeI18n()
+        render(
+            <I18nextProvider i18n={inst}>
+                <ApiProvider client={api}>
+                    <ModelActionToolbar
+                        model="github_issues"
+                        actions={[{ key: 'x', label: 'Crear issue', placement: 'create' } as ActionDefinition]}
+                    />
+                </ApiProvider>
+            </I18nextProvider>,
+        )
+        expect(screen.getByText('Crear issue')).toBeTruthy()
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -218,6 +218,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
     const { t } = useTranslation()
     const api = useApi()
     const [executing, setExecuting] = useState(false)
+    // `action.label` is an addon-contributed i18n key; its locale bundle loads
+    // asynchronously, so translate at render (defaultValue keeps an already
+    // localized label unchanged).
+    const label = t(action.label, { defaultValue: action.label })
 
     const execute = async () => {
         setExecuting(true)
@@ -244,10 +248,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                 <AlertDialogHeader>
                     <AlertDialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
-                        {action.label}
+                        {label}
                     </AlertDialogTitle>
                     <AlertDialogDescription>
-                        {action.confirmMessage || `${action.label}?`}
+                        {action.confirmMessage || `${label}?`}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -258,7 +262,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                         style={action.color ? { backgroundColor: action.color } : undefined}
                     >
                         {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
-                        {action.label}
+                        {label}
                     </AlertDialogAction>
                 </AlertDialogFooter>
             </AlertDialogContent>
@@ -268,6 +272,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
 
 function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
     const { t } = useTranslation()
+    // Addon-contributed labels (action + fields) are i18n keys whose locale
+    // bundle loads asynchronously; translate at render so they don't render raw.
+    // defaultValue keeps an already-localized string unchanged.
+    const tl = (s: string) => t(s, { defaultValue: s })
     const api = useApi()
     const [formData, setFormData] = useState<Record<string, any>>({})
     const [executing, setExecuting] = useState(false)
@@ -326,13 +334,13 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 if (isLineItemsField(field)) {
                     const rows = formData[field.key]
                     if (!Array.isArray(rows) || rows.length === 0) {
-                        toast.error(`${field.label} requiere al menos un renglón`)
+                        toast.error(`${tl(field.label)} requiere al menos un renglón`)
                         return
                     }
                     continue
                 }
                 if (!formData[field.key] && formData[field.key] !== false) {
-                    toast.error(`${field.label} es requerido`)
+                    toast.error(`${tl(field.label)} es requerido`)
                     return
                 }
             }
@@ -389,7 +397,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 <DialogHeader className="shrink-0">
                     <DialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
-                        {action.label}
+                        {tl(action.label)}
                     </DialogTitle>
                     {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
                 </DialogHeader>
@@ -408,7 +416,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                             return (
                                 <FieldCell key={field.key} fullWidth={fullWidth}>
                                     <FieldLabel htmlFor={field.key} required={field.required}>
-                                        {field.label}
+                                        {tl(field.label)}
                                     </FieldLabel>
                                     {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData)}
                                 </FieldCell>
@@ -431,7 +439,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                         style={action.color ? { backgroundColor: action.color, color: 'white' } : undefined}
                     >
                         {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
-                        {action.label}
+                        {tl(action.label)}
                     </Button>
                 </DialogFooter>
             </DialogContent>

package/src/model-action-toolbar.tsx

@@ -18,6 +18,7 @@
 // it internally, and bespoke host pages (e.g. ops `/m/$model`) mount it directly
 // next to their own toolbar. Hosts never reimplement action-button plumbing.
 import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '@asteby/metacore-ui/primitives'
 import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
@@ -109,6 +110,7 @@ export function ModelActionToolbar({
     onChange,
     className,
 }: ModelActionToolbarProps) {
+    const { t } = useTranslation()
     const all = useModelActions(model, placements, actions)
     // Capability gating — always-true without a <PermissionsProvider>. Custom
     // table/create actions map onto `lowercase(model).<action_key>`.
@@ -135,7 +137,13 @@ export function ModelActionToolbar({
                             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" />
-                            {a.label}
+                            {/* `a.label` is an addon-contributed i18n key (e.g.
+                                "integration_github.action.create_issue.label"); the addon's
+                                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 })}
                         </Button>
                     )
                 })}