@checkstack/dashboard-frontend 0.8.4 → 0.8.5

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @checkstack/dashboard-frontend
 
+## 0.8.5
+
+### Patch Changes
+
+- 460ffd6: Align dashboard system-signal rows. Text (non-link) signals - shown when the
+  viewer can't open the target - were indented ~0.5rem further right than link
+  signals, because the link row used a negative horizontal margin (`-mx-2`) to let
+  its hover background bleed past the text while the text row did not. The text row
+  now uses the same horizontal box, so link and text signals line up.
+- 56e7c75: Hide navigation, actions and links that the current user cannot use, so anonymous
+  and read-only users no longer see entries that lead to "Access Denied" or to
+  actions the server would reject.
+
+  - **Sidebar**: a nav entry can now declare a dynamic `nav.isVisible({ accessRules, isAuthenticated })` predicate (in addition to the static `accessRule`). A group whose every entry is filtered out is no longer rendered. The filtering/grouping logic is extracted to a pure, unit-tested helper.
+  - **Infrastructure**: its sidebar entry is shown only when the user can READ at least one contributed tab (queue, cache, …), instead of always (it previously had no static rule because tabs are contributed at runtime).
+  - **Notification Settings**: hidden from anonymous users - notifications are per-user, so an anonymous visitor can't have any.
+  - **Anomaly Mute / Suppress**: the "Mute" / "Mute all" controls (a per-user preference) are hidden from anonymous visitors; the "Suppress" control is gated on `anomalyAccess.feed.manage`. Both were previously always visible.
+  - **Dashboard**: the "Open Catalog" actions (which open the manage-only Catalog config page) are hidden from users without `catalogAccess.system.manage`, and the "View catalog" link is gated on `catalogAccess.system.read`.
+  - **Dashboard status signals**: the per-system status rows contributed by plugins (`SystemSignalsSlot`) now render as a LINK only when the user can open the target, and as plain text otherwise. `SystemSignal` gains an optional `accessRule`; the healthcheck, anomaly, and dependency fillers set it for their gated targets (check-history / assignments / dependency-map). Signals pointing at ungated pages (incident / maintenance / SLO detail) stay links.
+  - **Plugin Manager**: the "Install plugin" button (which opens the install-gated page) is hidden from users with only `plugin` view access.
+  - **Satellites**: the page is entirely manage-gated, but its route/sidebar entry was gated on `read`, so read-only users saw the nav item and hit "Access Denied" on click. The route and nav entry now require `satellite.manage`.
+
+  The `@checkstack/ai-backend` bump is only the regenerated bundled docs index
+  (the frontend routing guide gained the `nav.isVisible` section); no code change.
+
+  **BREAKING (`@checkstack/frontend-api`):** the `AccessApi` interface gains a
+  required `useIsAuthenticated()` method. Custom `AccessApi` implementations must
+  add it (it returns `{ loading, isAuthenticated }`). The built-in auth
+  implementation and the no-auth fallback already do. `NavEntry` also gains an
+  optional `isVisible` predicate (purely additive).
+
+- Updated dependencies [56e7c75]
+- Updated dependencies [56e7c75]
+  - @checkstack/frontend-api@0.9.0
+  - @checkstack/catalog-common@2.3.4
+  - @checkstack/ui@1.15.1
+  - @checkstack/common@0.15.0
+  - @checkstack/healthcheck-common@1.5.4
+  - @checkstack/incident-common@1.4.4
+  - @checkstack/maintenance-common@1.4.4
+  - @checkstack/catalog-frontend@0.11.5
+  - @checkstack/tips-frontend@0.3.5
+  - @checkstack/command-frontend@0.3.5
+  - @checkstack/queue-frontend@0.5.5
+  - @checkstack/command-common@0.3.3
+  - @checkstack/signal-frontend@0.2.4
+
 ## 0.8.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dashboard-frontend",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -14,19 +14,19 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "2.3.3",
-    "@checkstack/catalog-frontend": "0.11.4",
-    "@checkstack/command-common": "0.3.2",
-    "@checkstack/command-frontend": "0.3.4",
-    "@checkstack/common": "0.14.1",
-    "@checkstack/frontend-api": "0.8.0",
-    "@checkstack/healthcheck-common": "1.5.3",
-    "@checkstack/incident-common": "1.4.3",
-    "@checkstack/maintenance-common": "1.4.3",
-    "@checkstack/queue-frontend": "0.5.4",
-    "@checkstack/signal-frontend": "0.2.3",
-    "@checkstack/tips-frontend": "0.3.4",
-    "@checkstack/ui": "1.15.0",
+    "@checkstack/catalog-common": "2.3.4",
+    "@checkstack/catalog-frontend": "0.11.5",
+    "@checkstack/command-common": "0.3.3",
+    "@checkstack/command-frontend": "0.3.5",
+    "@checkstack/common": "0.15.0",
+    "@checkstack/frontend-api": "0.9.0",
+    "@checkstack/healthcheck-common": "1.5.4",
+    "@checkstack/incident-common": "1.4.4",
+    "@checkstack/maintenance-common": "1.4.4",
+    "@checkstack/queue-frontend": "0.5.5",
+    "@checkstack/signal-frontend": "0.2.4",
+    "@checkstack/tips-frontend": "0.3.5",
+    "@checkstack/ui": "1.15.1",
     "date-fns": "^4.4.0",
     "lucide-react": "^1.17.0",
     "react": "19.2.7",
