@checkstack/healthcheck-frontend 0.11.8 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @checkstack/healthcheck-frontend
 
+## 0.12.0
+
+### Minor Changes
+
+- 54a5f80: ### Health Check Editor Redesign — IDE-Style Experience
+
+  Replaces the modal-based health check editor with a full-page, IDE-style experience:
+
+  - **Strategy Picker Page**: New `/config/create` page with categorized strategy discovery, search filtering, and grouped card grid layout
+  - **IDE Editor Page**: New `/config/:configId/edit` page with a split-view layout — explorer tree on the left, editor panel on the right
+  - **Strategy Categories**: Introduces `StrategyCategory` enum with 16 categories (Networking, Database, Infrastructure, etc.) — all 13 strategy plugins now declare their category
+  - **New RPC Endpoint**: Added `getConfiguration` (singular by ID) for efficient single-resource fetching on the edit page
+  - **Explorer Tree**: Left-hand navigation with General, Check Items (collectors), and Access Control sections, with real-time validation indicators
+  - **Validation Status Bar**: Bottom bar showing aggregated validation issues with clickable navigation
+  - **Unsaved Changes Guard**: Browser `beforeunload` protection when the form is dirty
+  - **Responsive Design**: Split-view on desktop, stacked layout on mobile
+  - **Deleted**: Legacy `HealthCheckEditor.tsx` modal component
+
+### Patch Changes
+
+- Updated dependencies [54a5f80]
+  - @checkstack/healthcheck-common@0.10.0
+  - @checkstack/dashboard-frontend@0.3.25
+
 ## 0.11.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.11.8",
+  "version": "0.12.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/editor/CollectorPicker.tsx

