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

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

@@ -0,0 +1,151 @@
+import { Braces } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+  type RemoteConfigParameterValue,
+  type RemoteConfigValueType,
+  valueTextError,
+} from "@/lib/remote-config-draft";
+
+/** A value's starting text for a type: what a new value of that type holds. */
+export const initialValueText = (valueType: RemoteConfigValueType): string =>
+  valueType === "BOOLEAN"
+    ? "false"
+    : valueType === "NUMBER"
+      ? "0"
+      : valueType === "JSON"
+        ? "{}"
+        : "";
+
+/** The problem with a value, or null; an in-app default has none. */
+export const parameterValueError = (
+  valueType: RemoteConfigValueType,
+  value: RemoteConfigParameterValue,
+): string | null =>
+  "value" in value ? valueTextError(valueType, value.value) : null;
+
+/**
+ * Edits one value of a parameter, by its type, with the option to leave the
+ * app's in-app default in place.
+ */
+export function ValueInput({
+  id,
+  label,
+  valueType,
+  value,
+  onChange,
+  showErrors,
+}: {
+  readonly id: string;
+  /** The visible label; it names the toggle group too when that is text. */
+  readonly label: ReactNode;
+  readonly valueType: RemoteConfigValueType;
+  readonly value: RemoteConfigParameterValue;
+  readonly onChange: (value: RemoteConfigParameterValue) => void;
+  /** Show a problem once the user tried to save. */
+  readonly showErrors: boolean;
+}) {
+  const inAppDefault = !("value" in value);
+  const text = "value" in value ? value.value : "";
+  const error = showErrors ? parameterValueError(valueType, value) : null;
+  const setText = (next: string) => onChange({ value: next });
+
+  return (
+    <Field data-invalid={error !== null || undefined}>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <FieldLabel htmlFor={id} id={`${id}-label`}>
+          {label}
+        </FieldLabel>
+        <div className="flex min-h-11 items-center gap-2 text-xs text-muted-foreground sm:min-h-0">
+          <Switch
+            checked={inAppDefault}
+            id={`${id}-in-app-default`}
+            onCheckedChange={(checked) =>
+              onChange(
+                checked
+                  ? { useInAppDefault: true }
+                  : { value: initialValueText(valueType) },
+              )
+            }
+          />
+          <label htmlFor={`${id}-in-app-default`}>Use in-app default</label>
+        </div>
+      </div>
+      {inAppDefault ? (
+        <p
+          className="rounded-md border border-dashed px-3 py-2 text-xs text-muted-foreground"
+          id={id}
+        >
+          Devices keep the default set in the app's{" "}
+          <code className="font-mono">remoteConfig({"{ defaults }"})</code>.
+        </p>
+      ) : valueType === "BOOLEAN" ? (
+        <ToggleGroup
+          aria-labelledby={`${id}-label`}
+          id={id}
+          onValueChange={(values) => {
+            const [next] = values as string[];
+            if (next === "true" || next === "false") setText(next);
+          }}
+          value={[text]}
+          variant="outline"
+        >
+          <ToggleGroupItem className="min-h-11 px-4 sm:min-h-8" value="true">
+            true
+          </ToggleGroupItem>
+          <ToggleGroupItem className="min-h-11 px-4 sm:min-h-8" value="false">
+            false
+          </ToggleGroupItem>
+        </ToggleGroup>
+      ) : valueType === "NUMBER" ? (
+        <Input
+          aria-invalid={error !== null || undefined}
+          autoComplete="off"
+          className="min-h-11 font-mono sm:min-h-9"
+          id={id}
+          inputMode="decimal"
+          onChange={(event) => setText(event.target.value)}
+          value={text}
+        />
+      ) : valueType === "JSON" ? (
+        <div className="flex flex-col gap-2">
+          <Textarea
+            aria-invalid={error !== null || undefined}
+            className="min-h-24 font-mono text-xs"
+            id={id}
+            onChange={(event) => setText(event.target.value)}
+            spellCheck={false}
+            value={text}
+          />
+          <Button
+            className="self-start"
+            disabled={valueTextError("JSON", text) !== null}
+            onClick={() => setText(JSON.stringify(JSON.parse(text), null, 2))}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            <Braces data-icon="inline-start" />
+            Format JSON
+          </Button>
+        </div>
+      ) : (
+        <Textarea
+          aria-invalid={error !== null || undefined}
+          className="min-h-11 text-sm sm:min-h-9"
+          id={id}
+          onChange={(event) => setText(event.target.value)}
+          rows={2}
+          value={text}
+        />
+      )}
+      <FieldError>{error}</FieldError>
+    </Field>
+  );
+}

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

