@checkstack/catalog-frontend 0.10.7 → 0.11.0

package/src/components/environment-fields.logic.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from "bun:test";
+import {
+  metadataToRows,
+  rowsToMetadata,
+  hasDuplicateKeys,
+  emptyRow,
+  toggleSelectedId,
+  type CustomFieldRow,
+} from "./environment-fields.logic";
+
+const row = (key: string, value: string): CustomFieldRow => ({
+  rowId: `r-${key}-${value}`,
+  key,
+  value,
+});
+
+describe("metadataToRows", () => {
+  it("returns no rows for null/undefined/empty", () => {
+    expect(metadataToRows(null)).toEqual([]);
+    expect(metadataToRows(undefined)).toEqual([]);
+    expect(metadataToRows({})).toEqual([]);
+  });
+
+  it("expands string fields verbatim", () => {
+    const rows = metadataToRows({ baseUrl: "https://x", region: "eu" });
+    expect(rows.map((r) => [r.key, r.value])).toEqual([
+      ["baseUrl", "https://x"],
+      ["region", "eu"],
+    ]);
+  });
+
+  it("stringifies non-string values", () => {
+    const rows = metadataToRows({ tier: 1, enabled: true, list: ["a"] });
+    const byKey = Object.fromEntries(rows.map((r) => [r.key, r.value]));
+    expect(byKey.tier).toBe("1");
+    expect(byKey.enabled).toBe("true");
+    expect(byKey.list).toBe('["a"]');
+  });
+
+  it("assigns unique row ids", () => {
+    const rows = metadataToRows({ a: "1", b: "2" });
+    expect(rows[0].rowId).not.toBe(rows[1].rowId);
+  });
+});
+
+describe("emptyRow", () => {
+  it("creates a blank row with a fresh id", () => {
+    const r1 = emptyRow();
+    const r2 = emptyRow();
+    expect(r1.key).toBe("");
+    expect(r1.value).toBe("");
+    expect(r1.rowId).not.toBe(r2.rowId);
+  });
+});
+
+describe("rowsToMetadata", () => {
+  it("collapses rows into a record", () => {
+    expect(rowsToMetadata([row("baseUrl", "https://x"), row("tier", "1")])).toEqual({
+      baseUrl: "https://x",
+      tier: "1",
+    });
+  });
+
+  it("drops rows with a blank/whitespace key", () => {
+    expect(rowsToMetadata([row("", "ignored"), row("  ", "x"), row("k", "v")])).toEqual({
+      k: "v",
+    });
+  });
+
+  it("trims keys but keeps values verbatim", () => {
+    expect(rowsToMetadata([row("  region  ", "  eu  ")])).toEqual({
+      region: "  eu  ",
+    });
+  });
+
+  it("last duplicate key wins", () => {
+    expect(rowsToMetadata([row("k", "first"), row("k", "second")])).toEqual({
+      k: "second",
+    });
+  });
+});
+
+describe("toggleSelectedId", () => {
+  it("adds an id that is not selected", () => {
+    expect(toggleSelectedId({ selected: ["a"], id: "b" })).toEqual(["a", "b"]);
+  });
+
+  it("removes an id that is already selected", () => {
+    expect(toggleSelectedId({ selected: ["a", "b"], id: "a" })).toEqual(["b"]);
+  });
+
+  it("does not mutate the input array", () => {
+    const selected = ["a"];
+    toggleSelectedId({ selected, id: "b" });
+    expect(selected).toEqual(["a"]);
+  });
+});
+
+describe("hasDuplicateKeys", () => {
+  it("is false when keys are unique", () => {
+    expect(hasDuplicateKeys([row("a", "1"), row("b", "2")])).toBe(false);
+  });
+
+  it("ignores blank keys", () => {
+    expect(hasDuplicateKeys([row("", "1"), row("", "2"), row("a", "3")])).toBe(false);
+  });
+
+  it("detects duplicate non-blank keys (after trim)", () => {
+    expect(hasDuplicateKeys([row("a ", "1"), row(" a", "2")])).toBe(true);
+  });
+});

