@byline/ui 0.9.3

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

@@ -0,0 +1,279 @@
+/**
+ * RolePermissions — inline per-role ability editor.
+ *
+ * Override handles:
+ *   .byline-role-permissions-wrap         — outer column container
+ *   .byline-role-permissions-toolbar      — top toolbar (mode toggle + count + actions)
+ *   .byline-role-permissions-counter      — "n of m selected/granted" line
+ *   .byline-role-permissions-counter-num  — bold number span
+ *   .byline-role-permissions-actions      — Cancel/Save cluster (right-aligned)
+ *   .byline-role-permissions-action       — Cancel/Save buttons
+ *   .byline-role-permissions-groups       — vertical group stack
+ *   .byline-role-permissions-group        — group card
+ *   .byline-role-permissions-group-head   — group header row
+ *   .byline-role-permissions-group-title  — group name + count line
+ *   .byline-role-permissions-group-name   — group display name
+ *   .byline-role-permissions-group-count  — n-of-m count text
+ *   .byline-role-permissions-group-buttons — Select-all/Clear cluster
+ *   .byline-role-permissions-grid         — ability checkbox grid
+ *   .byline-role-permissions-row          — single ability row
+ *   .byline-role-permissions-label        — clickable label
+ *   .byline-role-permissions-label-edit   — edit-mode cursor variant
+ *   .byline-role-permissions-label-head   — name + key pill row
+ *   .byline-role-permissions-label-name   — ability display name
+ *   .byline-role-permissions-key          — code pill (ability key)
+ *   .byline-role-permissions-description  — ability description
+ *   .byline-role-permissions-mode-toggle  — segmented View/Edit toggle
+ *   .byline-role-permissions-mode-button  — toggle button base
+ *   .byline-role-permissions-mode-button-active — active toggle button
+ *   .byline-role-permissions-mode-button-divider — left-border separator on the second button
+ *   .byline-role-permissions-mode-button-disabled — disabled-cursor modifier
+ */
+
+.wrap,
+:global(.byline-role-permissions-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  margin-bottom: var(--spacing-48);
+}
+
+.toolbar,
+:global(.byline-role-permissions-toolbar) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-12);
+  padding: var(--spacing-12);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  background-color: var(--canvas-25);
+  border-radius: var(--border-radius-sm);
+}
+
+.counter,
+:global(.byline-role-permissions-counter) {
+  margin: 0;
+  font-size: var(--font-size-sm);
+}
+
+.counter-num,
+:global(.byline-role-permissions-counter-num) {
+  font-weight: var(--font-weight-medium);
+}
+
+.actions,
+:global(.byline-role-permissions-actions) {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.action,
+:global(.byline-role-permissions-action) {
+  min-width: 4rem;
+}
+
+/*
+ * Checkbox shrink-fit — overrides the uikit Checkbox's `width: 100%`
+ * default container so the external label sits flush against the
+ * checkbox button. Replaces the `!w-auto` Tailwind utility we used
+ * pre-lift; with the component now in a published package, Tailwind's
+ * source scanner no longer sees that class string in the host so the
+ * rule was never generated and the label was being pushed to the right.
+ *
+ * `!important` is required — the uikit Checkbox sets `width: 100%`
+ * at the same specificity, so a plain rule loses to source-order. The
+ * pre-lift Tailwind class `!w-auto` carried `!important` via Tailwind's
+ * `!` prefix; this is the same effect, expressed in a CSS module.
+ */
+.checkbox-auto,
+:global(.byline-role-permissions-checkbox-auto) {
+  /* biome-ignore lint/complexity/noImportantStyles: see comment above */
+  width: auto !important;
+}
+
+.groups,
+:global(.byline-role-permissions-groups) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.group,
+:global(.byline-role-permissions-group) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+}
+
+.group-head,
+:global(.byline-role-permissions-group-head) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-12);
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+}
+
+.group-name,
+:global(.byline-role-permissions-group-name) {
+  font-weight: var(--font-weight-medium);
+}
+
+.group-count,
+:global(.byline-role-permissions-group-count) {
+  margin-left: var(--spacing-8);
+  font-size: var(--font-size-xs);
+}
+
+.group-buttons,
+:global(.byline-role-permissions-group-buttons) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.grid,
+:global(.byline-role-permissions-grid) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-4);
+  padding: var(--spacing-12);
+}
+
+@media (min-width: 40rem) {
+  .grid,
+  :global(.byline-role-permissions-grid) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.row,
+:global(.byline-role-permissions-row) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4) 0;
+}
+
+.label,
+:global(.byline-role-permissions-label) {
+  min-width: 0;
+  flex: 1 1 0;
+  cursor: default;
+}
+
+.label-edit,
+:global(.byline-role-permissions-label-edit) {
+  cursor: pointer;
+}
+
+.label-head,
+:global(.byline-role-permissions-label-head) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.label-name,
+:global(.byline-role-permissions-label-name) {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.key,
+:global(.byline-role-permissions-key) {
+  background-color: var(--gray-100);
+  padding: 0.125rem 0.375rem;
+  font-size: var(--font-size-xs);
+  border-radius: var(--border-radius-sm);
+}
+
+.description,
+:global(.byline-role-permissions-description) {
+  margin-bottom: 0;
+  font-size: var(--font-size-xs);
+}
+
+.mode-toggle,
+:global(.byline-role-permissions-mode-toggle) {
+  display: inline-flex;
+  overflow: hidden;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: var(--border-radius-sm);
+}
+
+.mode-button,
+:global(.byline-role-permissions-mode-button) {
+  padding: 0.125rem 0.625rem;
+  font-size: var(--font-size-xs);
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.mode-button:hover,
+:global(.byline-role-permissions-mode-button):hover {
+  background-color: var(--gray-50);
+}
+
+.mode-button-active,
+:global(.byline-role-permissions-mode-button-active) {
+  background-color: var(--gray-100);
+  font-weight: var(--font-weight-medium);
+}
+
+.mode-button-divider,
+:global(.byline-role-permissions-mode-button-divider) {
+  border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+}
+
+.mode-button-disabled,
+:global(.byline-role-permissions-mode-button-disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:is([data-theme="dark"], :global(.dark)) {
+  .toolbar,
+  :global(.byline-role-permissions-toolbar) {
+    border-color: var(--gray-700);
+    background-color: var(--canvas-800);
+  }
+
+  .group,
+  :global(.byline-role-permissions-group) {
+    border-color: var(--gray-700);
+  }
+
+  .group-head,
+  :global(.byline-role-permissions-group-head) {
+    border-bottom-color: var(--gray-700);
+  }
+
+  .key,
+  :global(.byline-role-permissions-key) {
+    background-color: var(--canvas-800);
+  }
+
+  .mode-toggle,
+  :global(.byline-role-permissions-mode-toggle) {
+    border-color: var(--gray-700);
+  }
+
+  .mode-button:hover,
+  :global(.byline-role-permissions-mode-button):hover {
+    background-color: var(--canvas-700);
+  }
+
+  .mode-button-active,
+  :global(.byline-role-permissions-mode-button-active) {
+    background-color: var(--canvas-700);
+  }
+
+  .mode-button-divider,
+  :global(.byline-role-permissions-mode-button-divider) {
+    border-left-color: var(--gray-700);
+  }
+}

package/src/admin/components/admin-roles/permissions.tsx

@@ -0,0 +1,396 @@
+'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
+ */
+
+/**
+ * Inline per-role ability editor. Renders below the role-details
+ * header on the role detail page — full-width, no drawer.
+ *
+ * Mode-switched: defaults to **view** (checkboxes disabled, no edit
+ * affordances). Click Edit to switch to **edit** mode — checkboxes
+ * become interactive, per-group "Select all / Clear" buttons appear,
+ * and a Save button materialises once the selection diverges from the
+ * stored set. Cancel reverts the local set and returns to view mode.
+ *
+ * The View toggle is disabled while there are unsaved changes — this
+ * is the explicit-intent equivalent of a confirm dialog and keeps the
+ * UX honest about whether changes have been persisted.
+ *
+ * Vid-less by design (see Phase B notes): abilities live in
+ * `byline_admin_permissions`, not on the role row, so editing them
+ * does not bump the role's `vid`. Last-writer-wins on a per-role basis.
+ *
+ * Stable override handles: see `permissions.module.css`.
+ */
+
+import { useMemo, useState } from 'react'
+
+import type {
+  AbilityDescriptorResponse,
+  AbilityGroupResponse,
+  ListRegisteredAbilitiesResponse,
+  SetRoleAbilitiesResponse,
+} from '@byline/admin/admin-permissions'
+import type { AdminRoleResponse } from '@byline/admin/admin-roles'
+import { Alert, Button, Checkbox, LoaderEllipsis } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './permissions.module.css'
+
+type Mode = 'view' | 'edit'
+
+interface RolePermissionsProps {
+  role: AdminRoleResponse
+  registered: ListRegisteredAbilitiesResponse
+  initialAbilities: string[]
+  onSaved?: (response: SetRoleAbilitiesResponse) => void
+}
+
+function setsEqual(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
+  if (a.size !== b.size) return false
+  for (const item of a) if (!b.has(item)) return false
+  return true
+}
+
+interface GroupSectionProps {
+  group: AbilityGroupResponse
+  selected: ReadonlySet<string>
+  mode: Mode
+  saving: boolean
+  onToggle: (key: string, checked: boolean) => void
+  onSelectAll: (groupKeys: readonly string[]) => void
+  onClearAll: (groupKeys: readonly string[]) => void
+}
+
+function GroupSection({
+  group,
+  selected,
+  mode,
+  saving,
+  onToggle,
+  onSelectAll,
+  onClearAll,
+}: GroupSectionProps) {
+  const groupKeys = useMemo(() => group.abilities.map((a) => a.key), [group.abilities])
+  const selectedInGroup = groupKeys.filter((key) => selected.has(key)).length
+  const isEdit = mode === 'edit'
+
+  return (
+    <div className={cx('byline-role-permissions-group', styles.group)}>
+      <div className={cx('byline-role-permissions-group-head', styles['group-head'])}>
+        <div>
+          <span className={cx('byline-role-permissions-group-name', styles['group-name'])}>
+            {group.group}
+          </span>
+          <span
+            className={cx('muted', 'byline-role-permissions-group-count', styles['group-count'])}
+          >
+            {selectedInGroup} of {group.abilities.length} {isEdit ? 'selected' : 'granted'}
+          </span>
+        </div>
+        {isEdit ? (
+          <div className={cx('byline-role-permissions-group-buttons', styles['group-buttons'])}>
+            <Button
+              size="xs"
+              intent="secondary"
+              type="button"
+              disabled={saving || selectedInGroup === group.abilities.length}
+              onClick={() => onSelectAll(groupKeys)}
+            >
+              Select all
+            </Button>
+            <Button
+              size="xs"
+              intent="secondary"
+              type="button"
+              disabled={saving || selectedInGroup === 0}
+              onClick={() => onClearAll(groupKeys)}
+            >
+              Clear
+            </Button>
+          </div>
+        ) : null}
+      </div>
+      <div className={cx('byline-role-permissions-grid', styles.grid)}>
+        {group.abilities.map((ability: AbilityDescriptorResponse) => (
+          <div key={ability.key} className={cx('byline-role-permissions-row', styles.row)}>
+            <Checkbox
+              id={`ability-${ability.key}`}
+              name={`ability-${ability.key}`}
+              checked={selected.has(ability.key)}
+              disabled={!isEdit || saving}
+              onCheckedChange={(checked) => onToggle(ability.key, checked === true)}
+              // Override the uikit Checkbox container's `width: 100%` so it
+              // shrinks to its button width — otherwise the external label
+              // is pushed away by an empty 100%-wide container.
+              containerClasses={cx(
+                'byline-role-permissions-checkbox-auto',
+                styles['checkbox-auto']
+              )}
+              componentClasses={cx(
+                'byline-role-permissions-checkbox-auto',
+                styles['checkbox-auto']
+              )}
+            />
+            <label
+              htmlFor={`ability-${ability.key}`}
+              className={cx(
+                'byline-role-permissions-label',
+                styles.label,
+                isEdit && ['byline-role-permissions-label-edit', styles['label-edit']]
+              )}
+            >
+              <div className={cx('byline-role-permissions-label-head', styles['label-head'])}>
+                <span className={cx('byline-role-permissions-label-name', styles['label-name'])}>
+                  {ability.label}
+                </span>
+                <code className={cx('byline-role-permissions-key', styles.key)}>{ability.key}</code>
+              </div>
+              {ability.description ? (
+                <p
+                  className={cx('muted', 'byline-role-permissions-description', styles.description)}
+                >
+                  {ability.description}
+                </p>
+              ) : null}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function RolePermissions({
+  role,
+  registered,
+  initialAbilities,
+  onSaved,
+}: RolePermissionsProps) {
+  const { setRoleAbilities } = useBylineAdminServices()
+  const [mode, setMode] = useState<Mode>('view')
+  const [initialSet, setInitialSet] = useState<ReadonlySet<string>>(() => new Set(initialAbilities))
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(initialAbilities))
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const isDirty = !setsEqual(selected, initialSet)
+  const totalSelected = selected.size
+
+  function handleToggle(key: string, checked: boolean): void {
+    if (mode !== 'edit') return
+    setSelected((current) => {
+      const next = new Set(current)
+      if (checked) next.add(key)
+      else next.delete(key)
+      return next
+    })
+  }
+
+  function handleSelectAll(groupKeys: readonly string[]): void {
+    setSelected((current) => {
+      const next = new Set(current)
+      for (const key of groupKeys) next.add(key)
+      return next
+    })
+  }
+
+  function handleClearAll(groupKeys: readonly string[]): void {
+    setSelected((current) => {
+      const next = new Set(current)
+      for (const key of groupKeys) next.delete(key)
+      return next
+    })
+  }
+
+  function handleCancel(): void {
+    setSelected(new Set(initialSet))
+    setError(null)
+    setMode('view')
+  }
+
+  function handleEnterEdit(): void {
+    setError(null)
+    setMode('edit')
+  }
+
+  function handleEnterView(): void {
+    // Disabled while dirty (the toggle's `disabled` prop guards this) —
+    // belt-and-suspenders so a stray click can't slip through.
+    if (isDirty) return
+    setError(null)
+    setMode('view')
+  }
+
+  async function handleSave(): Promise<void> {
+    if (saving) return
+    setSaving(true)
+    setError(null)
+    try {
+      const response = await setRoleAbilities({
+        data: { id: role.id, abilities: Array.from(selected) },
+      })
+      // Reset baseline to the authoritative stored set — guards against
+      // any dedupe/normalisation the server might apply.
+      const storedSet = new Set(response.abilities)
+      setInitialSet(storedSet)
+      setSelected(new Set(storedSet))
+      onSaved?.(response)
+    } catch (err) {
+      const code = getErrorCode(err)
+      if (code === 'admin.permissions.roleNotFound') {
+        setError('This role no longer exists.')
+      } else if (code === 'admin.permissions.abilityUnregistered') {
+        setError(
+          'One or more selected abilities are no longer registered. Reload the page and try again.'
+        )
+      } else {
+        setError('Could not save permissions. Please try again.')
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const isEdit = mode === 'edit'
+
+  return (
+    <div className={cx('byline-role-permissions-wrap', styles.wrap)}>
+      <div className={cx('byline-role-permissions-toolbar', styles.toolbar)}>
+        <ModeToggle
+          mode={mode}
+          dirty={isDirty}
+          saving={saving}
+          onView={handleEnterView}
+          onEdit={handleEnterEdit}
+        />
+        <p className={cx('muted', 'byline-role-permissions-counter', styles.counter)}>
+          <span className={cx('byline-role-permissions-counter-num', styles['counter-num'])}>
+            {totalSelected}
+          </span>{' '}
+          of{' '}
+          <span className={cx('byline-role-permissions-counter-num', styles['counter-num'])}>
+            {registered.total}
+          </span>{' '}
+          {isEdit ? 'selected' : 'granted'} for {role.name}
+        </p>
+        {isEdit && isDirty ? (
+          <div className={cx('byline-role-permissions-actions', styles.actions)}>
+            <Button
+              type="button"
+              intent="secondary"
+              size="xs"
+              onClick={handleCancel}
+              disabled={saving}
+              className={cx('byline-role-permissions-action', styles.action)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              intent="primary"
+              size="xs"
+              onClick={() => void handleSave()}
+              disabled={saving}
+              className={cx('byline-role-permissions-action', styles.action)}
+            >
+              {saving ? <LoaderEllipsis size={30} /> : 'Save'}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+
+      {error ? <Alert intent="danger">{error}</Alert> : null}
+
+      <div className={cx('byline-role-permissions-groups', styles.groups)}>
+        {registered.groups.map((group) => (
+          <GroupSection
+            key={group.group}
+            group={group}
+            selected={selected}
+            mode={mode}
+            saving={saving}
+            onToggle={handleToggle}
+            onSelectAll={handleSelectAll}
+            onClearAll={handleClearAll}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface ModeToggleProps {
+  mode: Mode
+  dirty: boolean
+  saving: boolean
+  onView: () => void
+  onEdit: () => void
+}
+
+function ModeToggle({ mode, dirty, saving, onView, onEdit }: ModeToggleProps) {
+  // Segmented two-state toggle. View is disabled while dirty so the
+  // user has to commit to Save or Cancel — avoids accidentally
+  // discarding a draft selection.
+  const isView = mode === 'view'
+  const isEdit = mode === 'edit'
+  const viewDisabled = dirty || saving
+  const editDisabled = saving
+  return (
+    <div
+      role="group"
+      aria-label="Permissions mode"
+      className={cx('byline-role-permissions-mode-toggle', styles['mode-toggle'])}
+    >
+      <button
+        type="button"
+        onClick={onView}
+        disabled={viewDisabled}
+        className={cx(
+          'byline-role-permissions-mode-button',
+          styles['mode-button'],
+          isView && ['byline-role-permissions-mode-button-active', styles['mode-button-active']],
+          viewDisabled &&
+            !isView && [
+              'byline-role-permissions-mode-button-disabled',
+              styles['mode-button-disabled'],
+            ]
+        )}
+      >
+        View
+      </button>
+      <button
+        type="button"
+        onClick={onEdit}
+        disabled={editDisabled}
+        className={cx(
+          'byline-role-permissions-mode-button',
+          'byline-role-permissions-mode-button-divider',
+          styles['mode-button'],
+          styles['mode-button-divider'],
+          isEdit && ['byline-role-permissions-mode-button-active', styles['mode-button-active']],
+          editDisabled &&
+            !isEdit && [
+              'byline-role-permissions-mode-button-disabled',
+              styles['mode-button-disabled'],
+            ]
+        )}
+      >
+        Edit
+      </button>
+    </div>
+  )
+}
+
+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-roles/update.module.css

@@ -0,0 +1,40 @@
+/**
+ * UpdateAdminRole — drawer form for editing an existing role.
+ *
+ * Override handles:
+ *   .byline-role-update-wrap     — outer container
+ *   .byline-role-update-form     — vertical-stack form element
+ *   .byline-role-update-actions  — Cancel/Save row
+ *   .byline-role-update-action   — buttons in the actions row
+ */
+
+.wrap,
+:global(.byline-role-update-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.form,
+:global(.byline-role-update-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+}
+
+.actions,
+:global(.byline-role-update-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
+
+.action,
+:global(.byline-role-update-action) {
+  min-width: 4rem;
+}