@byline/admin 2.5.2 → 2.6.1

package/dist/modules/admin-roles/components/permissions.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Checkbox, LoaderEllipsis } from "@byline/ui/react";
 import classnames from "classnames";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
@@ -11,6 +12,7 @@ function setsEqual(a, b) {
     return true;
 }
 function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, onClearAll }) {
+    const { t } = useTranslation('byline-admin');
     const groupKeys = useMemo(()=>group.abilities.map((a)=>a.key), [
         group.abilities
     ]);
@@ -28,15 +30,13 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
                                 className: classnames('byline-role-permissions-group-name', permissions_module["group-name"]),
                                 children: group.group
                             }),
-                            /*#__PURE__*/ jsxs("span", {
+                            /*#__PURE__*/ jsx("span", {
                                 className: classnames('muted', 'byline-role-permissions-group-count', permissions_module["group-count"]),
-                                children: [
-                                    selectedInGroup,
-                                    " of ",
-                                    group.abilities.length,
-                                    " ",
-                                    isEdit ? 'selected' : 'granted'
-                                ]
+                                children: t('adminRoles.permissions.groupCount', {
+                                    selected: selectedInGroup,
+                                    total: group.abilities.length,
+                                    mode
+                                })
                             })
                         ]
                     }),
@@ -49,7 +49,7 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
                                 type: "button",
                                 disabled: saving || selectedInGroup === group.abilities.length,
                                 onClick: ()=>onSelectAll(groupKeys),
-                                children: "Select all"
+                                children: t('adminRoles.permissions.selectAll')
                             }),
                             /*#__PURE__*/ jsx(Button, {
                                 size: "xs",
@@ -57,7 +57,7 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
                                 type: "button",
                                 disabled: saving || 0 === selectedInGroup,
                                 onClick: ()=>onClearAll(groupKeys),
-                                children: "Clear"
+                                children: t('adminRoles.permissions.clear')
                             })
                         ]
                     }) : null
@@ -111,6 +111,7 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
 }
 function RolePermissions({ role, registered, initialAbilities, onSaved }) {
     const { setRoleAbilities } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
     const [mode, setMode] = useState('view');
     const [initialSet, setInitialSet] = useState(()=>new Set(initialAbilities));
     const [selected, setSelected] = useState(()=>new Set(initialAbilities));
@@ -172,8 +173,8 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
             onSaved?.(response);
         } catch (err) {
             const code = getErrorCode(err);
-            if ('admin.permissions.roleNotFound' === code) setError('This role no longer exists.');
-            else 'admin.permissions.abilityUnregistered' === code ? setError('One or more selected abilities are no longer registered. Reload the page and try again.') : setError('Could not save permissions. Please try again.');
+            if ('admin.permissions.roleNotFound' === code) setError(t('adminRoles.permissions.errors.roleNotFound'));
+            else 'admin.permissions.abilityUnregistered' === code ? setError(t('adminRoles.permissions.errors.abilityUnregistered')) : setError(t('adminRoles.permissions.errors.fallback'));
         } finally{
             setSaving(false);
         }
@@ -192,25 +193,14 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                         onView: handleEnterView,
                         onEdit: handleEnterEdit
                     }),
-                    /*#__PURE__*/ jsxs("p", {
+                    /*#__PURE__*/ jsx("p", {
                         className: classnames('muted', 'byline-role-permissions-counter', permissions_module.counter),
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-role-permissions-counter-num', permissions_module["counter-num"]),
-                                children: totalSelected
-                            }),
-                            ' ',
-                            "of",
-                            ' ',
-                            /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-role-permissions-counter-num', permissions_module["counter-num"]),
-                                children: registered.total
-                            }),
-                            ' ',
-                            isEdit ? 'selected' : 'granted',
-                            " for ",
-                            role.name
-                        ]
+                        children: t('adminRoles.permissions.counter', {
+                            selected: totalSelected,
+                            total: registered.total,
+                            mode,
+                            role: role.name
+                        })
                     }),
                     isEdit && isDirty ? /*#__PURE__*/ jsxs("div", {
                         className: classnames('byline-role-permissions-actions', permissions_module.actions),
@@ -222,7 +212,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                                 onClick: handleCancel,
                                 disabled: saving,
                                 className: classnames('byline-role-permissions-action', permissions_module.action),
-                                children: "Cancel"
+                                children: t('common.actions.cancel')
                             }),
                             /*#__PURE__*/ jsx(Button, {
                                 type: "button",
@@ -233,7 +223,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                                 className: classnames('byline-role-permissions-action', permissions_module.action),
                                 children: saving ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                     size: 30
-                                }) : 'Save'
+                                }) : t('common.actions.save')
                             })
                         ]
                     }) : null