package/src/components/environment-fields.logic.ts

@@ -0,0 +1,98 @@
+/**
+ * DOM-free helpers for the environment custom-fields editor.
+ *
+ * The editor renders free-form key/value rows. These helpers convert
+ * between the stored `metadata` record and the editable row list, and
+ * collapse the rows back into a record on save. Kept pure so they can be
+ * unit-tested without a DOM (CI runs `bun test` from the repo root without
+ * happy-dom).
+ */
+
+export interface CustomFieldRow {
+  /** Stable client-side id so React keys survive reordering/removal. */
+  rowId: string;
+  key: string;
+  value: string;
+}
+
+let rowCounter = 0;
+function nextRowId(): string {
+  rowCounter += 1;
+  return `field-${rowCounter}`;
+}
+
+/**
+ * Expand a stored `metadata` record into editable rows. Non-string values
+ * are stringified so the free-form editor can round-trip them as text
+ * (v1 custom fields are free-form, string-ish values).
+ */
+export function metadataToRows(
+  metadata: Record<string, unknown> | null | undefined,
+): CustomFieldRow[] {
+  if (!metadata) return [];
+  return Object.entries(metadata).map(([key, value]) => ({
+    rowId: nextRowId(),
+    key,
+    value: stringifyValue(value),
+  }));
+}
+
+function stringifyValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+}
+
+/** Create a fresh empty row (for the "add field" action). */
+export function emptyRow(): CustomFieldRow {
+  return { rowId: nextRowId(), key: "", value: "" };
+}
+
+/**
+ * Collapse editable rows back into a metadata record. Rows with a blank
+ * (after-trim) key are dropped. On duplicate keys, the LAST row wins
+ * (consistent with how a JS object literal resolves duplicate keys).
+ * Keys are trimmed; values are kept verbatim.
+ */
+export function rowsToMetadata(
+  rows: ReadonlyArray<CustomFieldRow>,
+): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const row of rows) {
+    const key = row.key.trim();
+    if (key === "") continue;
+    out[key] = row.value;
+  }
+  return out;
+}
+
+/**
+ * Toggle an environment id in/out of a selected-id set. Returns a new
+ * array (does not mutate). Used by the per-system environment picker.
+ */
+export function toggleSelectedId(props: {
+  selected: ReadonlyArray<string>;
+  id: string;
+}): string[] {
+  const { selected, id } = props;
+  return selected.includes(id)
+    ? selected.filter((existing) => existing !== id)
+    : [...selected, id];
+}
+
+/** True when any row has a non-blank key that duplicates another row's key. */
+export function hasDuplicateKeys(
+  rows: ReadonlyArray<CustomFieldRow>,
+): boolean {
+  const seen = new Set<string>();
+  for (const row of rows) {
+    const key = row.key.trim();
+    if (key === "") continue;
+    if (seen.has(key)) return true;
+    seen.add(key);
+  }
+  return false;
+}

