@byline/admin 6.7.1 → 6.8.0

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

@@ -1,186 +0,0 @@
-'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

@@ -1,200 +0,0 @@
-'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

@@ -1,48 +0,0 @@
-/**
- * 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

@@ -1,155 +0,0 @@
-'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;
-}