@checkstack/catalog-frontend 0.10.7 → 0.11.0

package/src/components/SystemEnvironmentsEditor.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from "react";
+import {
+  Label,
+  Checkbox,
+  useToast,
+} from "@checkstack/ui";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { CatalogApi, catalogAccess } from "@checkstack/catalog-common";
+import { extractErrorMessage } from "@checkstack/common";
+import { toggleSelectedId } from "./environment-fields.logic";
+
+interface Props {
+  systemId: string;
+}
+
+/**
+ * Per-system environment multi-select picker. Lists every instance-wide
+ * environment with a checkbox; toggling drives the desired-set
+ * `setSystemEnvironments` mutation (add/prune diffed server-side).
+ */
+export const SystemEnvironmentsEditor: React.FC<Props> = ({ systemId }) => {
+  const catalogClient = usePluginClient(CatalogApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  const { allowed: canManage } = accessApi.useAccess(
+    catalogAccess.environment.manage,
+  );
+
+  const { data: environments = [], isLoading: environmentsLoading } =
+    catalogClient.listEnvironments.useQuery({});
+
+  const {
+    data: assigned = [],
+    isLoading: assignedLoading,
+    refetch: refetchAssigned,
+  } = catalogClient.getSystemEnvironments.useQuery({ systemId });
+
+  const [selected, setSelected] = useState<string[]>([]);
+
+  useEffect(() => {
+    setSelected(assigned.map((environment) => environment.id));
+  }, [assigned]);
+
+  const setMutation = catalogClient.setSystemEnvironments.useMutation({
+    onSuccess: () => {
+      void refetchAssigned();
+    },
+    onError: (error) => {
+      toast.error(
+        extractErrorMessage(error, "Failed to update environments"),
+      );
+      // Re-sync from the server on failure.
+      setSelected(assigned.map((environment) => environment.id));
+    },
+  });
+
+  const handleToggle = (environmentId: string) => {
+    const next = toggleSelectedId({ selected, id: environmentId });
+    setSelected(next);
+    setMutation.mutate({ systemId, environmentIds: next });
+  };
+
+  const loading = environmentsLoading || assignedLoading;
+
+  return (
+    <div className="space-y-2">
+      <Label>Environments</Label>
+      <p className="text-xs text-muted-foreground">
+        Instance-wide environments this system belongs to.
+      </p>
+      {loading ? (
+        <p className="text-sm text-muted-foreground py-2">Loading...</p>
+      ) : environments.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-2">
+          No environments defined yet.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {environments.map((environment) => (
+            <div key={environment.id} className="flex items-center gap-2">
+              <Checkbox
+                checked={selected.includes(environment.id)}
+                disabled={!canManage || setMutation.isPending}
+                onCheckedChange={() => handleToggle(environment.id)}
+              />
+              <span className="text-sm">{environment.name}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/browse/CatalogBrowseHealth.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import {
+  CatalogBrowseHealthSlot,
+  type CatalogHealthStatuses,
+} from "@checkstack/catalog-common";
+
+export interface CatalogBrowseHealthProps {
+  /** Every system id currently in the browse view (the bulk-fetch input). */
+  systemIds: string[];
+  /** Receives the resolved per-system statuses from the slot filler. */
+  onStatuses: (statuses: CatalogHealthStatuses) => void;
+}
+
+/**
+ * Headless boundary that renders the optional `CatalogBrowseHealthSlot`. A health
+ * provider plugin (e.g. healthcheck-frontend) fills the slot to bulk-fetch system
+ * health and report it via `onStatuses`; the browse page feeds that DATA into its
+ * group rollups + health filter (see `healthRollup.logic`). When the slot is
+ * unfilled, `ExtensionSlot` renders nothing and no statuses are reported — the
+ * page then shows counts only and disables the health filter.
+ *
+ * Catalog only CONSUMES the slot here; all cross-plugin coupling lives on the
+ * filler side, so catalog stays decoupled from any health provider.
+ */
+export const CatalogBrowseHealth: React.FC<CatalogBrowseHealthProps> = ({
+  systemIds,
+  onStatuses,
+}) => {
+  return (
+    <ExtensionSlot
+      slot={CatalogBrowseHealthSlot}
+      context={{ systemIds, onStatuses }}
+    />
+  );
+};

package/src/components/browse/CatalogBrowseToolbar.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+import {
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+} from "@checkstack/ui";
+import { Search, Rows3, Rows2 } from "lucide-react";
+import type { Group } from "@checkstack/catalog-common";
+import type {
+  Density,
+  HealthFilter,
+} from "./browseState.logic";
+import {
+  UNGROUPED_ID,
+  HealthFilterSchema,
+  DensitySchema,
+} from "./browseState.logic";
+
+/**
+ * Sentinel "all" value for the `Select` filters. Radix `Select` items cannot
+ * carry an empty-string value, so a non-empty token stands in for "no filter".
+ */
+const ALL = "__all__";
+
+const DENSITY_TABS = [
+  { id: "comfortable", label: "Comfortable", icon: <Rows3 className="h-4 w-4" /> },
+  { id: "compact", label: "Compact", icon: <Rows2 className="h-4 w-4" /> },
+];
+
+const HEALTH_OPTIONS: { value: HealthFilter; label: string }[] = [
+  { value: "all", label: "All health" },
+  { value: "healthy", label: "Healthy" },
+  { value: "degraded", label: "Degraded" },
+  { value: "unhealthy", label: "Unhealthy" },
+  { value: "unknown", label: "Unknown" },
+];
+
+export interface CatalogBrowseToolbarProps {
+  query: string;
+  onQueryChange: (query: string) => void;
+  group: string | null;
+  onGroupChange: (group: string | null) => void;
+  groups: Group[];
+  health: HealthFilter;
+  onHealthChange: (health: HealthFilter) => void;
+  /** `true` once the health slot is filled (Phase 4); disables the filter otherwise. */
+  healthEnabled?: boolean;
+  tag: string | null;
+  onTagChange: (tag: string | null) => void;
+  tagOptions: string[];
+  /**
+   * Density control. Optional: surfaces that render density-aware rows (browse)
+   * pass both; surfaces whose rows are not density-aware (the management lists)
+   * omit them, hiding the toggle rather than showing a dead control.
+   */
+  density?: Density;
+  onDensityChange?: (density: Density) => void;
+}
+
+/**
+ * Shared browse/manage toolbar: search input + group/health/tag filters + a
+ * comfortable/compact density toggle. Pure controlled component — all state is
+ * lifted to the page via `useCatalogBrowseState`.
+ */
+export const CatalogBrowseToolbar: React.FC<CatalogBrowseToolbarProps> = ({
+  query,
+  onQueryChange,
+  group,
+  onGroupChange,
+  groups,
+  health,
+  onHealthChange,
+  healthEnabled = false,
+  tag,
+  onTagChange,
+  tagOptions,
+  density,
+  onDensityChange,
+}) => {
+  return (
+    <div className="flex flex-col gap-3 md:flex-row md:flex-wrap md:items-center">
+      <div className="relative flex-1 min-w-[12rem]">
+        <Search
+          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+          aria-hidden="true"
+        />
+        <Input
+          type="search"
+          value={query}
+          onChange={(e) => onQueryChange(e.target.value)}
+          placeholder="Search systems and groups"
+          aria-label="Search systems and groups"
+          className="pl-9"
+        />
+      </div>
+
+      <Select
+        value={group ?? ALL}
+        onValueChange={(value) => onGroupChange(value === ALL ? null : value)}
+      >
+        <SelectTrigger className="md:w-44" aria-label="Filter by group">
+          <SelectValue placeholder="All groups" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={ALL}>All groups</SelectItem>
+          {groups.map((g) => (
+            <SelectItem key={g.id} value={g.id}>
+              {g.name}
+            </SelectItem>
+          ))}
+          <SelectItem value={UNGROUPED_ID}>Ungrouped</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={health}
+        onValueChange={(value) => onHealthChange(HealthFilterSchema.parse(value))}
+        disabled={!healthEnabled}
+      >
+        <SelectTrigger
+          className="md:w-40"
+          aria-label="Filter by health"
+          title={
+            healthEnabled
+              ? undefined
+              : "Health filtering becomes available once a health source is installed"
+          }
+        >
+          <SelectValue placeholder="All health" />
+        </SelectTrigger>
+        <SelectContent>
+          {HEALTH_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {tagOptions.length > 0 && (
+        <Select
+          value={tag ?? ALL}
+          onValueChange={(value) => onTagChange(value === ALL ? null : value)}
+        >
+          <SelectTrigger className="md:w-44" aria-label="Filter by tag">
+            <SelectValue placeholder="All tags" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL}>All tags</SelectItem>
+            {tagOptions.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+
+      {density !== undefined && onDensityChange && (
+        <Tabs
+          items={DENSITY_TABS}
+          activeTab={density}
+          onTabChange={(id) => onDensityChange(DensitySchema.parse(id))}
+          className="md:w-auto"
+        />
+      )}
+    </div>
+  );
+};

package/src/components/browse/CatalogGroupSection.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  Badge,
+  cn,
+  usePerformance,
+} from "@checkstack/ui";
+import {
+  ChevronDown,
+  FolderTree,
+  Layers,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+} from "lucide-react";
+import { useApi } from "@checkstack/frontend-api";
+import { authApiRef } from "@checkstack/auth-frontend/api";
+import { NotificationSubscriptionsManager } from "@checkstack/notification-frontend";
+import { catalogGroupTarget } from "@checkstack/catalog-common";
+import type { GroupSection } from "./filterEntities.logic";
+import type { GroupHealthRollup } from "./healthRollup.logic";
+import type { Density } from "./browseState.logic";
+import { CatalogSystemRow } from "./CatalogSystemRow";
+
+export interface CatalogGroupSectionProps {
+  section: GroupSection;
+  density: Density;
+  onToggle: (id: string, open: boolean) => void;
+}
+
+/**
+ * Group health rollup pill, derived from the status DATA (`section.rollup`), not
+ * from rendered badges. Renders nothing when no health source reported data
+ * (`hasData` false) so the header falls back to the count-only `Badge`. Always
+ * pairs colour with an icon AND a text label so it never relies on colour alone
+ * (a11y, plan §7).
+ */
+const HealthRollupBadge: React.FC<{ rollup: GroupHealthRollup }> = ({
+  rollup,
+}) => {
+  if (!rollup.hasData) return null;
+
+  if (rollup.allHealthy) {
+    return (
+      <Badge variant="success" className="gap-1">
+        <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
+        All healthy
+      </Badge>
+    );
+  }
+
+  if (rollup.unhealthy > 0) {
+    return (
+      <Badge variant="destructive" className="gap-1">
+        <XCircle className="h-3 w-3" aria-hidden="true" />
+        {rollup.unhealthy} unhealthy
+        {rollup.degraded > 0 ? `, ${rollup.degraded} degraded` : ""}
+      </Badge>
+    );
+  }
+
+  if (rollup.degraded > 0) {
+    return (
+      <Badge variant="warning" className="gap-1">
+        <AlertTriangle className="h-3 w-3" aria-hidden="true" />
+        {rollup.degraded} degraded
+      </Badge>
+    );
+  }
+
+  // Has some data but no degraded/unhealthy and not all-healthy (mixed
+  // healthy + unknown) — no rollup pill, count-only header is the honest signal.
+  return null;
+};
+
+/**
+ * One collapsible group (or the synthetic "Ungrouped") section. The header is
+ * a real `<button>` with `aria-expanded` so keyboard + screen reader users can
+ * toggle it. We intentionally do NOT set `aria-controls`: the body is unmounted
+ * when collapsed (`{section.open && <CardContent…>}`), so a referenced id would
+ * dangle; `aria-expanded` alone is the correct contract for a custom disclosure
+ * whose controlled region is removed from the DOM. The header shows a member
+ * count and, when a `CatalogBrowseHealthSlot` filler reported data, a health
+ * rollup `Badge` derived from that DATA (not from rendered per-system badges).
+ *
+ * Collapsed sections render only their header — not their member rows — so the
+ * mounted-node count stays bounded even with hundreds of systems (plan §3.4).
+ */
+export const CatalogGroupSection: React.FC<CatalogGroupSectionProps> = ({
+  section,
+  density,
+  onToggle,
+}) => {
+  const { isLowPower } = usePerformance();
+  const authApi = useApi(authApiRef);
+  const { data: session } = authApi.useSession();
+  const Icon = section.isUngrouped ? Layers : FolderTree;
+
+  // The synthetic "Ungrouped" bucket is not a real group, so it has no group
+  // resource to subscribe to.
+  const canSubscribe = !section.isUngrouped && !!session;
+
+  return (
+    <Card>
+      <div className="flex items-center">
+        <button
+          type="button"
+          onClick={() => onToggle(section.id, !section.open)}
+          aria-expanded={section.open}
+          className="flex min-w-0 flex-1 items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-tl-lg"
+        >
+          <ChevronDown
+            className={cn(
+              "h-4 w-4 shrink-0 text-muted-foreground",
+              !isLowPower && "transition-transform",
+              section.open ? "rotate-0" : "-rotate-90",
+            )}
+            aria-hidden="true"
+          />
+          <Icon
+            className="h-4 w-4 shrink-0 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <span className="min-w-0 flex-1 truncate font-semibold text-foreground">
+            {section.name}
+          </span>
+          <HealthRollupBadge rollup={section.rollup} />
+          <Badge variant="secondary">
+            {section.totalCount}{" "}
+            {section.totalCount === 1 ? "system" : "systems"}
+          </Badge>
+        </button>
+        {canSubscribe && (
+          <div className="shrink-0 pr-2 pl-1">
+            <NotificationSubscriptionsManager
+              target={catalogGroupTarget}
+              resource={{ groupId: section.id, groupName: section.name }}
+            />
+          </div>
+        )}
+      </div>
+
+      {section.open && (
+        <CardContent
+          className={cn("pt-0", density === "compact" ? "space-y-0.5" : "space-y-1")}
+        >
+          {section.systems.length === 0 ? (
+            <p className="px-3 py-2 text-xs text-muted-foreground">
+              No systems match the current filters.
+            </p>
+          ) : (
+            section.systems.map((system) => (
+              <CatalogSystemRow
+                key={system.id}
+                system={system}
+                density={density}
+              />
+            ))
+          )}
+        </CardContent>
+      )}
+    </Card>
+  );
+};

package/src/components/browse/CatalogSystemRow.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  catalogRoutes,
+  SystemStateBadgesSlot,
+  type System,
+} from "@checkstack/catalog-common";
+import { cn } from "@checkstack/ui";
+import { ChevronRight } from "lucide-react";
+import type { Density } from "./browseState.logic";
+
+export interface CatalogSystemRowProps {
+  system: System;
+  density: Density;
+}
+
+/**
+ * One browse row for a single system: name (links to the system detail page),
+ * the `SystemStateBadgesSlot` (health/maintenance/incident badges contributed
+ * by other plugins — exactly the decoupled mechanism `SystemDetailPage` uses),
+ * and a density-aware description. Compact density drops the inline
+ * description to a `title` tooltip and tightens spacing.
+ */
+export const CatalogSystemRow: React.FC<CatalogSystemRowProps> = ({
+  system,
+  density,
+}) => {
+  const isCompact = density === "compact";
+  const description = system.description?.trim();
+
+  return (
+    <Link
+      to={resolveRoute(catalogRoutes.routes.systemDetail, {
+        systemId: system.id,
+      })}
+      className={cn(
+        "group flex items-center gap-3 rounded-md border border-transparent px-3 transition-colors hover:border-border hover:bg-muted/50",
+        isCompact ? "py-1.5" : "py-2.5",
+      )}
+      title={isCompact && description ? description : undefined}
+    >
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium text-foreground">
+          {system.name}
+        </span>
+        {!isCompact && description && (
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        <ExtensionSlot slot={SystemStateBadgesSlot} context={{ system }} />
+      </div>
+      <ChevronRight
+        className="h-4 w-4 shrink-0 text-muted-foreground/50 transition-colors group-hover:text-foreground"
+        aria-hidden="true"
+      />
+    </Link>
+  );
+};

package/src/components/browse/browseState.logic.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, test } from "bun:test";
+import {
+  parseBrowseState,
+  serializeBrowseState,
+  parseOpenParam,
+  serializeOpenParam,
+  DEFAULT_BROWSE_STATE,
+  BROWSE_PARAM,
+} from "./browseState.logic";
+
+/** Build a `params.get`-style reader from a plain record. */
+function reader(record: Record<string, string>) {
+  return { get: (key: string): string | null => record[key] ?? null };
+}
+
+describe("parseBrowseState", () => {
+  test("returns defaults for empty params", () => {
+    expect(parseBrowseState(reader({}))).toEqual(DEFAULT_BROWSE_STATE);
+  });
+
+  test("parses all params", () => {
+    const state = parseBrowseState(
+      reader({
+        [BROWSE_PARAM.query]: "checkout",
+        [BROWSE_PARAM.group]: "payments",
+        [BROWSE_PARAM.health]: "degraded",
+        [BROWSE_PARAM.tag]: "team=payments",
+        [BROWSE_PARAM.density]: "compact",
+        [BROWSE_PARAM.open]: "payments,-platform",
+      }),
+    );
+    expect(state).toEqual({
+      query: "checkout",
+      group: "payments",
+      health: "degraded",
+      tag: "team=payments",
+      density: "compact",
+      open: { payments: true, platform: false },
+    });
+  });
+
+  test("falls back to default for invalid health/density enums", () => {
+    const state = parseBrowseState(
+      reader({ [BROWSE_PARAM.health]: "bogus", [BROWSE_PARAM.density]: "huge" }),
+    );
+    expect(state.health).toBe("all");
+    expect(state.density).toBe("comfortable");
+  });
+
+  test("treats empty group/tag strings as null", () => {
+    const state = parseBrowseState(
+      reader({ [BROWSE_PARAM.group]: "", [BROWSE_PARAM.tag]: "" }),
+    );
+    expect(state.group).toBeNull();
+    expect(state.tag).toBeNull();
+  });
+});
+
+describe("open param round-trip", () => {
+  test("parseOpenParam handles forced-open and forced-closed", () => {
+    expect(parseOpenParam("a,-b,c")).toEqual({ a: true, b: false, c: true });
+  });
+
+  test("parseOpenParam ignores blank/empty tokens", () => {
+    expect(parseOpenParam(" , ,-")).toEqual({});
+    expect(parseOpenParam(null)).toEqual({});
+    expect(parseOpenParam("")).toEqual({});
+  });
+
+  test("serializeOpenParam is sorted and deterministic", () => {
+    expect(serializeOpenParam({ c: true, a: false, b: true })).toBe("-a,b,c");
+  });
+
+  test("open map survives a full round-trip", () => {
+    const open = { payments: true, platform: false, infra: true };
+    expect(parseOpenParam(serializeOpenParam(open))).toEqual(open);
+  });
+});
+
+describe("serializeBrowseState", () => {
+  test("default state produces all-empty (no params)", () => {
+    const out = serializeBrowseState(DEFAULT_BROWSE_STATE);
+    expect(out).toEqual({
+      [BROWSE_PARAM.query]: "",
+      [BROWSE_PARAM.group]: "",
+      [BROWSE_PARAM.health]: "",
+      [BROWSE_PARAM.tag]: "",
+      [BROWSE_PARAM.density]: "",
+      [BROWSE_PARAM.open]: "",
+    });
+  });
+
+  test("non-default values are emitted", () => {
+    const out = serializeBrowseState({
+      query: "api",
+      group: "g1",
+      health: "unhealthy",
+      tag: "tier=1",
+      density: "compact",
+      open: { g1: true },
+    });
+    expect(out[BROWSE_PARAM.query]).toBe("api");
+    expect(out[BROWSE_PARAM.group]).toBe("g1");
+    expect(out[BROWSE_PARAM.health]).toBe("unhealthy");
+    expect(out[BROWSE_PARAM.tag]).toBe("tier=1");
+    expect(out[BROWSE_PARAM.density]).toBe("compact");
+    expect(out[BROWSE_PARAM.open]).toBe("g1");
+  });
+
+  test("parse(serialize(state)) round-trips a non-default state", () => {
+    const state = {
+      query: "checkout",
+      group: "payments",
+      health: "degraded" as const,
+      tag: "team=payments",
+      density: "compact" as const,
+      open: { payments: true, platform: false },
+    };
+    const serialized = serializeBrowseState(state);
+    const filled = Object.fromEntries(
+      Object.entries(serialized).filter(([, v]) => v.length > 0),
+    );
+    expect(parseBrowseState(reader(filled))).toEqual(state);
+  });
+});