@hot-updater/console 1.0.0-rc.2 → 1.0.0-rc.21

package/src/routes/-releases-search.ts

@@ -1,13 +1,17 @@
+import type { ReleaseFilter } from "@hot-updater/plugin-core";
+
 export interface ReleaseSearch {
+  /** Releases newer than this id: the previous page. */
   afterReleaseId?: string;
+  /** Releases older than this id: the next page. */
   beforeReleaseId?: string;
   bundleId?: string;
   channelId?: string;
   enabled?: boolean;
-  page?: number;
   platform?: "ios" | "android";
   releaseId?: string;
-  targetAppVersion?: string;
+  /** One catalog scope: a channel, platform, and target kind. */
+  scopeKey?: string;
 }
 
 const optionalString = (value: unknown) =>
@@ -15,15 +19,14 @@ const optionalString = (value: unknown) =>
     ? value.trim()
     : undefined;
 
+/**
+ * The search a URL holds, reduced to one of the filter sets the release
+ * indexes serve: a bundle, a scope (with enabled), or a channel with its
+ * platform (with enabled). A channel without a platform lists iOS.
+ */
 export function validateReleaseSearch(
   search: Record<string, unknown>,
 ): ReleaseSearch {
-  const parsedPage =
-    typeof search.page === "number"
-      ? search.page
-      : typeof search.page === "string"
-        ? Number(search.page)
-        : undefined;
   const beforeReleaseId = optionalString(search.beforeReleaseId);
   const afterReleaseId = beforeReleaseId
     ? undefined
@@ -34,41 +37,85 @@ export function validateReleaseSearch(
       : search.enabled === false || search.enabled === "false"
         ? false
         : undefined;
+  const bundleId = optionalString(search.bundleId);
+  const scopeKey = bundleId ? undefined : optionalString(search.scopeKey);
+  const channelId =
+    bundleId || scopeKey ? undefined : optionalString(search.channelId);
+  const platform =
+    channelId === undefined
+      ? undefined
+      : search.platform === "android"
+        ? "android"
+        : "ios";
 
   return {
     afterReleaseId,
     beforeReleaseId,
-    bundleId: optionalString(search.bundleId),
-    channelId: optionalString(search.channelId),
-    enabled,
-    page:
-      parsedPage !== undefined && Number.isInteger(parsedPage) && parsedPage > 1
-        ? parsedPage
-        : undefined,
-    platform:
-      search.platform === "ios" || search.platform === "android"
-        ? search.platform
-        : undefined,
+    bundleId,
+    channelId,
+    enabled: scopeKey || channelId ? enabled : undefined,
+    platform,
     releaseId: optionalString(search.releaseId),
-    targetAppVersion: optionalString(search.targetAppVersion),
+    scopeKey,
   };
 }
 
+export function releaseFilterOf(search: ReleaseSearch): ReleaseFilter {
+  const enabled =
+    search.enabled === undefined ? {} : { enabled: search.enabled };
+  if (search.bundleId) return { kind: "bundle", bundleId: search.bundleId };
+  if (search.scopeKey) {
+    return { kind: "scope", scopeKey: search.scopeKey, ...enabled };
+  }
+  if (search.channelId && search.platform) {
+    return {
+      kind: "channelPlatform",
+      channelId: search.channelId,
+      platform: search.platform,
+      ...enabled,
+    };
+  }
+  return { kind: "all" };
+}
+
+export function hasReleaseFilters(search: ReleaseSearch): boolean {
+  return releaseFilterOf(search).kind !== "all";
+}
+
+/**
+ * A new filter starts from the first page. A bundle or scope filter replaces
+ * the others, and choosing a channel or platform clears them.
+ */
 export function updateReleaseFilters(
   current: ReleaseSearch,
   filters: Partial<
     Pick<
       ReleaseSearch,
-      "bundleId" | "channelId" | "enabled" | "platform" | "targetAppVersion"
+      "bundleId" | "channelId" | "enabled" | "platform" | "scopeKey"
     >
   >,
 ): ReleaseSearch {
-  return {
-    ...current,
-    ...filters,
-    afterReleaseId: undefined,
-    beforeReleaseId: undefined,
-    page: undefined,
-    releaseId: undefined,
-  };
+  const next = { ...current, ...filters };
+  if (filters.bundleId)
+    return validateReleaseSearch({ bundleId: next.bundleId });
+  if (filters.scopeKey) {
+    return validateReleaseSearch({
+      scopeKey: next.scopeKey,
+      enabled: next.enabled,
+    });
+  }
+  if ("channelId" in filters || "platform" in filters) {
+    return validateReleaseSearch({
+      channelId: next.channelId,
+      enabled: next.enabled,
+      platform: next.platform,
+    });
+  }
+  return validateReleaseSearch({
+    bundleId: next.bundleId,
+    channelId: next.channelId,
+    enabled: next.enabled,
+    platform: next.platform,
+    scopeKey: next.scopeKey,
+  });
 }

package/src/routes/__root.tsx

@@ -18,6 +18,7 @@ import {
   getConsoleAccessRpc,
   getConsoleAuthProvidersRpc,
 } from "@/lib/auth-rpc";
+import { consoleFeaturesQueryOptions } from "@/lib/console-features-api";
 
 import appCss from "../styles.css?url";
 
@@ -60,11 +61,16 @@ export const Route = createRootRouteWithContext<{
     ],
   }),
 
