@hot-updater/console 1.0.0-rc.8 → 1.0.0

package/src/components/features/remote-config/PublishDialog.tsx

@@ -0,0 +1,325 @@
+import { AlertTriangle, ArrowRight, Loader2, Upload } from "lucide-react";
+import { type FormEvent, useId, useState } from "react";
+import { toast } from "sonner";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { usePublishRemoteConfigMutation } from "@/lib/remote-config-api";
+import {
+  describeConditionChange,
+  describeParameterChange,
+  type FieldChange,
+  type RemoteConfigTemplate,
+  summarizeChanges,
+  type TemplateChanges,
+} from "@/lib/remote-config-draft";
+import type { ConsolePublishResult } from "@/lib/remote-config-rpc";
+
+import { useDateTimeText } from "./useDateTimeText";
+
+/** A changed or added key, and each of its fields: before to after, or as added. */
+function ChangedKey({
+  name,
+  fields,
+}: {
+  readonly name: string;
+  readonly fields: readonly FieldChange[];
+}) {
+  return (
+    <li className="min-w-0">
+      <p className="break-words font-mono">{name}</p>
+      {fields.length === 0 ? null : (
+        <ul className="mt-0.5 flex flex-col gap-0.5">
+          {fields.map((change) => (
+            <li
+              className="flex min-w-0 flex-wrap items-center gap-x-1.5 text-muted-foreground"
+              key={change.field}
+            >
+              <span>{change.field}</span>
+              {change.before === null ? null : (
+                <>
+                  <span
+                    className="max-w-full truncate font-mono line-through decoration-muted-foreground/60"
+                    title={change.before}
+                  >
+                    {change.before}
+                  </span>
+                  <ArrowRight aria-hidden="true" className="size-3 shrink-0" />
+                  <span className="sr-only">to</span>
+                </>
+              )}
+              <span
+                className="max-w-full truncate font-mono text-foreground"
+                title={change.after}
+              >
+                {change.after}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+function ChangeList({
+  label,
+  changes,
+  describe,
+}: {
+  readonly label: string;
+  readonly changes: TemplateChanges;
+  /** The fields a changed key changes, or an added key sets. */
+  readonly describe: (key: string) => readonly FieldChange[];
+}) {
+  const rows = [
+    ["Added", changes.added],
+    ["Changed", changes.changed],
+    ["Removed", changes.removed],
+  ] as const;
+  if (rows.every(([, keys]) => keys.length === 0)) return null;
+  return (
+    <div>
+      <p className="text-xs font-medium">{label}</p>
+      <dl className="mt-1 grid grid-cols-[5rem_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs">
+        {rows.map(([title, keys]) =>
+          keys.length === 0 ? null : (
+            <div className="contents" key={title}>
+              <dt className="text-muted-foreground">{title}</dt>
+              <dd className="min-w-0">
+                {title !== "Removed" ? (
+                  <ul className="flex flex-col gap-1.5">
+                    {keys.map((key) => (
+                      <ChangedKey fields={describe(key)} key={key} name={key} />
+                    ))}
+                  </ul>
+                ) : (
+                  <span className="break-words font-mono">
+                    {keys.join(", ")}
+                  </span>
+                )}
+              </dd>
+            </div>
+          ),
+        )}
+      </dl>
+    </div>
+  );
+}
+
+/** Publishes the draft as the next version, after a summary of what changes. */
+export function PublishDialog({
+  open,
+  onOpenChange,
+  base,
+  baseVersion,
+  draft,
+  onPublished,
+  onLoadLatest,
+  onPublishOver,
+}: {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  /** The template the draft started from. */
+  readonly base: RemoteConfigTemplate;
+  readonly baseVersion: number;
+  readonly draft: RemoteConfigTemplate;
+  readonly onPublished: () => void;
+  /** Drops the draft for the version someone else published. */
+  readonly onLoadLatest: () => void;
+  /** Keeps the draft and publishes it after `version`. */
+  readonly onPublishOver: (version: number) => void;
+}) {
+  const id = useId();
+  const publish = usePublishRemoteConfigMutation();
+  const [description, setDescription] = useState("");
+  const [result, setResult] = useState<ConsolePublishResult | null>(null);
+  const { dateTimeText } = useDateTimeText();
+  const changes = summarizeChanges(base, draft);
+  const describeParameter = (key: string) => {
+    const before = Object.hasOwn(base.parameters, key)
+      ? base.parameters[key]!
+      : null;
+    const after = Object.hasOwn(draft.parameters, key)
+      ? draft.parameters[key]!
+      : null;
+    return after === null ? [] : describeParameterChange(before, after);
+  };
+  const describeCondition = (name: string) => {
+    const before = base.conditions.find((it) => it.name === name) ?? null;
+    const after = draft.conditions.find((it) => it.name === name) ?? null;
+    return after === null
+      ? []
+      : describeConditionChange(before, after, dateTimeText);
+  };
+  const tooLong = description.trim().length > 256;
+
+  const close = (next: boolean) => {
+    if (publish.isPending) return;
+    onOpenChange(next);
+    if (!next) {
+      setResult(null);
+      publish.reset();
+    }
+  };
+
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (tooLong) return;
+    try {
+      const outcome = await publish.mutateAsync({
+        template: draft,
+        baseVersion,
+        ...(description.trim().length === 0
+          ? {}
+          : { description: description.trim() }),
+      });
+      setResult(outcome);
+      if (outcome.status === "published") {
+        toast.success(`Published version ${outcome.version.version}`);
+        setDescription("");
+        setResult(null);
+        onOpenChange(false);
+        onPublished();
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Unable to publish");
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={close} open={open}>
+      <DialogContent className="max-h-[calc(100svh-2rem)] overflow-y-auto sm:max-w-lg">
+        <form className="flex flex-col gap-4" noValidate onSubmit={submit}>
+          <DialogHeader>
+            <DialogTitle>Publish changes</DialogTitle>
+            <DialogDescription>
+              This becomes version {baseVersion + 1}. Devices get its values on
+              their next fetch; earlier versions stay available to roll back to.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3 rounded-lg border p-3">
+            <ChangeList
+              changes={changes.parameters}
+              describe={describeParameter}
+              label="Parameters"
+            />
+            <ChangeList
+              changes={changes.conditions}
+              describe={describeCondition}
+              label="Conditions"
+            />
+            {changes.reordered ? (
+              <p className="text-xs text-muted-foreground">
+                Condition priority changed.
+              </p>
+            ) : null}
+          </div>
+          {result?.status === "invalid" ? (
+            <Alert variant="destructive">
+              <AlertTriangle />
+              <AlertTitle>The server refused the template</AlertTitle>
+              <AlertDescription>
+                <ul className="list-disc pl-4">
+                  {result.issues.slice(0, 6).map((issue) => (
+                    <li key={`${issue.path}:${issue.message}`}>
+                      {issue.path === "" ? "" : `${issue.path}: `}
+                      {issue.message}
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
+          ) : null}
+          {result?.status === "conflict" ? (
+            <Alert>
+              <AlertTriangle />
+              <AlertTitle>
+                Version {result.currentVersion} was published while you edited
+              </AlertTitle>
+              <AlertDescription>
+                Load it to review what changed, or publish yours after it,
+                replacing its values.
+              </AlertDescription>
+              <div className="col-span-full mt-2 flex flex-wrap gap-2">
+                <Button
+                  onClick={() => {
+                    close(false);
+                    onLoadLatest();
+                  }}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  Load version {result.currentVersion}
+                </Button>
+                <Button
+                  onClick={() => {
+                    onPublishOver(result.currentVersion);
+                    setResult(null);
+                  }}
+                  size="sm"
+                  type="button"
+                  variant="ghost"
+                >
+                  Publish mine after it
+                </Button>
+              </div>
+            </Alert>
+          ) : null}
+          <Field data-invalid={tooLong || undefined}>
+            <FieldLabel htmlFor={`${id}-description`}>Description</FieldLabel>
+            <Input
+              autoComplete="off"
+              className="min-h-11 sm:min-h-9"
+              id={`${id}-description`}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="What changed and why"
+              value={description}
+            />
+            <FieldDescription>Shown in the version history.</FieldDescription>
+            <FieldError>
+              {tooLong ? "Use 256 characters or fewer." : null}
+            </FieldError>
+          </Field>
+          <DialogFooter>
+            <Button
+              disabled={publish.isPending}
+              onClick={() => close(false)}
+              type="button"
+              variant="outline"
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={publish.isPending || result?.status === "conflict"}
+              type="submit"
+            >
+              {publish.isPending ? (
+                <Loader2 className="animate-spin" data-icon="inline-start" />
+              ) : (
+                <Upload data-icon="inline-start" />
+              )}
+              Publish version {baseVersion + 1}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/features/remote-config/RemoteConfigPage.tsx

@@ -0,0 +1,353 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import {
+  AlertTriangle,
+  History,
+  RefreshCw,
+  SlidersHorizontal,
+  Undo2,
+  Upload,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useRemoteConfigQuery } from "@/lib/remote-config-api";
+import {
+  isSameTemplate,
+  moveCondition,
+  readStoredDraft,
+  type RemoteConfigDraft,
+  removeCondition,
+  removeParameter,
+  type RemoteConfigTemplate,
+  storeDraft,
+  upsertCondition,
+  upsertParameter,
+} from "@/lib/remote-config-draft";
+
+import { ConditionsCard } from "./ConditionsCard";
+import { ParametersCard } from "./ParametersCard";
+import { PreviewCard } from "./PreviewCard";
+import { PublishDialog } from "./PublishDialog";
+import { VersionsCard } from "./VersionsCard";
+
+dayjs.extend(relativeTime);
+
+export type RemoteConfigTab =
+  | "parameters"
+  | "conditions"
+  | "preview"
+  | "versions";
+
+export const REMOTE_CONFIG_TABS: readonly RemoteConfigTab[] = [
+  "parameters",
+  "conditions",
+  "preview",
+  "versions",
+];
+
+/**
+ * Remote Config: edit the parameters and conditions of a draft, preview what
+ * a device gets, publish the draft as a version, and roll back to an earlier
+ * one.
+ */
+export function RemoteConfigPage({
+  tab,
+  onTabChange,
+}: {
+  readonly tab: RemoteConfigTab;
+  readonly onTabChange: (tab: RemoteConfigTab) => void;
+}) {
+  const active = useRemoteConfigQuery();
+  const [draft, setDraft] = useState<RemoteConfigDraft | null>(null);
+  const [restoreChecked, setRestoreChecked] = useState(false);
+  const [restored, setRestored] = useState(false);
+  const [publishing, setPublishing] = useState(false);
+  const published = active.data;
+  const template = draft?.template ?? published?.template;
+  const dirty =
+    draft !== null &&
+    published !== undefined &&
+    !isSameTemplate(draft.template, published.template);
+  const stale =
+    dirty && published !== undefined && draft.baseVersion !== published.version;
+
+  // A reload brings the draft back from this browser, onto the version and
+  // template it started from.
+  useEffect(() => {
+    if (restoreChecked || published === undefined) return;
+    setRestoreChecked(true);
+    const stored = readStoredDraft(published);
+    if (stored === null) return;
+    setDraft(stored);
+    setRestored(true);
+  }, [published, restoreChecked]);
+
+  // The browser keeps every edit; when it refuses, leaving the page would
+  // lose the draft, so it asks first.
+  useEffect(() => {
+    if (draft === null || !dirty || storeDraft(draft)) return;
+    const warn = (event: BeforeUnloadEvent) => event.preventDefault();
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [draft, dirty]);
+
+  const clearDraft = () => {
+    setDraft(null);
+    setRestored(false);
+    storeDraft(null);
+  };
+
+  const edit = (
+    change: (template: RemoteConfigTemplate) => RemoteConfigTemplate,
+  ) => {
+    if (published === undefined || template === undefined) return;
+    setRestored(false);
+    setDraft({
+      baseVersion: draft?.baseVersion ?? published.version,
+      base: draft?.base ?? published.template,
+      template: change(template),
+    });
+  };
+
+  const counts = {
+    parameters:
+      template === undefined ? null : Object.keys(template.parameters).length,
+    conditions: template?.conditions.length ?? null,
+  };
+
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 border-b bg-background px-3 py-3 sm:min-h-12 sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
+        <SidebarTrigger className="-ml-1 size-11 lg:size-7" />
+        <div className="flex items-center gap-1.5">
+          <SlidersHorizontal
+            aria-hidden="true"
+            className="size-3.5 text-muted-foreground"
+          />
+          <h1 className="text-sm font-medium">Remote Config</h1>
+        </div>
+        {published === undefined ? null : (
+          <p className="text-xs text-muted-foreground">
+            {published.version === 0 ? (
+              "Nothing published yet"
+            ) : (
+              <>
+                Version {published.version}
+                {published.updatedAtMs === null ? null : (
+                  <>
+                    {" · published "}
+                    <time
+                      dateTime={new Date(published.updatedAtMs).toISOString()}
+                      title={dayjs(published.updatedAtMs).format(
+                        "YYYY/MM/DD HH:mm:ss",
+                      )}
+                    >
+                      {dayjs(published.updatedAtMs).fromNow()}
+                    </time>
+                  </>
+                )}
+              </>
+            )}
+          </p>
+        )}
+        {dirty ? (
+          <div className="ml-auto flex items-center gap-2">
+            <Badge className="hidden sm:inline-flex" variant="secondary">
+              Unpublished changes
+            </Badge>
+            <Button
+              className="min-h-11 lg:min-h-7"
+              onClick={clearDraft}
+              variant="ghost"
+            >
+              <Undo2 data-icon="inline-start" />
+              Discard
+            </Button>
+            <Button
+              className="min-h-11 lg:min-h-7"
+              onClick={() => setPublishing(true)}
+            >
+              <Upload data-icon="inline-start" />
+              Publish changes
+            </Button>
+          </div>
+        ) : null}
+      </header>
+
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <div className="mx-auto flex w-full max-w-5xl flex-col gap-4">
+          {active.isError ? (
+            <Alert variant="destructive">
+              <AlertTriangle />
+              <AlertTitle>Remote Config couldn't be loaded</AlertTitle>
+              <AlertDescription>
+                Check the connection and try again.
+              </AlertDescription>
+              <AlertAction>
+                <Button
+                  onClick={() => void active.refetch()}
+                  size="xs"
+                  variant="outline"
+                >
+                  <RefreshCw data-icon="inline-start" />
+                  Retry
+                </Button>
+              </AlertAction>
+            </Alert>
+          ) : null}
+          {restored && dirty && draft !== null ? (
+            <Alert>
+              <History />
+              <AlertTitle>Your unpublished changes are back</AlertTitle>
+              <AlertDescription>
+                This browser kept them from your last visit, on version{" "}
+                {draft.baseVersion}.
+              </AlertDescription>
+              <AlertAction>
+                <Button onClick={clearDraft} size="xs" variant="outline">
+                  Discard them
+                </Button>
+              </AlertAction>
+            </Alert>
+          ) : null}
+          {stale && draft !== null && published !== undefined ? (
+            <Alert>
+              <AlertTriangle />
+              <AlertTitle>
+                Version {published.version} was published while you edited
+              </AlertTitle>
+              <AlertDescription>
+                Your draft started from version {draft.baseVersion}. Discard it
+                to review version {published.version}, or publish yours after
+                it.
+              </AlertDescription>
+              <AlertAction>
+                <Button onClick={clearDraft} size="xs" variant="outline">
+                  Load version {published.version}
+                </Button>
+              </AlertAction>
+            </Alert>
+          ) : null}
+          <Tabs
+            onValueChange={(value) => onTabChange(value as RemoteConfigTab)}
+            value={tab}
+          >
+            <TabsList
+              aria-label="Remote Config views"
+              className="max-w-full group-data-horizontal/tabs:h-auto"
+            >
+              {(
+                [
+                  ["parameters", "Parameters", counts.parameters],
+                  ["conditions", "Conditions", counts.conditions],
+                  ["preview", "Preview", null],
+                  ["versions", "Versions", null],
+                ] as const
+              ).map(([value, label, count]) => (
+                <TabsTrigger
+                  className="min-h-11 flex-none px-3 lg:min-h-7"
+                  key={value}
+                  value={value}
+                >
+                  {label}
+                  {count === null ? null : (
+                    <span className="tabular-nums text-muted-foreground">
+                      {count}
+                    </span>
+                  )}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {template === undefined || published === undefined ? (
+              active.isError ? null : (
+                <div className="flex flex-col gap-3 pt-2">
+                  <span className="sr-only">Loading Remote Config</span>
+                  <Skeleton className="h-14 w-full" />
+                  <Skeleton className="h-14 w-full" />
+                  <Skeleton className="h-14 w-full" />
+                </div>
+              )
+            ) : (
+              <>
+                <TabsContent value="parameters">
+                  <ParametersCard
+                    onAddCondition={(condition) =>
+                      edit((current) =>
+                        upsertCondition(current, null, condition),
+                      )
+                    }
+                    onRemoveParameter={(key) =>
+                      edit((current) => removeParameter(current, key))
+                    }
+                    onSaveParameter={(previousKey, key, parameter) =>
+                      edit((current) =>
+                        upsertParameter(current, previousKey, key, parameter),
+                      )
+                    }
+                    template={template}
+                  />
+                </TabsContent>
+                <TabsContent value="conditions">
+                  <ConditionsCard
+                    onMoveCondition={(index, offset) =>
+                      edit((current) => moveCondition(current, index, offset))
+                    }
+                    onRemoveCondition={(name) =>
+                      edit((current) => removeCondition(current, name))
+                    }
+                    onSaveCondition={(previousName, condition) =>
+                      edit((current) =>
+                        upsertCondition(current, previousName, condition),
+                      )
+                    }
+                    template={template}
+                  />
+                </TabsContent>
+                <TabsContent value="preview">
+                  <PreviewCard isDraft={dirty} template={template} />
+                </TabsContent>
+                <TabsContent value="versions">
+                  <VersionsCard
+                    activeVersion={published.version}
+                    hasDraft={dirty}
+                    onRolledBack={clearDraft}
+                    onStartEditing={() => onTabChange("parameters")}
+                  />
+                </TabsContent>
+              </>
+            )}
+          </Tabs>
+        </div>
+      </div>
+      {published !== undefined && draft !== null ? (
+        <PublishDialog
+          base={published.template}
+          baseVersion={draft.baseVersion}
+          draft={draft.template}
+          onLoadLatest={clearDraft}
+          onOpenChange={setPublishing}
+          onPublishOver={(version) =>
+            setDraft({
+              ...draft,
+              baseVersion: version,
+              base: published.template,
+            })
+          }
+          onPublished={clearDraft}
+          open={publishing}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/components/features/remote-config/RuleSummary.tsx

@@ -0,0 +1,21 @@
+import {
+  type DateTimeText,
+  describeRule,
+  type RemoteConfigCondition,
+} from "@/lib/remote-config-draft";
+
+/** A condition's rules in a few words, unless its name already says them. */
+export function RuleSummary({
+  condition,
+  dateTimeText,
+}: {
+  readonly condition: RemoteConfigCondition;
+  readonly dateTimeText: DateTimeText;
+}) {
+  const text = condition.rules
+    .map((rule) => describeRule(rule, dateTimeText))
+    .join(" · ");
+  return text === condition.name ? null : (
+    <p className="text-xs text-muted-foreground">{text}</p>
+  );
+}