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

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

@@ -0,0 +1,91 @@
+import { ArrowUpRight, FileUp } from "lucide-react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { CopyableText } from "./CopyableText";
+
+/** The command that tracks a build made elsewhere. */
+export const IMPORT_COMMAND =
+  "npx hot-updater native-build import <path-to-.ipa|.aab|.apk|.app|.app.zip>";
+
+/** `native-build import`'s section of the native build guide. */
+export const IMPORT_GUIDE_URL =
+  "https://hot-updater.dev/docs/guides/native-build#import-a-build-made-elsewhere";
+
+/**
+ * How to track a build made elsewhere: the CLI command, which reads the
+ * artifact on the machine that has it. The Console uploads nothing, since a
+ * host may cap a request's body far below an `.ipa`.
+ */
+export function ImportBuildSteps() {
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <p className="text-xs text-muted-foreground">
+        Track an <code className="font-mono">.ipa</code>,{" "}
+        <code className="font-mono">.aab</code>,{" "}
+        <code className="font-mono">.apk</code> or simulator{" "}
+        <code className="font-mono">.app</code> (or its{" "}
+        <code className="font-mono">.app.zip</code>) built elsewhere, such as by
+        EAS, Xcode Cloud or Fastlane, so the OTAs you deploy after it patch from
+        its built-in bundle. Run in the app's project:
+      </p>
+      <CopyableText label="the import command" value={IMPORT_COMMAND} wrap />
+      <p className="text-xs text-muted-foreground">
+        Add <code className="font-mono">-c &lt;channel&gt;</code> (
+        <code className="font-mono">--channel</code>) when the app reports
+        another channel than the one it was built with, such as one its code
+        sets or switches to at runtime.
+      </p>
+    </div>
+  );
+}
+
+/** The toolbar's "Import a build" button and the command it shows. */
+export function ImportBuildDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger
+        render={
+          <Button
+            aria-label="Import a build"
+            className="min-h-11 sm:min-h-7"
+            size="sm"
+            variant="outline"
+          />
+        }
+      >
+        <FileUp data-icon="inline-start" />
+        <span className="hidden sm:inline">Import a build</span>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Import a build</DialogTitle>
+          <DialogDescription>
+            The build appears here once the command tracks it.
+          </DialogDescription>
+        </DialogHeader>
+        <ImportBuildSteps />
+        <a
+          className={buttonVariants({
+            className: "min-h-11 w-full sm:min-h-8 sm:w-fit",
+            variant: "outline",
+          })}
+          href={IMPORT_GUIDE_URL}
+          rel="noreferrer"
+          target="_blank"
+        >
+          Import guide
+          <ArrowUpRight data-icon="inline-end" />
+        </a>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,205 @@
+import type { NativeBuildRow } from "@hot-updater/plugin-core";
+import { AlertTriangle, Download } from "lucide-react";
+
+import { QrCode } from "@/components/QrCode";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useNativeBuildDownloadUrlQuery } from "@/lib/api";
+import {
+  apkInstallCommand,
+  nativeBuildDownloadPath,
+  nativeBuildFileName,
+  simulatorInstallCommand,
+} from "@/lib/native-builds";
+
+import { CopyableText } from "./CopyableText";
+import { isSubmitted } from "./StoreSubmission";
+
+/**
+ * What an artifact installs on, where the file alone isn't enough: the card
+ * says it once, under the QR code, or without one, in its place.
+ */
+const INSTALL_LIMITS: Partial<Record<NativeBuildRow["artifact_kind"], string>> =
+  {
+    ipa: "The .ipa installs only on devices its signing profile allows (development or ad hoc); an App Store export reaches testers through TestFlight.",
+    aab: "The .aab installs through Google Play or bundletool, not from the file.",
+  };
+
+/**
+ * What scanning a build's QR code gets, by its artifact. The install steps
+ * beside it add only what this doesn't say, so the card says each thing once.
+ */
+const QR_CAPTIONS: Record<NativeBuildRow["artifact_kind"], string> = {
+  apk: "Scan with an Android phone's camera, then open the APK to install it.",
+  ipa: `Scan to download. ${INSTALL_LIMITS.ipa}`,
+  aab: `Scan to download. ${INSTALL_LIMITS.aab}`,
+  app: "Scan to download the .app.zip on a Mac.",
+};
+
+/**
+ * The QR code of the build's download: the storage's URL, which a phone
+ * opens without the console's sign-in, read again before it expires.
+ */
+function DownloadQrCode({ build }: { readonly build: NativeBuildRow }) {
+  const downloadUrl = useNativeBuildDownloadUrlQuery(build.id, true);
+  const url = downloadUrl.data?.url;
+
+  // A storage without download URLs serves the build only through the
+  // console, which a phone that scans isn't signed in to.
+  if (url === null) {
+    const limits = INSTALL_LIMITS[build.artifact_kind];
+    return (
+      <div className="flex flex-col gap-2 text-xs text-muted-foreground">
+        <p>
+          This storage gives no download link a phone can open without signing
+          in, so there is no QR code. Download the build here, or open this page
+          on the phone signed in to the console.
+        </p>
+        {limits ? <p>{limits}</p> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      {url === undefined ? (
+        downloadUrl.isError ? (
+          <Alert variant="destructive">
+            <AlertTriangle />
+            <AlertTitle>The download link couldn't be created</AlertTitle>
+            <AlertDescription>{downloadUrl.error.message}</AlertDescription>
+          </Alert>
+        ) : (
+          <Skeleton className="size-48" />
+        )
+      ) : (
+        <QrCode
+          className="size-48"
+          label={`Download ${nativeBuildFileName(build)}`}
+          value={url}
+        />
+      )}
+      <p className="max-w-56 text-center text-xs text-muted-foreground">
+        {QR_CAPTIONS[build.artifact_kind]}
+      </p>
+    </div>
+  );
+}
+
+/** The store's label of a submitted build. */
+function SubmittedVersion({ build }: { readonly build: NativeBuildRow }) {
+  return (
+    <span className="font-mono text-foreground" translate="no">
+      {build.submitted_version ?? "this build"}
+    </span>
+  );
+}
+
+/**
+ * How else the artifact installs, beside its QR code's caption and its
+ * download: none of it repeats the caption.
+ */
+function InstallSteps({ build }: { readonly build: NativeBuildRow }) {
+  switch (build.artifact_kind) {
+    case "apk":
+      return (
+        <div className="flex min-w-0 flex-col gap-2">
+          <p className="text-xs text-muted-foreground">
+            On an emulator or a phone over USB, download the APK and install it:
+          </p>
+          <CopyableText
+            label="the install command"
+            value={apkInstallCommand(build)}
+          />
+        </div>
+      );
+    case "app":
+      return (
+        <div className="flex min-w-0 flex-col gap-2">
+          <p className="text-xs text-muted-foreground">
+            It runs only in the iOS Simulator. Install it on the booted one:
+          </p>
+          <CopyableText
+            label="the install command"
+            value={simulatorInstallCommand(build)}
+          />
+        </div>
+      );
+    case "aab":
+      return isSubmitted(build) ? (
+        <p className="text-xs text-muted-foreground">
+          Submitted to Google Play internal testing as{" "}
+          <SubmittedVersion build={build} />. Testers get it once its release is
+          rolled out; on an app Play Console hasn't published, the release is a
+          draft you roll out in Play Console.
+        </p>
+      ) : (
+        <div className="flex min-w-0 flex-col gap-2">
+          <p className="text-xs text-muted-foreground">
+            For testers, build and release to internal testing:
+          </p>
+          <CopyableText
+            label="the Google Play command"
+            value="npx hot-updater google-play upload"
+          />
+        </div>
+      );
+    case "ipa":
+      return isSubmitted(build) ? (
+        <p className="text-xs text-muted-foreground">
+          On TestFlight as <SubmittedVersion build={build} />.
+        </p>
+      ) : (
+        <div className="flex min-w-0 flex-col gap-2">
+          <p className="text-xs text-muted-foreground">
+            Over USB, Xcode or Apple Configurator installs it. For testers:
+          </p>
+          <CopyableText
+            label="the TestFlight command"
+            value="npx hot-updater testflight"
+          />
+        </div>
+      );
+  }
+}
+
+/**
+ * Installs one native build: every artifact by a QR code of its download,
+ * which a phone scans, and by download here; an APK also with `adb`, a
+ * simulator app with `xcrun simctl`, and an IPA's or an AAB's testers through
+ * its store.
+ */
+export function InstallCard({ build }: { readonly build: NativeBuildRow }) {
+  const fileName = nativeBuildFileName(build);
+  return (
+    <Card className="overflow-hidden shadow-sm">
+      <CardHeader className="border-b px-4 py-3">
+        <CardTitle className="text-sm">
+          <h2>Install</h2>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-6 p-4 sm:grid-cols-[12rem_minmax(0,1fr)] sm:p-6">
+        <DownloadQrCode build={build} />
+        <div className="flex min-w-0 flex-col gap-4">
+          <InstallSteps build={build} />
+          <a
+            className={buttonVariants({
+              className:
+                "h-auto min-h-11 w-full min-w-0 py-2 whitespace-normal sm:min-h-8 sm:w-fit",
+              variant: "outline",
+            })}
+            download
+            href={nativeBuildDownloadPath(build.id)}
+          >
+            <Download data-icon="inline-start" />
+            <span className="text-left [overflow-wrap:anywhere]">
+              Download {fileName}
+            </span>
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,175 @@
+import { Link } from "@tanstack/react-router";
+import { AlertTriangle, ChevronLeft, HardDrive, RefreshCw } from "lucide-react";
+
+import { PlatformIcon } from "@/components/PlatformIcon";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { type KeysetPage, useNativeBuildDetailQuery } from "@/lib/api";
+import {
+  formatByteSize,
+  nativeBuildArtifacts,
+  platformLabel,
+} from "@/lib/native-builds";
+
+import { BuiltInBundleCard } from "./BuiltInBundleCard";
+import { InstallCard } from "./InstallCard";
+import { PatchesCard } from "./PatchesCard";
+import { ServedNowCard } from "./ServedNowCard";
+
+export interface NativeBuildDetailSearch {
+  /** Patches older than this target bundle: the next page. */
+  readonly patchesBefore?: string;
+  /** Patches newer than this target bundle: the previous page. */
+  readonly patchesAfter?: string;
+}
+
+/**
+ * One native build: how to install it, its built-in bundle as the base its
+ * OTAs patch from, what an install is served now, and the patches from it.
+ * The patch page is in the URL, so a link opens it.
+ */
+export function NativeBuildDetailPage({
+  buildId,
+  search,
+  onSearchChange,
+}: {
+  readonly buildId: string;
+  readonly search: NativeBuildDetailSearch;
+  readonly onSearchChange: (search: NativeBuildDetailSearch) => void;
+}) {
+  const query = useNativeBuildDetailQuery(buildId);
+  const detail = query.data;
+  const page: KeysetPage = {
+    ...(search.patchesBefore === undefined
+      ? {}
+      : { before: search.patchesBefore }),
+    ...(search.patchesAfter === undefined
+      ? {}
+      : { after: search.patchesAfter }),
+  };
+
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 items-center gap-x-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" />
+        <Link
+          className={buttonVariants({
+            className: "min-h-11 sm:min-h-7",
+            size: "sm",
+            variant: "ghost",
+          })}
+          to="/native-builds"
+        >
+          <ChevronLeft data-icon="inline-start" />
+          Native builds
+        </Link>
+        {detail ? (
+          <h1 className="flex min-w-0 items-center gap-1.5 text-sm font-medium">
+            <PlatformIcon
+              className="size-3.5 shrink-0 text-muted-foreground"
+              platform={detail.build.platform}
+            />
+            <span className="min-w-0 [overflow-wrap:anywhere]">
+              {platformLabel(detail.build.platform)}{" "}
+              {nativeBuildArtifacts[detail.build.artifact_kind].label} ·{" "}
+              <span translate="no">{detail.channel}</span>
+            </span>
+            <span className="hidden text-xs font-normal text-muted-foreground tabular-nums sm:inline">
+              {formatByteSize(detail.build.byte_size)}
+            </span>
+          </h1>
+        ) : (
+          <h1 className="sr-only">Native build</h1>
+        )}
+      </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 sm:gap-6">
+          {query.isError ? (
+            <Alert variant="destructive">
+              <AlertTriangle />
+              <AlertTitle>The native build 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>
+          ) : detail === undefined ? (
+            <>
+              <span className="sr-only">Loading the native build</span>
+              <Skeleton className="h-56 w-full rounded-xl" />
+              <Skeleton className="h-64 w-full rounded-xl" />
+            </>
+          ) : detail === null ? (
+            <Empty className="border py-16">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <HardDrive />
+                </EmptyMedia>
+                <EmptyTitle>Native build not found</EmptyTitle>
+                <EmptyDescription>
+                  No native build has this ID. It may have been deleted with{" "}
+                  <code className="font-mono">native-build delete</code>, or be
+                  from another console.
+                </EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <Link
+                  className={buttonVariants({
+                    className: "min-h-11 sm:min-h-8",
+                    variant: "outline",
+                  })}
+                  to="/native-builds"
+                >
+                  Show all native builds
+                </Link>
+              </EmptyContent>
+            </Empty>
+          ) : (
+            <>
+              <InstallCard build={detail.build} />
+              <BuiltInBundleCard detail={detail} />
+              <ServedNowCard detail={detail} />
+              <PatchesCard
+                detail={detail}
+                onPage={(next) =>
+                  onSearchChange({
+                    ...(next.before === undefined
+                      ? {}
+                      : { patchesBefore: next.before }),
+                    ...(next.after === undefined
+                      ? {}
+                      : { patchesAfter: next.after }),
+                  })
+                }
+                page={page}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+import { HardDrive, RefreshCw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  type NativeBuildPage,
+  useChannelsQuery,
+  useNativeBuildsQuery,
+} from "@/lib/api";
+
+import { ImportBuildDialog } from "./ImportBuild";
+import { NativeBuildsTable } from "./NativeBuildsTable";
+
+/**
+ * The filter's values: a channel's is its name behind a prefix, so no channel
+ * name, `all` included, can be taken for "All channels".
+ */
+const ALL_CHANNELS = "all";
+const CHANNEL_VALUE_PREFIX = "channel:";
+const channelValue = (name: string) => `${CHANNEL_VALUE_PREFIX}${name}`;
+
+/**
+ * The native builds Hot Updater tracks: one page at a time, newest first,
+ * optionally only those that embed one channel. The page and the channel
+ * are in the URL, so a pull request links to its channel's builds.
+ */
+export function NativeBuildsPage({
+  search,
+  onSearchChange,
+}: {
+  readonly search: NativeBuildPage;
+  readonly onSearchChange: (search: NativeBuildPage) => void;
+}) {
+  const { channel, before, after } = search;
+  const builds = useNativeBuildsQuery(search);
+  // The filter's choices; the rows decode their channel from its ID.
+  const channels = useChannelsQuery();
+  const channelNames = channels.data?.map(({ name }) => name) ?? [];
+  // A filtered channel may be gone, or not loaded yet: it stays a choice.
+  const choices =
+    channel === undefined || channelNames.includes(channel)
+      ? channelNames
+      : [channel, ...channelNames];
+  const filterBy = (next: string | undefined) =>
+    onSearchChange(next === undefined ? {} : { channel: next });
+
+  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-1 border-b bg-background px-3 py-3 sm:min-h-12 sm:flex-nowrap 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">
+          <HardDrive
+            aria-hidden="true"
+            className="size-3.5 text-muted-foreground"
+          />
+          <h1 className="text-sm font-medium">Native builds</h1>
+        </div>
+        <p className="basis-full pl-12 text-xs text-muted-foreground sm:basis-auto sm:pl-0">
+          Store and test builds, each the built-in bundle its OTAs patch from.
+        </p>
+      </header>
+
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <Card className="mx-auto w-full max-w-6xl overflow-hidden shadow-sm">
+          <div className="flex items-center gap-2 border-b px-4 py-3">
+            <Select
+              items={[
+                { label: "All channels", value: ALL_CHANNELS },
+                ...choices.map((name) => ({
+                  label: name,
+                  value: channelValue(name),
+                })),
+              ]}
+              onOpenChange={(open) => {
+                // A pull request's channel appears while the page is open.
+                if (open) void channels.refetch();
+              }}
+              onValueChange={(value) =>
+                filterBy(
+                  value?.startsWith(CHANNEL_VALUE_PREFIX)
+                    ? value.slice(CHANNEL_VALUE_PREFIX.length)
+                    : undefined,
+                )
+              }
+              value={
+                channel === undefined ? ALL_CHANNELS : channelValue(channel)
+              }
+            >
+              <SelectTrigger
+                aria-label="Channel"
+                className="h-11 min-w-0 flex-1 text-xs sm:h-8 sm:w-48 sm:flex-none"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value={ALL_CHANNELS}>All channels</SelectItem>
+                  {choices.map((name) => (
+                    <SelectItem
+                      key={name}
+                      translate="no"
+                      value={channelValue(name)}
+                    >
+                      {name}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <div className="ml-auto">
+              <ImportBuildDialog />
+            </div>
+            <Button
+              aria-label="Refresh native builds"
+              className="size-11 sm:size-7"
+              disabled={builds.isLoading}
+              onClick={() => void builds.refetch()}
+              size="icon-sm"
+              variant="ghost"
+            >
+              <RefreshCw aria-hidden="true" />
+            </Button>
+          </div>
+          <CardContent className="p-0">
+            <NativeBuildsTable
+              builds={builds}
+              channel={channel}
+              onChannel={filterBy}
+              onPage={(page) =>
+                onSearchChange({
+                  ...(channel === undefined ? {} : { channel }),
+                  ...page,
+                })
+              }
+              paged={before !== undefined || after !== undefined}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}