@byline/ui 0.9.3

package/src/admin/components/admin-account/update.tsx

@@ -0,0 +1,263 @@
+'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 { useState } from 'react'
+import { revalidateLogic, useForm } from '@tanstack/react-form-start'
+
+import type { AccountResponse } from '@byline/admin/admin-account'
+import { Alert, Button, Input, LoaderEllipsis } from '@infonomic/uikit/react'
+import cx from 'classnames'
+import { z } from 'zod'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './update.module.css'
+
+const updateAccountSchema = z.object({
+  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'),
+  email: z
+    .email({ message: 'Enter a valid email address' })
+    .min(3)
+    .max(254, 'Email must not exceed 254 characters'),
+})
+
+type UpdateAccountValues = z.infer<typeof updateAccountSchema>
+
+function defaultsFrom(account: AccountResponse): UpdateAccountValues {
+  return {
+    given_name: account.given_name ?? '',
+    family_name: account.family_name ?? '',
+    username: account.username ?? '',
+    email: account.email,
+  }
+}
+
+function buildPatch(values: UpdateAccountValues, account: AccountResponse) {
+  const patch: {
+    given_name?: string | null
+    family_name?: string | null
+    username?: string | null
+    email?: string
+  } = {}
+  const normaliseText = (value: string): string | null => (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
+}
+
+interface UpdateAccountProps {
+  account: AccountResponse
+  onClose?: () => void
+  onSuccess?: (account: AccountResponse) => void
+}
+
+export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProps) {
+  const { updateAccount } = useBylineAdminServices()
+  const [formError, setFormError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  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('No changes to save.')
+        return
+      }
+      try {
+        const updated = await updateAccount({ data: { vid: account.vid, patch } })
+        setSuccessMessage('Saved.')
+        onSuccess?.(updated)
+      } catch (err) {
+        const code = getErrorCode(err)
+        if (code === 'admin.users.emailInUse') {
+          form.setFieldMeta('email', (meta) => ({
+            ...meta,
+            errorMap: { ...meta.errorMap, onServer: 'This email is already in use.' },
+            errors: ['This email is already in use.'],
+          }))
+          return
+        }
+        if (code === 'admin.users.versionConflict') {
+          setFormError(
+            'Your account has been modified elsewhere since you opened this form. Reload to refresh and try again.'
+          )
+          return
+        }
+        if (code === 'admin.account.notFound') {
+          setFormError('Your admin account could not be found. Please sign in again.')
+          return
+        }
+        setFormError('Could not save changes. Please try again.')
+      }
+    },
+  })
+
+  return (
+    <div className={cx('byline-account-update-wrap', styles.wrap)}>
+      <form
+        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="Given name"
+              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="Family name"
+              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="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="Optional. Leave blank to clear."
+              autoComplete="username"
+            />
+          )}
+        </form.Field>
+
+        <form.Field name="email">
+          {(field) => (
+            <Input
+              label="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 ? 'Close' : '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} /> : 'Save'}
+              </Button>
+            )}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function firstError(errors: readonly unknown[]): string | undefined {
+  for (const err of errors) {
+    if (typeof err === 'string') return err
+    if (err && typeof err === 'object' && 'message' in err) {
+      const msg = (err as { message?: unknown }).message
+      if (typeof msg === 'string') return msg
+    }
+  }
+  return undefined
+}
+
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}

package/src/admin/components/admin-permissions/inspector.module.css

