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

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

@@ -0,0 +1,254 @@
+import { Pencil, Plus, Search, SlidersHorizontal, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  conditionalValueFor,
+  describeValue,
+  type RemoteConfigCondition,
+  type RemoteConfigParameter,
+  type RemoteConfigTemplate,
+  VALUE_TYPE_LABELS,
+} from "@/lib/remote-config-draft";
+import { useDialogTarget } from "@/lib/use-dialog-target";
+
+import { ParameterDialog } from "./ParameterDialog";
+
+/** A value's text in up to two lines, as the list shows it; a phone has no hover for the rest. */
+function ValueText({ text }: { readonly text: string }) {
+  return (
+    <span
+      className="line-clamp-2 block min-w-0 break-words font-mono text-xs text-foreground"
+      title={text}
+    >
+      {text}
+    </span>
+  );
+}
+
+function ParameterRow({
+  parameterKey,
+  parameter,
+  conditions,
+  onEdit,
+  onRemove,
+}: {
+  readonly parameterKey: string;
+  readonly parameter: RemoteConfigParameter;
+  readonly conditions: readonly RemoteConfigCondition[];
+  readonly onEdit: () => void;
+  readonly onRemove: () => void;
+}) {
+  // In priority order, as devices resolve them.
+  const conditional = conditions.filter(
+    ({ name }) =>
+      conditionalValueFor(parameter.conditionalValues, name) !== undefined,
+  );
+  return (
+    <li className="grid gap-3 px-4 py-3 sm:px-6 md:grid-cols-[minmax(0,15rem)_minmax(0,1fr)_auto] md:items-start">
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate font-mono text-sm font-medium">
+            {parameterKey}
+          </span>
+          <Badge className="shrink-0" variant="outline">
+            {VALUE_TYPE_LABELS[parameter.valueType]}
+          </Badge>
+        </div>
+        {parameter.description === undefined ? null : (
+          <p className="mt-1 text-xs text-muted-foreground">
+            {parameter.description}
+          </p>
+        )}
+      </div>
+      <dl className="grid min-w-0 grid-cols-[minmax(0,9rem)_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-xs">
+        {conditional.map(({ name }) => (
+          <div className="contents" key={name}>
+            <dt
+              className="line-clamp-2 break-words text-muted-foreground"
+              title={name}
+            >
+              {name}
+            </dt>
+            <dd className="min-w-0">
+              <ValueText
+                text={describeValue(
+                  conditionalValueFor(parameter.conditionalValues, name)!,
+                )}
+              />
+            </dd>
+          </div>
+        ))}
+        <dt className="text-muted-foreground">Default</dt>
+        <dd className="min-w-0">
+          {"value" in parameter.defaultValue ? (
+            <ValueText text={describeValue(parameter.defaultValue)} />
+          ) : (
+            <span className="text-muted-foreground">In-app default</span>
+          )}
+        </dd>
+      </dl>
+      <div className="flex gap-1 md:justify-end">
+        <Button
+          aria-label={`Edit ${parameterKey}`}
+          className="min-h-11 md:min-h-7"
+          onClick={onEdit}
+          size="sm"
+          variant="outline"
+        >
+          <Pencil data-icon="inline-start" />
+          Edit
+        </Button>
+        <Button
+          aria-label={`Delete ${parameterKey}`}
+          className="size-11 md:size-7"
+          onClick={onRemove}
+          size="icon"
+          variant="ghost"
+        >
+          <Trash2 />
+        </Button>
+      </div>
+    </li>
+  );
+}
+
+/** The draft's parameters, with what each device gets for them. */
+export function ParametersCard({
+  template,
+  onSaveParameter,
+  onRemoveParameter,
+  onAddCondition,
+}: {
+  readonly template: RemoteConfigTemplate;
+  readonly onSaveParameter: (
+    previousKey: string | null,
+    key: string,
+    parameter: RemoteConfigParameter,
+  ) => void;
+  readonly onRemoveParameter: (key: string) => void;
+  readonly onAddCondition: (condition: RemoteConfigCondition) => void;
+}) {
+  // Taken when the dialog opens, so it holds still while it animates closed.
+  const [editing, setEditing] = useState<{
+    readonly key: string | null;
+    readonly parameter: RemoteConfigParameter | null;
+  } | null>(null);
+  const shownEditing = useDialogTarget(editing);
+  const [filter, setFilter] = useState("");
+  const keys = Object.keys(template.parameters);
+  const shown = keys.filter((key) =>
+    key.toLowerCase().includes(filter.trim().toLowerCase()),
+  );
+  const editingKey = shownEditing?.key ?? null;
+
+  return (
+    <Card className="overflow-hidden shadow-sm">
+      <CardHeader className="flex-row flex-wrap items-center justify-between gap-3 space-y-0 border-b px-4 py-3 sm:px-6">
+        <CardTitle className="text-sm">
+          <h2>Parameters</h2>
+        </CardTitle>
+        <div className="flex w-full flex-wrap gap-2 sm:w-auto">
+          {keys.length > 5 ? (
+            <InputGroup className="min-h-11 w-full sm:min-h-8 sm:w-56">
+              <InputGroupAddon>
+                <Search aria-hidden="true" />
+              </InputGroupAddon>
+              <InputGroupInput
+                aria-label="Filter parameters by key"
+                className="text-base sm:text-xs"
+                onChange={(event) => setFilter(event.target.value)}
+                placeholder="Filter by key"
+                value={filter}
+              />
+            </InputGroup>
+          ) : null}
+          <Button
+            className="min-h-11 sm:min-h-7"
+            onClick={() => setEditing({ key: null, parameter: null })}
+          >
+            <Plus data-icon="inline-start" />
+            Add parameter
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        {keys.length === 0 ? (
+          <Empty className="py-10">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <SlidersHorizontal />
+              </EmptyMedia>
+              <EmptyTitle>No parameters</EmptyTitle>
+              <EmptyDescription>
+                Add a parameter, give it a default, then publish to change the
+                app without a new build.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Button
+                className="min-h-11 sm:min-h-7"
+                onClick={() => setEditing({ key: null, parameter: null })}
+              >
+                <Plus data-icon="inline-start" />
+                Add parameter
+              </Button>
+            </EmptyContent>
+          </Empty>
+        ) : shown.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-10 text-center text-xs text-muted-foreground">
+            <p className="font-medium text-foreground">No matching keys</p>
+            <Button onClick={() => setFilter("")} size="sm" variant="outline">
+              Clear filter
+            </Button>
+          </div>
+        ) : (
+          <ul aria-label="Parameters" className="divide-y">
+            {shown.map((key) => (
+              <ParameterRow
+                conditions={template.conditions}
+                key={key}
+                onEdit={() =>
+                  setEditing({
+                    key,
+                    parameter: template.parameters[key] ?? null,
+                  })
+                }
+                onRemove={() => onRemoveParameter(key)}
+                parameter={template.parameters[key]!}
+                parameterKey={key}
+              />
+            ))}
+          </ul>
+        )}
+      </CardContent>
+      <ParameterDialog
+        conditions={template.conditions}
+        onAddCondition={onAddCondition}
+        onOpenChange={(open) => {
+          if (!open) setEditing(null);
+        }}
+        onSave={(key, parameter) => onSaveParameter(editingKey, key, parameter)}
+        open={editing !== null}
+        parameter={shownEditing?.parameter ?? null}
+        parameterKey={editingKey}
+        takenKeys={keys.filter((key) => key !== editingKey)}
+      />
+    </Card>
+  );
+}

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

