@byline/admin 5.1.2 → 5.1.4

package/dist/modules/admin-account/components/update.jsx

@@ -0,0 +1,186 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Self-service profile form.
+ *
+ * Editable surface is intentionally narrower than the admin-users
+ * `update.tsx`: no `is_super_admin`, `is_enabled`, or
+ * `is_email_verified` toggles. A user cannot grant themselves
+ * super-admin or flip their own status — those flow through the
+ * admin-users module on a privileged admin's session.
+ *
+ * Patch is built diff-style against the loaded row and submitted with
+ * the row's `vid` so a concurrent edit elsewhere surfaces as
+ * `admin.users.versionConflict` and we prompt for reload.
+ */
+import { useMemo, useState } from 'react';
+import { revalidateLogic, useForm } from '@tanstack/react-form-start';
+import { useTranslation } from '@byline/i18n/react';
+import { Alert, Button, Input, LoaderEllipsis } from '@byline/ui/react';
+import cx from 'clsx';
+import { z } from 'zod';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './update.module.css';
+// Field-length ceilings sourced from the `adminUsers` schema in @byline/admin
+// (100/100/100/254). Kept as constants so error messages can ICU-format them.
+const MAX_NAME = 100;
+const MAX_USERNAME = 100;
+const MAX_EMAIL = 254;
+function defaultsFrom(account) {
+    return {
+        given_name: account.given_name ?? '',
+        family_name: account.family_name ?? '',
+        username: account.username ?? '',
+        email: account.email,
+    };
+}
+function buildPatch(values, account) {
+    const patch = {};
+    const normaliseText = (value) => (value.trim().length > 0 ? value : null);
+    const nextGiven = normaliseText(values.given_name);
+    const nextFamily = normaliseText(values.family_name);
+    const nextUsername = normaliseText(values.username);
+    if (nextGiven !== account.given_name)
+        patch.given_name = nextGiven;
+    if (nextFamily !== account.family_name)
+        patch.family_name = nextFamily;
+    if (nextUsername !== account.username)
+        patch.username = nextUsername;
+    if (values.email !== account.email)
+        patch.email = values.email;
+    return patch;
+}
+export function UpdateAccount({ account, onClose, onSuccess }) {
+    const { updateAccount } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [formError, setFormError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    // Schema is rebuilt per-render so error messages reflect the active
+    // locale. Cheap — small schema, no ahead-of-time compilation cost
+    // that matters at this scale. `useMemo` keeps Tanstack Form's
+    // validator-identity stable across re-renders.
+    const updateAccountSchema = useMemo(() => z.object({
+        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 })),
+        email: z
+            .email({ message: t('account.update.errors.invalidEmail') })
+            .min(3)
+            .max(MAX_EMAIL, t('account.update.errors.emailTooLong', { max: MAX_EMAIL })),
+    }), [t]);
+    const form = useForm({
+        defaultValues: defaultsFrom(account),
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change',
+        }),
+        validators: {
+            onDynamic: updateAccountSchema,
+        },
+        onSubmit: async ({ value }) => {
+            setFormError(null);
+            setSuccessMessage(null);
+            const patch = buildPatch(value, account);
+            if (Object.keys(patch).length === 0) {
+                setSuccessMessage(t('common.feedback.noChanges'));
+                return;
+            }
+            try {
+                const updated = await updateAccount({ data: { vid: account.vid, patch } });
+                setSuccessMessage(t('common.feedback.saved'));
+                onSuccess?.(updated);
+            }
+            catch (err) {
+                const code = getErrorCode(err);
+                if (code === 'admin.users.emailInUse') {
+                    const message = t('account.update.errors.emailInUse');
+                    form.setFieldMeta('email', (meta) => ({
+                        ...meta,
+                        errorMap: { ...meta.errorMap, onServer: message },
+                        errors: [message],
+                    }));
+                    return;
+                }
+                if (code === 'admin.users.versionConflict') {
+                    setFormError(t('common.errors.versionConflict'));
+                    return;
+                }
+                if (code === 'admin.account.notFound') {
+                    setFormError(t('common.errors.accountNotFound'));
+                    return;
+                }
+                setFormError(t('common.errors.couldNotSave'));
+            }
+        },
+    });
+    return (<div className={cx('byline-account-update-wrap', styles.wrap)}>
+      <form method="post" noValidate onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+        }} className={cx('byline-account-update-form', styles.form)}>
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+        <form.Field name="given_name">
+          {(field) => (<Input label={t('account.update.fields.givenName')} id="given_name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} autoComplete="given-name"/>)}
+        </form.Field>
+
+        <form.Field name="family_name">
+          {(field) => (<Input label={t('account.update.fields.familyName')} id="family_name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} autoComplete="family-name"/>)}
+        </form.Field>
+
+        <form.Field name="username">
+          {(field) => (<Input label={t('account.update.fields.username')} id="username" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} helpText={t('account.update.fields.usernameHelp')} autoComplete="username"/>)}
+        </form.Field>
+
+        <form.Field name="email">
+          {(field) => (<Input label={t('common.fields.email')} id="email" name={field.name} type="email" value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} autoComplete="email" required/>)}
+        </form.Field>
+
+        <div className={cx('byline-account-update-actions', styles.actions)}>
+          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-account-update-action', styles.action)}>
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
+          </Button>
+          <form.Subscribe selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+            isDirty: state.isDirty,
+        })}>
+            {({ canSubmit, isSubmitting }) => (<Button size="sm" intent="primary" type="submit" disabled={!canSubmit || isSubmitting} className={cx('byline-account-update-action', styles.action)}>
+                {isSubmitting === true ? <LoaderEllipsis size={42}/> : t('common.actions.save')}
+              </Button>)}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>);
+}
+function firstError(errors) {
+    for (const err of errors) {
+        if (typeof err === 'string')
+            return err;
+        if (err && typeof err === 'object' && 'message' in err) {
+            const msg = err.message;
+            if (typeof msg === 'string')
+                return msg;
+        }
+    }
+    return undefined;
+}
+function getErrorCode(err) {
+    return typeof err?.code === 'string'
+        ? err.code
+        : null;
+}

