@checkstack/catalog-frontend 0.10.7 → 0.11.0

package/src/components/CatalogPage.tsx

@@ -1,18 +1,179 @@
-import React from "react";
-import { useApi, loggerApiRef } from "@checkstack/frontend-api";
-import { PageLayout } from "@checkstack/ui";
-import { Layers } from "lucide-react";
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  catalogRoutes,
+  catalogAccess,
+  CatalogApi,
+  type CatalogHealthStatuses,
+} from "@checkstack/catalog-common";
+import {
+  PageLayout,
+  EmptyState,
+  ListEmptyState,
+  LoadingSpinner,
+  Button,
+} from "@checkstack/ui";
+import { Layers, ArrowRight, Plus } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useCatalogBrowseState } from "../hooks/useCatalogBrowseState";
+import { CatalogBrowseToolbar } from "./browse/CatalogBrowseToolbar";
+import { CatalogGroupSection } from "./browse/CatalogGroupSection";
+import { CatalogBrowseHealth } from "./browse/CatalogBrowseHealth";
+import {
+  buildBrowseModel,
+  collectTagOptions,
+} from "./browse/filterEntities.logic";
+import { healthStatusesEqual } from "./browse/healthStatuses.logic";
 
-export const CatalogPage = () => {
-  const logger = useApi(loggerApiRef);
+const CatalogPageContent: React.FC = () => {
+  const catalogClient = usePluginClient(CatalogApi);
+  const accessApi = useApi(accessApiRef);
+  const { allowed: canManage } = accessApi.useAccess(
+    catalogAccess.system.manage,
+  );
+
+  const { data, isLoading } = catalogClient.getEntities.useQuery({});
+
+  const browse = useCatalogBrowseState();
+
+  const systems = useMemo(() => data?.systems ?? [], [data]);
+  const groups = useMemo(() => data?.groups ?? [], [data]);
 
-  React.useEffect(() => {
-    logger.info("Catalog Page loaded");
-  }, [logger]);
+  const tagOptions = useMemo(() => collectTagOptions(systems), [systems]);
+
+  // Bulk health reported by the optional CatalogBrowseHealthSlot filler. `null`
+  // until a filler reports (or forever, if no health source is installed). The
+  // group rollups + health filter derive from this DATA, never from rendered
+  // badges (healthy systems emit no badge).
+  const [healthStatuses, setHealthStatuses] =
+    useState<CatalogHealthStatuses | null>(null);
+  // The filler re-reports a new statuses object on every render/poll; only adopt
+  // it when a value actually changed. Returning `prev` unchanged lets React bail
+  // out of the re-render, which stops the browse model from recomputing and the
+  // system rows from remounting in a loop (so they stay interactive).
+  const handleStatuses = useCallback((statuses: CatalogHealthStatuses) => {
+    setHealthStatuses((prev) =>
+      healthStatusesEqual(prev, statuses) ? prev : statuses,
+    );
+  }, []);
+  const healthEnabled = healthStatuses !== null;
+
+  const systemIds = useMemo(() => systems.map((s) => s.id), [systems]);
+
+  const model = useMemo(
+    () =>
+      buildBrowseModel({
+        systems,
+        groups,
+        // Filter on the debounced query so typing stays smooth on large lists.
+        state: { ...browse.state, query: browse.debouncedQuery },
+        statuses: healthStatuses ?? undefined,
+      }),
+    [systems, groups, browse.state, browse.debouncedQuery, healthStatuses],
+  );
+
+  const manageLink = (
+    <Link
+      to={resolveRoute(catalogRoutes.routes.config)}
+      className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
+    >
+      Manage catalog
+      <ArrowRight className="w-4 h-4" />
+    </Link>
+  );
 
   return (
-    <PageLayout title="Catalog" icon={Layers}>
-      <p className="text-muted-foreground">Welcome to the Service Catalog.</p>
+    <PageLayout
+      title="Catalog"
+      subtitle="Browse every system, grouped the way your teams think about them"
+      icon={Layers}
+      actions={canManage ? manageLink : undefined}
+    >
+      {isLoading ? (
+        <div className="p-12 flex justify-center">
+          <LoadingSpinner />
+        </div>
+      ) : model.isEmptyCatalog ? (
+        <EmptyState
+          icon={<Layers className="size-10" />}
+          title="No systems in the catalog yet"
+          description="Systems are the things Checkstack keeps an eye on — services, hosts, jobs, databases. Almost everything else (health checks, SLOs, incidents) hangs off a system. Once you add one, it shows up here."
+          steps={[
+            "Open catalog management to register your first system.",
+            "Group related systems by team, product area, or environment.",
+            "Come back here to browse and search the whole catalog at a glance.",
+          ]}
+          actions={
+            canManage ? (
+              <Button asChild>
+                <Link to={resolveRoute(catalogRoutes.routes.config)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add your first system
+                </Link>
+              </Button>
+            ) : undefined
+          }
+        />
+      ) : (
+        <div className="space-y-6">
+          {/*
+            Headless health boundary: the optional CatalogBrowseHealthSlot filler
+            bulk-fetches system health and reports it via onStatuses. Renders
+            nothing when no health source is installed (slot unfilled).
+          */}
+          <CatalogBrowseHealth
+            systemIds={systemIds}
+            onStatuses={handleStatuses}
+          />
+
+          <CatalogBrowseToolbar
+            query={browse.state.query}
+            onQueryChange={browse.setQuery}
+            group={browse.state.group}
+            onGroupChange={browse.setGroup}
+            groups={groups}
+            health={browse.state.health}
+            onHealthChange={browse.setHealth}
+            healthEnabled={healthEnabled}
+            tag={browse.state.tag}
+            onTagChange={browse.setTag}
+            tagOptions={tagOptions}
+            density={browse.state.density}
+            onDensityChange={browse.setDensity}
+          />
+
+          {model.isFilteredEmpty ? (
+            <ListEmptyState
+              resource="systems"
+              description="No systems match the current search and filters."
+              actions={
+                <Button variant="outline" onClick={browse.clearFilters}>
+                  Clear filters
+                </Button>
+              }
+            />
+          ) : (
+            <div className="space-y-3">
+              {model.sections.map((section) => (
+                <CatalogGroupSection
+                  key={section.id}
+                  section={section}
+                  density={model.density}
+                  onToggle={browse.setSectionOpen}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </PageLayout>
   );
 };
+
+export const CatalogPage = wrapInSuspense(CatalogPageContent);

package/src/components/EnvironmentEditor.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  useToast,
+} from "@checkstack/ui";
+import { Plus, Trash2 } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+import {
+  metadataToRows,
+  rowsToMetadata,
+  hasDuplicateKeys,
+  emptyRow,
+  type CustomFieldRow,
+} from "./environment-fields.logic";
+
+export interface EnvironmentEditorInitialData {
+  name: string;
+  description?: string;
+  metadata?: Record<string, unknown> | null;
+}
+
+interface EnvironmentEditorProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (data: {
+    name: string;
+    description?: string;
+    metadata?: Record<string, string>;
+  }) => Promise<void>;
+  initialData?: EnvironmentEditorInitialData;
+}
+
+/**
+ * Create/edit dialog for an instance-wide environment. Mirrors
+ * {@link GroupEditor} for name/description and adds a free-form key/value
+ * custom-fields editor (v1 metadata is free-form; the pure row<->record
+ * conversion lives in `environment-fields.logic.ts`).
+ */
+export const EnvironmentEditor: React.FC<EnvironmentEditorProps> = ({
+  open,
+  onClose,
+  onSave,
+  initialData,
+}) => {
+  const [name, setName] = useState(initialData?.name ?? "");
+  const [description, setDescription] = useState(
+    initialData?.description ?? "",
+  );
+  const [fields, setFields] = useState<CustomFieldRow[]>(() =>
+    metadataToRows(initialData?.metadata),
+  );
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (open) {
+      setName(initialData?.name ?? "");
+      setDescription(initialData?.description ?? "");
+      setFields(metadataToRows(initialData?.metadata));
+    }
+  }, [open, initialData]);
+
+  const updateField = (rowId: string, patch: Partial<CustomFieldRow>) => {
+    setFields((prev) =>
+      prev.map((row) => (row.rowId === rowId ? { ...row, ...patch } : row)),
+    );
+  };
+
+  const removeField = (rowId: string) => {
+    setFields((prev) => prev.filter((row) => row.rowId !== rowId));
+  };
+
+  const addField = () => {
+    setFields((prev) => [...prev, emptyRow()]);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    if (hasDuplicateKeys(fields)) {
+      toast.error("Custom field keys must be unique");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await onSave({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        metadata: rowsToMetadata(fields),
+      });
+      onClose();
+    } catch (error) {
+      toast.error(extractErrorMessage(error, "Failed to save environment"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent size="default">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>
+              {initialData ? "Edit Environment" : "Create Environment"}
+            </DialogTitle>
+            <DialogDescription className="sr-only">
+              {initialData
+                ? "Modify this environment and its custom fields"
+                : "Create a new environment with custom fields"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="environment-name">Name</Label>
+              <Input
+                id="environment-name"
+                placeholder="e.g. Production"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="environment-description">
+                Description (optional)
+              </Label>
+              <Input
+                id="environment-description"
+                placeholder="e.g. Live production traffic"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>Custom fields</Label>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={addField}
+                >
+                  <Plus className="w-4 h-4 mr-1" />
+                  Add field
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Free-form key/value pairs (baseUrl, region, tier, ...). These
+                surface to checks assigned to systems in this environment.
+              </p>
+              {fields.length === 0 ? (
+                <p className="text-sm text-muted-foreground py-2">
+                  No custom fields yet.
+                </p>
+              ) : (
+                <div className="space-y-2">
+                  {fields.map((row) => (
+                    <div key={row.rowId} className="flex items-center gap-2">
+                      <Input
+                        aria-label="Field key"
+                        placeholder="key"
+                        value={row.key}
+                        onChange={(e) =>
+                          updateField(row.rowId, { key: e.target.value })
+                        }
+                      />
+                      <Input
+                        aria-label="Field value"
+                        placeholder="value"
+                        value={row.value}
+                        onChange={(e) =>
+                          updateField(row.rowId, { value: e.target.value })
+                        }
+                      />
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => removeField(row.rowId)}
+                        aria-label="Remove field"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading || !name.trim()}>
+              {loading
+                ? "Saving..."
+                : initialData
+                  ? "Save Changes"
+                  : "Create Environment"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/EnvironmentPreviewPicker.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@checkstack/ui";
+import { Eye } from "lucide-react";
+import type { Environment } from "@checkstack/catalog-common";
+import { toPreviewOptions } from "./environment-preview.logic";
+
+interface EnvironmentPreviewPickerProps {
+  /** Environments to choose from (the system's, or all when no system applies). */
+  environments: ReadonlyArray<Environment>;
+  /** Currently selected environment id, or null for "none". */
+  selectedId: string | null;
+  /** Called with the picked id, or null when the author clears the selection. */
+  onSelect: (environmentId: string | null) => void;
+}
+
+/**
+ * Unobtrusive "Preview as: &lt;environment&gt;" picker. Lets a config author
+ * pick a catalog environment so `x-templatable` fields (e.g. an HTTP URL using
+ * `{{ environment.baseUrl }}`) preview their resolved value live. Purely
+ * presentational: the host supplies the environment list + selection state.
+ * Renders nothing when there are no environments to preview against.
+ */
+export const EnvironmentPreviewPicker: React.FC<
+  EnvironmentPreviewPickerProps
+> = ({ environments, selectedId, onSelect }) => {
+  if (environments.length === 0) return null;
+
+  const options = toPreviewOptions(environments);
+  // Sentinel value for the "no environment" option — the underlying Select
+  // primitive cannot use an empty-string item value.
+  const NONE = "__none__";
+
+  return (
+    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+      <Eye className="h-3.5 w-3.5 shrink-0" />
+      <span>Preview as:</span>
+      <Select
+        value={selectedId ?? NONE}
+        onValueChange={(value) => onSelect(value === NONE ? null : value)}
+      >
+        <SelectTrigger className="h-7 w-[180px] text-xs">
+          <SelectValue placeholder="No environment" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={NONE}>No environment</SelectItem>
+          {options.map((option) => (
+            <SelectItem key={option.id} value={option.id}>
+              {option.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};

package/src/components/SystemDetailPage.tsx

@@ -20,12 +20,47 @@ import {
   PageContent,
   PageLayout,
   LoadingSpinner,
-  AccessDenied,
+  NotFound,
 } from "@checkstack/ui";
+import { formatDate } from "../utils/formatDate.logic";
+import {
+  normalizeMetadata,
+  type MetadataEntry,
+} from "../utils/normalizeMetadata.logic";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 
 import { Activity, Calendar, ExternalLink, Mail, User } from "lucide-react";
 
+const MetadataSection: React.FC<{
+  metadata: Record<string, unknown> | null | undefined;
+}> = ({ metadata }) => {
+  const entries: MetadataEntry[] = normalizeMetadata(metadata);
+  if (entries.length === 0) return null;
+
+  return (
+    <>
+      <div className="h-px bg-border" />
+      <div className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+          Metadata
+        </h3>
+        <dl className="space-y-1.5">
+          {entries.map(({ key, displayValue }) => (
+            <div key={key} className="flex gap-2 text-xs min-w-0">
+              <dt className="shrink-0 font-medium text-muted-foreground">
+                {key}
+              </dt>
+              <dd className="text-foreground truncate">
+                <code className="font-mono">{displayValue}</code>
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </>
+  );
+};
+
 export const SystemDetailPage: React.FC = () => {
   const { systemId } = useParams<{ systemId: string }>();
   const catalogClient = usePluginClient(CatalogApi);
@@ -43,10 +78,12 @@ export const SystemDetailPage: React.FC = () => {
   const { data: groupsData, isLoading: groupsLoading } =
     catalogClient.getGroups.useQuery({});
 
-  // Fetch contacts for this system
+  // Fetch contacts for this system. Contacts carry PII (name/email), so the
+  // endpoint is authenticated-only; skip the request for anonymous viewers
+  // (it would 401) and fall back to the "No contacts assigned" empty state.
   const { data: contactsData } = catalogClient.getSystemContacts.useQuery(
     { systemId: systemId ?? "" },
-    { enabled: !!systemId },
+    { enabled: !!systemId && !!session },
   );
 
   // Fetch additional links for this system
@@ -92,9 +129,7 @@ export const SystemDetailPage: React.FC = () => {
     return (
       <Page>
         <PageContent>
-          <div className="max-w-3xl space-y-6">
-            <AccessDenied />
-          </div>
+          <NotFound message="This system doesn't exist or has been removed." />
         </PageContent>
       </Page>
     );
@@ -107,7 +142,9 @@ export const SystemDetailPage: React.FC = () => {
 
   const headerActions = (
     <div className="flex items-center gap-2">
-      <ExtensionSlot slot={SystemStateBadgesSlot} context={{ system }} />
+      <div className="flex items-center gap-1">
+        <ExtensionSlot slot={SystemStateBadgesSlot} context={{ system }} />
+      </div>
       {session && (
         <NotificationSubscriptionsManager
           target={catalogSystemTarget}
@@ -149,21 +186,11 @@ export const SystemDetailPage: React.FC = () => {
               <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
                 <span className="flex items-center gap-1.5">
                   <Calendar className="h-3 w-3" />
-                  Created{" "}
-                  {new Date(system.createdAt).toLocaleDateString("en-US", {
-                    year: "numeric",
-                    month: "short",
-                    day: "numeric",
-                  })}
+                  Created {formatDate(system.createdAt)}
                 </span>
                 <span className="flex items-center gap-1.5">
                   <Calendar className="h-3 w-3" />
-                  Updated{" "}
-                  {new Date(system.updatedAt).toLocaleDateString("en-US", {
-                    year: "numeric",
-                    month: "short",
-                    day: "numeric",
-                  })}
+                  Updated {formatDate(system.updatedAt)}
                 </span>
               </div>
             </div>
@@ -267,21 +294,7 @@ export const SystemDetailPage: React.FC = () => {
             </div>
 
             {/* Metadata (conditional) */}
-            {system.metadata &&
-              typeof system.metadata === "object" &&
-              Object.keys(system.metadata).length > 0 && (
-                <>
-                  <div className="h-px bg-border" />
-                  <div className="space-y-2">
-                    <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                      Metadata
-                    </h3>
-                    <pre className="text-xs text-foreground bg-muted/30 p-3 rounded-md border border-border overflow-x-auto">
-                      {JSON.stringify(system.metadata, undefined, 2)}
-                    </pre>
-                  </div>
-                </>
-              )}
+            <MetadataSection metadata={system.metadata} />
           </CardContent>
         </Card>
       </div>

package/src/components/SystemEditor.tsx

@@ -14,6 +14,7 @@ import {
 import { TeamAccessEditor } from "@checkstack/auth-frontend";
 import { ContactsEditor } from "./ContactsEditor";
 import { SystemLinksEditor } from "./SystemLinksEditor";
+import { SystemEnvironmentsEditor } from "./SystemEnvironmentsEditor";
 import { ExtensionSlot } from "@checkstack/frontend-api";
 import { SystemEditorSlot } from "@checkstack/catalog-common";
 import { extractErrorMessage } from "@checkstack/common";
@@ -111,6 +112,11 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
             {/* Additional Links - only shown for existing systems */}
             {initialData?.id && <SystemLinksEditor systemId={initialData.id} />}
 
+            {/* Environment membership - only shown for existing systems */}
+            {initialData?.id && (
+              <SystemEnvironmentsEditor systemId={initialData.id} />
+            )}
+
             {/* Team Access Editor - only shown for existing systems */}
             {initialData?.id && (
               <TeamAccessEditor