@byline/host-tanstack-start 0.9.3

package/src/admin-shell/admin-users/container.tsx

@@ -0,0 +1,344 @@
+'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
+ */
+
+import type React from 'react'
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { LocalDateTime, SetPassword, UpdateUser, UserRoles } from '@byline/ui'
+import {
+  Button,
+  CloseIcon,
+  Drawer,
+  EditIcon,
+  IconButton,
+  Modal,
+  useToastManager,
+} from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './container.module.css'
+import { DeleteUser } from './delete.js'
+import type { AdminRoleResponse } from '../../server-fns/admin-roles/index.js'
+import type { AdminUserResponse, UserRolesResponse } from '../../server-fns/admin-users/index.js'
+
+/**
+ * Detail view for a single admin user, built around Infonomic's drawer
+ * pattern: the main view shows cards for each editable area of the
+ * record, and each "Edit" button opens a drawer containing the
+ * sub-form. Destructive actions (delete) use a modal instead of a
+ * drawer.
+ *
+ * Each sub-panel is a self-contained form component receiving
+ * `(user, onClose, onSuccess)`. Forms that return a fresh user (the
+ * update and set-password flows) lift it into `currentUser` via
+ * `handleSuccess` so subsequent edits see the bumped `vid`. Delete
+ * navigates away internally; its `onSuccess` is unused.
+ *
+ * The roles drawer is special-cased: it needs `allRoles` (the catalog
+ * to render the checkbox list) and `initialRoleIds` (pre-checked from
+ * the user's current assignments). It's rendered inline against
+ * `current === 'roles'` rather than going through the panels map —
+ * same trick the role-detail container uses for its permissions
+ * panel.
+ */
+
+type ComponentKey = 'update' | 'set_password' | 'delete_user' | 'roles' | 'empty'
+
+interface PanelProps {
+  user: AdminUserResponse
+  onClose?: () => void
+  onSuccess?: (user: AdminUserResponse) => void
+}
+
+const panels: Record<
+  ComponentKey,
+  { title: string; drawerWidth: 'medium' | 'large'; component: React.ComponentType<PanelProps> }
+> = {
+  update: {
+    title: 'Account Details',
+    drawerWidth: 'medium',
+    component: UpdateUser,
+  },
+  set_password: {
+    title: 'Set Password',
+    drawerWidth: 'medium',
+    component: SetPassword,
+  },
+  delete_user: {
+    title: 'Delete Admin User',
+    drawerWidth: 'medium',
+    component: DeleteUser,
+  },
+  roles: {
+    title: 'User Roles',
+    drawerWidth: 'medium',
+    // See container header docstring — rendered inline, this is a stub.
+    component: () => null,
+  },
+  empty: {
+    title: '',
+    drawerWidth: 'medium',
+    component: () => null,
+  },
+}
+
+function ContainerSection({
+  title,
+  onEdit,
+  children,
+}: {
+  title: string
+  onEdit?: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <div className={cx('byline-admin-user-section', styles.section)}>
+      <div className={cx('byline-admin-user-section-head', styles.sectionHead)}>
+        <h2>{title}</h2>
+        {onEdit ? (
+          <IconButton variant="text" onClick={onEdit} aria-label={`Edit ${title}`}>
+            <EditIcon width="20px" height="20px" />
+          </IconButton>
+        ) : null}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+function RoleBadge({ role }: { role: AdminRoleResponse }) {
+  return (
+    <span
+      title={role.machine_name}
+      className={cx('byline-admin-user-role-badge', styles.roleBadge)}
+    >
+      {role.name}
+    </span>
+  )
+}
+
+interface AccountContainerProps {
+  user: AdminUserResponse
+  allRoles: AdminRoleResponse[]
+  initialUserRoles: AdminRoleResponse[]
+}
+
+export function AccountContainer({ user, allRoles, initialUserRoles }: AccountContainerProps) {
+  const router = useRouter()
+  const toastManager = useToastManager()
+  const [currentUser, setCurrentUser] = useState<AdminUserResponse>(user)
+  const [currentUserRoles, setCurrentUserRoles] = useState<AdminRoleResponse[]>(initialUserRoles)
+  const [current, setCurrent] = useState<ComponentKey>('empty')
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const openDrawer = (key: ComponentKey) => () => {
+    setCurrent(key)
+    setIsDrawerOpen(true)
+  }
+  const openModal = (key: ComponentKey) => () => {
+    setCurrent(key)
+    setIsModalOpen(true)
+  }
+  const closeDrawer = () => {
+    setCurrent('empty')
+    setIsDrawerOpen(false)
+  }
+  const closeModal = () => {
+    setCurrent('empty')
+    setIsModalOpen(false)
+  }
+
+  const handleSuccess = (updated: AdminUserResponse) => {
+    setCurrentUser(updated)
+  }
+
+  const handleRolesSaved = (response: UserRolesResponse) => {
+    setCurrentUserRoles(response.roles)
+    void router.invalidate()
+    toastManager.add({
+      title: 'Roles saved',
+      description: `${response.roles.length} role${response.roles.length === 1 ? '' : 's'} assigned to ${currentUser.email}.`,
+      data: { intent: 'success' },
+    })
+  }
+
+  const Panel = panels[current].component
+
+  return (
+    <>
+      <div className={cx('byline-admin-user-grid', styles.grid)}>
+        <div className={cx('byline-admin-user-column', styles.column)}>
+          <ContainerSection title="Account Details" onEdit={openDrawer('update')}>
+            <p className={cx('byline-admin-user-line', styles.line)}>
+              <span className="muted">Email:</span> {currentUser.email}
+            </p>
+            <p className={cx('byline-admin-user-line', styles.line)}>
+              <span className="muted">Given name:</span>{' '}
+              {currentUser.given_name ?? (
+                <span className={cx('muted byline-admin-user-not-set', styles.notSet)}>
+                  Not set
+                </span>
+              )}
+            </p>
+            <p className={cx('byline-admin-user-line', styles.line)}>
+              <span className="muted">Family name:</span>{' '}
+              {currentUser.family_name ?? (
+                <span className={cx('muted byline-admin-user-not-set', styles.notSet)}>
+                  Not set
+                </span>
+              )}
+            </p>
+            <p className={cx('byline-admin-user-line', styles.line)}>
+              <span className="muted">Username:</span>{' '}
+              {currentUser.username ?? (
+                <span className={cx('muted byline-admin-user-not-set', styles.notSet)}>
+                  Not set
+                </span>
+              )}
+            </p>
+            <p className={cx('byline-admin-user-line', styles.line)}>
+              <span className="muted">Super admin:</span>{' '}
+              {currentUser.is_super_admin ? 'Yes' : 'No'}
+            </p>
+            <p className={cx('byline-admin-user-line', styles.line)}>
+              <span className="muted">Email verified:</span>{' '}
+              {currentUser.is_email_verified ? 'Yes' : 'No'}
+            </p>
+            <p className={cx('byline-admin-user-line-spaced', styles.lineSpaced)}>
+              <span className="muted">Status:</span>{' '}
+              <span
+                className={cx({
+                  'byline-admin-user-status-on': currentUser.is_enabled,
+                  [styles.statusOn]: currentUser.is_enabled,
+                  'byline-admin-user-status-off': !currentUser.is_enabled,
+                  [styles.statusOff]: !currentUser.is_enabled,
+                })}
+              >
+                {currentUser.is_enabled ? 'Enabled' : 'Disabled'}
+              </span>
+            </p>
+            <Button size="sm" onClick={openDrawer('update')}>
+              Update Details
+            </Button>
+            <div className={cx('muted byline-admin-user-meta', styles.meta)}>
+              <p>
+                <span className="font-bold">Created:&nbsp;</span>
+                <LocalDateTime value={currentUser.created_at} />
+              </p>
+              <p>
+                <span className="font-bold">Updated:&nbsp;</span>
+                <LocalDateTime value={currentUser.updated_at} />
+              </p>
+              <p className={cx('byline-admin-user-line', styles.line)}>
+                <span className="font-bold">Last login:&nbsp;</span>
+                <LocalDateTime value={currentUser.last_login} fallback="Never" />
+              </p>
+            </div>
+          </ContainerSection>
+        </div>
+
+        <div className={cx('byline-admin-user-column', styles.column)}>
+          <ContainerSection title="Roles" onEdit={openDrawer('roles')}>
+            {currentUserRoles.length === 0 ? (
+              <p className={cx('muted byline-admin-user-role-empty', styles.roleEmpty)}>
+                No roles assigned.
+              </p>
+            ) : (
+              <div className={cx('byline-admin-user-role-list', styles.roleList)}>
+                {currentUserRoles.map((role) => (
+                  <RoleBadge key={role.id} role={role} />
+                ))}
+              </div>
+            )}
+            <Button size="sm" onClick={openDrawer('roles')}>
+              Edit Roles
+            </Button>
+          </ContainerSection>
+
+          <ContainerSection title="Password" onEdit={openDrawer('set_password')}>
+            <p className={cx('byline-admin-user-line-spaced', styles.lineSpaced)}>
+              Set a new password for this user.
+            </p>
+            <Button size="sm" onClick={openDrawer('set_password')}>
+              Set Password
+            </Button>
+          </ContainerSection>
+
+          <ContainerSection title="Delete Admin User">
+            <p className={cx('byline-admin-user-line-spaced', styles.lineSpaced)}>
+              Permanently delete this admin user.
+            </p>
+            <Button size="sm" intent="danger" onClick={openModal('delete_user')}>
+              Delete Admin User
+            </Button>
+          </ContainerSection>
+        </div>
+      </div>
+
+      <Drawer
+        id="admin-user-drawer"
+        closeOnOverlayClick={false}
+        width="medium"
+        topOffset="46px"
+        isOpen={isDrawerOpen}
+        onDismiss={closeDrawer}
+        className={cx({
+          'byline-admin-user-drawer-large': panels[current].drawerWidth === 'large',
+          [styles.drawerLarge]: panels[current].drawerWidth === 'large',
+          'byline-admin-user-drawer': panels[current].drawerWidth !== 'large',
+          [styles.drawer]: panels[current].drawerWidth !== 'large',
+        })}
+      >
+        <Drawer.Container aria-hidden={!isDrawerOpen} className="p-2">
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton aria-label="Close" size="sm" onClick={closeDrawer}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header>
+            <h2>{panels[current].title}</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <div className={cx('byline-admin-user-drawer-scroll', styles.drawerScroll)}>
+              {current === 'roles' ? (
+                <UserRoles
+                  user={currentUser}
+                  allRoles={allRoles}
+                  initialRoleIds={currentUserRoles.map((r) => r.id)}
+                  onClose={closeDrawer}
+                  onSaved={handleRolesSaved}
+                />
+              ) : (
+                <Panel user={currentUser} onClose={closeDrawer} onSuccess={handleSuccess} />
+              )}
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+
+      <Modal isOpen={isModalOpen} onDismiss={closeModal} closeOnOverlayClick={false}>
+        <Modal.Container className={cx('byline-admin-user-modal', styles.modal)}>
+          <Modal.Header className={cx('byline-admin-user-modal-head', styles.modalHead)}>
+            <h3 className="m-0">{panels[current].title}</h3>
+            <IconButton aria-label="Close" size="sm" onClick={closeModal}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          <Panel user={currentUser} onClose={closeModal} onSuccess={handleSuccess} />
+        </Modal.Container>
+      </Modal>
+    </>
+  )
+}

package/src/admin-shell/admin-users/delete.module.css

@@ -0,0 +1,52 @@
+/**
+ * DeleteUser — modal body for permanent admin-user deletion.
+ *
+ * Override handles:
+ *   .byline-admin-user-delete-content   — outer Modal.Content (gap)
+ *   .byline-admin-user-delete-body      — vertical stack of identity rows
+ *   .byline-admin-user-delete-warning   — red warning paragraph
+ *   .byline-admin-user-delete-actions   — Cancel/Delete row
+ *   .byline-admin-user-delete-button    — action buttons (min-width)
+ */
+
+.content,
+:global(.byline-admin-user-delete-content) {
+  gap: 0.25rem;
+}
+
+.body,
+:global(.byline-admin-user-delete-body) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.row,
+:global(.byline-admin-user-delete-row) {
+  margin: 0;
+}
+
+.warning,
+:global(.byline-admin-user-delete-warning) {
+  margin-top: 0.75rem;
+  color: var(--red-600);
+}
+
+:is([data-theme="dark"], :global(.dark)) .warning,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-delete-warning) {
+  color: var(--red-300);
+}
+
+.actions,
+:global(.byline-admin-user-delete-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+.button,
+:global(.byline-admin-user-delete-button) {
+  min-width: 4rem;
+}

package/src/admin-shell/admin-users/delete.tsx

@@ -0,0 +1,129 @@
+'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
+ */
+
+/**
+ * Delete-user modal body.
+ *
+ * Rendered inside `AccountContainer`'s `<Modal.Container>`, so this
+ * component only lays out the content + action row — the modal header
+ * and dismiss button are already drawn by the container.
+ *
+ * On success we navigate away to `/admin/users`; the record that hosts
+ * this view no longer exists. The `onSuccess` callback on `PanelProps`
+ * is unused here because `delete` produces no updated user.
+ */
+
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { Alert, Button, LoaderEllipsis, Modal } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { type AdminUserResponse, deleteAdminUser } from '../../server-fns/admin-users/index.js'
+import { useNavigate } from '../chrome/loose-router.js'
+import styles from './delete.module.css'
+
+interface DeleteUserProps {
+  user: AdminUserResponse
+  onClose?: () => void
+  onSuccess?: (user: AdminUserResponse) => void
+}
+
+function displayNameFor(user: AdminUserResponse): string {
+  const parts = [user.given_name, user.family_name].filter(
+    (part): part is string => typeof part === 'string' && part.length > 0
+  )
+  return parts.length > 0 ? parts.join(' ') : user.email
+}
+
+export function DeleteUser({ user, onClose }: DeleteUserProps) {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+
+  async function handleDelete() {
+    if (pending) return
+    setPending(true)
+    setError(null)
+    try {
+      await deleteAdminUser({ data: { id: user.id, vid: user.vid } })
+      onClose?.()
+      // Invalidate before navigating so the list-route loader is
+      // forced to re-fetch — without this, TanStack Router can serve
+      // the cached pre-delete list.
+      await router.invalidate()
+      navigate({ to: '/admin/users' as never })
+    } catch (err) {
+      const code = getErrorCode(err)
+      if (code === 'admin.users.selfDeleteForbidden') {
+        setError('You cannot delete your own admin account.')
+      } else if (code === 'admin.users.versionConflict') {
+        setError(
+          'This user has been modified elsewhere since you opened this dialog. Close and reload before trying again.'
+        )
+      } else if (code === 'admin.users.notFound') {
+        setError('This user has already been deleted.')
+      } else {
+        setError('Could not delete this admin user. Please try again.')
+      }
+      setPending(false)
+    }
+  }
+
+  return (
+    <Modal.Content className={cx('byline-admin-user-delete-content', styles.content)}>
+      <div className={cx('byline-admin-user-delete-body', styles.body)}>
+        {error ? (
+          <Alert intent="danger" close={false}>
+            {error}
+          </Alert>
+        ) : null}
+        <p className={cx('byline-admin-user-delete-row', styles.row)}>
+          <span className="muted">User:</span> {displayNameFor(user)}
+        </p>
+        <p className={cx('byline-admin-user-delete-row', styles.row)}>
+          <span className="muted">Email:</span> {user.email}
+        </p>
+        <p className={cx('byline-admin-user-delete-warning', styles.warning)}>
+          This will permanently delete the admin user. The action cannot be undone. Any active
+          sessions will be invalidated at the next refresh.
+        </p>
+      </div>
+      <div className={cx('byline-admin-user-delete-actions', styles.actions)}>
+        <Button
+          type="button"
+          intent="secondary"
+          size="sm"
+          onClick={onClose}
+          disabled={pending}
+          className={cx('byline-admin-user-delete-button', styles.button)}
+        >
+          Cancel
+        </Button>
+        <Button
+          size="sm"
+          intent="danger"
+          onClick={handleDelete}
+          disabled={pending}
+          className={cx('byline-admin-user-delete-button', styles.button)}
+        >
+          {pending === true ? <LoaderEllipsis size={42} /> : 'Delete User'}
+        </Button>
+      </div>
+    </Modal.Content>
+  )
+}
+
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}

package/src/admin-shell/admin-users/list.module.css

@@ -0,0 +1,164 @@
+/**
+ * AdminUsersListView — paginated list of admin users with search & sort.
+ *
+ * Override handles:
+ *   .byline-admin-users-list-head     — title + stats + create-button row
+ *   .byline-admin-users-list-title    — page heading
+ *   .byline-admin-users-list-stats    — count badge
+ *   .byline-admin-users-list-options  — search/page-size/pager bar
+ *   .byline-admin-users-list-search   — search box width clamp
+ *   .byline-admin-users-list-table-wrap — table container
+ *   .byline-admin-users-list-cell-right — right-aligned cells
+ *   .byline-admin-users-list-pad-row  — empty filler rows
+ *   .byline-admin-users-list-not-set  — italic "Not set" markers
+ *   .byline-admin-users-list-disabled — disabled-user row colour
+ *   .byline-admin-users-list-page-size — page-size select alignment
+ *   .byline-admin-users-list-drawer   — drawer responsive width override
+ *   .byline-admin-users-list-drawer-scroll — scrollable drawer body
+ */
+
+.head,
+:global(.byline-admin-users-list-head) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.title,
+:global(.byline-admin-users-list-title) {
+  margin: 0;
+  padding-bottom: 2px;
+}
+
+.stats,
+:global(.byline-admin-users-list-stats) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: auto;
+  margin-bottom: -4px;
+  height: 28px;
+  min-width: 28px;
+  padding: 5px 6px;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 0;
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: 0.375rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .stats,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-users-list-stats) {
+  background-color: var(--canvas-700);
+}
+
+.options,
+:global(.byline-admin-users-list-options) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  align-items: flex-start;
+}
+
+@media (min-width: 40rem) {
+  .options,
+  :global(.byline-admin-users-list-options) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.optionsBottom,
+:global(.byline-admin-users-list-options-bottom) {
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+}
+
+.search,
+:global(.byline-admin-users-list-search) {
+  margin-right: auto;
+  width: 100%;
+  max-width: 350px;
+}
+
+.pageSize,
+:global(.byline-admin-users-list-page-size) {
+  /* fallback default — overridden when sm: is active */
+}
+
+@media (min-width: 40rem) {
+  .pageSize,
+  :global(.byline-admin-users-list-page-size) {
+    margin-left: auto;
+  }
+}
+
+.tableWrap,
+:global(.byline-admin-users-list-table-wrap) {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.cellRight,
+:global(.byline-admin-users-list-cell-right) {
+  text-align: right;
+}
+
+.notSet,
+:global(.byline-admin-users-list-not-set) {
+  font-style: italic;
+}
+
+.padRow,
+:global(.byline-admin-users-list-pad-row) {
+  height: 32px;
+  border: 0;
+}
+
+.disabled,
+:global(.byline-admin-users-list-disabled) {
+  color: #ef4444;
+}
+
+.colGiven,
+:global(.byline-admin-users-list-col-given) {
+  width: 18%;
+}
+
+.colFamily,
+:global(.byline-admin-users-list-col-family) {
+  width: 18%;
+}
+
+.colEmail,
+:global(.byline-admin-users-list-col-email) {
+  width: 28%;
+}
+
+.colDate,
+:global(.byline-admin-users-list-col-date) {
+  width: 18%;
+}
+
+.drawer,
+:global(.byline-admin-users-list-drawer) {
+  /* width handled via uikit prop */
+}
+
+@media (min-width: 48rem) {
+  .drawer,
+  :global(.byline-admin-users-list-drawer) {
+    width: 600px;
+  }
+}
+
+.drawerScroll,
+:global(.byline-admin-users-list-drawer-scroll) {
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+}