package/dist/modules/admin-permissions/components/inspector.jsx

@@ -0,0 +1,200 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Read-only abilities inspector — see docs/07-auth-and-security/01-authn-authz.md.
+ *
+ * Top level: a collapsible group per ability source (collections.docs,
+ * admin.users, etc.), each containing the abilities that group
+ * registered. Group buckets and ordering come straight from the
+ * `AbilityRegistry.byGroup()` shape (registration order preserved).
+ *
+ * Per-ability: an inline-expandable row showing the roles that grant
+ * the ability and the distinct admin users who hold it transitively.
+ * The matrix is fetched lazily on first expand and cached for the
+ * lifetime of the page — the registry is small (~40 keys) but the
+ * matrix queries are not free, and most visitors only inspect a few
+ * keys.
+ *
+ * Stable override handles: see `inspector.module.css`.
+ */
+import { useState } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import { Button, Container, LoaderRing, Section } from '@byline/ui/react';
+import cx from 'clsx';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './inspector.module.css';
+// --- helpers ---------------------------------------------------------------
+function sourceVariant(source) {
+    switch (source) {
+        case 'collection':
+            return {
+                global: 'byline-inspector-row-source-collection',
+                local: styles['row-source-collection'],
+            };
+        case 'admin':
+            return {
+                global: 'byline-inspector-row-source-admin',
+                local: styles['row-source-admin'],
+            };
+        case 'plugin':
+            return {
+                global: 'byline-inspector-row-source-plugin',
+                local: styles['row-source-plugin'],
+            };
+        case 'core':
+            return {
+                global: 'byline-inspector-row-source-core',
+                local: styles['row-source-core'],
+            };
+        default:
+            return {
+                global: 'byline-inspector-row-source-unknown',
+                local: styles['row-source-unknown'],
+            };
+    }
+}
+function displayUser(user) {
+    const parts = [user.given_name, user.family_name].filter((p) => typeof p === 'string' && p.length > 0);
+    return parts.length > 0 ? `${parts.join(' ')} (${user.email})` : user.email;
+}
+// --- expandable matrix row ------------------------------------------------
+function MatrixPanel({ matrix }) {
+    const { t } = useTranslation('byline-admin');
+    return (<div className={cx('byline-inspector-matrix', styles.matrix)}>
+      <div>
+        <h4 className={cx('byline-inspector-matrix-title', styles['matrix-title'])}>
+          {t('adminPermissions.matrix.rolesTitle', { count: matrix.roles.length })}
+        </h4>
+        {matrix.roles.length === 0 ? (<p className={cx('muted', 'byline-inspector-matrix-empty', styles['matrix-empty'])}>
+            {t('adminPermissions.matrix.rolesEmpty')}
+          </p>) : (<ul className={cx('byline-inspector-matrix-list', styles['matrix-list'])}>
+            {matrix.roles.map((role) => (<li key={role.id} className={cx('byline-inspector-matrix-item', styles['matrix-item'])}>
+                <span className={cx('byline-inspector-matrix-name', styles['matrix-name'])}>
+                  {role.name}
+                </span>
+                <span className="muted">&nbsp;·&nbsp;{role.machine_name}</span>
+              </li>))}
+          </ul>)}
+      </div>
+      <div>
+        <h4 className={cx('byline-inspector-matrix-title', styles['matrix-title'])}>
+          {t('adminPermissions.matrix.usersTitle', { count: matrix.users.length })}
+        </h4>
+        {matrix.users.length === 0 ? (<p className={cx('muted', 'byline-inspector-matrix-empty', styles['matrix-empty'])}>
+            {t('adminPermissions.matrix.usersEmpty')}
+          </p>) : (<ul className={cx('byline-inspector-matrix-list', styles['matrix-list'])}>
+            {matrix.users.map((user) => (<li key={user.id} className={cx('byline-inspector-matrix-item', styles['matrix-item'])}>
+                {displayUser(user)}
+              </li>))}
+          </ul>)}
+      </div>
+    </div>);
+}
+function AbilityRow({ ability, matrix, loading, onToggle, expanded }) {
+    const { t } = useTranslation('byline-admin');
+    const sv = sourceVariant(ability.source);
+    const sourceKey = ability.source ?? 'unknown';
+    return (<div className={cx('byline-inspector-row', styles.row)}>
+      <div className={cx('byline-inspector-row-head', styles['row-head'])}>
+        <div className={cx('byline-inspector-row-info', styles['row-info'])}>
+          <div className={cx('byline-inspector-row-meta', styles['row-meta'])}>
+            <code className={cx('byline-inspector-row-key', styles['row-key'])}>{ability.key}</code>
+            <span className={cx('byline-inspector-row-source', styles['row-source'], sv.global, sv.local)}>
+              {t(`adminPermissions.source.${sourceKey}`)}
+            </span>
+          </div>
+          <p className={cx('byline-inspector-row-label', styles['row-label'])}>{ability.label}</p>
+          {ability.description ? (<p className={cx('muted', 'byline-inspector-row-description', styles['row-description'])}>
+              {ability.description}
+            </p>) : null}
+        </div>
+        <Button size="xs" intent="secondary" onClick={onToggle}>
+          {expanded
+            ? t('adminPermissions.row.hideButton')
+            : t('adminPermissions.row.holdersButton')}
+        </Button>
+      </div>
+      {expanded ? (loading ? (<div className={cx('byline-inspector-loader', styles.loader)}>
+            <LoaderRing size={20} color="#888"/>
+            <span className="muted">{t('common.loading')}</span>
+          </div>) : matrix ? (<MatrixPanel matrix={matrix}/>) : null) : null}
+    </div>);
+}
+function GroupSection({ group, matrices, loading, expanded, onToggle }) {
+    const { t } = useTranslation('byline-admin');
+    return (<details open className={cx('byline-inspector-group', styles.group)}>
+      <summary className={cx('byline-inspector-group-summary', styles['group-summary'])}>
+        <span className={cx('byline-inspector-group-name', styles['group-name'])}>
+          {group.group}
+        </span>
+        <span className={cx('muted', 'byline-inspector-group-count', styles['group-count'])}>
+          {t('adminPermissions.group.abilitiesCount', { count: group.abilities.length })}
+        </span>
+      </summary>
+      <div className={cx('byline-inspector-group-body', styles['group-body'])}>
+        {group.abilities.map((ability) => (<AbilityRow key={ability.key} ability={ability} matrix={matrices[ability.key]} loading={loading.has(ability.key)} expanded={expanded.has(ability.key)} onToggle={() => onToggle(ability.key)}/>))}
+      </div>
+    </details>);
+}
+// --- top level ------------------------------------------------------------
+export function AbilitiesInspector({ data }) {
+    const { whoHasAbility } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [expanded, setExpanded] = useState(new Set());
+    const [loading, setLoading] = useState(new Set());
+    const [matrices, setMatrices] = useState({});
+    async function handleToggle(abilityKey) {
+        setExpanded((current) => {
+            const next = new Set(current);
+            if (next.has(abilityKey)) {
+                next.delete(abilityKey);
+            }
+            else {
+                next.add(abilityKey);
+            }
+            return next;
+        });
+        // Lazy-load the matrix the first time a row expands. Cached for
+        // the lifetime of the page after that.
+        if (!matrices[abilityKey] && !loading.has(abilityKey)) {
+            setLoading((current) => new Set(current).add(abilityKey));
+            try {
+                const result = await whoHasAbility({ data: { ability: abilityKey } });
+                setMatrices((current) => ({ ...current, [abilityKey]: result }));
+            }
+            finally {
+                setLoading((current) => {
+                    const next = new Set(current);
+                    next.delete(abilityKey);
+                    return next;
+                });
+            }
+        }
+    }
+    return (<Section>
+      <Container>
+        <div className={cx('byline-inspector-head', styles.head)}>
+          <h1 className={cx('byline-inspector-title', styles.title)}>
+            {t('adminPermissions.title')}
+          </h1>
+          <span className={cx('byline-inspector-count-pill', styles['count-pill'])}>
+            {t('adminPermissions.countPill', { count: data.total })}
+          </span>
+        </div>
+        <p className={cx('muted', 'byline-inspector-lead', styles.lead)}>
+          {t('adminPermissions.lead')}
+        </p>
+        {data.groups.length === 0 ? (<p className={cx('muted', 'byline-inspector-empty', styles.empty)}>
+            {t('adminPermissions.empty')}
+          </p>) : (<div className={cx('byline-inspector-groups', styles.groups)}>
+            {data.groups.map((group) => (<GroupSection key={group.group} group={group} matrices={matrices} loading={loading} expanded={expanded} onToggle={(key) => void handleToggle(key)}/>))}
+          </div>)}
+      </Container>
+    </Section>);
+}

