@kelpie/ui 0.1.0

package/src/pages/admin/TeamPage.tsx

@@ -0,0 +1,386 @@
+import { INVITABLE_ROLES } from '@kelpie/schemas'
+import type { InvitableRole, Invite, Member, MemberRole } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+
+import { useMembers, useRemoveMember, useSetMemberRole } from '../../api/resources/members.ts'
+import {
+  useInvites,
+  useResendInvite,
+  useRevokeInvite,
+  useSendInvite,
+} from '../../api/resources/invites.ts'
+import { useSession } from '../../api/resources/session.ts'
+import { PageHeader } from '../../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { initialsOf } from '../../lib/names.ts'
+
+/**
+ * The workspace's people: who is in it, and who has been asked.
+ *
+ * The mockup's version was local state, so its rules were suggestions. Every one
+ * of them is now the API's: an admin invites, changes roles, and removes; the
+ * owner cannot be demoted or removed; ownership moves by being given away; and a
+ * member who still owns records cannot be removed until they are reassigned.
+ *
+ * This page hides the controls a member cannot use, which is a courtesy rather
+ * than the enforcement. The endpoints answer `403` either way.
+ */
+
+function formatDate(value: Date): string {
+  return value.toLocaleDateString(undefined, { dateStyle: 'medium' })
+}
+
+export function TeamPage(): React.JSX.Element {
+  const { session } = useSession()
+  const isAdmin = session?.role === 'owner' || session?.role === 'admin'
+  const { members, isLoading, error } = useMembers()
+
+  return (
+    <div className="animate-slide-in mx-auto max-w-4xl space-y-8">
+      <PageHeader title="Team" description="Who is in this workspace, and what they can do." />
+
+      {isAdmin && <InviteForm />}
+      {isAdmin && <PendingInvites />}
+
+      <section>
+        <h2 className="mb-3 text-[14px] font-semibold text-ink">Active members</h2>
+        {error !== null && <ErrorPanel error={error} />}
+        {isLoading ? (
+          <LoadingPanel label="Loading the team…" />
+        ) : (
+          <MemberTable members={members} isAdmin={isAdmin} currentUserId={session?.userId} />
+        )}
+      </section>
+    </div>
+  )
+}
+
+function InviteForm(): React.JSX.Element {
+  const sendInvite = useSendInvite()
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<InvitableRole>('member')
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    sendInvite
+      .runAsync({ email: email.trim(), role })
+      .then(() => {
+        setEmail('')
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-3 rounded-md border border-border p-4">
+      <div className="flex flex-wrap items-end gap-2">
+        <label className="min-w-[220px] flex-1">
+          <span className="mb-1.5 block text-[12px] font-medium text-ink">Invite by email</span>
+          <input
+            type="email"
+            value={email}
+            onChange={(event) => {
+              setEmail(event.target.value)
+            }}
+            required
+            placeholder="colleague@startup.com"
+            className="w-full rounded-md border border-border bg-surface px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+        </label>
+        <label>
+          <span className="mb-1.5 block text-[12px] font-medium text-ink">Role</span>
+          <select
+            value={role}
+            onChange={(event) => {
+              setRole(event.target.value as InvitableRole)
+            }}
+            className="rounded-md border border-border bg-surface px-3 py-2 text-[13px] capitalize outline-none focus:border-accent"
+          >
+            {INVITABLE_ROLES.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          type="submit"
+          disabled={sendInvite.isPending}
+          className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+        >
+          {sendInvite.isPending ? 'Sending…' : 'Send invite'}
+        </button>
+      </div>
+      {sendInvite.error !== null && <ErrorPanel error={sendInvite.error} />}
+      <p className="text-[11px] text-ink-faint">
+        The invitation is emailed and lasts seven days. Ownership is not invited; it is given to a
+        member who has already joined.
+      </p>
+    </form>
+  )
+}
+
+function PendingInvites(): React.JSX.Element {
+  const { invites, isLoading, error } = useInvites()
+  const resend = useResendInvite()
+  const revoke = useRevokeInvite()
+  const failure = resend.error ?? revoke.error ?? error
+
+  return (
+    <section>
+      <h2 className="mb-3 text-[14px] font-semibold text-ink">Invitations</h2>
+      {failure !== null && <ErrorPanel error={failure} />}
+      {isLoading ? (
+        <LoadingPanel label="Loading invitations…" />
+      ) : invites.length === 0 ? (
+        <p className="text-[13px] text-ink-muted">No outstanding invitations.</p>
+      ) : (
+        <div className="overflow-x-auto rounded-md border border-border">
+          <table className="w-full text-left text-[13px]">
+            <thead>
+              <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
+                <th className="px-4 py-2.5">Email</th>
+                <th className="px-4 py-2.5">Role</th>
+                <th className="px-4 py-2.5">Invited</th>
+                <th className="px-4 py-2.5">Status</th>
+                <th className="px-4 py-2.5 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {invites.map((invite) => (
+                <InviteRow
+                  key={invite.id}
+                  invite={invite}
+                  isPending={resend.isPending || revoke.isPending}
+                  onResend={() => {
+                    resend.run(invite.id)
+                  }}
+                  onRevoke={() => {
+                    revoke.run(invite.id)
+                  }}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  )
+}
+
+function InviteRow({
+  invite,
+  isPending,
+  onResend,
+  onRevoke,
+}: {
+  readonly invite: Invite
+  readonly isPending: boolean
+  readonly onResend: () => void
+  readonly onRevoke: () => void
+}): React.JSX.Element {
+  return (
+    <tr className="border-b border-border last:border-0">
+      <td className="px-4 py-3 font-mono text-[12px] text-ink">{invite.email}</td>
+      <td className="px-4 py-3 text-ink-muted capitalize">{invite.role}</td>
+      <td className="px-4 py-3 text-ink-muted">{formatDate(invite.createdAt)}</td>
+      <td className="px-4 py-3">
+        <span
+          className={
+            invite.status === 'pending'
+              ? 'text-[12px] font-medium text-warning'
+              : 'text-[12px] font-medium text-ink-faint'
+          }
+        >
+          {invite.status === 'pending' ? `Pending until ${formatDate(invite.expiresAt)}` : 'Expired'}
+        </span>
+      </td>
+      <td className="px-4 py-3 text-right">
+        <div className="flex flex-wrap justify-end gap-3">
+          <button
+            type="button"
+            disabled={isPending}
+            onClick={onResend}
+            title="Sends a new link and retires the old one"
+            className="text-[12px] font-medium text-accent hover:underline disabled:opacity-50"
+          >
+            Resend
+          </button>
+          <button
+            type="button"
+            disabled={isPending}
+            onClick={onRevoke}
+            className="text-[12px] font-medium text-danger hover:underline disabled:opacity-50"
+          >
+            Revoke
+          </button>
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+function MemberTable({
+  members,
+  isAdmin,
+  currentUserId,
+}: {
+  readonly members: readonly Member[]
+  readonly isAdmin: boolean
+  readonly currentUserId: string | undefined
+}): React.JSX.Element {
+  const { session } = useSession()
+  const setRole = useSetMemberRole()
+  const removeMember = useRemoveMember()
+  const [pendingRemovalId, setPendingRemovalId] = useState<string | null>(null)
+  // A refused removal is only worth showing while its row is still asking. A
+  // successful removal clears the row, and so does Cancel; either way the reason
+  // the last one failed is no longer about anything on screen.
+  const failure = setRole.error ?? (pendingRemovalId === null ? null : removeMember.error)
+
+  const isOwner = session?.role === 'owner'
+
+  function remove(memberId: string): void {
+    removeMember
+      .runAsync(memberId)
+      .then(() => {
+        setPendingRemovalId(null)
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <div className="space-y-3">
+      {failure !== null && <ErrorPanel error={failure} />}
+      <div className="overflow-x-auto rounded-md border border-border">
+        <table className="w-full text-left text-[13px]">
+          <thead>
+            <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
+              <th className="px-4 py-2.5">Member</th>
+              <th className="px-4 py-2.5">Role</th>
+              <th className="px-4 py-2.5">Joined</th>
+              <th className="px-4 py-2.5 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {members.map((member) => (
+              <tr key={member.id} className="border-b border-border last:border-0">
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-sunken text-[11px] font-medium text-ink">
+                      {initialsOf(member.name)}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium text-ink">
+                        {member.name}
+                        {member.userId === currentUserId && (
+                          <span className="ml-1.5 text-[11px] text-ink-faint">you</span>
+                        )}
+                      </div>
+                      <div className="truncate font-mono text-[11px] text-ink-faint">
+                        {member.email}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td className="px-4 py-3">
+                  {member.role === 'owner' || !isAdmin ? (
+                    <span className="text-ink-muted capitalize">{member.role}</span>
+                  ) : (
+                    <select
+                      value={member.role}
+                      disabled={setRole.isPending}
+                      onChange={(event) => {
+                        setRole.run({ memberId: member.id, role: event.target.value as MemberRole })
+                      }}
+                      className="rounded border border-border bg-surface px-2 py-1 text-[12px] capitalize outline-none disabled:opacity-50"
+                    >
+                      <option value="admin">Admin</option>
+                      <option value="member">Member</option>
+                      {/* Only the owner may offer this, and the API agrees. */}
+                      {isOwner && <option value="owner">Owner (transfer)</option>}
+                    </select>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-ink-muted">{formatDate(member.joinedAt)}</td>
+                <td className="px-4 py-3 text-right">
+                  {isAdmin && member.role !== 'owner' && (
+                    <RemoveMemberCell
+                      name={member.name}
+                      isConfirming={pendingRemovalId === member.id}
+                      isPending={removeMember.isPending}
+                      onAsk={() => {
+                        setPendingRemovalId(member.id)
+                      }}
+                      onCancel={() => {
+                        setPendingRemovalId(null)
+                      }}
+                      onConfirm={() => {
+                        remove(member.id)
+                      }}
+                    />
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {isOwner && (
+        <p className="text-[11px] text-ink-faint">
+          Giving somebody ownership makes you an admin. A workspace has exactly one owner.
+        </p>
+      )}
+    </div>
+  )
+}
+
+function RemoveMemberCell({
+  name,
+  isConfirming,
+  isPending,
+  onAsk,
+  onCancel,
+  onConfirm,
+}: {
+  readonly name: string
+  readonly isConfirming: boolean
+  readonly isPending: boolean
+  readonly onAsk: () => void
+  readonly onCancel: () => void
+  readonly onConfirm: () => void
+}): React.JSX.Element {
+  if (!isConfirming) {
+    return (
+      <button
+        type="button"
+        onClick={onAsk}
+        className="text-[12px] font-medium text-danger hover:underline"
+      >
+        Remove
+      </button>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <span className="text-[12px] text-ink-muted">Remove {name}?</span>
+      <button
+        type="button"
+        onClick={onCancel}
+        className="text-[12px] font-medium text-ink-muted hover:text-ink"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        disabled={isPending}
+        onClick={onConfirm}
+        className="rounded-md bg-danger px-2.5 py-1 text-[12px] font-semibold text-danger-fg transition hover:opacity-90 disabled:opacity-50"
+      >
+        {isPending ? 'Removing…' : 'Remove'}
+      </button>
+    </div>
+  )
+}

package/src/pages/admin/WebhookDeliveries.tsx

@@ -0,0 +1,184 @@
+import type { WebhookDelivery, WebhookDeliveryStatus } from '@kelpie/schemas'
+import { useState } from 'react'
+
+import { useWebhookDeliveries } from '../../api/resources/webhooks.ts'
+import { Chip } from '../../components/Chip.tsx'
+import type { ChipTone } from '../../components/Chip.tsx'
+import { DataTable } from '../../components/DataTable.tsx'
+import type { Column } from '../../components/DataTable.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { SegmentedControl } from '../../components/SegmentedControl.tsx'
+import { formatDateTime } from '../../lib/dates.ts'
+
+/**
+ * What this webhook has actually sent.
+ *
+ * The row above shows only the newest delivery, which is the whole story for a
+ * healthy endpoint and useless for a failing one: it cannot say which event
+ * failed, how many attempts it took, or whether anything succeeded before it.
+ *
+ * Mounted only while a row is expanded, so a page listing ten registrations
+ * makes no delivery request until somebody asks for one.
+ */
+
+type StatusFilter = 'all' | WebhookDeliveryStatus
+
+const STATUS_OPTIONS = [
+  { id: 'all' as const, label: 'All' },
+  { id: 'success' as const, label: 'Success' },
+  { id: 'failed' as const, label: 'Failed' },
+]
+
+const STATUS_TONES: Readonly<Record<WebhookDeliveryStatus, ChipTone>> = {
+  success: 'success',
+  failed: 'danger',
+}
+
+export function WebhookDeliveries({ webhookId }: { readonly webhookId: string }): React.JSX.Element {
+  const [status, setStatus] = useState<StatusFilter>('all')
+  const [openPayloadId, setOpenPayloadId] = useState<string | null>(null)
+  const deliveries = useWebhookDeliveries(webhookId, {
+    status: status === 'all' ? undefined : status,
+  })
+  const open = deliveries.records.find((delivery) => delivery.id === openPayloadId)
+
+  const columns: readonly Column<WebhookDelivery>[] = [
+    {
+      key: 'event',
+      header: 'Event',
+      render: (delivery) => <span className="font-mono text-[12px] text-ink">{delivery.event}</span>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      className: 'w-24',
+      render: (delivery) => <Chip tone={STATUS_TONES[delivery.status]}>{delivery.status}</Chip>,
+    },
+    {
+      key: 'attempts',
+      header: 'Attempts',
+      className: 'w-20',
+      render: (delivery) => (
+        <span className="text-[12px] text-ink-muted">{delivery.attempts}</span>
+      ),
+    },
+    {
+      key: 'sent',
+      header: 'Sent',
+      className: 'w-32',
+      render: (delivery) => (
+        <span className="font-mono text-[12px] text-ink-muted">
+          {formatDateTime(delivery.createdAt)}
+        </span>
+      ),
+    },
+    {
+      key: 'delivered',
+      header: 'Delivered',
+      className: 'w-32',
+      // Null for a delivery that exhausted its attempts, which is the row a
+      // reader is looking for. An em dash says "never" without claiming a time.
+      render: (delivery) => (
+        <span className="font-mono text-[12px] text-ink-muted">
+          {delivery.deliveredAt === null ? '—' : formatDateTime(delivery.deliveredAt)}
+        </span>
+      ),
+    },
+    {
+      key: 'payload',
+      header: 'Body',
+      className: 'w-20',
+      render: (delivery) => (
+        <button
+          type="button"
+          onClick={() => {
+            setOpenPayloadId((current) => (current === delivery.id ? null : delivery.id))
+          }}
+          className="text-[12px] font-medium text-accent hover:underline"
+        >
+          {openPayloadId === delivery.id ? 'Hide' : 'View'}
+        </button>
+      ),
+    },
+  ]
+
+  if (deliveries.error !== null) {
+    return <ErrorPanel error={deliveries.error} />
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <h3 className="text-[12px] font-semibold text-ink">
+          Deliveries
+          {/* No number: the window is `WEBHOOK_DELIVERY_RETENTION_DAYS`, a
+              deployment setting this client cannot read, and naming the default
+              here would promise history an operator's override has deleted. */}
+          <span className="ml-2 font-normal text-ink-faint">older rows are pruned</span>
+        </h3>
+        <SegmentedControl
+          value={status}
+          onChange={(next) => {
+            setStatus(next)
+            // The open body may not be in the filtered list, and a panel left
+            // showing a row the table no longer has reads as a mismatch.
+            setOpenPayloadId(null)
+          }}
+          options={STATUS_OPTIONS}
+          ariaLabel="Filter deliveries by status"
+        />
+      </div>
+
+      {deliveries.isLoading ? (
+        <LoadingPanel label="Loading deliveries…" />
+      ) : deliveries.records.length === 0 ? (
+        <p className="text-[12px] text-ink-muted">
+          {status === 'all' ? 'Nothing delivered yet.' : `No ${status} deliveries.`}
+        </p>
+      ) : (
+        <DataTable
+          columns={columns}
+          rows={deliveries.records}
+          getRowId={(delivery) => delivery.id}
+        />
+      )}
+
+      {open !== undefined && <PayloadPanel delivery={open} />}
+
+      {deliveries.hasMore && (
+        <button
+          type="button"
+          onClick={deliveries.loadMore}
+          disabled={deliveries.isLoadingMore}
+          className="rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken disabled:opacity-50"
+        >
+          {deliveries.isLoadingMore ? 'Loading…' : 'Load more'}
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * The body of one delivery.
+ *
+ * Deliberately not called the signed bytes. `payload` is a `jsonb` column, and
+ * Postgres reorders an object's keys and drops the whitespace, so what comes
+ * back is the content the receiver was sent rather than the exact text the
+ * `Kelpie-Signature` HMAC covers. Saying otherwise would send a customer off to
+ * verify a signature against a string we never transmitted.
+ */
+function PayloadPanel({ delivery }: { readonly delivery: WebhookDelivery }): React.JSX.Element {
+  return (
+    <div className="rounded-md border border-border bg-surface-sunken p-3">
+      <p className="text-[11px] text-ink-faint">
+        What was sent for <span className="font-mono">{delivery.event}</span>. The database
+        normalises key order, so this is the content of the body and not the exact text the
+        signature was computed over.
+      </p>
+      <pre className="mt-2 overflow-x-auto rounded border border-border bg-surface p-3 font-mono text-[11px] text-ink">
+        {JSON.stringify(delivery.payload, null, 2)}
+      </pre>
+    </div>
+  )
+}