@bygghammar/cms-platform 0.93.0 → 0.94.0

package/src/backoffice/routes/index.tsx

@@ -26,7 +26,7 @@ import {
   Users,
 } from "lucide-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useServerFn } from "@tanstack/react-start";
 
 import { MISSING_CREATED_ID } from "../../tracking/injections";
@@ -48,13 +48,16 @@ import { SitemapView, type SitemapCheck } from "../SitemapView";
 import { SiteSettingsView } from "../SiteSettingsView";
 import { TrackingView, type TrackingDeps } from "../TrackingView";
 import { UsersView } from "../UsersView";
-import { VersionView } from "../VersionView";
+import { VersionView, type PlatformBuildInfo, type PlatformRelease } from "../VersionView";
+import { moduleInventory, type ModuleSettingsRead } from "../../admin/module-inventory";
+import type { VersionReport } from "../../admin/version-report";
 import { parseEffectiveAdminHost } from "../../site/locale-domains";
 import {
   useFeatureEnabled,
   useFeatureGate,
   useModuleGate,
   useMyRoles,
+  useResolvedSiteConfig,
 } from "../shell/use-resolved-config";
 import { backofficeHost, backofficePaths } from "./host";
 
@@ -127,14 +130,96 @@ export function UsersRoute() {
   );
 }
 
-/** CMS build and platform version screen. */
+type SystemVersionPayload = {
+  build?: PlatformBuildInfo;
+  releases?: PlatformRelease[];
+  /** Present from hosts that build it with `buildVersionReport`. */
+  report?: VersionReport;
+};
+
+const SYSTEM_VERSION_QUERY_KEY = ["admin", "system-version"] as const;
+
+/**
+ * Release, package and module screen.
+ *
+ * Read-only: it shows the module switches, it never changes them. The version
+ * read is not polled — no refetch on focus, a five-minute stale time — and a
+ * manual check goes through the server, which applies its own minimum
+ * interval before asking the registry again.
+ */
 export function VersionRoute() {
-  const { fns } = backofficeHost();
-  const fetchVersion = useServerFn(fns.getSystemVersion);
-  const q = useQuery({ queryKey: ["admin", "system-version"], queryFn: () => fetchVersion() });
+  const host = backofficeHost();
+  const paths = backofficePaths(host);
+  const fetchVersion = useServerFn(host.fns.getSystemVersion);
+  const queryClient = useQueryClient();
+  const q = useQuery({
+    queryKey: SYSTEM_VERSION_QUERY_KEY,
+    queryFn: () => fetchVersion({ data: { refresh: false } }) as Promise<SystemVersionPayload>,
+    staleTime: 5 * 60_000,
+    refetchOnWindowFocus: false,
+    retry: 1,
+  });
+  const refreshing = useRef(false);
+  const [isRefreshing, setRefreshing] = useState(false);
+  // The `dataUpdatedAt` of the answer that was on screen when a "Check again"
+  // failed. The failure notice shows while that same answer is still shown, so
+  // any later successful answer (a retry or a re-read) clears it.
+  const [refreshFailedFor, setRefreshFailedFor] = useState<number | null>(null);
+  const refresh = useCallback(async () => {
+    if (refreshing.current) return;
+    refreshing.current = true;
+    setRefreshing(true);
+    try {
+      const next = (await fetchVersion({ data: { refresh: true } })) as SystemVersionPayload;
+      queryClient.setQueryData(SYSTEM_VERSION_QUERY_KEY, next);
+      setRefreshFailedFor(null);
+    } catch {
+      // Keep the last answer on screen, but say the check failed. The error
+      // itself (an expired session, a network failure) is not shown.
+      setRefreshFailedFor(queryClient.getQueryState(SYSTEM_VERSION_QUERY_KEY)?.dataUpdatedAt ?? 0);
+    } finally {
+      refreshing.current = false;
+      setRefreshing(false);
+    }
+  }, [fetchVersion, queryClient]);
+
+  const settings = useResolvedSiteConfig();
+  const settingsRead: ModuleSettingsRead =
+    settings.status === "loading"
+      ? { state: "loading" }
+      : settings.status === "error"
+        ? { state: "error" }
+        : { state: "ready", features: settings.config.features, stale: settings.status === "stale" };
+  const report = q.data?.report && q.data.report.schemaVersion === 1 ? q.data.report : null;
+  const cmsVersion =
+    report?.packages.find((p) => p.role === "cms")?.installed ?? q.data?.build?.platformVersion ?? null;
+  // The latest request failed while an earlier answer is still on screen:
+  // a failed "Check again", or a failed re-read of cached data.
+  const latestCheckFailed =
+    q.data !== undefined &&
+    ((refreshFailedFor !== null && refreshFailedFor === q.dataUpdatedAt) || q.isError);
+
   return (
     <VersionView
-      deps={{ build: q.data?.build, releases: q.data?.releases ?? [], loading: q.isLoading }}
+      deps={{
+        build: q.data?.build,
+        releases: q.data?.releases ?? [],
+        loading: q.isLoading,
+        error: q.isError && !q.data,
+        latestCheckFailed,
+        onRetry: () => void q.refetch(),
+        report,
+        modules: moduleInventory(settingsRead, report?.packages, q.isLoading ? null : cmsVersion),
+        onRefresh: report ? () => void refresh() : undefined,
+        refreshing: isRefreshing,
+        siteName: host.siteConfig.name,
+        settingsHref: paths.settings,
+        renderLink: ({ href, className, children }) => (
+          <Link to={href} className={className}>
+            {children}
+          </Link>
+        ),
+      }}
     />
   );
 }