package/dist/modules/admin-preferences/schemas.test.node.js

@@ -0,0 +1,48 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { describe, expect, it } from 'vitest';
+import { listViewPreferenceValueSchema, preferenceScopeSchema, setPreferenceRequestSchema, } from './schemas.js';
+describe('preferenceScopeSchema', () => {
+    it('accepts dot-separated scope keys', () => {
+        expect(preferenceScopeSchema.safeParse('collections.docs.list').success).toBe(true);
+        expect(preferenceScopeSchema.safeParse('collections.media-items.list').success).toBe(true);
+    });
+    it('rejects empty, spaced, and slash-separated keys', () => {
+        expect(preferenceScopeSchema.safeParse('').success).toBe(false);
+        expect(preferenceScopeSchema.safeParse('has space').success).toBe(false);
+        expect(preferenceScopeSchema.safeParse('a/b').success).toBe(false);
+    });
+});
+describe('listViewPreferenceValueSchema', () => {
+    it('accepts a page_size-only payload (partial writes are the norm)', () => {
+        expect(listViewPreferenceValueSchema.safeParse({ page_size: 50 }).success).toBe(true);
+    });
+    it('accepts a sort-only payload', () => {
+        expect(listViewPreferenceValueSchema.safeParse({ order: 'title', desc: true }).success).toBe(true);
+    });
+    it('enforces the 1-100 page_size bounds', () => {
+        expect(listViewPreferenceValueSchema.safeParse({ page_size: 0 }).success).toBe(false);
+        expect(listViewPreferenceValueSchema.safeParse({ page_size: 101 }).success).toBe(false);
+        expect(listViewPreferenceValueSchema.safeParse({ page_size: 12.5 }).success).toBe(false);
+        expect(listViewPreferenceValueSchema.safeParse({ page_size: 1 }).success).toBe(true);
+        expect(listViewPreferenceValueSchema.safeParse({ page_size: 100 }).success).toBe(true);
+    });
+    it('rejects an empty payload and unknown keys', () => {
+        expect(listViewPreferenceValueSchema.safeParse({}).success).toBe(false);
+        expect(listViewPreferenceValueSchema.safeParse({ page: 7 }).success).toBe(false);
+    });
+});
+describe('setPreferenceRequestSchema', () => {
+    it('requires both scope and a non-empty value', () => {
+        expect(setPreferenceRequestSchema.safeParse({
+            scope: 'collections.docs.list',
+            value: { page_size: 30 },
+        }).success).toBe(true);
+        expect(setPreferenceRequestSchema.safeParse({ scope: 'collections.docs.list', value: {} }).success).toBe(false);
+    });
+});

