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

package/src/components/ui/tabs.tsx

@@ -0,0 +1,81 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      orientation={orientation}
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-xs/relaxed outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/index.ts

@@ -1,4 +1,5 @@
-import type { ConfigInput, DatabasePlugin } from "@hot-updater/plugin-core";
+import type { ConfigInput, ConfiguredDatabase } from "@hot-updater/plugin-core";
+import type { AnyHotUpdaterPlugin } from "@hot-updater/server/plugins";
 
 export type ConsoleAuthProvider = "google" | "github";
 
@@ -19,23 +20,17 @@ export type ConsoleAuthAdapter = Readonly<{
   getProviders(request: Request): Promise<readonly ConsoleAuthProvider[]>;
 }>;
 
-export type ConsoleSigningConfig = Readonly<{
-  enabled: boolean;
-  provider?: string;
-}>;
-
 export type HotUpdaterConsoleConfig = Readonly<
-  Omit<
-    Pick<ConfigInput, "console" | "database" | "signing" | "storage">,
-    "database"
-  > & {
-    database: DatabasePlugin;
-  }
->;
-
-export type ResolvedHotUpdaterConsoleConfig = Readonly<
-  Omit<HotUpdaterConsoleConfig, "signing"> & {
-    signing?: ConsoleSigningConfig;
+  Omit<Pick<ConfigInput, "console" | "database" | "storage">, "database"> & {
+    database: ConfiguredDatabase;
+    /**
+     * The plugins your server runs, such as `[insights(), apiKeys()]`. The
+     * console runs them over `database` to read Insights and manage API
+     * keys, and shows only the features of the plugins listed. A
+     * `standaloneRepository` database needs none: the console reads its
+     * server's plugins from the admin `/version`.
+     */
+    plugins?: readonly AnyHotUpdaterPlugin[];
   }
 >;
 

package/src/lib/api-keys-api.ts

@@ -1,43 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { QueryClient } from "@tanstack/react-query";
-import { redirect } from "@tanstack/react-router";
 
 import {
   createApiKeyRpc,
-  getApiKeyCapabilityRpc,
   listApiKeysRpc,
   revokeApiKeyRpc,
 } from "./api-keys-rpc";
 
 export const apiKeyQueryKeys = {
-  capability: ["api-keys", "capability"] as const,
   list: ["api-keys", "list"] as const,
 };
 
-export const getApiKeyCapabilityQueryOptions = () => ({
-  queryKey: apiKeyQueryKeys.capability,
-  queryFn: () => getApiKeyCapabilityRpc(),
-  staleTime: Infinity,
-});
-
-export const useApiKeyCapabilityQuery = () =>
-  useQuery(getApiKeyCapabilityQueryOptions());
-
-export const ensureApiKeyRouteAccess = async (
-  queryClient: QueryClient,
-): Promise<void> => {
-  const capability = await queryClient.ensureQueryData(
-    getApiKeyCapabilityQueryOptions(),
-  );
-  if (!capability.apiKeys) {
-    throw redirect({
-      to: "/",
-      search: {},
-      replace: true,
-    });
-  }
-};
-
 export const useApiKeysQuery = () =>
   useQuery({
     queryKey: apiKeyQueryKeys.list,

package/src/lib/api-keys-rpc.ts

@@ -1,7 +1,8 @@
-import type { ApiKeyRow } from "@hot-updater/plugin-core";
-import { createApiKey } from "@hot-updater/server";
+import type { ApiKeyRow } from "@hot-updater/server/plugins/api-keys";
 import { createServerFn } from "@tanstack/react-start";
 
+import { consoleAccess } from "./console-access";
+
 export type ApiKeyView = Omit<ApiKeyRow, "hash">;
 
 export const toApiKeyView = ({
@@ -31,43 +32,33 @@ const parseId = (input: unknown): { readonly id: string } => {
   return { id };
 };
 
-const requireStore = async () => {
-  const { prepareConfig } = await import("./server/config.server");
-  const { apiKeyStore } = await prepareConfig();
-  if (apiKeyStore === null) {
-    throw new Error(
-      "API keys are not supported by the configured database plugin.",
-    );
-  }
-  return apiKeyStore;
+/** API key management, once the console's access check and the feature guard pass. */
+const apiKeyManagement = async () => {
+  const [{ prepareConfig }, { requireFeature }] = await Promise.all([
+    import("./server/config.server"),
+    import("./server/runtime.server"),
+  ]);
+  const { runtime } = await prepareConfig();
+  return requireFeature(runtime, "apiKeys");
 };
 
-export const getApiKeyCapabilityRpc = createServerFn({
-  method: "GET",
-}).handler(async () => {
-  const { prepareConfig } = await import("./server/config.server");
-  const { apiKeyStore } = await prepareConfig();
-  return { apiKeys: apiKeyStore !== null } as const;
-});
-
 export const listApiKeysRpc = createServerFn({
   method: "GET",
-}).handler(async () => {
-  const store = await requireStore();
-  const records = await store.list();
-  return [...records]
-    .sort((left, right) => right.created_at_ms - left.created_at_ms)
-    .map(toApiKeyView);
-});
+})
+  .middleware([consoleAccess])
+  .handler(async (): Promise<ApiKeyView[]> => {
+    const apiKeys = await apiKeyManagement();
+    return [...(await apiKeys.list())].sort(
+      (left, right) => right.created_at_ms - left.created_at_ms,
+    );
+  });
 
 export const createApiKeyRpc = createServerFn({ method: "POST" })
+  .middleware([consoleAccess])
   .validator(parseName)
   .handler(async ({ data }) => {
-    const store = await requireStore();
-    const created = await createApiKey({
-      apiKeys: store,
-      name: data.name,
-    });
+    const apiKeys = await apiKeyManagement();
+    const created = await apiKeys.create({ name: data.name });
     return {
       apiKey: created.apiKey,
       record: created.record,
@@ -75,13 +66,11 @@ export const createApiKeyRpc = createServerFn({ method: "POST" })
   });
 
 export const revokeApiKeyRpc = createServerFn({ method: "POST" })
+  .middleware([consoleAccess])
   .validator(parseId)
-  .handler(async ({ data }) => {
-    const store = await requireStore();
-    const revoked = await store.revoke({
-      id: data.id,
-      revokedAtMs: Date.now(),
-    });
+  .handler(async ({ data }): Promise<ApiKeyView> => {
+    const apiKeys = await apiKeyManagement();
+    const revoked = await apiKeys.revoke({ id: data.id });
     if (revoked === null) throw new Error("API key not found.");
-    return toApiKeyView(revoked);
+    return revoked;
   });