-  loader: async () => {
+  loader: async ({ context }) => {
     const [access, providers] = await Promise.all([
       getConsoleAccessRpc(),
       getConsoleAuthProvidersRpc(),
     ]);
+    // The authorized layout's navigation shows only the features on, so they
+    // load with it; the query keeps them for the visit.
+    if (access.status === "authorized") {
+      await context.queryClient.prefetchQuery(consoleFeaturesQueryOptions());
+    }
     return { access, providers };
   },
 
@@ -140,10 +146,10 @@ function RootLayout() {
     return <ConsoleAccessPage access={access} providers={providers} />;
   }
 
-  return <AuthorizedConsole />;
+  return <AuthorizedConsole canSignOut={providers.length > 0} />;
 }
 
-function AuthorizedConsole() {
+function AuthorizedConsole({ canSignOut }: { canSignOut: boolean }) {
   useEffect(() => {
     if (
       import.meta.env.DEV &&
@@ -155,7 +161,7 @@ function AuthorizedConsole() {
   }, []);
   return (
     <SidebarProvider>
-      <AppSidebar />
+      <AppSidebar canSignOut={canSignOut} />
       <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
         <Outlet />
       </SidebarInset>

package/src/routes/api/bundles/$bundleId/download.ts

@@ -6,11 +6,8 @@ export const Route = createFileRoute("/api/bundles/$bundleId/download")({
       GET: async ({ params, request }) => {
         const { prepareConfig } = await import("@/lib/server/config.server");
         const { downloadBundle } = await import("@/lib/server/downloadBundle");
-        const { databaseClient, storagePlugin } = await prepareConfig(request);
-        return downloadBundle(params.bundleId, {
-          databaseClient,
-          storagePlugin,
-        });
+        const { core, storage } = await prepareConfig(request);
+        return downloadBundle(params.bundleId, { core, storage });
       },
     },
   },

package/src/routes/api-keys.tsx

@@ -1,12 +1,15 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { KeyRound } from "lucide-react";
 
+import { ConsoleFeatureUnavailable } from "@/components/ConsoleFeatureUnavailable";
 import { ApiKeysPage } from "@/components/features/api-keys/ApiKeysPage";
 import { SidebarTrigger } from "@/components/ui/sidebar";
-import { ensureApiKeyRouteAccess } from "@/lib/api-keys-api";
+import { requireConsoleFeature } from "@/lib/console-features-api";
 
 export const Route = createFileRoute("/api-keys")({
-  beforeLoad: ({ context }) => ensureApiKeyRouteAccess(context.queryClient),
+  beforeLoad: ({ context }) =>
+    requireConsoleFeature(context.queryClient, "apiKeys"),
+  notFoundComponent: ConsoleFeatureUnavailable,
   component: ApiKeysRoute,
 });
 

package/src/routes/index.tsx

@@ -20,6 +20,7 @@ import { ChannelBadge } from "@/components/ChannelBadge";
 import { EnabledStatusIcon } from "@/components/EnabledStatusIcon";
 import { BundleChildrenPanel } from "@/components/features/bundles/BundleChildrenPanel";
 import { ChannelManagementDialog } from "@/components/features/channels/ChannelManagementDialog";
+import { useReleaseColumns } from "@/components/features/FeatureSlots";
 import { ReleaseEditorSheet } from "@/components/features/releases/ReleaseEditorSheet";
 import { ReleaseStateBadge } from "@/components/features/releases/ReleaseStateBadge";
 import { HashValueDisplay } from "@/components/HashValueDisplay";
@@ -28,7 +29,6 @@ import { RolloutPercentageBadge } from "@/components/RolloutPercentageBadge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -59,6 +59,8 @@ import type { ReleaseListRow } from "@/lib/server/releaseReachability";
 import { cn } from "@/lib/utils";
 
 import {
+  hasReleaseFilters,
+  releaseFilterOf,
   type ReleaseSearch,
   updateReleaseFilters,
   validateReleaseSearch,
@@ -66,10 +68,14 @@ import {
 
 const PAGE_SIZE = 20;
 const platformFilterItems = [
-  { label: "All Platforms", value: "all" },
   { label: "iOS", value: "ios" },
   { label: "Android", value: "android" },
 ];
+const statusFilterItems = [
+  { label: "Any Status", value: "all" },
+  { label: "Enabled", value: "enabled" },
+  { label: "Disabled", value: "disabled" },
+];
 const dateFormatter = new Intl.DateTimeFormat(undefined, {
   dateStyle: "medium",
   timeStyle: "short",
@@ -96,16 +102,9 @@ function BundleFilterToolbar({
   onManageChannels: () => void;
   search: ReleaseSearch;
 }) {
-  const [targetAppVersion, setTargetAppVersion] = useState(
-    search.targetAppVersion ?? "",
-  );
-  const hasFilters = Boolean(
-    search.bundleId ||
-    search.channelId ||
-    search.enabled !== undefined ||
-    search.platform ||
-    search.targetAppVersion,
-  );
+  const hasFilters = hasReleaseFilters(search);
+  // Releases list by channel and platform together: the index serves that pair.
+  const channelSelected = search.channelId !== undefined;
   const channelFilterItems = [
     { label: "All Channels", value: "all" },
     ...channels.map((channel) => ({
@@ -113,14 +112,6 @@ function BundleFilterToolbar({
       value: channel.id,
     })),
   ];
-  const applyTargetAppVersion = () => {
-    const value = targetAppVersion.trim();
-    onChange({ targetAppVersion: value || undefined });
-  };
-
-  useEffect(() => {
-    setTargetAppVersion(search.targetAppVersion ?? "");
-  }, [search.targetAppVersion]);
 
   return (
     <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-2 border-b bg-background px-3 py-3 sm:h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 sm:py-0 sm:backdrop-blur-sm">
@@ -131,65 +122,85 @@ function BundleFilterToolbar({
         <span className="text-xs font-medium">Filters</span>
       </div>
       <Select
-        items={platformFilterItems}
+        items={channelFilterItems}
         onValueChange={(value) =>
           onChange({
-            platform:
-              value === "all" ? undefined : (value as "ios" | "android"),
+            channelId: value === null || value === "all" ? undefined : value,
           })
         }
-        value={search.platform ?? "all"}
+        value={search.channelId ?? "all"}
+      >
+        <SelectTrigger
+          aria-label="Channel"
+          className="h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]"
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="all">All Channels</SelectItem>
+            {channels.map((channel) => (
+              <SelectItem key={channel.id} value={channel.id}>
+                {channel.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select
+        disabled={!channelSelected}
+        items={platformFilterItems}
+        onValueChange={(value) =>
+          onChange({ platform: value === "android" ? "android" : "ios" })
+        }
+        value={search.platform ?? "ios"}
       >
         <SelectTrigger
           aria-label="Platform"
           className="h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]"
+          title={channelSelected ? undefined : "Choose a channel first"}
         >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value="all">All Platforms</SelectItem>
             <SelectItem value="ios">iOS</SelectItem>
             <SelectItem value="android">Android</SelectItem>
           </SelectGroup>
         </SelectContent>
       </Select>
-      <Input
-        aria-label="Target app version"
-        className="h-8 w-full min-w-[132px] text-xs sm:w-[160px]"
-        onBlur={applyTargetAppVersion}
-        onChange={(event) => setTargetAppVersion(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter") {
-            applyTargetAppVersion();
-          }
-        }}
-        placeholder="Target version"
-        value={targetAppVersion}
-      />
       <Select
-        items={channelFilterItems}
+        disabled={!channelSelected && search.scopeKey === undefined}
+        items={statusFilterItems}
         onValueChange={(value) =>
           onChange({
-            channelId: value === null || value === "all" ? undefined : value,
+            enabled:
+              value === "enabled"
+                ? true
+                : value === "disabled"
+                  ? false
+                  : undefined,
           })
         }
-        value={search.channelId ?? "all"}
+        value={
+          search.enabled === undefined
+            ? "all"
+            : search.enabled
+              ? "enabled"
+              : "disabled"
+        }
       >
         <SelectTrigger
-          aria-label="Channel"
+          aria-label="Status"
           className="h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]"
         >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value="all">All Channels</SelectItem>
-            {channels.map((channel) => (
-              <SelectItem key={channel.id} value={channel.id}>
-                {channel.name}
-              </SelectItem>
-            ))}
+            <SelectItem value="all">Any Status</SelectItem>
+            <SelectItem value="enabled">Enabled</SelectItem>
+            <SelectItem value="disabled">Disabled</SelectItem>
           </SelectGroup>
         </SelectContent>
       </Select>
@@ -215,6 +226,19 @@ function BundleFilterToolbar({
           </button>
         </Badge>
       ) : null}
+      {search.scopeKey ? (
+        <Badge className="max-w-48 gap-1" variant="secondary">
+          Target filter
+          <button
+            aria-label="Clear target filter"
+            className="rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => onChange({ scopeKey: undefined })}
+            type="button"
+          >
+            <X className="size-3" />
+          </button>
+        </Badge>
+      ) : null}
       {hasFilters ? (
         <Button
           className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground sm:ml-auto"
@@ -374,13 +398,8 @@ function BundlesPage() {
   const releasesQuery = useReleasesQuery({
     afterReleaseId: search.afterReleaseId,
     beforeReleaseId: search.beforeReleaseId,
-    bundleId: search.bundleId,
-    channelId: search.channelId,
-    enabled: search.enabled,
+    filter: releaseFilterOf(search),
     limit: PAGE_SIZE,
-    page: search.page,
-    platform: search.platform,
-    targetAppVersion: search.targetAppVersion,
   });
   const channelsQuery = useChannelsQuery();
   const channels = channelsQuery.data ?? [];
@@ -394,7 +413,19 @@ function BundlesPage() {
   );
   const patchCountsQuery = useBundleChildCountsQuery(bundleIds);
   const patchCountsByBundleId = patchCountsQuery.data ?? {};
-  const pagination = releasesQuery.data?.pagination;
+  const nextCursor = releasesQuery.data?.next;
+  const previousCursor = releasesQuery.data?.previous;
+  const slotReleases = releases.flatMap((release) => {
+    const channel = channels.find(
+      (item) => item.id === release.channel_id,
+    )?.name;
+    return channel
+      ? [{ releaseId: release.id, platform: release.platform, channel }]
+      : [];
+  });
+  // Features add columns, such as release activity where the console reads it.
+  const featureColumns = useReleaseColumns();
+  const columnCount = 10 + featureColumns.length;
   const channelNames = new Map(
     channels.map((channel) => [channel.id, channel.name]),
   );
@@ -423,33 +454,31 @@ function BundlesPage() {
     }
     changeFilters({ bundleId: bundle.id });
   };
-  const currentPage = pagination?.currentPage ?? 1;
-  const startEntry =
-    releases.length === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1;
-  const endEntry = startEntry === 0 ? 0 : startEntry + releases.length - 1;
-  const previousPage = currentPage - 1;
-  const firstReleaseId = releases[0]?.id;
-  const lastReleaseId = releases.at(-1)?.id;
-  const previousSearch: ReleaseSearch | null =
-    pagination?.hasPreviousPage && firstReleaseId
-      ? {
-          ...search,
-          afterReleaseId: firstReleaseId,
-          beforeReleaseId: undefined,
-          page: previousPage > 1 ? previousPage : undefined,
-          releaseId: undefined,
-        }
-      : null;
-  const nextSearch: ReleaseSearch | null =
-    pagination?.hasNextPage && lastReleaseId
-      ? {
-          ...search,
-          afterReleaseId: undefined,
-          beforeReleaseId: lastReleaseId,
-          page: currentPage + 1,
-          releaseId: undefined,
-        }
-      : null;
+  // Pages go by key: newer or older than an edge release, never by number.
+  const onLaterPage =
+    search.afterReleaseId !== undefined || search.beforeReleaseId !== undefined;
+  const previousSearch: ReleaseSearch | null = previousCursor
+    ? {
+        ...search,
+        afterReleaseId: previousCursor,
+        beforeReleaseId: undefined,
+        releaseId: undefined,
+      }
+    : null;
+  const nextSearch: ReleaseSearch | null = nextCursor
+    ? {
+        ...search,
+        afterReleaseId: undefined,
+        beforeReleaseId: nextCursor,
+        releaseId: undefined,
+      }
+    : null;
+  const newestSearch: ReleaseSearch = {
+    ...search,
+    afterReleaseId: undefined,
+    beforeReleaseId: undefined,
+    releaseId: undefined,
+  };
 
   return (
     <div className="flex h-svh min-h-0 min-w-0 flex-col">
@@ -556,6 +585,22 @@ function BundlesPage() {
                                     : "—"}
                               </dd>
                             </div>
+                            {featureColumns.map(({ Cell, feature, label }) => (
+                              <div
+                                className="col-span-2 rounded-md bg-muted/40 p-3"
+                                key={feature}
+                              >
+                                <dt className="mb-2 text-muted-foreground">
+                                  {label}
+                                </dt>
+                                <dd>
+                                  <Cell
+                                    releaseId={release.id}
+                                    releases={slotReleases}
+                                  />
+                                </dd>
+                              </div>
+                            ))}
                             <div className="col-span-2 flex flex-wrap items-center gap-2 rounded-md bg-muted/40 p-3">
                               <ReleaseStateBadge release={release} />
                               {release.should_force_update ? (
@@ -596,13 +641,11 @@ function BundlesPage() {
                   })
                 ) : (
                   <p className="p-8 text-center text-sm text-muted-foreground">
-                    {search.bundleId ||
-                    search.channelId ||
-                    search.enabled !== undefined ||
-                    search.platform ||
-                    search.targetAppVersion
-                      ? "No bundles match these filters."
-                      : "No bundles yet. Deploy an update to see it here."}
+                    {onLaterPage
+                      ? "No more bundles on this side."
+                      : hasReleaseFilters(search)
+                        ? "No bundles match these filters."
+                        : "No bundles yet. Deploy an update to see it here."}
                   </p>
                 )}
               </div>
@@ -618,6 +661,9 @@ function BundlesPage() {
                     <TableHead>Enabled</TableHead>
                     <TableHead>Force update</TableHead>
                     <TableHead>Rollout</TableHead>
+                    {featureColumns.map(({ feature, label }) => (
+                      <TableHead key={feature}>{label}</TableHead>
+                    ))}
                     <TableHead>Message</TableHead>
                     <TableHead>Created</TableHead>
                   </TableRow>
@@ -626,7 +672,7 @@ function BundlesPage() {
                   {releasesQuery.isPending
                     ? Array.from({ length: 7 }, (_, index) => (
                         <TableRow key={index}>
-                          <TableCell colSpan={10}>
+                          <TableCell colSpan={columnCount}>
                             <Skeleton className="h-8 w-full" />
                           </TableCell>
                         </TableRow>
@@ -783,6 +829,14 @@ function BundlesPage() {
                                   percentage={release.rollout_cohort_count / 10}
                                 />
                               </TableCell>
+                              {featureColumns.map(({ Cell, feature }) => (
+                                <TableCell key={feature}>
+                                  <Cell
+                                    releaseId={release.id}
+                                    releases={slotReleases}
+                                  />
+                                </TableCell>
+                              ))}
                               <TableCell
                                 className="text-sm text-muted-foreground"
                                 title={release.message ?? undefined}
@@ -804,7 +858,7 @@ function BundlesPage() {
                               <TableRow className="hover:bg-transparent">
                                 <TableCell
                                   className="border-t-0 p-0"
-                                  colSpan={10}
+                                  colSpan={columnCount}
                                 >
                                   <ReleaseBundleChildrenPanel
                                     onDetailClick={openChildBundle}
@@ -821,15 +875,13 @@ function BundlesPage() {
                     <TableRow>
                       <TableCell
                         className="h-40 text-center text-muted-foreground"
-                        colSpan={10}
+                        colSpan={columnCount}
                       >
-                        {search.bundleId ||
-                        search.channelId ||
-                        search.enabled !== undefined ||
-                        search.platform ||
-                        search.targetAppVersion
-                          ? "No bundles match these filters."
-                          : "No bundles yet. Deploy an update to see it here."}
+                        {onLaterPage
+                          ? "No more bundles on this side."
+                          : hasReleaseFilters(search)
+                            ? "No bundles match these filters."
+                            : "No bundles yet. Deploy an update to see it here."}
                       </TableCell>
                     </TableRow>
                   ) : null}
@@ -845,13 +897,23 @@ function BundlesPage() {
             className="flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between"
           >
             <p className="text-xs font-medium text-muted-foreground">
-              Showing <span className="text-foreground">{startEntry}</span> to{" "}
-              <span className="text-foreground">{endEntry}</span> entries
+              <span className="text-foreground">{releases.length}</span>{" "}
+              {releases.length === 1 ? "entry" : "entries"}, newest first
             </p>
             <div className="flex flex-wrap items-center gap-3 sm:justify-end">
-              <p className="text-xs font-medium text-muted-foreground">
-                Page <span className="text-foreground">{currentPage}</span>
-              </p>
+              {onLaterPage ? (
+                <Link
+                  className={buttonVariants({
+                    className: "h-8 flex-1 px-3 text-xs sm:flex-none",
+                    size: "sm",
+                    variant: "ghost",
+                  })}
+                  search={newestSearch}
+                  to="/"
+                >
+                  Newest
+                </Link>
+              ) : null}
               {previousSearch ? (
                 <Link
                   className={buttonVariants({
@@ -910,6 +972,7 @@ function BundlesPage() {
         onOpenChange={(open) =>
           !open && go({ ...search, releaseId: undefined }, false)
         }
+        onShowScope={(scopeKey) => changeFilters({ scopeKey })}
         open={Boolean(search.releaseId)}
         releaseId={search.releaseId ?? ""}
       />