@@ -36,6 +36,6 @@
     "typescript": "^5.0.0",
     "@types/react": "^19.0.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.6.0"
+    "@checkstack/scripts": "0.6.1"
   }
 }

package/src/Dashboard.tsx

@@ -1,8 +1,14 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { usePluginClient, ExtensionSlot } from "@checkstack/frontend-api";
+import {
+  usePluginClient,
+  ExtensionSlot,
+  useApi,
+  accessApiRef,
+} from "@checkstack/frontend-api";
 import {
   CatalogApi,
+  catalogAccess,
   catalogRoutes,
   SystemSignalsSlot,
   type SystemSignalsMap,
@@ -67,6 +73,16 @@ export const Dashboard: React.FC = () => {
   const { isLowPower } = usePerformance();
   const catalogClient = usePluginClient(CatalogApi);
   const navigate = useNavigate();
+  const accessApi = useApi(accessApiRef);
+  // The Catalog CONFIG page (add/manage systems) requires manage; "Open Catalog"
+  // CTAs point there, so hide them from users who can't reach it. The catalog
+  // HOME view only needs read, gating the "View catalog" link.
+  const { allowed: canManageCatalog } = accessApi.useAccess(
+    catalogAccess.system.manage,
+  );
+  const { allowed: canViewCatalog } = accessApi.useAccess(
+    catalogAccess.system.read,
+  );
 
   const [terminalEntries, setTerminalEntries] = useState<TerminalEntry[]>([]);
   const [activeTone, setActiveTone] = useState<SystemSignalTone | null>(null);
@@ -161,12 +177,16 @@ export const Dashboard: React.FC = () => {
             "Attach health checks so the dashboard surfaces issues the moment they appear.",
           ]}
           actions={
-            <Button
-              onClick={() => navigate(resolveRoute(catalogRoutes.routes.config))}
-            >
-              <LayoutGrid className="w-4 h-4 mr-2" />
-              Open Catalog
-            </Button>
+            canManageCatalog ? (
+              <Button
+                onClick={() =>
+                  navigate(resolveRoute(catalogRoutes.routes.config))
+                }
+              >
+                <LayoutGrid className="w-4 h-4 mr-2" />
+                Open Catalog
+              </Button>
+            ) : undefined
           }
         />
       );
@@ -229,10 +249,15 @@ export const Dashboard: React.FC = () => {
             attach a health check to it.
           </>
         }
