okengine 0.14.1 → 0.16.0

package/src/console/ui-next/src/features/access/sheets/access-allow-fields.tsx

@@ -0,0 +1,236 @@
+/**
+ * Allow list (add one) + split rate fields — create / edit.
+ */
+
+import { Cancel01Icon, PlusSignIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useState, type JSX, type KeyboardEvent } from "react";
+import {
+  EXPLORER_COUNT_CLASS,
+  EXPLORER_ICON_BUTTON_BARE_CLASS,
+  EXPLORER_ICON_BUTTON_CLASS,
+  EXPLORER_ROW_CLASS,
+  EXPLORER_STRIP_TOKEN_CLASS,
+  EXPLORER_STRIP_TOKEN_IDLE_CLASS,
+  EXPLORER_STRIP_TOKEN_SELECTED_CLASS,
+  SECTION_HEAD_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { Input } from "@/components/ui/input";
+import { SHEET_CONTROL } from "@/components/ui/sheet-form.tsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils.ts";
+import {
+  ACCESS_RATE_UNIT_LABELS,
+  ACCESS_RATE_UNITS,
+  classifyAccessAllowEntry,
+  parseAccessAllowlist,
+  type AccessRateUnit,
+} from "../lib/format-when.ts";
+
+/** Props for {@link AccessAllowFields}. */
+export interface AccessAllowFieldsProps {
+  readonly entries: readonly string[];
+  readonly rateMax: string;
+  readonly rateCount: string;
+  readonly rateUnit: AccessRateUnit;
+  readonly onEntries: (entries: readonly string[]) => void;
+  readonly onRateMax: (raw: string) => void;
+  readonly onRateCount: (raw: string) => void;
+  readonly onRateUnit: (unit: AccessRateUnit) => void;
+}
+
+/**
+ * Add-one allow list and max / window rate.
+ *
+ * @param props - Entries + rate parts
+ */
+export function AccessAllowFields({
+  entries,
+  rateMax,
+  rateCount,
+  rateUnit,
+  onEntries,
+  onRateMax,
+  onRateCount,
+  onRateUnit,
+}: AccessAllowFieldsProps): JSX.Element {
+  const [draft, setDraft] = useState("");
+  const parsed = parseAccessAllowlist(draft);
+  const draftInvalid = draft.trim().length > 0 && parsed.length === 0;
+
+  const addDraft = () => {
+    if (parsed.length === 0) return;
+    const seen = new Set(entries);
+    const merged = [...entries];
+    for (const entry of parsed) {
+      if (seen.has(entry)) continue;
+      seen.add(entry);
+      merged.push(entry);
+    }
+    onEntries(merged);
+    setDraft("");
+  };
+
+  const onDraftKey = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    addDraft();
+  };
+
+  return (
+    <>
+      <div className="border-b border-border/50" data-slot="access-allow-field">
+        <div className="flex items-stretch">
+          <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+            Allow
+          </p>
+          <Input
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={onDraftKey}
+            placeholder="203.0.113.4 or ci.example.com"
+            autoComplete="off"
+            aria-label="Add allow entry"
+            aria-invalid={draftInvalid}
+            flat
+            className={cn(SHEET_CONTROL, "min-w-0 flex-1 font-mono")}
+          />
+          {entries.length > 0 ? (
+            <span className={cn(EXPLORER_COUNT_CLASS, "flex h-8 items-center pr-2")}>
+              {entries.length}
+            </span>
+          ) : null}
+          <button
+            type="button"
+            className={cn(EXPLORER_ICON_BUTTON_CLASS, "h-8")}
+            aria-label="Add allow entry"
+            disabled={parsed.length === 0}
+            onClick={addDraft}
+          >
+            <HugeiconsIcon icon={PlusSignIcon} className="size-3.5" aria-hidden />
+          </button>
+        </div>
+        {draftInvalid ? (
+          <p className="border-t border-border/50 px-4 py-2 text-[11px] text-destructive">
+            Need an IP or host — 203.0.113.4, ::1, localhost, or ci.example.com.
+          </p>
+        ) : entries.length === 0 ? (
+          <p className="border-t border-border/50 px-4 py-2 text-[11px] text-muted-foreground">
+            Any client. Add an IP or host.
+          </p>
+        ) : (
+          <div role="list" aria-label="Allow list">
+            {entries.map((entry) => {
+              const kind = classifyAccessAllowEntry(entry);
+              return (
+                <div
+                  key={entry}
+                  role="listitem"
+                  data-slot="access-allow-entry"
+                  data-kind={kind ?? "invalid"}
+                  className={cn(EXPLORER_ROW_CLASS, "last:border-b-0")}
+                >
+                  <span
+                    className={cn(
+                      SECTION_HEAD_CLASS,
+                      "w-[5.5rem] shrink-0 px-1.5",
+                      kind == null && "text-destructive",
+                    )}
+                  >
+                    {kind === "ip" ? "IP" : kind === "host" ? "Host" : "Bad"}
+                  </span>
+                  <span
+                    className={cn(
+                      "min-w-0 truncate font-mono text-[11px]",
+                      kind == null && "text-destructive",
+                    )}
+                  >
+                    {entry}
+                  </span>
+                  <button
+                    type="button"
+                    className={cn(
+                      EXPLORER_ICON_BUTTON_BARE_CLASS,
+                      "ml-auto opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
+                    )}
+                    aria-label={`Remove ${entry}`}
+                    onClick={() => onEntries(entries.filter((item) => item !== entry))}
+                  >
+                    <HugeiconsIcon icon={Cancel01Icon} className="size-3" aria-hidden />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className="flex items-stretch border-b border-border/50" data-slot="access-rate-field">
+        <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+          Rate
+        </p>
+        <label className="flex min-w-0 flex-1 items-stretch border-r border-border/50">
+          <span className="flex h-8 shrink-0 items-center pl-1 text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase">
+            Max
+          </span>
+          <Input
+            value={rateMax}
+            onChange={(e) => onRateMax(e.target.value)}
+            placeholder="none"
+            inputMode="numeric"
+            autoComplete="off"
+            aria-label="Rate max"
+            flat
+            className={cn(SHEET_CONTROL, "min-w-0 flex-1 px-2 font-mono tabular-nums")}
+          />
+        </label>
+        <label className="flex min-w-0 flex-1 items-stretch">
+          <span className="flex h-8 shrink-0 items-center pl-2 text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase">
+            Every
+          </span>
+          <Input
+            value={rateCount}
+            onChange={(e) => onRateCount(e.target.value)}
+            placeholder="1"
+            inputMode="numeric"
+            autoComplete="off"
+            aria-label="Rate window"
+            flat
+            className={cn(SHEET_CONTROL, "min-w-0 flex-1 px-2 font-mono tabular-nums")}
+          />
+        </label>
+        <div className="flex h-8 shrink-0 items-stretch" role="group" aria-label="Rate unit">
+          {ACCESS_RATE_UNITS.map((unit) => (
+            <Tooltip key={unit}>
+              <TooltipTrigger
+                render={(props) => (
+                  <button
+                    {...props}
+                    type="button"
+                    aria-pressed={rateUnit === unit}
+                    aria-label={ACCESS_RATE_UNIT_LABELS[unit]}
+                    onClick={(event) => {
+                      props.onClick?.(event);
+                      onRateUnit(unit);
+                    }}
+                    className={cn(
+                      EXPLORER_STRIP_TOKEN_CLASS,
+                      "h-8 px-1.5 font-mono font-semibold",
+                      rateUnit === unit
+                        ? EXPLORER_STRIP_TOKEN_SELECTED_CLASS
+                        : EXPLORER_STRIP_TOKEN_IDLE_CLASS,
+                    )}
+                  >
+                    {unit}
+                  </button>
+                )}
+              />
+              <TooltipContent side="bottom" className="text-[11px]">
+                {ACCESS_RATE_UNIT_LABELS[unit]}
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/console/ui-next/src/features/access/sheets/access-create-sheet.tsx

@@ -0,0 +1,316 @@
+/**
+ * Create an Access API key — issuer + attenuated scopes, secret once.
+ */
+
+import { CrownIcon, UserIcon } from "@hugeicons/core-free-icons";
+import { useEffect, useMemo, useState, type JSX } from "react";
+import type { AccessCreateKeyInput, AccessUserRow } from "@/client.ts";
+import {
+  EXPLORER_RAIL_ACTIVE_CLASS,
+  EXPLORER_RAIL_CLASS,
+  EXPLORER_ROW_CLASS,
+  EXPLORER_ROW_SELECTED_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { Input } from "@/components/ui/input";
+import {
+  SHEET_CONTROL,
+  SheetChoice,
+  SheetChoiceRow,
+  SheetError,
+  SheetFooterButton,
+} from "@/components/ui/sheet-form.tsx";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils.ts";
+import {
+  accessExpiresAt,
+  parseAccessDurationMs,
+  DEFAULT_ACCESS_RATE_UNIT,
+  parseAccessRateParts,
+  type AccessExpiryChoice,
+  type AccessRateUnit,
+} from "../lib/format-when.ts";
+import { AccessAllowFields } from "./access-allow-fields.tsx";
+import { AccessExpiryFields } from "./access-expiry-fields.tsx";
+import { AccessScopeField } from "./access-scope-field.tsx";
+import { AccessSheetSearch } from "./access-sheet-search.tsx";
+
+/** Props for {@link AccessCreateSheet}. */
+export interface AccessCreateSheetProps {
+  readonly open: boolean;
+  readonly users: readonly AccessUserRow[];
+  readonly userScopes: readonly string[];
+  readonly operatorScopes: readonly string[];
+  readonly pending: boolean;
+  readonly error: string | null;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onSubmit: (input: AccessCreateKeyInput) => void;
+}
+
+/**
+ * Create sheet — plane, issuer, name, expiry, allow, rate, scopes.
+ *
+ * @param props - Open + catalog + submit
+ */
+export function AccessCreateSheet({
+  open,
+  users,
+  userScopes,
+  operatorScopes,
+  pending,
+  error,
+  onOpenChange,
+  onSubmit,
+}: AccessCreateSheetProps): JSX.Element {
+  const [plane, setPlane] = useState<"user" | "operator">("user");
+  const [name, setName] = useState("");
+  const [creatorUserId, setCreatorUserId] = useState("");
+  const [scopes, setScopes] = useState<readonly string[]>([]);
+  const [expires, setExpires] = useState<AccessExpiryChoice>("never");
+  const [customExpires, setCustomExpires] = useState("");
+  const [allowEntries, setAllowEntries] = useState<readonly string[]>([]);
+  const [rateMax, setRateMax] = useState("");
+  const [rateCount, setRateCount] = useState("");
+  const [rateUnit, setRateUnit] = useState<AccessRateUnit>(DEFAULT_ACCESS_RATE_UNIT);
+  const [issuerQuery, setIssuerQuery] = useState("");
+
+  const issuer = users.find((user) => user.id === creatorUserId) ?? null;
+  const visibleUsers = useMemo(() => {
+    const q = issuerQuery.trim().toLowerCase();
+    const matched =
+      q.length === 0
+        ? users
+        : users.filter(
+            (user) =>
+              user.name.toLowerCase().includes(q) ||
+              user.id.toLowerCase().includes(q) ||
+              user.email.toLowerCase().includes(q),
+          );
+    if (issuer && !matched.some((user) => user.id === issuer.id)) {
+      return [issuer, ...matched];
+    }
+    return matched;
+  }, [users, issuerQuery, issuer]);
+  const grantable = useMemo(() => {
+    if (plane === "operator") return operatorScopes;
+    if (issuer == null) return [];
+    if (issuer.scopes.length > 0) return issuer.scopes;
+    return userScopes;
+  }, [plane, userScopes, operatorScopes, issuer]);
+
+  useEffect(() => {
+    if (!open) {
+      setPlane("user");
+      setName("");
+      setCreatorUserId("");
+      setScopes([]);
+      setExpires("never");
+      setCustomExpires("");
+      setAllowEntries([]);
+      setRateMax("");
+      setRateCount("");
+      setRateUnit(DEFAULT_ACCESS_RATE_UNIT);
+      setIssuerQuery("");
+    }
+  }, [open]);
+
+  useEffect(() => {
+    setScopes((prev) => {
+      const kept = prev.filter((scope) => grantable.includes(scope));
+      if (kept.length > 0) return kept;
+      const first = grantable[0];
+      return first ? [first] : [];
+    });
+  }, [grantable]);
+
+  const customMs = parseAccessDurationMs(customExpires);
+  const parsedRate = parseAccessRateParts(rateMax, rateCount, rateUnit);
+  const ready =
+    name.trim().length > 0 &&
+    scopes.length > 0 &&
+    !pending &&
+    parsedRate !== undefined &&
+    (plane === "operator" || creatorUserId.length > 0) &&
+    (expires !== "custom" || customMs > 0);
+
+  return (
+    <Sheet open={open} modal={false} disablePointerDismissal onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        className="gap-0 p-0 data-[side=right]:sm:max-w-md"
+        data-slot="access-create-sheet"
+      >
+        <SheetHeader className="gap-1 border-b border-border/50">
+          <SheetTitle className="text-sm">Create API key</SheetTitle>
+          <SheetDescription className="text-[11px]">
+            {plane === "user"
+              ? "User-plane keys require an issuer. The key cannot exceed that user's grants."
+              : "Operator keys inherit the actor ceiling. Absence is impossible — only grantable scopes appear."}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <div
+            className="flex items-stretch border-b border-border/50"
+            data-slot="access-name-field"
+          >
+            <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+              Name
+            </p>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="CI deploy"
+              autoComplete="off"
+              aria-label="Key name"
+              flat
+              className={cn(SHEET_CONTROL, "min-w-0 flex-1")}
+            />
+          </div>
+
+          <SheetChoiceRow label="Plane">
+            <SheetChoice
+              active={plane === "user"}
+              icon={UserIcon}
+              onClick={() => {
+                setPlane("user");
+              }}
+            >
+              user
+            </SheetChoice>
+            <SheetChoice
+              active={plane === "operator"}
+              icon={CrownIcon}
+              onClick={() => {
+                setPlane("operator");
+                setCreatorUserId("");
+                setIssuerQuery("");
+              }}
+            >
+              operator
+            </SheetChoice>
+          </SheetChoiceRow>
+
+          <AccessExpiryFields
+            expires={expires}
+            customExpires={customExpires}
+            onExpires={setExpires}
+            onCustomExpires={setCustomExpires}
+          />
+          <AccessAllowFields
+            entries={allowEntries}
+            rateMax={rateMax}
+            rateCount={rateCount}
+            rateUnit={rateUnit}
+            onEntries={setAllowEntries}
+            onRateMax={setRateMax}
+            onRateCount={setRateCount}
+            onRateUnit={setRateUnit}
+          />
+
+          {plane === "user" ? (
+            <div className="border-b border-border/50" data-slot="access-issuer-field">
+              <div className="flex items-stretch">
+                <p className="flex h-8 w-[5.5rem] shrink-0 items-center px-4 text-[10px] font-semibold tracking-[0.12em] text-muted-foreground uppercase">
+                  Issuer
+                </p>
+                {users.length > 0 ? (
+                  <AccessSheetSearch
+                    value={issuerQuery}
+                    placeholder="Search users"
+                    label="Search users"
+                    onChange={setIssuerQuery}
+                  />
+                ) : null}
+              </div>
+              {users.length === 0 ? (
+                <p className="border-t border-border/50 px-4 py-3 text-[11px] text-muted-foreground">
+                  No users on this plane.
+                </p>
+              ) : visibleUsers.length === 0 ? (
+                <p className="border-t border-border/50 px-4 py-3 text-[11px] text-muted-foreground">
+                  No users match.
+                </p>
+              ) : (
+                <div className="max-h-56 overflow-y-auto">
+                  {visibleUsers.map((user) => {
+                    const selected = user.id === creatorUserId;
+                    return (
+                      <button
+                        key={user.id}
+                        type="button"
+                        data-slot="access-creator-user"
+                        aria-pressed={selected}
+                        className={cn(EXPLORER_ROW_CLASS, selected && EXPLORER_ROW_SELECTED_CLASS)}
+                        onClick={() => setCreatorUserId(user.id)}
+                      >
+                        <span
+                          className={cn(
+                            EXPLORER_RAIL_CLASS,
+                            selected && EXPLORER_RAIL_ACTIVE_CLASS,
+                          )}
+                        />
+                        <span className="min-w-0 truncate">{user.name}</span>
+                        <span className="ml-auto shrink-0 font-mono text-[10px] text-muted-foreground">
+                          {user.id}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          ) : null}
+
+          <AccessScopeField
+            scopes={grantable}
+            selected={scopes}
+            empty={
+              plane === "user" && creatorUserId.length === 0
+                ? "Select an issuer to see grantable scopes."
+                : plane === "user"
+                  ? "This user has no grants."
+                  : "No grantable scopes on this plane."
+            }
+            onChange={setScopes}
+          />
+
+          {error ? <SheetError slot="access-create-error">{error}</SheetError> : null}
+        </div>
+
+        <SheetFooter>
+          <SheetFooterButton split onClick={() => onOpenChange(false)} disabled={pending}>
+            Cancel
+          </SheetFooterButton>
+          <SheetFooterButton
+            variant="default"
+            disabled={!ready}
+            data-slot="access-create-submit"
+            onClick={() => {
+              if (parsedRate === undefined) return;
+              const expiresAt = accessExpiresAt(expires, Date.now(), customExpires);
+              onSubmit({
+                plane,
+                name: name.trim(),
+                scopes,
+                ...(plane === "user" ? { creatorUserId } : {}),
+                ...(expiresAt != null ? { expiresAt } : {}),
+                ...(parsedRate != null ? { rateLimit: parsedRate } : {}),
+                ...(allowEntries.length > 0 ? { ipAllowlist: allowEntries } : {}),
+              });
+            }}
+          >
+            {pending ? "Creating…" : "Create"}
+          </SheetFooterButton>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}