@@ -0,0 +1,284 @@
+import { AlertTriangle, Smartphone } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+
+import { PlatformIcon } from "@/components/PlatformIcon";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRemoteConfigPreviewQuery } from "@/lib/remote-config-api";
+import {
+  fromLocalDateTimeInput,
+  type RemoteConfigTemplate,
+} from "@/lib/remote-config-draft";
+
+interface PreviewDevice {
+  readonly platform: "ios" | "android";
+  readonly channel: string;
+  readonly appVersion: string;
+  readonly cohort: string;
+  readonly fingerprintHash: string;
+  /** A `datetime-local` value in the viewer's time zone; empty for now. */
+  readonly at: string;
+}
+
+const INITIAL_DEVICE: PreviewDevice = {
+  platform: "ios",
+  channel: "production",
+  appVersion: "1.0.0",
+  cohort: "1",
+  fingerprintHash: "",
+  at: "",
+};
+
+/** The device after typing pauses, so each keystroke does not ask the server. */
+const useSettled = <T,>(value: T, delayMs = 300): T => {
+  const [settled, setSettled] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setSettled(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return settled;
+};
+
+/** What a device with the context entered gets from the draft. */
+export function PreviewCard({
+  template,
+  isDraft,
+}: {
+  readonly template: RemoteConfigTemplate;
+  /** The template has unpublished edits. */
+  readonly isDraft: boolean;
+}) {
+  const id = useId();
+  const [device, setDevice] = useState(INITIAL_DEVICE);
+  const settled = useSettled(device);
+  const { at, ...deviceContext } = settled;
+  const atInstant = fromLocalDateTimeInput(at);
+  const preview = useRemoteConfigPreviewQuery({
+    template,
+    context: {
+      ...deviceContext,
+      // Without a time, the server evaluates at its own clock.
+      ...(atInstant === undefined ? {} : { now: Date.parse(atInstant) }),
+    },
+  });
+  const keys = Object.keys(template.parameters);
+  const set = (field: keyof PreviewDevice, value: string) =>
+    setDevice({ ...device, [field]: value });
+
+  return (
+    <Card className="overflow-hidden shadow-sm">
+      <CardHeader className="border-b px-4 py-3 sm:px-6">
+        <CardTitle className="text-sm">
+          <h2>Preview a device</h2>
+        </CardTitle>
+        <CardDescription className="text-xs">
+          {isDraft
+            ? "The values this device would get once your changes are published, now or at the time you pick."
+            : "The values this device gets from the active version, now or at the time you pick."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 p-4 sm:p-6">
+        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <Field>
+            <FieldLabel htmlFor={`${id}-platform`}>Platform</FieldLabel>
+            <Select
+              items={{ ios: "iOS", android: "Android" }}
+              onValueChange={(value) => {
+                if (value === "ios" || value === "android") {
+                  set("platform", value);
+                }
+              }}
+              value={device.platform}
+            >
+              <SelectTrigger
+                className="min-h-11 w-full sm:min-h-9"
+                id={`${id}-platform`}
+              >
+                <SelectValue>
+                  <PlatformIcon
+                    className="size-3.5"
+                    platform={device.platform}
+                  />
+                  {device.platform === "ios" ? "iOS" : "Android"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="ios">
+                    <PlatformIcon className="size-3.5" platform="ios" />
+                    iOS
+                  </SelectItem>
+                  <SelectItem value="android">
+                    <PlatformIcon className="size-3.5" platform="android" />
+                    Android
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </Field>
+          {(
+            [
+              ["channel", "Channel", "production"],
+              ["appVersion", "App version", "1.0.0"],
+              ["cohort", "Cohort", "1-1000 or a name"],
+              ["fingerprintHash", "Fingerprint", "Optional"],
+            ] as const
+          ).map(([field, label, placeholder]) => (
+            <Field key={field}>
+              <FieldLabel htmlFor={`${id}-${field}`}>{label}</FieldLabel>
+              <Input
+                autoComplete="off"
+                className="min-h-11 text-base sm:min-h-9 sm:text-xs"
+                id={`${id}-${field}`}
+                onChange={(event) => set(field, event.target.value)}
+                placeholder={placeholder}
+                spellCheck={false}
+                value={device[field]}
+              />
+            </Field>
+          ))}
+          <Field>
+            <FieldLabel htmlFor={`${id}-at`}>Time</FieldLabel>
+            <InputGroup className="h-11 sm:h-9">
+              <InputGroupInput
+                className="h-11 text-base tabular-nums sm:h-9 sm:text-xs"
+                id={`${id}-at`}
+                onChange={(event) => set("at", event.target.value)}
+                type="datetime-local"
+                value={device.at}
+              />
+              {device.at.length === 0 ? null : (
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    className="min-h-11 sm:min-h-6"
+                    onClick={() => set("at", "")}
+                    size="xs"
+                  >
+                    Now
+                  </InputGroupButton>
+                </InputGroupAddon>
+              )}
+            </InputGroup>
+          </Field>
+        </div>
+        {keys.length === 0 ? (
+          <Empty className="border py-8">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Smartphone />
+              </EmptyMedia>
+              <EmptyTitle>Nothing to preview</EmptyTitle>
+              <EmptyDescription>
+                Add a parameter, and its value for this device shows here.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : preview.data?.status === "invalid" ? (
+          <Alert variant="destructive">
+            <AlertTriangle />
+            <AlertTitle>The draft has problems to fix first</AlertTitle>
+            <AlertDescription>
+              <ul className="list-disc pl-4">
+                {preview.data.issues.slice(0, 5).map((issue) => (
+                  <li key={`${issue.path}:${issue.message}`}>
+                    {issue.path === "" ? "" : `${issue.path}: `}
+                    {issue.message}
+                  </li>
+                ))}
+              </ul>
+            </AlertDescription>
+          </Alert>
+        ) : preview.isError ? (
+          <Alert variant="destructive">
+            <AlertTriangle />
+            <AlertTitle>The preview couldn't be loaded</AlertTitle>
+            <AlertDescription>
+              Check the connection, then change a field to try again.
+            </AlertDescription>
+          </Alert>
+        ) : preview.data === undefined ? (
+          <div className="flex flex-col gap-2">
+            <span className="sr-only">Loading the preview</span>
+            {keys.slice(0, 4).map((key) => (
+              <Skeleton className="h-8 w-full" key={key} />
+            ))}
+          </div>
+        ) : (
+          <dl
+            aria-busy={preview.isFetching || undefined}
+            className="divide-y rounded-lg border"
+          >
+            {keys.map((key) => {
+              const result =
+                preview.data.status === "ok"
+                  ? preview.data.parameters[key]
+                  : undefined;
+              return (
+                <div
+                  className="grid gap-1 px-3 py-2.5 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)_auto] sm:items-center sm:gap-3"
+                  key={key}
+                >
+                  <dt className="truncate font-mono text-xs font-medium">
+                    {key}
+                  </dt>
+                  <dd className="min-w-0 truncate font-mono text-xs">
+                    {result === undefined ? (
+                      "…"
+                    ) : result.value === null ? (
+                      <span className="font-sans text-muted-foreground">
+                        In-app default
+                      </span>
+                    ) : (
+                      <span title={result.value}>
+                        {result.value.length === 0 ? '""' : result.value}
+                      </span>
+                    )}
+                  </dd>
+                  <dd>
+                    {result?.condition ===
+                    undefined ? null : result.condition === null ? (
+                      <Badge variant="outline">Default value</Badge>
+                    ) : (
+                      <Badge variant="secondary">{result.condition}</Badge>
+                    )}
+                  </dd>
+                </div>
+              );
+            })}
+          </dl>
+        )}
+      </CardContent>
+    </Card>
+  );
+}