package/dist/modules/admin-roles/components/create.jsx

@@ -0,0 +1,155 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Create-admin-role drawer form.
+ *
+ * Same TanStack Form + Zod shape as the admin-users equivalent. The
+ * `machine_name` field is captured at create time only — it is the
+ * stable code-side handle for the role and is immutable thereafter
+ * (see the repository contract).
+ */
+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 cx from 'clsx';
+import { z } from 'zod';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './create.module.css';
+const MAX_NAME = 128;
+const MAX_MACHINE_NAME = 128;
+const MAX_DESCRIPTION = 2000;
+const initialValues = {
+    name: '',
+    machine_name: '',
+    description: '',
+};
+function normaliseText(value) {
+    return value.trim().length > 0 ? value : null;
+}
+export function CreateAdminRole({ onClose, onSuccess }) {
+    const { createAdminRole } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [formError, setFormError] = useState(null);
+    // Schema rebuilt per-render so error messages reflect the active
+    // locale; wrapped in useMemo([t]) to keep validator identity stable.
+    const createAdminRoleFormSchema = useMemo(() => z.object({
+        name: z
+            .string()
+            .min(1, t('adminRoles.create.errors.nameRequired'))
+            .max(MAX_NAME, t('adminRoles.create.errors.nameTooLong', { max: MAX_NAME })),
+        machine_name: z
+            .string()
+            .min(1, t('adminRoles.create.errors.machineNameRequired'))
+            .max(MAX_MACHINE_NAME, t('adminRoles.create.errors.machineNameTooLong', { max: MAX_MACHINE_NAME }))
+            .regex(/^[a-z0-9][a-z0-9_-]*$/, {
+            message: t('adminRoles.create.errors.machineNameInvalid'),
+        }),
+        description: z
+            .string()
+            .max(MAX_DESCRIPTION, t('adminRoles.create.errors.descriptionTooLong', { max: MAX_DESCRIPTION })),
+    }), [t]);
+    const form = useForm({
+        defaultValues: initialValues,
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change',
+        }),
+        validators: {
+            onDynamic: createAdminRoleFormSchema,
+        },
+        onSubmit: async ({ value }) => {
+            setFormError(null);
+            try {
+                const created = await createAdminRole({
+                    data: {
+                        name: value.name.trim(),
+                        machine_name: value.machine_name.trim(),
+                        description: normaliseText(value.description),
+                    },
+                });
+                form.reset(initialValues);
+                onSuccess?.(created);
+            }
+            catch (err) {
+                const code = getErrorCode(err);
+                if (code === 'admin.roles.machineNameInUse') {
+                    const message = t('adminRoles.create.errors.machineNameInUse');
+                    form.setFieldMeta('machine_name', (meta) => ({
+                        ...meta,
+                        errorMap: { ...meta.errorMap, onServer: message },
+                        errors: [message],
+                    }));
+                    return;
+                }
+                setFormError(t('adminRoles.create.errors.fallback'));
+            }
+        },
+    });
+    return (<div className={cx('byline-role-create-wrap', styles.wrap)}>
+      <form method="post" noValidate onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+        }} className={cx('byline-role-create-form', styles.form)}>
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+
+        <form.Field name="name">
+          {(field) => (<Input label={t('adminRoles.fields.name')} id="new-role-name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} helpText={t('adminRoles.create.fields.nameHelp')} required/>)}
+        </form.Field>
+
+        <form.Field name="machine_name">
+          {(field) => (<Input label={t('adminRoles.fields.machineName')} id="new-role-machine-name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} helpText={t('adminRoles.create.fields.machineNameHelp')} required/>)}
+        </form.Field>
+
+        <form.Field name="description">
+          {(field) => (<TextArea label={t('adminRoles.fields.description')} id="new-role-description" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} rows={3}/>)}
+        </form.Field>
+
+        <div className={cx('byline-role-create-actions', styles.actions)}>
+          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-role-create-action', styles.action)}>
+            {t('common.actions.cancel')}
+          </Button>
+          <form.Subscribe selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+        })}>
+            {({ canSubmit, isSubmitting }) => (<Button size="sm" intent="primary" type="submit" disabled={!canSubmit || isSubmitting} className={cx('byline-role-create-action', styles.action)}>
+                {isSubmitting === true ? <LoaderEllipsis size={42}/> : t('common.actions.save')}
+              </Button>)}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>);
+}
+function firstError(errors) {
+    for (const err of errors) {
+        if (typeof err === 'string')
+            return err;
+        if (err && typeof err === 'object' && 'message' in err) {
+            const msg = err.message;
+            if (typeof msg === 'string')
+                return msg;
+        }
+    }
+    return undefined;
+}
+function getErrorCode(err) {
+    if (err && typeof err === 'object') {
+        const e = err;
+        if (typeof e.code === 'string')
+            return e.code;
+        if (e.cause && typeof e.cause === 'object' && 'code' in e.cause) {
+            const cause = e.cause;
+            if (typeof cause.code === 'string')
+                return cause.code;
+        }
+    }
+    return null;
+}