-        action={{
-          label: "Open Catalog",
-          onClick: () => navigate(resolveRoute(catalogRoutes.routes.config)),
-        }}
+        action={
+          canManageCatalog
+            ? {
+                label: "Open Catalog",
+                onClick: () =>
+                  navigate(resolveRoute(catalogRoutes.routes.config)),
+              }
+            : undefined
+        }
         actionHint={
           <span className="inline-flex items-center gap-1.5">
             <Lightbulb
@@ -266,7 +291,7 @@ export const Dashboard: React.FC = () => {
               System health
             </h2>
           </div>
-          {systemsCount > 0 && (
+          {systemsCount > 0 && canViewCatalog && (
             <Link
               to={catalogHref}
               className={cn(

package/src/components/ProblemSystemCard.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { formatDistanceToNow } from "date-fns";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, type AccessRule } from "@checkstack/common";
+import { useApi, accessApiRef } from "@checkstack/frontend-api";
 import {
   catalogRoutes,
   type System,
@@ -36,59 +37,114 @@ const glow: Record<SystemSignalTone, string> = {
   info: "from-info/[0.07]",
 };
 
-const SignalRow: React.FC<{ signal: SystemSignal; isLowPower: boolean }> = ({
-  signal,
-  isLowPower,
-}) => {
-  const body = (
-    <>
-      <span
+/** The icon + label + detail (+ hover chevron when `interactive`) of a signal. */
+const SignalInner: React.FC<{
+  signal: SystemSignal;
+  isLowPower: boolean;
+  interactive: boolean;
+}> = ({ signal, isLowPower, interactive }) => (
+  <>
+    <span
+      className={cn(
+        "flex size-6 shrink-0 items-center justify-center rounded-md",
+        chipBg[signal.tone],
+      )}
+    >
+      <DynamicIcon name={signal.iconName} className="h-3.5 w-3.5" />
+    </span>
+    <span className="shrink-0 text-sm font-medium text-foreground">
+      {signal.label}
+    </span>
+    {signal.detail && (
+      <span className="min-w-0 truncate text-xs text-muted-foreground">
+        {signal.detail}
+      </span>
+    )}
+    {interactive && (
+      <ChevronRight
         className={cn(
-          "flex size-6 shrink-0 items-center justify-center rounded-md",
-          chipBg[signal.tone],
+          "ml-auto h-4 w-4 shrink-0 text-muted-foreground/70 opacity-0 group-hover/row:opacity-100",
+          !isLowPower && "transition-opacity",
         )}
-      >
-        <DynamicIcon name={signal.iconName} className="h-3.5 w-3.5" />
-      </span>
-      <span className="shrink-0 text-sm font-medium text-foreground">
-        {signal.label}
-      </span>
-      {signal.detail && (
-        <span className="min-w-0 truncate text-xs text-muted-foreground">
-          {signal.detail}
-        </span>
-      )}
-      {signal.href && (
-        <ChevronRight
-          className={cn(
-            "ml-auto h-4 w-4 shrink-0 text-muted-foreground/70 opacity-0 group-hover/row:opacity-100",
-            !isLowPower && "transition-opacity",
-          )}
-          aria-hidden="true"
-        />
+        aria-hidden="true"
+      />
+    )}
+  </>
+);
+
+/** Plain, non-clickable row (no href, or the user can't access the target). */
+const SignalTextRow: React.FC<{ signal: SystemSignal; isLowPower: boolean }> = ({
+  signal,
+  isLowPower,
+}) => (
+  // Same horizontal box as SignalLinkRow (`-mx-2 px-2`) so text and link rows
+  // line up - the link's negative margin would otherwise sit it 0.5rem left.
+  <li className="-mx-2 flex items-center gap-2.5 px-2 py-1.5">
+    <SignalInner signal={signal} isLowPower={isLowPower} interactive={false} />
+  </li>
+);
+
+/** Clickable deep-link row. */
+const SignalLinkRow: React.FC<{
+  signal: SystemSignal;
+  href: string;
+  isLowPower: boolean;
+}> = ({ signal, href, isLowPower }) => (
+  <li>
+    <Link
+      to={href}
+      className={cn(
+        "group/row -mx-2 flex items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-muted/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        !isLowPower && "transition-colors",
       )}
-    </>
+    >
+      <SignalInner signal={signal} isLowPower={isLowPower} interactive />
+    </Link>
+  </li>
+);
+
+/**
+ * A signal whose target page is permission-gated: render it as a link only when
+ * the user satisfies its access rule, otherwise as plain text (so the user is
+ * never sent to an "Access Denied" page). Own component so the `useAccess` hook
+ * is called in a stable position regardless of the surrounding list.
+ */
+const GatedSignalRow: React.FC<{
+  signal: SystemSignal;
+  href: string;
+  accessRule: AccessRule;
+  isLowPower: boolean;
+}> = ({ signal, href, accessRule, isLowPower }) => {
+  const accessApi = useApi(accessApiRef);
+  const { allowed } = accessApi.useAccess(accessRule);
+  return allowed ? (
+    <SignalLinkRow signal={signal} href={href} isLowPower={isLowPower} />
+  ) : (
+    <SignalTextRow signal={signal} isLowPower={isLowPower} />
   );
+};
 
+const SignalRow: React.FC<{ signal: SystemSignal; isLowPower: boolean }> = ({
+  signal,
+  isLowPower,
+}) => {
+  // No destination -> plain text.
   if (!signal.href) {
+    return <SignalTextRow signal={signal} isLowPower={isLowPower} />;
+  }
+  // Gated destination -> link only if the user can actually open it.
+  if (signal.accessRule) {
     return (
-      <li className="flex items-center gap-2.5 px-2 py-1.5">{body}</li>
+      <GatedSignalRow
+        signal={signal}
+        href={signal.href}
+        accessRule={signal.accessRule}
+        isLowPower={isLowPower}
+      />
     );
   }
-
-  return (
-    <li>
-      <Link
-        to={signal.href}
-        className={cn(
-          "group/row -mx-2 flex items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-muted/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          !isLowPower && "transition-colors",
-        )}
-      >
-        {body}
-      </Link>
-    </li>
-  );
+  // Destination needs no specific permission -> always a link.
+  return <SignalLinkRow signal={signal} href={signal.href} isLowPower={isLowPower} />;
 };
 
 /**