package/src/components/environment-preview.logic.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from "bun:test";
+import {
+  toPreviewOptions,
+  environmentToPreviewFields,
+  findSelectedEnvironment,
+} from "./environment-preview.logic";
+import type { Environment } from "@checkstack/catalog-common";
+
+const env = (over: Partial<Environment> & Pick<Environment, "id" | "name">): Environment => ({
+  description: null,
+  systemIds: [],
+  metadata: null,
+  createdAt: new Date(0),
+  updatedAt: new Date(0),
+  ...over,
+});
+
+describe("toPreviewOptions", () => {
+  it("maps id + name preserving order", () => {
+    const options = toPreviewOptions([
+      env({ id: "e1", name: "Staging" }),
+      env({ id: "e2", name: "Production" }),
+    ]);
+    expect(options).toEqual([
+      { id: "e1", name: "Staging" },
+      { id: "e2", name: "Production" },
+    ]);
+  });
+
+  it("returns empty for empty input", () => {
+    expect(toPreviewOptions([])).toEqual([]);
+  });
+});
+
+describe("environmentToPreviewFields", () => {
+  it("returns the environment metadata verbatim", () => {
+    const fields = environmentToPreviewFields(
+      env({ id: "e1", name: "Staging", metadata: { baseUrl: "https://staging.example.com" } }),
+    );
+    expect(fields).toEqual({ baseUrl: "https://staging.example.com" });
+  });
+
+  it("returns an empty object when metadata is null", () => {
+    expect(environmentToPreviewFields(env({ id: "e1", name: "Staging" }))).toEqual({});
+  });
+
+  it("returns an empty object for null/undefined environment", () => {
+    expect(environmentToPreviewFields(null)).toEqual({});
+    expect(environmentToPreviewFields(undefined)).toEqual({});
+  });
+});
+
+describe("findSelectedEnvironment", () => {
+  const environments = [
+    env({ id: "e1", name: "Staging" }),
+    env({ id: "e2", name: "Production" }),
+  ];
+
+  it("finds the selected environment by id", () => {
+    expect(
+      findSelectedEnvironment({ environments, selectedId: "e2" })?.name,
+    ).toBe("Production");
+  });
+
+  it("returns null when no id is selected", () => {
+    expect(findSelectedEnvironment({ environments, selectedId: null })).toBeNull();
+    expect(findSelectedEnvironment({ environments, selectedId: undefined })).toBeNull();
+    expect(findSelectedEnvironment({ environments, selectedId: "" })).toBeNull();
+  });
+
+  it("returns null when the id is no longer present", () => {
+    expect(
+      findSelectedEnvironment({ environments, selectedId: "gone" }),
+    ).toBeNull();
+  });
+});

package/src/components/environment-preview.logic.ts

@@ -0,0 +1,61 @@
+/**
+ * DOM-free helpers backing the "Preview as: <environment>" picker.
+ *
+ * Host plugins (e.g. the health-check collector editor) let an author pick a
+ * catalog environment to preview `x-templatable` config fields against. These
+ * helpers map a catalog `Environment` onto the `environment` slice of a
+ * template-preview context and pick a selected environment by id. Kept pure so
+ * they can be unit-tested without a DOM (CI runs `bun test` from the repo root
+ * without happy-dom).
+ */
+
+import type { Environment } from "@checkstack/catalog-common";
+
+/**
+ * Option shown in the environment picker. `name` is the catalog environment's
+ * display name; `id` is its stable id (the picker's `value`).
+ */
+export interface EnvironmentPreviewOption {
+  id: string;
+  name: string;
+}
+
+/**
+ * Map catalog environments to picker options, preserving input order. The
+ * environment's display name is used verbatim; ids are assumed unique (the
+ * catalog guarantees this).
+ */
+export function toPreviewOptions(
+  environments: ReadonlyArray<Environment>,
+): EnvironmentPreviewOption[] {
+  return environments.map((env) => ({ id: env.id, name: env.name }));
+}
+
+/**
+ * The custom-field record a chosen environment contributes to the preview
+ * context's `environment` slice. Mirrors the run-time semantics exactly:
+ * the backend exposes `environment.fields = env.metadata ?? {}` to the
+ * `x-templatable` render pass (see `effective-environments.ts`), so the
+ * editor preview must use the same source to never diverge.
+ */
+export function environmentToPreviewFields(
+  environment: Environment | null | undefined,
+): Record<string, unknown> {
+  return environment?.metadata ?? {};
+}
+
+/**
+ * Resolve the selected environment from a list by id. Returns `null` when no
+ * id is selected or the id is no longer present (e.g. the environment was
+ * removed since selection). Callers treat `null` as "no preview environment".
+ */
+export function findSelectedEnvironment({
+  environments,
+  selectedId,
+}: {
+  environments: ReadonlyArray<Environment>;
+  selectedId: string | null | undefined;
+}): Environment | null {
+  if (!selectedId) return null;
+  return environments.find((env) => env.id === selectedId) ?? null;
+}