@@ -259,13 +249,14 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
     });
 }
 function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
+    const { t } = useTranslation('byline-admin');
     const isView = 'view' === mode;
     const isEdit = 'edit' === mode;
     const viewDisabled = dirty || saving;
     const editDisabled = saving;
     return /*#__PURE__*/ jsxs("div", {
         role: "group",
-        "aria-label": "Permissions mode",
+        "aria-label": t('adminRoles.permissions.modeAriaLabel'),
         className: classnames('byline-role-permissions-mode-toggle', permissions_module["mode-toggle"]),
         children: [
             /*#__PURE__*/ jsx("button", {
@@ -279,7 +270,7 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
                     'byline-role-permissions-mode-button-disabled',
                     permissions_module["mode-button-disabled"]
                 ]),
-                children: "View"
+                children: t('adminRoles.permissions.viewMode')
             }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
@@ -292,7 +283,7 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
                     'byline-role-permissions-mode-button-disabled',
                     permissions_module["mode-button-disabled"]
                 ]),
-                children: "Edit"
+                children: t('adminRoles.permissions.editMode')
             })
         ]
     });

package/dist/modules/admin-roles/components/update.js

@@ -1,16 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
+import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Input, LoaderEllipsis, TextArea } from "@byline/ui/react";
 import classnames from "classnames";
 import { z } from "zod";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import update_module from "./update.module.js";
-const updateRoleSchema = z.object({
-    name: z.string().min(1, 'Name is required').max(128, 'Name must not exceed 128 characters'),
-    description: z.string().max(2000, "Description must not exceed 2000 characters")
-});
+const MAX_NAME = 128;
+const MAX_DESCRIPTION = 2000;
 function defaultsFrom(role) {
     return {
         name: role.name,
@@ -28,8 +27,19 @@ function buildPatch(values, role) {
 }
 function UpdateRole({ role, onClose, onSuccess }) {
     const { updateAdminRole } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
     const [formError, setFormError] = useState(null);
     const [successMessage, setSuccessMessage] = useState(null);
+    const updateRoleSchema = useMemo(()=>z.object({
+            name: z.string().min(1, t('adminRoles.create.errors.nameRequired')).max(MAX_NAME, t('adminRoles.create.errors.nameTooLong', {
+                max: MAX_NAME
+            })),
+            description: z.string().max(MAX_DESCRIPTION, t("adminRoles.create.errors.descriptionTooLong", {
+                max: MAX_DESCRIPTION
+            }))
+        }), [
+        t
+    ]);
     const form = useForm({
         defaultValues: defaultsFrom(role),
         validationLogic: revalidateLogic({
@@ -43,7 +53,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
             setFormError(null);
             setSuccessMessage(null);
             const patch = buildPatch(value, role);
-            if (0 === Object.keys(patch).length) return void setSuccessMessage('No changes to save.');
+            if (0 === Object.keys(patch).length) return void setSuccessMessage(t('common.feedback.noChanges'));
             try {
                 const updated = await updateAdminRole({
                     data: {
@@ -52,13 +62,13 @@ function UpdateRole({ role, onClose, onSuccess }) {
                         patch
                     }
                 });
-                setSuccessMessage('Saved.');
+                setSuccessMessage(t('common.feedback.saved'));
                 onSuccess?.(updated);
             } catch (err) {
                 const code = getErrorCode(err);
-                if ('admin.roles.versionConflict' === code) return void setFormError('This role has been modified elsewhere since you opened this form. Reload to get the latest values and try again.');
-                if ('admin.roles.notFound' === code) return void setFormError('This role no longer exists.');
-                setFormError('Could not save changes. Please try again.');
+                if ('admin.roles.versionConflict' === code) return void setFormError(t('adminRoles.update.errors.versionConflict'));
+                if ('admin.roles.notFound' === code) return void setFormError(t('adminRoles.update.errors.notFound'));
+                setFormError(t('common.errors.couldNotSave'));
             }
         }
     });
@@ -84,7 +94,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "name",
                     children: (field)=>/*#__PURE__*/ jsx(Input, {
-                            label: "Name",
+                            label: t('adminRoles.fields.name'),
                             id: "role-name",
                             name: field.name,
                             value: field.state.value,
@@ -96,18 +106,18 @@ function UpdateRole({ role, onClose, onSuccess }) {
                         })
                 }),
                 /*#__PURE__*/ jsx(Input, {
-                    label: "Machine name",
+                    label: t('adminRoles.fields.machineName'),
                     id: "role-machine-name",
                     name: "machine_name",
                     value: role.machine_name,
                     readOnly: true,
                     disabled: true,
-                    helpText: "The stable code-side handle. Cannot be changed after creation."
+                    helpText: t('adminRoles.update.fields.machineNameHelp')
                 }),
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "description",
                     children: (field)=>/*#__PURE__*/ jsx(TextArea, {
-                            label: "Description",
+                            label: t("adminRoles.fields.description"),
                             id: "role-description",
                             name: field.name,
                             value: field.state.value,
@@ -127,7 +137,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
                             size: "sm",
                             onClick: onClose,
                             className: classnames('byline-role-update-action', update_module.action),
-                            children: successMessage ? 'Close' : 'Cancel'
+                            children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
                             selector: (state)=>({
@@ -142,7 +152,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
                                     className: classnames('byline-role-update-action', update_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
-                                    }) : 'Save'
+                                    }) : t('common.actions.save')
                                 })
                         })
                     ]