@@ -466,8 +551,8 @@ export function AdminOverviewRoute() {
     },
     {
       to: paths.version,
-      title: "CMS & platform version",
-      body: "Current CMS build, shared platform package version and release history with dates.",
+      title: "Version & modules",
+      body: "The live site release, installed CMS and module packages, module status and available updates.",
       icon: Package,
     },
     ...(isSuper && host.siteConfig.features.backup

package/src/backoffice/shell/use-resolved-config.tsx

@@ -21,11 +21,27 @@ import { backofficeNav, type BackofficeNavItem, type BackofficeNavOptions } from
 /** Query key shared with the site-settings screen. */
 export const SITE_SETTINGS_QUERY_KEY = ["admin", "site-settings"] as const;
 
+/**
+ * Where the resolved configuration came from:
+ *
+ * - `loading`: no answer yet; `config` is the compiled code config.
+ * - `error`: the read failed (or answered without settings) and no earlier
+ *   answer is held; `config` is the compiled code config, not the live one.
+ * - `ready`: `config` includes the saved overrides.
+ * - `stale`: a re-read failed; `config` is from the last successful read.
+ */
+export type SiteSettingsStatus = "loading" | "error" | "ready" | "stale";
+
 /**
  * Code config merged with the stored overrides. While loading, the code config
- * is returned so the shell renders without a flash of empty navigation.
+ * is returned so the shell renders without a flash of empty navigation; a
+ * caller that must not present that fallback as the live answer reads `status`.
  */
-export function useResolvedSiteConfig(): { config: SiteConfig; isLoading: boolean } {
+export function useResolvedSiteConfig(): {
+  config: SiteConfig;
+  isLoading: boolean;
+  status: SiteSettingsStatus;
+} {
   const host = backofficeHost();
   const load = useServerFn(host.fns.getSiteSettings);
   const q = useQuery({
@@ -34,13 +50,22 @@ export function useResolvedSiteConfig(): { config: SiteConfig; isLoading: boolea
     staleTime: 30_000,
   });
 
-  const resolved =
+  const fromSettings =
     (q.data?.config as SiteConfig | undefined) ??
     (q.data?.overrides
       ? resolveSiteConfig(host.siteConfig, q.data.overrides as never)
-      : host.siteConfig);
+      : undefined);
+  const resolved = fromSettings ?? host.siteConfig;
+
+  const status: SiteSettingsStatus = q.isLoading
+    ? "loading"
+    : !fromSettings
+      ? "error"
+      : q.isError
+        ? "stale"
+        : "ready";
 
-  return { config: resolved, isLoading: q.isLoading };
+  return { config: resolved, isLoading: q.isLoading, status };
 }
 
 /** Sidebar model built from the live (override-aware) configuration. */

package/src/config/modules.ts

@@ -23,6 +23,8 @@ import {
   MessageSquareQuote,
 } from "lucide-react";
 
+import { POPUP_PACKAGE } from "../popups/package-name";
+
 /**
  * Every module a site can switch on.
  *
@@ -90,6 +92,14 @@ export type CmsModuleDefinition = {
    * enabled, so a disabled module mounts nothing.
    */
   readonly hasPublicRuntime?: boolean;
+  /**
+   * A separately published first-party package the module's runtime is built
+   * on, beyond the CMS package itself. The version screen reports its installed
+   * and published versions; every other module ships inside the CMS package and
+   * updates with it. Naming a package here also allows the server to look it up
+   * in the public registry, so only first-party packages belong here.
+   */
+  readonly package?: `@bygghammar/${string}`;
 };
 
 /**
@@ -145,6 +155,7 @@ export const CMS_MODULES = [
     nav: { path: "/popups", label: "Popups", icon: MessageSquare },
     requiresRole: "staff",
     hasPublicRuntime: true,
+    package: POPUP_PACKAGE,
   },
 ] as const satisfies readonly CmsModuleDefinition[];
 

package/src/popups/package-name.ts

@@ -0,0 +1,8 @@
+/**
+ * The separately published package the Popups module is built on.
+ *
+ * Named here, inside the module's own directory, so the module table can
+ * declare it without the rest of the CMS mentioning the popup package. This
+ * file holds only the name: importing it loads nothing from the package.
+ */
+export const POPUP_PACKAGE = "@bygghammar/lightweight-popup" as const;