@@ -0,0 +1,129 @@
+import React, { useMemo } from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+} from "@checkstack/healthcheck-common";
+import { Badge } from "@checkstack/ui";
+import { Search } from "lucide-react";
+import { isBuiltInCollector } from "../../hooks/useCollectors";
+
+interface CollectorPickerProps {
+  availableCollectors: CollectorDto[];
+  configuredCollectors: CollectorConfigEntry[];
+  loading: boolean;
+  onAdd: (collectorId: string) => void;
+  strategyId: string;
+}
+
+export const CollectorPicker: React.FC<CollectorPickerProps> = ({
+  availableCollectors,
+  configuredCollectors,
+  loading,
+  onAdd,
+  strategyId,
+}) => {
+  const configuredIds = useMemo(
+    () => new Set(configuredCollectors.map((c) => c.collectorId)),
+    [configuredCollectors],
+  );
+
+  const builtInCollectors = availableCollectors.filter((c) =>
+    isBuiltInCollector(c.id, strategyId),
+  );
+  const externalCollectors = availableCollectors.filter(
+    (c) => !isBuiltInCollector(c.id, strategyId),
+  );
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <h2 className="text-lg font-semibold">Add Check Item</h2>
+        <p className="text-sm text-muted-foreground">Loading collectors...</p>
+      </div>
+    );
+  }
+
+  const renderCollectorCard = (collector: CollectorDto) => {
+    const alreadyAdded = configuredIds.has(collector.id);
+    const canAdd = !alreadyAdded || collector.allowMultiple;
+
+    return (
+      <button
+        key={collector.id}
+        type="button"
+        disabled={!canAdd}
+        onClick={() => onAdd(collector.id)}
+        className={`flex flex-col items-start gap-1.5 rounded-lg border p-4 text-left transition-all ${
+          canAdd
+            ? "hover:border-primary/50 hover:shadow-md hover:shadow-primary/5 cursor-pointer"
+            : "opacity-50 cursor-not-allowed"
+        }`}
+      >
+        <div className="flex w-full items-center justify-between gap-2">
+          <h3 className="font-semibold text-sm">{collector.displayName}</h3>
+          <div className="flex gap-1.5 shrink-0">
+            {collector.allowMultiple && (
+              <Badge variant="outline" className="text-[10px]">
+                Multiple
+              </Badge>
+            )}
+            {alreadyAdded && (
+              <Badge variant="secondary" className="text-[10px]">
+                Added
+              </Badge>
+            )}
+          </div>
+        </div>
+        {collector.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {collector.description}
+          </p>
+        )}
+      </button>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Add Check Item</h2>
+        <p className="text-sm text-muted-foreground">
+          Select a collector to add to this health check.
+        </p>
+      </div>
+
+      {availableCollectors.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <Search className="h-8 w-8 mb-3 opacity-40" />
+          <p className="text-sm">No collectors available for this strategy.</p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {builtInCollectors.length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                Built-in
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {builtInCollectors.map((col) => renderCollectorCard(col))}
+              </div>
+            </section>
+          )}
+
+          {externalCollectors.length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                External
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {externalCollectors.map((extCol) =>
+                  renderCollectorCard(extCol),
+                )}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/editor/CollectorSection.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+} from "@checkstack/healthcheck-common";
+import { Button, DynamicForm, Label } from "@checkstack/ui";
+import { Trash2 } from "lucide-react";
+import { AssertionBuilder, type Assertion } from "../AssertionBuilder";
+
+interface CollectorSectionProps {
+  entry: CollectorConfigEntry;
+  collectorDef: CollectorDto | undefined;
+  onConfigChange: (config: Record<string, unknown>) => void;
+  onAssertionsChange: (assertions: CollectorConfigEntry["assertions"]) => void;
+  onValidChange: (isValid: boolean) => void;
+  onRemove: () => void;
+}
+
+export const CollectorSection: React.FC<CollectorSectionProps> = ({
+  entry,
+  collectorDef,
+  onConfigChange,
+  onAssertionsChange,
+  onValidChange,
+  onRemove,
+}) => {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">
+            {collectorDef?.displayName ?? entry.collectorId}
+          </h2>
+          {collectorDef?.description && (
+            <p className="text-sm text-muted-foreground">
+              {collectorDef.description}
+            </p>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-destructive hover:text-destructive shrink-0"
+          onClick={onRemove}
+          title="Remove collector"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Configuration */}
+      {collectorDef?.configSchema && (
+        <div className="space-y-3">
+          <div>
+            <Label className="text-sm font-semibold">Configuration</Label>
+            <p className="text-xs text-muted-foreground">
+              Configure how this check item behaves.
+            </p>
+          </div>
+          <DynamicForm
+            schema={collectorDef.configSchema}
+            value={entry.config}
+            onChange={onConfigChange}
+            onValidChange={onValidChange}
+          />
+        </div>
+      )}
+
+      {/* Assertions */}
+      {collectorDef?.resultSchema && (
+        <div className="space-y-3 pt-2 border-t">
+          <div>
+            <Label className="text-sm font-semibold">Assertions</Label>
+            <p className="text-xs text-muted-foreground">
+              Define conditions that must be met for this check to pass.
+            </p>
+          </div>
+          <AssertionBuilder
+            resultSchema={collectorDef.resultSchema}
+            assertions={
+              (entry.assertions as unknown as Assertion[]) ?? []
+            }
+            onChange={(assertions) =>
+              onAssertionsChange(
+                assertions as unknown as CollectorConfigEntry["assertions"],
+              )
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/editor/EditorPanel.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+  HealthCheckStrategyDto,
+} from "@checkstack/healthcheck-common";
+import type { TreeNodeId } from "./EditorTree";
+import { GeneralSection } from "./GeneralSection";
+import { CollectorSection } from "./CollectorSection";
+import { CollectorPicker } from "./CollectorPicker";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface EditorPanelProps {
+  selectedNode: TreeNodeId;
+  formState: {
+    name: string;
+    intervalSeconds: number;
+    strategyConfig: Record<string, unknown>;
+    collectors: CollectorConfigEntry[];
+  };
+  strategy: HealthCheckStrategyDto | undefined;
+  availableCollectors: CollectorDto[];
+  collectorsLoading: boolean;
+  isEditMode: boolean;
+  configId: string | undefined;
+  onNameChange: (name: string) => void;
+  onIntervalChange: (interval: number) => void;
+  onStrategyConfigChange: (config: Record<string, unknown>) => void;
+  onStrategyConfigValidChange: (isValid: boolean) => void;
+  onCollectorConfigChange: (
+    entryId: string,
+    config: Record<string, unknown>,
+  ) => void;
+  onCollectorAssertionsChange: (
+    entryId: string,
+    assertions: CollectorConfigEntry["assertions"],
+  ) => void;
+  onCollectorValidChange: (entryId: string, isValid: boolean) => void;
+  onCollectorRemove: (entryId: string) => void;
+  onCollectorAdd: (collectorId: string) => void;
+  strategyId: string;
+}
+
+// =============================================================================
+// PANEL COMPONENT
+// =============================================================================
+
+export const EditorPanel: React.FC<EditorPanelProps> = ({
+  selectedNode,
+  formState,
+  strategy,
+  availableCollectors,
+  collectorsLoading,
+  isEditMode,
+  configId,
+  onNameChange,
+  onIntervalChange,
+  onStrategyConfigChange,
+  onStrategyConfigValidChange,
+  onCollectorConfigChange,
+  onCollectorAssertionsChange,
+  onCollectorValidChange,
+  onCollectorRemove,
+  onCollectorAdd,
+  strategyId,
+}) => {
+  // --- General Section ---
+  if (selectedNode === "general") {
+    return (
+      <div className="p-6">
+        <GeneralSection
+          name={formState.name}
+          intervalSeconds={formState.intervalSeconds}
+          strategyConfig={formState.strategyConfig}
+          strategy={strategy}
+          onNameChange={onNameChange}
+          onIntervalChange={onIntervalChange}
+          onStrategyConfigChange={onStrategyConfigChange}
+          onStrategyConfigValidChange={onStrategyConfigValidChange}
+        />
+      </div>
+    );
+  }
+
+  // --- Collector Picker ---
+  if (selectedNode === "collector-picker") {
+    return (
+      <div className="p-6">
+        <CollectorPicker
+          availableCollectors={availableCollectors}
+          configuredCollectors={formState.collectors}
+          loading={collectorsLoading}
+          onAdd={onCollectorAdd}
+          strategyId={strategyId}
+        />
+      </div>
+    );
+  }
+
+  // --- Access Control ---
+  if (selectedNode === "access") {
+    return (
+      <div className="p-6">
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-lg font-semibold">Access Control</h2>
+            <p className="text-sm text-muted-foreground">
+              Manage team permissions for this health check configuration.
+            </p>
+          </div>
+          {isEditMode && configId ? (
+            <TeamAccessEditor
+              resourceType="healthcheck.configuration"
+              resourceId={configId}
+              compact
+              expanded
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground italic">
+              Access control is available after saving the configuration.
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // --- Collector Section ---
+  if (selectedNode.startsWith("collector:")) {
+    const entryId = selectedNode.replace("collector:", "");
+    const entry = formState.collectors.find((c) => c.id === entryId);
+
+    if (!entry) {
+      return (
+        <div className="p-6 text-muted-foreground">Collector not found.</div>
+      );
+    }
+
+    const collectorDef = availableCollectors.find(
+      (c) => c.id === entry.collectorId,
+    );
+
+    return (
+      <div className="p-6">
+        <CollectorSection
+          entry={entry}
+          collectorDef={collectorDef}
+          onConfigChange={(config) => onCollectorConfigChange(entryId, config)}
+          onAssertionsChange={(assertions) =>
+            onCollectorAssertionsChange(entryId, assertions)
+          }
+          onValidChange={(isValid) => onCollectorValidChange(entryId, isValid)}
+          onRemove={() => onCollectorRemove(entryId)}
+        />
+      </div>
+    );
+  }
+
+  return;
+};

package/src/components/editor/EditorTree.tsx

@@ -0,0 +1,185 @@
+import React, { useMemo } from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+} from "@checkstack/healthcheck-common";
+import { Plus, Settings, Shield, ChevronRight } from "lucide-react";
+import { isBuiltInCollector } from "../../hooks/useCollectors";
+import type { ValidationIssue } from "./IDEStatusBar";
+import { Badge } from "@checkstack/ui";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export type TreeNodeId =
+  | "general"
+  | "access"
+  | "collector-picker"
+  | `collector:${string}`;
+
+interface EditorTreeProps {
+  collectors: CollectorConfigEntry[];
+  availableCollectors: CollectorDto[];
+  selectedNode: TreeNodeId;
+  onSelectNode: (nodeId: TreeNodeId) => void;
+  onAddCollector: (collectorId: string) => void;
+  validationIssues: ValidationIssue[];
+  strategyId: string;
+}
+
+// =============================================================================
+// VALIDATION INDICATOR
+// =============================================================================
+
+function ValidationDot({ nodeId, issues }: { nodeId: string; issues: ValidationIssue[] }) {
+  const nodeIssues = issues.filter((i) => i.nodeId === nodeId);
+  if (nodeIssues.length === 0) return;
+
+  return (
+    <span className="ml-auto flex h-2 w-2 rounded-full bg-destructive shrink-0" />
+  );
+}
+
+// =============================================================================
+// TREE NODE
+// =============================================================================
+
+function TreeNode({
+  nodeId,
+  label,
+  icon: Icon,
+  selected,
+  onClick,
+  issues,
+  indent = false,
+  badge,
+}: {
+  nodeId: string;
+  label: string;
+  icon: React.ElementType;
+  selected: boolean;
+  onClick: () => void;
+  issues: ValidationIssue[];
+  indent?: boolean;
+  badge?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors ${
+        indent ? "pl-7" : ""
+      } ${
+        selected
+          ? "bg-primary/10 text-primary border-l-2 border-primary"
+          : "hover:bg-muted/50 border-l-2 border-transparent"
+      }`}
+    >
+      <Icon className="h-4 w-4 shrink-0 opacity-60" />
+      <span className="truncate flex-1">{label}</span>
+      {badge && (
+        <Badge variant="secondary" className="text-[10px] shrink-0">
+          {badge}
+        </Badge>
+      )}
+      <ValidationDot nodeId={nodeId} issues={issues} />
+    </button>
+  );
+}
+
+// =============================================================================
+// EDITOR TREE
+// =============================================================================
+
+export const EditorTree: React.FC<EditorTreeProps> = ({
+  collectors,
+  availableCollectors,
+  selectedNode,
+  onSelectNode,
+  validationIssues,
+  strategyId,
+}) => {
+  // Check if there are addable collectors remaining
+  const hasAddableCollectors = useMemo(() => {
+    const configuredIds = new Set(collectors.map((c) => c.collectorId));
+    return availableCollectors.some(
+      (c) => !configuredIds.has(c.id) || c.allowMultiple,
+    );
+  }, [collectors, availableCollectors]);
+
+  return (
+    <div className="py-2">
+      {/* General */}
+      <TreeNode
+        nodeId="general"
+        label="General"
+        icon={Settings}
+        selected={selectedNode === "general"}
+        onClick={() => onSelectNode("general")}
+        issues={validationIssues}
+      />
+
+      {/* Collectors Section Header */}
+      <div className="px-3 pt-4 pb-1">
+        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+          Check Items
+        </span>
+      </div>
+
+      {/* Configured Collectors */}
+      {collectors.map((entry) => {
+        const collector = availableCollectors.find(
+          (c) => c.id === entry.collectorId,
+        );
+        const builtIn = isBuiltInCollector(entry.collectorId, strategyId);
+
+        return (
+          <TreeNode
+            key={entry.id}
+            nodeId={`collector:${entry.id}`}
+            label={collector?.displayName ?? entry.collectorId}
+            icon={ChevronRight}
+            selected={selectedNode === `collector:${entry.id}`}
+            onClick={() => onSelectNode(`collector:${entry.id}`)}
+            issues={validationIssues}
+            indent
+            badge={builtIn ? "Built-in" : undefined}
+          />
+        );
+      })}
+
+      {/* Add Collector Button */}
+      {hasAddableCollectors && (
+        <button
+          type="button"
+          onClick={() => onSelectNode("collector-picker")}
+          className={`flex items-center gap-2 w-full px-3 py-2 pl-7 text-sm text-left transition-colors text-muted-foreground hover:text-foreground hover:bg-muted/50 border-l-2 ${
+            selectedNode === "collector-picker"
+              ? "border-primary bg-primary/10 text-primary"
+              : "border-transparent"
+          }`}
+        >
+          <Plus className="h-4 w-4 shrink-0" />
+          <span className="truncate">Add check item...</span>
+        </button>
+      )}
+
+      {/* Access Control */}
+      <div className="px-3 pt-4 pb-1">
+        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+          Permissions
+        </span>
+      </div>
+
+      <TreeNode
+        nodeId="access"
+        label="Access Control"
+        icon={Shield}
+        selected={selectedNode === "access"}
+        onClick={() => onSelectNode("access")}
+        issues={validationIssues}
+      />
+    </div>
+  );
+};