package/dist/modules/admin-users/components/create.js

@@ -1,25 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { passwordSchema } from "@byline/core/validation";
+import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Checkbox, Input, LoaderEllipsis } from "@byline/ui/react";
 import classnames from "classnames";
 import { z } from "zod";
+import { translateValidationError } from "../../../lib/translate-validation-error.js";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import create_module from "./create.module.js";
-const createAdminUserFormSchema = z.object({
-    email: z.email({
-        message: 'Enter a valid email address'
-    }).min(3).max(254, 'Email must not exceed 254 characters'),
-    password: passwordSchema,
-    given_name: z.string().max(100, 'Given name must not exceed 100 characters'),
-    family_name: z.string().max(100, 'Family name must not exceed 100 characters'),
-    username: z.string().max(100, 'Username must not exceed 100 characters'),
-    is_super_admin: z.boolean(),
-    is_enabled: z.boolean(),
-    is_email_verified: z.boolean()
-});
+const MAX_NAME = 100;
+const MAX_USERNAME = 100;
+const MAX_EMAIL = 254;
 const initialValues = {
     email: '',
     password: '',
@@ -35,7 +28,30 @@ function normaliseText(value) {
 }
 function CreateAdminUser({ onClose, onSuccess }) {
     const { createAdminUser } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
     const [formError, setFormError] = useState(null);
+    const createAdminUserFormSchema = useMemo(()=>z.object({
+            email: z.email({
+                message: t('account.update.errors.invalidEmail')
+            }).min(3).max(MAX_EMAIL, t('account.update.errors.emailTooLong', {
+                max: MAX_EMAIL
+            })),
+            password: passwordSchema,
+            given_name: z.string().max(MAX_NAME, t('account.update.errors.givenNameTooLong', {
+                max: MAX_NAME
+            })),
+            family_name: z.string().max(MAX_NAME, t('account.update.errors.familyNameTooLong', {
+                max: MAX_NAME
+            })),
+            username: z.string().max(MAX_USERNAME, t('account.update.errors.usernameTooLong', {
+                max: MAX_USERNAME
+            })),
+            is_super_admin: z.boolean(),
+            is_enabled: z.boolean(),
+            is_email_verified: z.boolean()
+        }), [
+        t
+    ]);
     const form = useForm({
         defaultValues: initialValues,
         validationLogic: revalidateLogic({
@@ -64,17 +80,21 @@ function CreateAdminUser({ onClose, onSuccess }) {
                 onSuccess?.(created);
             } catch (err) {
                 const code = getErrorCode(err);
-                if ('admin.users.emailInUse' === code) return void form.setFieldMeta('email', (meta)=>({
-                        ...meta,
-                        errorMap: {
-                            ...meta.errorMap,
-                            onServer: 'This email is already in use.'
-                        },
-                        errors: [
-                            'This email is already in use.'
-                        ]
-                    }));
-                setFormError('Could not create this admin user. Please try again.');
+                if ('admin.users.emailInUse' === code) {
+                    const message = t('account.update.errors.emailInUse');
+                    form.setFieldMeta('email', (meta)=>({
+                            ...meta,
+                            errorMap: {
+                                ...meta.errorMap,
+                                onServer: message
+                            },
+                            errors: [
+                                message
+                            ]
+                        }));
+                    return;
+                }
+                setFormError(t('adminUsers.create.errors.fallback'));
             }
         }
     });
@@ -99,7 +119,7 @@ function CreateAdminUser({ onClose, onSuccess }) {
                         /*#__PURE__*/ jsx(form.Field, {
                             name: "given_name",
                             children: (field)=>/*#__PURE__*/ jsx(Input, {
-                                    label: "Given name",
+                                    label: t('account.update.fields.givenName'),
                                     id: "new-given-name",
                                     name: field.name,
                                     value: field.state.value,
@@ -113,7 +133,7 @@ function CreateAdminUser({ onClose, onSuccess }) {
                         /*#__PURE__*/ jsx(form.Field, {
                             name: "family_name",
                             children: (field)=>/*#__PURE__*/ jsx(Input, {
-                                    label: "Family name",
+                                    label: t('account.update.fields.familyName'),
                                     id: "new-family-name",
                                     name: field.name,
                                     value: field.state.value,
@@ -129,7 +149,7 @@ function CreateAdminUser({ onClose, onSuccess }) {
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "username",
                     children: (field)=>/*#__PURE__*/ jsx(Input, {
-                            label: "Username",
+                            label: t('account.update.fields.username'),
                             id: "new-username",
                             name: field.name,
                             value: field.state.value,
@@ -137,14 +157,14 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             onChange: (e)=>field.handleChange(e.currentTarget.value),
                             error: field.state.meta.errors.length > 0,
                             errorText: firstError(field.state.meta.errors),
-                            helpText: "Optional.",
+                            helpText: t('adminUsers.create.fields.usernameHelp'),
                             autoComplete: "username"
                         })
                 }),
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "email",
                     children: (field)=>/*#__PURE__*/ jsx(Input, {
-                            label: "Email",
+                            label: t('common.fields.email'),
                             id: "new-email",
                             name: field.name,
                             type: "email",
@@ -160,7 +180,7 @@ function CreateAdminUser({ onClose, onSuccess }) {
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "password",
                     children: (field)=>/*#__PURE__*/ jsx(Input, {
-                            label: "Initial password",
+                            label: t('adminUsers.create.fields.password'),
                             id: "new-password",
                             name: field.name,
                             type: "password",
@@ -168,8 +188,8 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             onBlur: field.handleBlur,
                             onChange: (e)=>field.handleChange(e.currentTarget.value),
                             error: field.state.meta.errors.length > 0,
-                            errorText: firstError(field.state.meta.errors),
-                            helpText: "The user can change it from their own account after signing in.",
+                            errorText: translateValidationError(t, firstError(field.state.meta.errors)),
+                            helpText: t('adminUsers.create.fields.passwordHelp'),
                             autoComplete: "new-password",
                             required: true
                         })
@@ -182,10 +202,10 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             children: (field)=>/*#__PURE__*/ jsx(Checkbox, {
                                     id: "new-is-enabled",
                                     name: field.name,
-                                    label: "Enabled",
+                                    label: t('adminUsers.create.flags.enabledLabel'),
                                     checked: field.state.value,
                                     onCheckedChange: (checked)=>field.handleChange(true === checked),
-                                    helpText: "Disabled accounts cannot sign in."
+                                    helpText: t('adminUsers.create.flags.enabledHelp')
                                 })
                         }),
                         /*#__PURE__*/ jsx(form.Field, {
@@ -193,10 +213,10 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             children: (field)=>/*#__PURE__*/ jsx(Checkbox, {
                                     id: "new-is-email-verified",
                                     name: field.name,
-                                    label: "Email verified",
+                                    label: t('adminUsers.create.flags.emailVerifiedLabel'),
                                     checked: field.state.value,
                                     onCheckedChange: (checked)=>field.handleChange(true === checked),
-                                    helpText: "Skip the verification flow for this account."
+                                    helpText: t('adminUsers.create.flags.emailVerifiedHelp')
                                 })
                         }),
                         /*#__PURE__*/ jsx(form.Field, {
@@ -204,10 +224,10 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             children: (field)=>/*#__PURE__*/ jsx(Checkbox, {
                                     id: "new-is-super-admin",
                                     name: field.name,
-                                    label: "Super admin",
+                                    label: t('adminUsers.create.flags.superAdminLabel'),
                                     checked: field.state.value,
                                     onCheckedChange: (checked)=>field.handleChange(true === checked),
-                                    helpText: "Super admins bypass every ability check — grant with care."
+                                    helpText: t('adminUsers.create.flags.superAdminHelp')
                                 })
                         })
                     ]
@@ -221,7 +241,7 @@ function CreateAdminUser({ onClose, onSuccess }) {
                             size: "sm",
                             onClick: onClose,
                             className: classnames('byline-user-create-action', create_module.action),
-                            children: "Cancel"
+                            children: t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
                             selector: (state)=>({
@@ -236,7 +256,7 @@ function CreateAdminUser({ onClose, onSuccess }) {
                                     className: classnames('byline-user-create-action', create_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
-                                    }) : 'Save'
+                                    }) : t('common.actions.save')
                                 })
                         })
                     ]

package/dist/modules/admin-users/components/roles.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Checkbox, LoaderEllipsis } from "@byline/ui/react";
 import classnames from "classnames";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
@@ -12,6 +13,7 @@ function setsEqual(a, b) {
 }
 function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }) {
     const { setUserRoles } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
     const [initialSet, setInitialSet] = useState(()=>new Set(initialRoleIds));
     const [selected, setSelected] = useState(()=>new Set(initialRoleIds));
     const [saving, setSaving] = useState(false);
@@ -42,12 +44,12 @@ function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }) {
             const storedSet = new Set(response.roles.map((r)=>r.id));
             setInitialSet(storedSet);
             setSelected(new Set(storedSet));
-            setSuccessMessage('Saved.');
+            setSuccessMessage(t('common.feedback.saved'));
             onSaved?.(response);
         } catch (err) {
             const code = getErrorCode(err);
-            if ('admin.roles.userNotFound' === code) setError('This user no longer exists.');
-            else 'admin.roles.notFound' === code ? setError('One or more selected roles no longer exist. Reload the page and try again.') : setError('Could not save roles. Please try again.');
+            if ('admin.roles.userNotFound' === code) setError(t('adminUsers.roles.errors.userNotFound'));
+            else 'admin.roles.notFound' === code ? setError(t('adminUsers.roles.errors.roleNotFound')) : setError(t('adminUsers.roles.errors.fallback'));
         } finally{
             setSaving(false);
         }
@@ -63,17 +65,9 @@ function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }) {
                 intent: "success",
                 children: successMessage
             }) : null,
-            0 === allRoles.length ? /*#__PURE__*/ jsxs("p", {
+            0 === allRoles.length ? /*#__PURE__*/ jsx("p", {
                 className: classnames('muted', 'byline-user-roles-empty', roles_module.empty),
-                children: [
-                    "No roles have been created yet. Create roles in",
-                    ' ',
-                    /*#__PURE__*/ jsx("span", {
-                        className: "muted",
-                        children: "/admin/roles"
-                    }),
-                    " first."
-                ]
+                children: t('adminUsers.roles.emptyCatalog')
             }) : /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-user-roles-list', roles_module.list),
                 children: allRoles.map((role)=>/*#__PURE__*/ jsxs("div", {
@@ -124,7 +118,7 @@ function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }) {
                         onClick: onClose,
                         disabled: saving,
                         className: classnames('byline-user-roles-action', roles_module.action),
-                        children: successMessage ? 'Close' : 'Cancel'
+                        children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         type: "button",
@@ -135,7 +129,7 @@ function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }) {
                         className: classnames('byline-user-roles-action', roles_module.action),
                         children: saving ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                             size: 30
-                        }) : 'Save'
+                        }) : t('common.actions.save')
                     })
                 ]
             })