package/src/components/manage/AssignMenu.tsx

@@ -0,0 +1,78 @@
+import { useState, type ReactNode } from "react";
+import { Popover, PopoverTrigger, PopoverContent, cn } from "@checkstack/ui";
+
+export interface AssignMenuItem {
+  id: string;
+  label: string;
+}
+
+interface AssignMenuProps {
+  /** Trigger button content (an icon and/or text). */
+  trigger: ReactNode;
+  items: AssignMenuItem[];
+  onSelect: (id: string) => void;
+  disabled?: boolean;
+  /** Accessible label for the trigger. */
+  triggerLabel: string;
+  /** Empty-state text when there are no items to choose. */
+  emptyLabel?: string;
+  className?: string;
+}
+
+/**
+ * A compact "assign to …" picker (add a system to a group, a group to a system,
+ * attach an environment, bulk-assign). Built on the Radix `Popover` so the menu
+ * is PORTALED out of the table's `overflow-auto` wrapper - a plain absolute
+ * popover would be clipped (and unclickable) inside a table cell.
+ */
+export function AssignMenu({
+  trigger,
+  items,
+  onSelect,
+  disabled,
+  triggerLabel,
+  emptyLabel = "Nothing to add",
+  className,
+}: AssignMenuProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={triggerLabel}
+          title={triggerLabel}
+          className={cn(
+            "inline-flex items-center gap-1 rounded-md border border-dashed border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+            className,
+          )}
+        >
+          {trigger}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="max-h-64 w-56 overflow-y-auto p-1">
+        {items.length === 0 ? (
+          <p className="px-2 py-1.5 text-xs text-muted-foreground">
+            {emptyLabel}
+          </p>
+        ) : (
+          items.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className="block w-full truncate rounded-sm px-2 py-1.5 text-left text-sm hover:bg-muted"
+              onClick={() => {
+                onSelect(item.id);
+                setOpen(false);
+              }}
+            >
+              {item.label}
+            </button>
+          ))
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/manage/EnvironmentsTab.tsx

@@ -0,0 +1,230 @@
+import { useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  EmptyState,
+  ListEmptyState,
+} from "@checkstack/ui";
+import { Plus, Boxes, Pencil, Trash2, X } from "lucide-react";
+import type { Environment, System } from "../../api";
+import { AssignMenu } from "./AssignMenu";
+
+export interface EnvironmentsTabProps {
+  /** Environments after search/filter. */
+  environments: Environment[];
+  totalCount: number;
+  /** Whether the user may create/edit/delete environment definitions. */
+  canManage: boolean;
+  allSystems: System[];
+  onAddSystemToEnvironment: (systemId: string, environmentId: string) => void;
+  onRemoveSystemFromEnvironment: (
+    systemId: string,
+    environmentId: string,
+  ) => void;
+  onAddEnvironment: () => void;
+  onEditEnvironment: (environment: Environment) => void;
+  onDeleteEnvironment: (id: string) => void;
+  onClearFilters: () => void;
+}
+
+export function EnvironmentsTab(
+  props: EnvironmentsTabProps,
+): React.ReactElement {
+  const { environments, totalCount, canManage, allSystems, onAddEnvironment } =
+    props;
+
+  const systemsById = useMemo(() => {
+    const map = new Map<string, System>();
+    for (const system of allSystems) map.set(system.id, system);
+    return map;
+  }, [allSystems]);
+
+  const header = (
+    <div className="mb-4 flex items-center justify-between gap-2">
+      <div>
+        <h2 className="flex items-center gap-2 text-lg font-semibold">
+          <Boxes className="h-5 w-5 text-muted-foreground" />
+          Environments
+          <span className="text-sm font-normal text-muted-foreground">
+            {totalCount}
+          </span>
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Instance-wide environments carry free-form custom fields and can be
+          attached to any system.
+        </p>
+      </div>
+      {canManage && (
+        <Button size="sm" onClick={onAddEnvironment}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Environment
+        </Button>
+      )}
+    </div>
+  );
+
+  if (totalCount === 0) {
+    return (
+      <div>
+        {header}
+        <EmptyState
+          icon={<Boxes className="size-10" />}
+          title="No environments yet"
+          description="Environments (prod, staging, eu-west, …) hold custom fields you can attach to systems and reference in templates."
+          actions={
+            canManage ? (
+              <Button onClick={onAddEnvironment}>
+                <Plus className="mr-2 h-4 w-4" />
+                Add your first environment
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {header}
+      {environments.length === 0 ? (
+        <ListEmptyState
+          resource="environments"
+          description="No environments match the current search."
+          actions={
+            <Button variant="outline" onClick={props.onClearFilters}>
+              Clear filters
+            </Button>
+          }
+        />
+      ) : (
+        <div className="rounded-lg border border-border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-48">Name</TableHead>
+                <TableHead>Systems</TableHead>
+                <TableHead className="w-20">Fields</TableHead>
+                <TableHead className="w-px text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {environments.map((environment) => {
+                const fieldCount = Object.keys(
+                  environment.metadata ?? {},
+                ).length;
+                const memberIds = environment.systemIds ?? [];
+                const members = memberIds
+                  .map((id) => systemsById.get(id))
+                  .filter((s): s is System => s !== undefined);
+                const available = allSystems.filter(
+                  (s) => !memberIds.includes(s.id),
+                );
+                return (
+                  <TableRow key={environment.id}>
+                    <TableCell className="align-top">
+                      <div className="font-medium text-foreground">
+                        {environment.name}
+                      </div>
+                      {environment.description && (
+                        <div className="text-xs text-muted-foreground">
+                          {environment.description}
+                        </div>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        {members.length === 0 && (
+                          <span className="text-xs text-muted-foreground">
+                            No systems
+                          </span>
+                        )}
+                        {members.map((system) => (
+                          <span
+                            key={system.id}
+                            className="inline-flex items-center gap-1 rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+                          >
+                            {system.name}
+                            <button
+                              type="button"
+                              aria-label={`Remove ${system.name} from ${environment.name}`}
+                              title={`Remove ${system.name}`}
+                              onClick={() =>
+                                props.onRemoveSystemFromEnvironment(
+                                  system.id,
+                                  environment.id,
+                                )
+                              }
+                              className="text-muted-foreground hover:text-foreground"
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </span>
+                        ))}
+                        <AssignMenu
+                          disabled={available.length === 0}
+                          triggerLabel={`Attach a system to ${environment.name}`}
+                          trigger={
+                            <>
+                              <Plus className="h-3 w-3" />
+                              System
+                            </>
+                          }
+                          items={available.map((s) => ({
+                            id: s.id,
+                            label: s.name,
+                          }))}
+                          emptyLabel="All systems attached"
+                          onSelect={(systemId) =>
+                            props.onAddSystemToEnvironment(
+                              systemId,
+                              environment.id,
+                            )
+                          }
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell className="align-top text-sm text-muted-foreground">
+                      {fieldCount}
+                    </TableCell>
+                    <TableCell className="align-top">
+                      {canManage && (
+                        <div className="flex items-center justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            aria-label={`Edit ${environment.name}`}
+                            onClick={() => props.onEditEnvironment(environment)}
+                          >
+                            <Pencil className="h-3.5 w-3.5" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive/90"
+                            aria-label={`Delete ${environment.name}`}
+                            onClick={() =>
+                              props.onDeleteEnvironment(environment.id)
+                            }
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </Button>
+                        </div>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}