@@ -0,0 +1,384 @@
+import dayjs from "dayjs";
+import {
+  AlertTriangle,
+  Clipboard,
+  Eye,
+  History,
+  Loader2,
+  RefreshCw,
+  RotateCcw,
+} from "lucide-react";
+import { type MouseEvent, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  useRemoteConfigVersionQuery,
+  useRemoteConfigVersionsQuery,
+  useRollbackRemoteConfigMutation,
+} from "@/lib/remote-config-api";
+import { useDialogTarget } from "@/lib/use-dialog-target";
+
+/** A publish time: the date and time, with the exact UTC time on hover. */
+function PublishedAt({ ms }: { readonly ms: number }) {
+  const date = new Date(ms);
+  return (
+    <time
+      className="tabular-nums"
+      dateTime={date.toISOString()}
+      title={`${date.toISOString().replace("T", " ").slice(0, 19)} UTC`}
+    >
+      {dayjs(ms).format("YYYY/MM/DD HH:mm")}
+    </time>
+  );
+}
+
+function VersionDialog({
+  open,
+  version,
+  onOpenChange,
+}: {
+  readonly open: boolean;
+  /** Kept while the dialog animates closed. */
+  readonly version: number | null;
+  readonly onOpenChange: (open: boolean) => void;
+}) {
+  const detail = useRemoteConfigVersionQuery(version);
+  const json =
+    detail.data === null || detail.data === undefined
+      ? null
+      : JSON.stringify(detail.data.template, null, 2);
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-h-[calc(100svh-2rem)] grid-rows-[auto_minmax(0,1fr)] sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Version {version}</DialogTitle>
+          <DialogDescription>
+            The template as it was published, in the JSON the admin API takes.
+          </DialogDescription>
+        </DialogHeader>
+        {detail.isLoading ? (
+          <Skeleton className="h-48 w-full" />
+        ) : detail.isError ? (
+          <Alert variant="destructive">
+            <AlertTriangle />
+            <AlertTitle>This version couldn't be loaded</AlertTitle>
+            <AlertDescription>
+              Check the connection and try again.
+            </AlertDescription>
+            <AlertAction>
+              <Button
+                onClick={() => void detail.refetch()}
+                size="xs"
+                variant="outline"
+              >
+                <RefreshCw data-icon="inline-start" />
+                Retry
+              </Button>
+            </AlertAction>
+          </Alert>
+        ) : json === null ? (
+          <p className="text-sm text-muted-foreground">
+            Version {version} no longer exists.
+          </p>
+        ) : (
+          <div className="flex min-h-0 flex-col gap-2">
+            <pre className="min-h-0 overflow-auto rounded-md bg-muted p-3 font-mono text-xs">
+              {json}
+            </pre>
+            <Button
+              className="self-end"
+              onClick={() => {
+                navigator.clipboard.writeText(json).then(
+                  () => toast.success("Template JSON copied"),
+                  () => toast.error("Unable to copy the template"),
+                );
+              }}
+              size="sm"
+              variant="outline"
+            >
+              <Clipboard data-icon="inline-start" />
+              Copy JSON
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Published versions, newest first, each viewable and restorable. */
+export function VersionsCard({
+  activeVersion,
+  hasDraft,
+  onRolledBack,
+  onStartEditing,
+}: {
+  readonly activeVersion: number;
+  /** Unpublished edits exist; a rollback discards them. */
+  readonly hasDraft: boolean;
+  readonly onRolledBack: () => void;
+  readonly onStartEditing: () => void;
+}) {
+  const versions = useRemoteConfigVersionsQuery({ enabled: true });
+  const rollback = useRollbackRemoteConfigMutation();
+  const [viewing, setViewing] = useState<number | null>(null);
+  // The version to restore and the one the rollback publishes, taken when
+  // the dialog opens.
+  const [restoring, setRestoring] = useState<{
+    readonly source: number;
+    readonly next: number;
+  } | null>(null);
+  // Kept while each dialog animates closed.
+  const shownViewing = useDialogTarget(viewing);
+  const shownRestoring = useDialogTarget(restoring);
+  const rows = versions.data?.pages.flatMap((page) => page.versions) ?? [];
+
+  const restore = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (restoring === null) return;
+    try {
+      const result = await rollback.mutateAsync({
+        version: restoring.source,
+        baseVersion: restoring.next - 1,
+      });
+      if (result.status === "published") {
+        toast.success(
+          `Version ${result.version.version} restores version ${restoring.source}`,
+        );
+        onRolledBack();
+      } else if (result.status === "conflict") {
+        toast.error(
+          `Version ${result.currentVersion} was published meanwhile. Review it, then roll back again.`,
+        );
+      } else {
+        toast.error("That version no longer exists.");
+      }
+      setRestoring(null);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Unable to roll back",
+      );
+    }
+  };
+
+  return (
+    <Card className="overflow-hidden shadow-sm">
+      <CardHeader className="border-b px-4 py-3 sm:px-6">
+        <CardTitle className="text-sm">
+          <h2>Versions</h2>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        {versions.isError ? (
+          <div className="p-4">
+            <Alert variant="destructive">
+              <AlertTriangle />
+              <AlertTitle>Versions couldn't be loaded</AlertTitle>
+              <AlertDescription>
+                Check the connection and try again.
+              </AlertDescription>
+              <AlertAction>
+                <Button
+                  onClick={() => void versions.refetch()}
+                  size="xs"
+                  variant="outline"
+                >
+                  <RefreshCw data-icon="inline-start" />
+                  Retry
+                </Button>
+              </AlertAction>
+            </Alert>
+          </div>
+        ) : versions.isLoading ? (
+          <div className="flex flex-col gap-3 p-4 sm:p-6">
+            <span className="sr-only">Loading versions</span>
+            {Array.from({ length: 3 }, (_, index) => (
+              <Skeleton className="h-10 w-full" key={index} />
+            ))}
+          </div>
+        ) : rows.length === 0 ? (
+          <Empty className="py-10">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <History />
+              </EmptyMedia>
+              <EmptyTitle>No versions yet</EmptyTitle>
+              <EmptyDescription>
+                Your first publish becomes version 1. Every publish after it is
+                kept here, ready to roll back to.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Button className="min-h-11 sm:min-h-7" onClick={onStartEditing}>
+                Add a parameter
+              </Button>
+            </EmptyContent>
+          </Empty>
+        ) : (
+          <>
+            <ol aria-label="Versions" className="divide-y">
+              {rows.map((row) => (
+                <li
+                  className="grid gap-2 px-4 py-3 sm:px-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-center"
+                  key={row.version}
+                >
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-sm font-medium tabular-nums">
+                        Version {row.version}
+                      </span>
+                      {row.version === activeVersion ? (
+                        <Badge>Active</Badge>
+                      ) : null}
+                      {row.updateType === "ROLLBACK" ? (
+                        <Badge variant="outline">
+                          Rollback to v{row.rollbackSource}
+                        </Badge>
+                      ) : null}
+                    </div>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      <PublishedAt ms={row.createdAtMs} />
+                      {row.description === null ||
+                      // The default a rollback gets, which the badge says.
+                      (row.updateType === "ROLLBACK" &&
+                        row.description ===
+                          `Rollback to version ${row.rollbackSource}`) ? null : (
+                        <> · {row.description}</>
+                      )}
+                    </p>
+                  </div>
+                  <div className="flex gap-1 md:justify-end">
+                    <Button
+                      aria-label={`View version ${row.version}`}
+                      className="min-h-11 md:min-h-7"
+                      onClick={() => setViewing(row.version)}
+                      size="sm"
+                      variant="ghost"
+                    >
+                      <Eye data-icon="inline-start" />
+                      View
+                    </Button>
+                    <Button
+                      aria-label={`Roll back to version ${row.version}`}
+                      className="min-h-11 md:min-h-7"
+                      disabled={row.version === activeVersion}
+                      onClick={() =>
+                        setRestoring({
+                          source: row.version,
+                          next: activeVersion + 1,
+                        })
+                      }
+                      size="sm"
+                      variant="outline"
+                    >
+                      <RotateCcw data-icon="inline-start" />
+                      Roll back
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ol>
+            {versions.hasNextPage ? (
+              <div className="border-t px-4 py-3 sm:px-6">
+                <Button
+                  className="min-h-11 w-full sm:min-h-7 sm:w-auto"
+                  disabled={versions.isFetchingNextPage}
+                  onClick={() => void versions.fetchNextPage()}
+                  variant="outline"
+                >
+                  {versions.isFetchingNextPage ? (
+                    <Loader2
+                      className="animate-spin"
+                      data-icon="inline-start"
+                    />
+                  ) : null}
+                  Load older versions
+                </Button>
+              </div>
+            ) : null}
+          </>
+        )}
+      </CardContent>
+      <VersionDialog
+        onOpenChange={(open) => {
+          if (!open) setViewing(null);
+        }}
+        open={viewing !== null}
+        version={shownViewing}
+      />
+      <AlertDialog
+        onOpenChange={(open) => {
+          if (!rollback.isPending && !open) setRestoring(null);
+        }}
+        open={restoring !== null}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Roll back to version {shownRestoring?.source}?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Version {shownRestoring?.next} will publish a copy of version{" "}
+              {shownRestoring?.source}, and devices get its values on their next
+              fetch.
+              {hasDraft ? " Your unpublished changes are discarded." : ""}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={rollback.isPending}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={rollback.isPending}
+              onClick={(event: MouseEvent<HTMLButtonElement>) =>
+                void restore(event)
+              }
+            >
+              {rollback.isPending ? (
+                <Loader2 className="animate-spin" data-icon="inline-start" />
+              ) : (
+                <RotateCcw data-icon="inline-start" />
+              )}
+              Roll back
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Card>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Link } from "@tanstack/react-router";
+import { SlidersHorizontal } from "lucide-react";
+
+import type { ConsoleFeatureUiRegistry } from "../FeatureSlots";
+
+/** What Remote Config adds: its navigation item. */
+export const remoteConfigFeatureUi = {
+  remoteConfig: {
+    navigation: {
+      icon: <SlidersHorizontal />,
+      paths: ["/remote-config"],
+      link: ({ onClick }) => <Link to="/remote-config" onClick={onClick} />,
+    },
+  },
+} satisfies ConsoleFeatureUiRegistry;

package/src/components/features/remote-config/useDateTimeText.ts

@@ -0,0 +1,16 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { createDateTimeText } from "@/lib/remote-config-draft";
+
+/**
+ * Dates in the viewer's time zone, with its name. The server renders in UTC,
+ * and the page switches once mounted, so both render the same first.
+ */
+export function useDateTimeText() {
+  const [timeZone, setTimeZone] = useState("UTC");
+  useEffect(() => {
+    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+  const dateTimeText = useMemo(() => createDateTimeText(timeZone), [timeZone]);
+  return { timeZone, dateTimeText };
+}

package/src/components/ui/sidebar.tsx

@@ -9,6 +9,13 @@ import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
@@ -220,44 +227,30 @@ function Sidebar({
   }
 
   if (isMobile) {
-    if (!openMobile) {
-      return null;
-    }
-
     return (
-      <div
-        data-sidebar="sidebar"
-        data-slot="sidebar"
-        data-mobile="true"
-        className="fixed inset-0 z-50 md:hidden"
-        {...props}
-      >
-        <button
-          type="button"
-          aria-label="Close sidebar"
-          className="absolute inset-0 bg-sidebar/55 supports-backdrop-filter:backdrop-blur-sm"
-          onClick={() => setOpenMobile(false)}
-        />
-        <dialog
-          open
-          aria-modal="true"
-          aria-label="Sidebar"
-          className={cn(
-            "bg-sidebar text-sidebar-foreground absolute inset-y-0 z-10 flex w-(--sidebar-width) flex-col shadow-lg",
-            side === "left" ? "left-0" : "right-0",
-          )}
+      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) max-w-[calc(100vw-2rem)] p-0"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
+          side={side}
+          {...props}
         >
-          <div className="pointer-events-none absolute inset-x-0 top-full h-32 bg-sidebar" />
-          <div className="flex h-full w-full flex-col overflow-y-auto bg-sidebar">
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Console navigation.</SheetDescription>
+          </SheetHeader>
+          <div className="flex size-full min-h-0 flex-col pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
             {children}
           </div>
-        </dialog>
-      </div>
+        </SheetContent>
+      </Sheet>
     );
   }