@@ -0,0 +1,326 @@
+/**
+ * AbilitiesInspector — registry inspector with lazy-loaded role/user matrices.
+ *
+ * Override handles:
+ *   .byline-inspector-head           — title row
+ *   .byline-inspector-title          — main heading
+ *   .byline-inspector-count-pill     — total-count pill
+ *   .byline-inspector-lead           — paragraph-style description
+ *   .byline-inspector-empty          — empty-state paragraph
+ *   .byline-inspector-groups         — vertical group stack
+ *   .byline-inspector-group          — group <details> card
+ *   .byline-inspector-group-summary  — group summary row
+ *   .byline-inspector-group-name     — group display name
+ *   .byline-inspector-group-count    — abilities-in-group count
+ *   .byline-inspector-group-body     — group body
+ *   .byline-inspector-row            — single ability row
+ *   .byline-inspector-row-head       — header inside a row
+ *   .byline-inspector-row-info       — info column inside row-head
+ *   .byline-inspector-row-meta       — code + source-badge row
+ *   .byline-inspector-row-key        — ability key code pill
+ *   .byline-inspector-row-source     — source badge base
+ *   .byline-inspector-row-source-collection
+ *   .byline-inspector-row-source-admin
+ *   .byline-inspector-row-source-plugin
+ *   .byline-inspector-row-source-core
+ *   .byline-inspector-row-source-unknown
+ *   .byline-inspector-row-label      — ability display name
+ *   .byline-inspector-row-description — ability description
+ *   .byline-inspector-loader         — loading row inside expanded row
+ *   .byline-inspector-matrix         — two-column roles/users panel
+ *   .byline-inspector-matrix-title   — column heading
+ *   .byline-inspector-matrix-empty   — empty-list message
+ *   .byline-inspector-matrix-list    — bare list
+ *   .byline-inspector-matrix-item    — list item
+ *   .byline-inspector-matrix-name    — bold name span
+ *   .byline-inspector-matrix-machine — muted machine-name suffix
+ */
+
+.head,
+:global(.byline-inspector-head) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-12);
+  margin-bottom: var(--spacing-16);
+}
+
+.title,
+:global(.byline-inspector-title) {
+  margin: 0;
+}
+
+.count-pill,
+:global(.byline-inspector-count-pill) {
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  padding: var(--spacing-4) var(--spacing-8);
+  font-size: var(--font-size-sm);
+  border-radius: var(--border-radius-sm);
+}
+
+.lead,
+:global(.byline-inspector-lead) {
+  margin-bottom: var(--spacing-16);
+  font-size: var(--font-size-sm);
+}
+
+.empty,
+:global(.byline-inspector-empty) {
+  /* Inherits .muted colour from sibling utility class. */
+}
+
+.groups,
+:global(.byline-inspector-groups) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.group,
+:global(.byline-inspector-group) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+}
+
+/* Hide the default summary disclosure marker (browser-specific). */
+.group :global(summary)::-webkit-details-marker {
+  display: none;
+}
+
+.group-summary,
+:global(.byline-inspector-group-summary) {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-12);
+  list-style: none;
+}
+
+.group-name,
+:global(.byline-inspector-group-name) {
+  font-weight: var(--font-weight-medium);
+}
+
+.group-count,
+:global(.byline-inspector-group-count) {
+  font-size: var(--font-size-xs);
+}
+
+.group-body,
+:global(.byline-inspector-group-body) {
+  padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
+}
+
+.row,
+:global(.byline-inspector-row) {
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  padding: var(--spacing-8) 0;
+}
+
+.row:first-child,
+:global(.byline-inspector-row):first-child {
+  border-top: 0;
+}
+
+.row-head,
+:global(.byline-inspector-row-head) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+}
+
+.row-info,
+:global(.byline-inspector-row-info) {
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.row-meta,
+:global(.byline-inspector-row-meta) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.row-key,
+:global(.byline-inspector-row-key) {
+  background-color: var(--gray-50);
+  padding: 0.125rem 0.375rem;
+  font-size: var(--font-size-xs);
+  border-radius: var(--border-radius-sm);
+}
+
+.row-source,
+:global(.byline-inspector-row-source) {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--border-radius-sm);
+  background-color: var(--gray-100);
+  color: var(--gray-800);
+}
+
+.row-source-collection,
+:global(.byline-inspector-row-source-collection) {
+  background-color: var(--gray-100);
+  color: var(--gray-800);
+}
+
+.row-source-admin,
+:global(.byline-inspector-row-source-admin) {
+  background-color: var(--blue-50);
+  color: var(--blue-700);
+}
+
+.row-source-plugin,
+:global(.byline-inspector-row-source-plugin) {
+  /* No purple token in uikit; fall back to primary scale. */
+  background-color: var(--primary-50);
+  color: var(--primary-700);
+}
+
+.row-source-core,
+:global(.byline-inspector-row-source-core) {
+  background-color: var(--green-50);
+  color: var(--green-700);
+}
+
+.row-source-unknown,
+:global(.byline-inspector-row-source-unknown) {
+  background-color: var(--gray-50);
+  color: var(--gray-600);
+}
+
+.row-label,
+:global(.byline-inspector-row-label) {
+  margin: var(--spacing-4) 0 0 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.row-description,
+:global(.byline-inspector-row-description) {
+  margin-bottom: 0;
+  font-size: var(--font-size-xs);
+}
+
+.loader,
+:global(.byline-inspector-loader) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-8);
+  font-size: var(--font-size-sm);
+}
+
+.matrix,
+:global(.byline-inspector-matrix) {
+  margin-top: var(--spacing-8);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-12);
+  padding: var(--spacing-12);
+  background-color: var(--canvas-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+}
+
+@media (min-width: 40rem) {
+  .matrix,
+  :global(.byline-inspector-matrix) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.matrix-title,
+:global(.byline-inspector-matrix-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+}
+
+.matrix-empty,
+:global(.byline-inspector-matrix-empty) {
+  margin: 0;
+  font-style: italic;
+  font-size: var(--font-size-sm);
+}
+
+.matrix-list,
+:global(.byline-inspector-matrix-list) {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  font-size: var(--font-size-sm);
+}
+
+.matrix-item,
+:global(.byline-inspector-matrix-item) {
+  margin-bottom: var(--spacing-4);
+}
+
+.matrix-name,
+:global(.byline-inspector-matrix-name) {
+  font-weight: var(--font-weight-medium);
+}
+
+:is([data-theme="dark"], :global(.dark)) {
+  .count-pill,
+  :global(.byline-inspector-count-pill) {
+    background-color: var(--canvas-700);
+    border-color: var(--gray-700);
+  }
+
+  .group,
+  :global(.byline-inspector-group) {
+    border-color: var(--gray-700);
+  }
+
+  .row,
+  :global(.byline-inspector-row) {
+    border-top-color: var(--gray-700);
+  }
+
+  .row-key,
+  :global(.byline-inspector-row-key) {
+    background-color: var(--canvas-800);
+  }
+
+  .row-source-collection,
+  :global(.byline-inspector-row-source-collection) {
+    background-color: var(--canvas-700);
+    color: var(--gray-200);
+  }
+
+  .row-source-admin,
+  :global(.byline-inspector-row-source-admin) {
+    background-color: var(--blue-900);
+    color: var(--blue-200);
+  }
+
+  .row-source-plugin,
+  :global(.byline-inspector-row-source-plugin) {
+    background-color: var(--primary-900);
+    color: var(--primary-200);
+  }
+
+  .row-source-core,
+  :global(.byline-inspector-row-source-core) {
+    background-color: var(--green-900);
+    color: var(--green-200);
+  }
+
+  .row-source-unknown,
+  :global(.byline-inspector-row-source-unknown) {
+    background-color: var(--canvas-800);
+    color: var(--gray-400);
+  }
+
+  .matrix,
+  :global(.byline-inspector-matrix) {
+    background-color: var(--canvas-800);
+    border-color: var(--gray-700);
+  }
+}