@hot-updater/console 1.1.4 → 1.2.0-rc.1

package/src/components/features/native-builds/NativeBuildsTable.tsx

@@ -0,0 +1,426 @@
+import type { NativeBuildRow } from "@hot-updater/plugin-core";
+import { Link, useNavigate } from "@tanstack/react-router";
+import {
+  AlertTriangle,
+  ArrowUpRight,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  HardDriveDownload,
+  RefreshCw,
+} from "lucide-react";
+
+import { PlatformIcon } from "@/components/PlatformIcon";
+import { TimestampDisplay } from "@/components/TimestampDisplay";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  formatByteSize,
+  nativeBuildArtifacts,
+  nativeBuildChannel,
+  nativeBuildDownloadPath,
+  nativeBuildFileName,
+  nativeBuildTarget,
+  platformLabel,
+} from "@/lib/native-builds";
+import type { NativeBuildListResult } from "@/lib/server/nativeBuilds";
+
+import { CommitLink } from "./CommitLink";
+import { CopyableText } from "./CopyableText";
+import { IMPORT_COMMAND, IMPORT_GUIDE_URL } from "./ImportBuild";
+import { ShortHash } from "./ShortHash";
+import { StoreSubmissionBadge } from "./StoreSubmission";
+
+export const NATIVE_BUILD_GUIDE_URL =
+  "https://hot-updater.dev/docs/guides/native-build#register-a-build";
+
+const COLUMNS = 6;
+
+function EmptyRow({
+  channel,
+  paged,
+  onClearChannel,
+  onNewest,
+}: {
+  readonly channel: string | undefined;
+  readonly paged: boolean;
+  readonly onClearChannel: () => void;
+  readonly onNewest: () => void;
+}) {
+  return (
+    <TableRow>
+      <TableCell
+        className="h-44 text-center text-muted-foreground"
+        colSpan={COLUMNS}
+      >
+        <div className="mx-auto flex max-w-sm flex-col items-center gap-2 whitespace-normal">
+          <HardDriveDownload aria-hidden="true" className="size-5" />
+          {paged ? (
+            <>
+              <p className="font-medium text-foreground">
+                No more native builds
+              </p>
+              <Button
+                className="mt-1 min-h-11 sm:min-h-8"
+                onClick={onNewest}
+                variant="outline"
+              >
+                Show the newest builds
+              </Button>
+            </>
+          ) : channel !== undefined ? (
+            <>
+              <p className="font-medium text-foreground">
+                No native build embeds <span translate="no">{channel}</span>
+              </p>
+              <p>
+                A build embeds the channel it was built on. Build one on this
+                channel, or list every channel's builds.
+              </p>
+              <Button
+                className="mt-1 min-h-11 sm:min-h-8"
+                onClick={onClearChannel}
+                variant="outline"
+              >
+                Show all channels
+              </Button>
+            </>
+          ) : (
+            <>
+              <p className="font-medium text-foreground">No native builds</p>
+              <p>
+                Build a release app with{" "}
+                <code className="font-mono text-xs">
+                  hot-updater native-build android
+                </code>{" "}
+                or <code className="font-mono text-xs">native-build ios</code>,
+                which tracks it here, or import one built elsewhere:
+              </p>
+              <div className="w-full text-left">
+                <CopyableText
+                  label="the import command"
+                  value={IMPORT_COMMAND}
+                  wrap
+                />
+              </div>
+              <a
+                className={buttonVariants({
+                  className: "mt-1 min-h-11 sm:min-h-8",
+                  variant: "outline",
+                })}
+                href={NATIVE_BUILD_GUIDE_URL}
+                rel="noreferrer"
+                target="_blank"
+              >
+                Native build guide
+                <ArrowUpRight data-icon="inline-end" />
+              </a>
+              <a
+                className={buttonVariants({
+                  className: "min-h-11 sm:min-h-8",
+                  variant: "outline",
+                })}
+                href={IMPORT_GUIDE_URL}
+                rel="noreferrer"
+                target="_blank"
+              >
+                Import guide
+                <ArrowUpRight data-icon="inline-end" />
+              </a>
+            </>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function LoadingRows() {
+  return Array.from({ length: 3 }, (_, index) => (
+    <TableRow key={index}>
+      <TableCell className="space-y-2 py-3">
+        {index === 0 ? (
+          <span className="sr-only">Loading native builds</span>
+        ) : null}
+        <Skeleton className="h-3.5 w-40" />
+        <Skeleton className="h-3 w-24" />
+      </TableCell>
+      <TableCell className="hidden md:table-cell">
+        <Skeleton className="h-5 w-20" />
+      </TableCell>
+      <TableCell className="hidden xl:table-cell">
+        <Skeleton className="h-3.5 w-28" />
+      </TableCell>
+      <TableCell className="hidden xl:table-cell">
+        <Skeleton className="h-3.5 w-14" />
+      </TableCell>
+      <TableCell className="hidden sm:table-cell">
+        <Skeleton className="h-3.5 w-20" />
+      </TableCell>
+      <TableCell>
+        <Skeleton className="ml-auto h-6 w-16" />
+      </TableCell>
+    </TableRow>
+  ));
+}
+
+function BuildRow({
+  build,
+  onChannel,
+}: {
+  readonly build: NativeBuildRow;
+  readonly onChannel: (channel: string) => void;
+}) {
+  const navigate = useNavigate();
+  const target = nativeBuildTarget(build);
+  const channel = nativeBuildChannel(build);
+  const title = `${platformLabel(build.platform)} ${nativeBuildArtifacts[build.artifact_kind].label}`;
+  return (
+    <TableRow
+      className="cursor-pointer"
+      onClick={() =>
+        void navigate({
+          to: "/native-builds/$buildId",
+          params: { buildId: build.id },
+        })
+      }
+    >
+      <TableCell className="py-3 whitespace-normal">
+        <div className="flex min-w-0 flex-col gap-1">
+          <div className="flex flex-wrap items-center gap-1.5">
+            <PlatformIcon
+              className="size-3.5 shrink-0 text-muted-foreground"
+              platform={build.platform}
+            />
+            <Link
+              className="font-medium underline-offset-4 hover:underline"
+              onClick={(event) => event.stopPropagation()}
+              params={{ buildId: build.id }}
+              to="/native-builds/$buildId"
+            >
+              {title}
+            </Link>
+            <span className="text-xs text-muted-foreground tabular-nums">
+              {formatByteSize(build.byte_size)}
+            </span>
+            <StoreSubmissionBadge build={build} withTime />
+          </div>
+          <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+            <span>{target.label}</span>
+            {build.fingerprint_hash === null ? (
+              <span className="font-mono text-foreground" translate="no">
+                {target.value}
+              </span>
+            ) : (
+              <ShortHash
+                label="fingerprint"
+                length={12}
+                value={build.fingerprint_hash}
+              />
+            )}
+            {!build.build_number ? null : (
+              <span className="tabular-nums" translate="no">
+                · build {build.build_number}
+              </span>
+            )}
+            <span className="md:hidden" translate="no">
+              · {channel}
+            </span>
+            {build.git_commit_hash === null ? null : (
+              <span className="inline-flex items-center gap-1 xl:hidden">
+                · commit <CommitLink hash={build.git_commit_hash} />
+              </span>
+            )}
+          </div>
+          {/* Below xl the column hides, so the whole ID shows here. */}
+          <div className="text-xs text-muted-foreground xl:hidden">
+            Built-in bundle{" "}
+            <span
+              className="font-mono [overflow-wrap:anywhere] text-foreground"
+              translate="no"
+            >
+              {build.min_bundle_id}
+            </span>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell className="hidden md:table-cell">
+        <button
+          aria-label={`Show the builds that embed ${channel}`}
+          className="rounded-md text-left focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+          onClick={(event) => {
+            event.stopPropagation();
+            onChannel(channel);
+          }}
+          type="button"
+        >
+          <Badge className="whitespace-nowrap" translate="no" variant="outline">
+            {channel}
+          </Badge>
+        </button>
+      </TableCell>
+      <TableCell className="hidden xl:table-cell">
+        <span
+          className="font-mono text-xs text-muted-foreground"
+          translate="no"
+        >
+          {build.min_bundle_id}
+        </span>
+      </TableCell>
+      <TableCell className="hidden xl:table-cell">
+        <CommitLink hash={build.git_commit_hash} />
+      </TableCell>
+      <TableCell className="hidden sm:table-cell">
+        <TimestampDisplay uuid={build.id} />
+      </TableCell>
+      <TableCell className="text-right">
+        <a
+          aria-label={`Download ${nativeBuildFileName(build)}`}
+          className={buttonVariants({
+            className: "min-h-11 sm:min-h-7",
+            size: "sm",
+            variant: "outline",
+          })}
+          download
+          href={nativeBuildDownloadPath(build.id)}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <Download data-icon="inline-start" />
+          Download
+        </a>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+/**
+ * The registered native builds, newest first, one page at a time. A row
+ * opens the build's page; its channel filters the list by that channel.
+ */
+export function NativeBuildsTable({
+  builds,
+  channel,
+  paged,
+  onChannel,
+  onPage,
+}: {
+  readonly builds: {
+    readonly data: NativeBuildListResult | undefined;
+    readonly isError: boolean;
+    readonly isLoading: boolean;
+    readonly isPlaceholderData: boolean;
+    readonly refetch: () => unknown;
+  };
+  /** The channel the list is filtered by. */
+  readonly channel: string | undefined;
+  /** Whether the list shows a page other than the newest. */
+  readonly paged: boolean;
+  readonly onChannel: (channel: string | undefined) => void;
+  readonly onPage: (page: { before?: string; after?: string }) => void;
+}) {
+  const rows = builds.data?.data;
+  const { next, previous } = builds.data ?? {};
+
+  if (builds.isError) {
+    return (
+      <div className="p-4">
+        <Alert variant="destructive">
+          <AlertTriangle />
+          <AlertTitle>Native builds couldn't be loaded</AlertTitle>
+          <AlertDescription>
+            Check your connection and try again.
+          </AlertDescription>
+          <AlertAction>
+            <Button
+              onClick={() => void builds.refetch()}
+              size="xs"
+              variant="outline"
+            >
+              <RefreshCw data-icon="inline-start" />
+              Retry
+            </Button>
+          </AlertAction>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Table aria-busy={builds.isPlaceholderData} aria-label="Native builds">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Build</TableHead>
+            <TableHead className="hidden md:table-cell">Channel</TableHead>
+            <TableHead className="hidden xl:table-cell">
+              Built-in bundle
+            </TableHead>
+            <TableHead className="hidden xl:table-cell">Commit</TableHead>
+            <TableHead className="hidden sm:table-cell">Created</TableHead>
+            <TableHead className="text-right">
+              <span className="sr-only">Actions</span>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {builds.isLoading ? (
+            <LoadingRows />
+          ) : rows?.length === 0 ? (
+            <EmptyRow
+              channel={channel}
+              onClearChannel={() => onChannel(undefined)}
+              onNewest={() => onPage({})}
+              paged={paged}
+            />
+          ) : (
+            rows?.map((build) => (
+              <BuildRow build={build} key={build.id} onChannel={onChannel} />
+            ))
+          )}
+        </TableBody>
+      </Table>
+      {next !== undefined || previous !== undefined ? (
+        <nav
+          aria-label="Native build pages"
+          className="flex items-center justify-end gap-2 border-t px-4 py-2"
+        >
+          <Button
+            className="min-h-11 sm:min-h-7"
+            disabled={previous === undefined || builds.isPlaceholderData}
+            onClick={() => onPage({ after: previous })}
+            size="sm"
+            variant="ghost"
+          >
+            <ChevronLeft data-icon="inline-start" />
+            Newer
+          </Button>
+          <Button
+            className="min-h-11 sm:min-h-7"
+            disabled={next === undefined || builds.isPlaceholderData}
+            onClick={() => onPage({ before: next })}
+            size="sm"
+            variant="ghost"
+          >
+            Older
+            <ChevronRight data-icon="inline-end" />
+          </Button>
+        </nav>
+      ) : null}
+    </>
+  );
+}

package/src/components/features/native-builds/PatchesCard.tsx

@@ -0,0 +1,222 @@
+import { Link } from "@tanstack/react-router";
+import {
+  AlertTriangle,
+  ArrowUpRight,
+  ChevronLeft,
+  ChevronRight,
+  GitBranch,
+  RefreshCw,
+} from "lucide-react";
+
+import { TimestampDisplay } from "@/components/TimestampDisplay";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button, buttonVariants } 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 { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { type KeysetPage, useNativeBuildPatchesQuery } from "@/lib/api";
+import { formatByteSize } from "@/lib/native-builds";
+import type {
+  NativeBuildDetail,
+  NativeBuildPatchPage,
+} from "@/lib/server/nativeBuilds";
+
+const BUNDLE_DIFFING_GUIDE_URL =
+  "https://hot-updater.dev/docs/guides/bundle-diffing#first-ota-update";
+
+/**
+ * The bundles that patch from the build's built-in bundle, newest first, a
+ * page at a time: the newest page comes with the build's page, and others
+ * are read as they are asked for.
+ */
+export function PatchesCard({
+  detail,
+  page,
+  onPage,
+}: {
+  readonly detail: NativeBuildDetail;
+  readonly page: KeysetPage;
+  readonly onPage: (page: KeysetPage) => void;
+}) {
+  const paged = page.before !== undefined || page.after !== undefined;
+  const query = useNativeBuildPatchesQuery(
+    detail.build.min_bundle_id,
+    page,
+    paged,
+  );
+  const patches: NativeBuildPatchPage | undefined = paged
+    ? query.data
+    : detail.patches;
+  const { next, previous } = patches ?? {};
+
+  return (
+    <Card className="overflow-hidden shadow-sm" id="patches">
+      <CardHeader className="border-b px-4 py-3">
+        <CardTitle className="text-sm">
+          <h2>Patches from this build</h2>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        {paged && query.isError ? (
+          <div className="p-4">
+            <Alert variant="destructive">
+              <AlertTriangle />
+              <AlertTitle>Patches couldn't be loaded</AlertTitle>
+              <AlertDescription>{query.error.message}</AlertDescription>
+              <AlertAction>
+                <Button
+                  onClick={() => void query.refetch()}
+                  size="xs"
+                  variant="outline"
+                >
+                  <RefreshCw data-icon="inline-start" />
+                  Retry
+                </Button>
+              </AlertAction>
+            </Alert>
+          </div>
+        ) : patches === undefined ? (
+          <div className="flex flex-col gap-2 p-4">
+            <span className="sr-only">Loading patches</span>
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-2/3" />
+          </div>
+        ) : patches.data.length === 0 ? (
+          paged ? (
+            <Empty className="py-10">
+              <EmptyHeader>
+                <EmptyTitle>No more patches</EmptyTitle>
+              </EmptyHeader>
+              <Button
+                className="min-h-11 sm:min-h-8"
+                onClick={() => onPage({})}
+                variant="outline"
+              >
+                Show the newest patches
+              </Button>
+            </Empty>
+          ) : (
+            <Empty className="py-10">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <GitBranch />
+                </EmptyMedia>
+                <EmptyTitle>No patches from this build</EmptyTitle>
+                <EmptyDescription>
+                  A deploy adds a patch from this build's bundle while it is its
+                  scope's newest build and the deploy config turns patches on,
+                  with <code className="font-mono">patch</code> in{" "}
+                  <code className="font-mono">hot-updater.config.ts</code>.
+                </EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <a
+                  className={buttonVariants({
+                    className: "min-h-11 sm:min-h-8",
+                    variant: "outline",
+                  })}
+                  href={BUNDLE_DIFFING_GUIDE_URL}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Bundle diffing guide
+                  <ArrowUpRight data-icon="inline-end" />
+                </a>
+              </EmptyContent>
+            </Empty>
+          )
+        ) : (
+          <Table
+            aria-busy={paged && query.isPlaceholderData}
+            aria-label="Patches from this build"
+            className="table-fixed"
+          >
+            <TableHeader>
+              <TableRow>
+                <TableHead>Target bundle</TableHead>
+                <TableHead className="w-28">Patch size</TableHead>
+                <TableHead className="hidden w-32 sm:table-cell">
+                  Created
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {patches.data.map((patch) => (
+                <TableRow key={patch.bundleId}>
+                  <TableCell className="py-3 whitespace-normal">
+                    <Link
+                      className="block font-mono text-xs [overflow-wrap:anywhere] underline-offset-4 hover:underline"
+                      search={{ bundleId: patch.bundleId }}
+                      title={patch.bundleId}
+                      to="/"
+                      translate="no"
+                    >
+                      {patch.bundleId}
+                    </Link>
+                  </TableCell>
+                  <TableCell className="text-xs tabular-nums">
+                    {formatByteSize(patch.byteSize)}
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell">
+                    <TimestampDisplay uuid={patch.bundleId} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+        {next !== undefined || previous !== undefined ? (
+          <nav
+            aria-label="Patch pages"
+            className="flex items-center justify-end gap-2 border-t px-4 py-2"
+          >
+            <Button
+              className="min-h-11 sm:min-h-7"
+              disabled={
+                previous === undefined || (paged && query.isPlaceholderData)
+              }
+              onClick={() => onPage({ after: previous })}
+              size="sm"
+              variant="ghost"
+            >
+              <ChevronLeft data-icon="inline-start" />
+              Newer
+            </Button>
+            <Button
+              className="min-h-11 sm:min-h-7"
+              disabled={
+                next === undefined || (paged && query.isPlaceholderData)
+              }
+              onClick={() => onPage({ before: next })}
+              size="sm"
+              variant="ghost"
+            >
+              Older
+              <ChevronRight data-icon="inline-end" />
+            </Button>
+          </nav>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}