@hot-updater/console 0.36.7 → 1.0.0-rc.0

package/src/components/features/bundles/BundleChildrenPanel.tsx

@@ -0,0 +1,201 @@
+import type { Bundle } from "@hot-updater/plugin-core";
+import { ArrowRight } from "lucide-react";
+
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { TimestampDisplay } from "@/components/TimestampDisplay";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+interface BundleChildrenPanelProps {
+  panelId: string;
+  bundle: Bundle;
+  bundles: Bundle[];
+  loading: boolean;
+  onDetailClick: (bundle: Bundle) => void;
+}
+
+export function BundleChildrenPanel({
+  panelId,
+  bundle,
+  bundles,
+  loading,
+  onDetailClick,
+}: BundleChildrenPanelProps) {
+  const isMobile = useIsMobile();
+
+  return (
+    <div
+      aria-live="polite"
+      className="border-t bg-muted/10 p-3 sm:p-4"
+      id={panelId}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-2 text-sm sm:items-center">
+            <span className="text-muted-foreground">Base bundle</span>
+            <BundleIdDisplay bundleId={bundle.id} fullOnMobile maxLength={18} />
+          </div>
+          <Badge variant="outline">
+            {bundles.length} {bundles.length === 1 ? "patch" : "patches"}
+          </Badge>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : bundles.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            <div className="text-xs font-semibold uppercase text-muted-foreground/70">
+              Patch bundles from this base
+            </div>
+            {isMobile ? (
+              <div className="flex flex-col gap-2">
+                {bundles.map((childBundle) => (
+                  <div
+                    className="rounded-md border bg-background p-3"
+                    key={childBundle.id}
+                  >
+                    <div className="flex flex-col gap-3">
+                      <div className="space-y-1">
+                        <div className="text-[11px] font-medium uppercase text-muted-foreground/70">
+                          Patch Bundle
+                        </div>
+                        <BundleIdDisplay
+                          bundleId={childBundle.id}
+                          fullOnMobile
+                          maxLength={18}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-[11px] font-medium uppercase text-muted-foreground/70">
+                          Relation
+                        </div>
+                        <div className="flex flex-col items-start gap-1 text-sm">
+                          <BundleIdDisplay
+                            bundleId={bundle.id}
+                            fullOnMobile
+                            maxLength={12}
+                          />
+                          <ArrowRight className="size-4 rotate-90 text-muted-foreground" />
+                          <BundleIdDisplay
+                            bundleId={childBundle.id}
+                            fullOnMobile
+                            maxLength={12}
+                          />
+                        </div>
+                      </div>
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="space-y-1">
+                          <div className="text-[11px] font-medium uppercase text-muted-foreground/70">
+                            Artifact
+                          </div>
+                          <Badge variant="secondary">bsdiff</Badge>
+                        </div>
+                        <div className="space-y-1 text-right">
+                          <div className="text-[11px] font-medium uppercase text-muted-foreground/70">
+                            Created
+                          </div>
+                          <div className="text-xs tabular-nums text-foreground">
+                            <TimestampDisplay uuid={childBundle.id} />
+                          </div>
+                        </div>
+                      </div>
+                      <Button
+                        className="w-full"
+                        onClick={() => onDetailClick(childBundle)}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                      >
+                        Detail
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="overflow-x-auto rounded-md border bg-background">
+                <Table className="min-w-max">
+                  <TableHeader>
+                    <TableRow className="hover:bg-transparent">
+                      <TableHead>Patch Bundle</TableHead>
+                      <TableHead>Relation</TableHead>
+                      <TableHead>Artifact</TableHead>
+                      <TableHead>Created</TableHead>
+                      <TableHead className="w-24 text-right">Detail</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {bundles.map((childBundle) => (
+                      <TableRow key={childBundle.id}>
+                        <TableCell>
+                          <BundleIdDisplay
+                            bundleId={childBundle.id}
+                            fullOnMobile
+                            maxLength={18}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex min-w-[280px] flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2">
+                            <BundleIdDisplay
+                              bundleId={bundle.id}
+                              fullOnMobile
+                              maxLength={12}
+                            />
+                            <ArrowRight className="size-4 shrink-0 rotate-90 text-muted-foreground sm:rotate-0" />
+                            <BundleIdDisplay
+                              bundleId={childBundle.id}
+                              fullOnMobile
+                              maxLength={12}
+                            />
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant="secondary">bsdiff</Badge>
+                        </TableCell>
+                        <TableCell className="tabular-nums">
+                          <TimestampDisplay uuid={childBundle.id} />
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            onClick={() => onDetailClick(childBundle)}
+                            size="sm"
+                            type="button"
+                            variant="outline"
+                          >
+                            Detail
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            <div className="text-xs font-semibold uppercase text-muted-foreground/70">
+              Patch bundles from this base
+            </div>
+            <div className="rounded-md border bg-background p-3 text-sm text-muted-foreground">
+              No direct patch bundles.
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/features/bundles/BundleMetadata.tsx

@@ -0,0 +1,136 @@
+import {
+  getPatchBaseBundleId,
+  getPatchBaseFileHash,
+  getPatchFileHash,
+} from "@hot-updater/core";
+import type { Bundle, ReleaseRow } from "@hot-updater/plugin-core";
+import { ExternalLink } from "lucide-react";
+
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { HashValueDisplay } from "@/components/HashValueDisplay";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useConfigQuery } from "@/lib/api";
+import { getCommitUrl } from "@/lib/git";
+
+interface BundleMetadataProps {
+  readonly bundle: Bundle | null | undefined;
+  readonly release: ReleaseRow;
+}
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1.5 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="min-w-0 text-left text-sm sm:text-right">{value}</dd>
+    </div>
+  );
+}
+
+export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
+  const { data: configData, isFetched } = useConfigQuery();
+  const patchBaseBundleId = bundle ? getPatchBaseBundleId(bundle) : null;
+  const hbcPatchFileHash = bundle ? getPatchFileHash(bundle) : null;
+  const hbcPatchBaseFileHash = bundle ? getPatchBaseFileHash(bundle) : null;
+  const gitCommitUrl =
+    bundle?.gitCommitHash && isFetched
+      ? getCommitUrl(configData?.console.gitUrl, bundle.gitCommitHash)
+      : null;
+  const target =
+    release.strategy === "APP_VERSION"
+      ? release.target_app_version
+      : release.fingerprint_hash;
+  const hasMetadata =
+    target ||
+    bundle?.gitCommitHash ||
+    bundle?.fileHash ||
+    patchBaseBundleId ||
+    hbcPatchBaseFileHash ||
+    hbcPatchFileHash;
+
+  if (!hasMetadata) return null;
+
+  return (
+    <Card>
+      <CardHeader className="p-4 pb-3">
+        <CardTitle className="text-sm font-medium">Metadata</CardTitle>
+      </CardHeader>
+      <CardContent className="px-4 pb-4">
+        <dl className="flex flex-col gap-3 text-sm">
+          <Row
+            label={
+              release.strategy === "APP_VERSION"
+                ? "Target app version"
+                : "Fingerprint target"
+            }
+            value={
+              <span className="break-all font-mono text-xs" translate="no">
+                {target ?? "—"}
+              </span>
+            }
+          />
+          {bundle?.gitCommitHash ? (
+            <Row
+              label="Git commit"
+              value={
+                <div className="flex items-center justify-start gap-1 sm:justify-end">
+                  <HashValueDisplay
+                    className={gitCommitUrl ? "text-primary" : undefined}
+                    maxLength={12}
+                    value={bundle.gitCommitHash}
+                  />
+                  {gitCommitUrl ? (
+                    <a
+                      aria-label="Open git commit"
+                      className="shrink-0 text-primary hover:underline"
+                      href={gitCommitUrl}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      <ExternalLink aria-hidden="true" />
+                    </a>
+                  ) : null}
+                </div>
+              }
+            />
+          ) : null}
+          {bundle?.fileHash ? (
+            <Row
+              label="Bundle hash"
+              value={
+                <HashValueDisplay maxLength={16} value={bundle.fileHash} />
+              }
+            />
+          ) : null}
+          {patchBaseBundleId ? (
+            <Row
+              label="Patch base"
+              value={
+                <BundleIdDisplay
+                  bundleId={patchBaseBundleId}
+                  fullOnMobile
+                  maxLength={18}
+                />
+              }
+            />
+          ) : null}
+          {hbcPatchBaseFileHash ? (
+            <Row
+              label="Base hash"
+              value={
+                <HashValueDisplay maxLength={16} value={hbcPatchBaseFileHash} />
+              }
+            />
+          ) : null}
+          {hbcPatchFileHash ? (
+            <Row
+              label="Patch hash"
+              value={
+                <HashValueDisplay maxLength={16} value={hbcPatchFileHash} />
+              }
+            />
+          ) : null}
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/features/bundles/RolloutCohortsDialog.tsx

@@ -0,0 +1,201 @@
+import {
+  getNumericCohortRolloutPosition,
+  NUMERIC_COHORT_SIZE,
+  normalizeRolloutCohortCount,
+} from "@hot-updater/core";
+import { List } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+interface RolloutCohortsDialogProps {
+  readonly releaseId: string;
+  readonly rolloutCohortCount: number | null | undefined;
+  readonly targetCohorts?: readonly string[] | null | undefined;
+}
+
+const ALL_NUMERIC_COHORTS = Array.from(
+  { length: NUMERIC_COHORT_SIZE },
+  (_, index) => index + 1,
+);
+
+export function RolloutCohortsDialog({
+  releaseId,
+  rolloutCohortCount,
+  targetCohorts,
+}: RolloutCohortsDialogProps) {
+  const normalizedRolloutCount =
+    normalizeRolloutCohortCount(rolloutCohortCount);
+  const normalizedTargetCohorts = targetCohorts ?? [];
+  const hasTargetCohorts = normalizedTargetCohorts.length > 0;
+  const isPartialRollout =
+    normalizedRolloutCount > 0 && normalizedRolloutCount < NUMERIC_COHORT_SIZE;
+  const isFullRollout = normalizedRolloutCount === NUMERIC_COHORT_SIZE;
+  const isMobile = useIsMobile();
+
+  const rolloutCohorts = isFullRollout
+    ? ALL_NUMERIC_COHORTS
+    : isPartialRollout
+      ? ALL_NUMERIC_COHORTS.filter(
+          (cohortValue) =>
+            getNumericCohortRolloutPosition(releaseId, cohortValue) <
+            normalizedRolloutCount,
+        )
+      : [];
+  const rolloutPercentage = (normalizedRolloutCount / 10).toFixed(1);
+  const selectedCount = isFullRollout
+    ? NUMERIC_COHORT_SIZE
+    : rolloutCohorts.length;
+  const excludedCount = NUMERIC_COHORT_SIZE - selectedCount;
+
+  const dialogBody = (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-2 gap-3">
+        <Card>
+          <CardHeader className="p-4">
+            <CardDescription>Selected cohorts</CardDescription>
+            <CardTitle className="font-mono text-2xl tabular-nums">
+              {selectedCount}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="p-4">
+            <CardDescription>Excluded cohorts</CardDescription>
+            <CardTitle className="font-mono text-2xl tabular-nums">
+              {excludedCount}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {hasTargetCohorts ? (
+        <Card>
+          <CardHeader className="p-4 pb-3">
+            <CardTitle className="text-sm">Additional cohorts</CardTitle>
+            <CardDescription>
+              Always included in addition to the percentage rollout.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <div className="flex flex-wrap gap-2 rounded-lg border bg-muted/20 p-3">
+              {normalizedTargetCohorts.map((cohort) => (
+                <Badge
+                  className="max-w-full font-mono"
+                  key={cohort}
+                  variant="secondary"
+                >
+                  <span className="truncate">{cohort}</span>
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <Card>
+        <CardHeader className="p-4 pb-3">
+          <CardTitle className="text-sm">Numeric cohorts</CardTitle>
+        </CardHeader>
+        <CardContent className="p-4 pt-0">
+          <div className="max-h-[50vh] overflow-y-auto overscroll-contain rounded-lg border bg-muted/20 p-3 sm:max-h-[45vh]">
+            {rolloutCohorts.length > 0 ? (
+              <div
+                aria-label="Included numeric cohorts"
+                className="grid grid-cols-3 gap-2 sm:grid-cols-6 lg:grid-cols-8"
+                role="list"
+              >
+                {rolloutCohorts.map((cohortValue) => (
+                  <Badge
+                    className="justify-center font-mono tabular-nums"
+                    key={cohortValue}
+                    role="listitem"
+                    variant="outline"
+                  >
+                    {cohortValue}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                No numeric cohorts are included.
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        render={<Button size="sm" type="button" variant="outline" />}
+      >
+        <List data-icon="inline-start" />
+        Preview cohorts
+      </DialogTrigger>
+      <DialogContent
+        className={
+          isMobile
+            ? "top-0 left-0 h-dvh max-w-none translate-x-0 translate-y-0 rounded-none border-0 p-0"
+            : "sm:max-w-3xl"
+        }
+      >
+        {isMobile ? (
+          <div className="flex h-full flex-col overflow-hidden">
+            <DialogHeader className="shrink-0 border-b border-border/70 px-4 py-4">
+              <DialogTitle>Rolled out cohorts</DialogTitle>
+              <DialogDescription>
+                {rolloutPercentage}% includes {selectedCount} of{" "}
+                {NUMERIC_COHORT_SIZE} numeric cohorts.
+                {hasTargetCohorts
+                  ? " Additional cohorts are always included."
+                  : ""}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-4">
+              {dialogBody}
+            </div>
+            <DialogFooter
+              className="shrink-0 border-t border-border/70 px-4 py-3"
+              showCloseButton
+            />
+          </div>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>Rolled out cohorts</DialogTitle>
+              <DialogDescription>
+                {rolloutPercentage}% includes {selectedCount} of{" "}
+                {NUMERIC_COHORT_SIZE} numeric cohorts.
+                {hasTargetCohorts
+                  ? " Additional cohorts are always included."
+                  : ""}
+              </DialogDescription>
+            </DialogHeader>
+            {dialogBody}
+            <DialogFooter showCloseButton />
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}