@clef-sh/ui 0.1.13-beta.88

package/src/client/screens/MatrixView.test.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { MatrixView } from "./MatrixView";
+import type { ClefManifest, MatrixStatus } from "@clef-sh/core";
+
+const manifest: ClefManifest = {
+  version: 1,
+  environments: [
+    { name: "dev", description: "Dev" },
+    { name: "production", description: "Prod", protected: true },
+  ],
+  namespaces: [
+    { name: "database", description: "DB" },
+    { name: "auth", description: "Auth" },
+  ],
+  sops: { default_backend: "age" },
+  file_pattern: "{namespace}/{environment}.enc.yaml",
+};
+
+const healthyStatuses: MatrixStatus[] = [
+  {
+    cell: {
+      namespace: "database",
+      environment: "dev",
+      filePath: "database/dev.enc.yaml",
+      exists: true,
+    },
+    keyCount: 4,
+    pendingCount: 0,
+    lastModified: new Date(),
+    issues: [],
+  },
+  {
+    cell: {
+      namespace: "database",
+      environment: "production",
+      filePath: "database/production.enc.yaml",
+      exists: true,
+    },
+    keyCount: 3,
+    pendingCount: 0,
+    lastModified: new Date(),
+    issues: [{ type: "missing_keys", message: "Key DB_REPLICA missing", key: "DB_REPLICA" }],
+  },
+  {
+    cell: { namespace: "auth", environment: "dev", filePath: "auth/dev.enc.yaml", exists: true },
+    keyCount: 6,
+    pendingCount: 0,
+    lastModified: new Date(),
+    issues: [],
+  },
+  {
+    cell: {
+      namespace: "auth",
+      environment: "production",
+      filePath: "auth/production.enc.yaml",
+      exists: true,
+    },
+    keyCount: 6,
+    pendingCount: 0,
+    lastModified: new Date(),
+    issues: [],
+  },
+];
+
+describe("MatrixView", () => {
+  it("renders healthy state with summary pills", () => {
+    const setView = jest.fn();
+    const setNs = jest.fn();
+
+    render(
+      <MatrixView
+        setView={setView}
+        setNs={setNs}
+        manifest={manifest}
+        matrixStatuses={healthyStatuses}
+      />,
+    );
+
+    expect(screen.getByText("Secret Matrix")).toBeInTheDocument();
+    expect(screen.getByText(/healthy/)).toBeInTheDocument();
+    expect(screen.getByText(/missing keys/)).toBeInTheDocument();
+    expect(screen.getByTestId("matrix-table")).toBeInTheDocument();
+  });
+
+  it("renders loading state when manifest is null", () => {
+    render(
+      <MatrixView setView={jest.fn()} setNs={jest.fn()} manifest={null} matrixStatuses={[]} />,
+    );
+
+    expect(screen.getByText("Loading manifest...")).toBeInTheDocument();
+  });
+
+  it("renders empty state with zero counts", () => {
+    render(
+      <MatrixView setView={jest.fn()} setNs={jest.fn()} manifest={manifest} matrixStatuses={[]} />,
+    );
+
+    expect(screen.getByText("0 healthy")).toBeInTheDocument();
+  });
+
+  it("navigates to editor when row is clicked", () => {
+    const setView = jest.fn();
+    const setNs = jest.fn();
+
+    render(
+      <MatrixView
+        setView={setView}
+        setNs={setNs}
+        manifest={manifest}
+        matrixStatuses={healthyStatuses}
+      />,
+    );
+
+    const row = screen.getByTestId("matrix-row-database");
+    fireEvent.click(row);
+
+    expect(setNs).toHaveBeenCalledWith("database");
+    expect(setView).toHaveBeenCalledWith("editor");
+  });
+
+  it("navigates to diff view when button is clicked", () => {
+    const setView = jest.fn();
+
+    render(
+      <MatrixView
+        setView={setView}
+        setNs={jest.fn()}
+        manifest={manifest}
+        matrixStatuses={healthyStatuses}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("diff-environments-btn"));
+    expect(setView).toHaveBeenCalledWith("diff");
+  });
+});

package/src/client/screens/MatrixView.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import { theme } from "../theme";
+import { TopBar } from "../components/TopBar";
+import { Button } from "../components/Button";
+import { MatrixGrid } from "../components/MatrixGrid";
+import type { ViewName } from "../components/Sidebar";
+import type { ClefManifest, MatrixStatus } from "@clef-sh/core";
+
+interface MatrixViewProps {
+  setView: (view: ViewName) => void;
+  setNs: (ns: string) => void;
+  manifest: ClefManifest | null;
+  matrixStatuses: MatrixStatus[];
+}
+
+export function MatrixView({ setView, setNs, manifest, matrixStatuses }: MatrixViewProps) {
+  if (!manifest) {
+    return (
+      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+        <TopBar title="Secret Matrix" subtitle="Loading..." />
+        <div style={{ flex: 1, padding: 28 }}>
+          <p style={{ color: theme.textMuted, fontFamily: theme.sans, fontSize: 13 }}>
+            Loading manifest...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const environments = manifest.environments;
+  const namespaces = manifest.namespaces;
+  const matrixLoading = matrixStatuses.length === 0 && namespaces.length > 0;
+
+  const healthyCount = matrixStatuses.filter((s) => s.cell.exists && s.issues.length === 0).length;
+  const missingCount = matrixStatuses.filter(
+    (s) => !s.cell.exists || s.issues.some((i) => i.type === "missing_keys"),
+  ).length;
+  const warnCount = matrixStatuses.filter((s) =>
+    s.issues.some((i) => i.type === "schema_warning"),
+  ).length;
+  const totalPending = matrixStatuses.reduce((sum, s) => sum + (s.pendingCount ?? 0), 0);
+
+  const fileCount = namespaces.length * environments.length;
+
+  return (
+    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      <TopBar
+        title="Secret Matrix"
+        subtitle={`${namespaces.length} namespaces \u00B7 ${environments.length} environments \u00B7 ${fileCount} files`}
+        actions={
+          <>
+            <Button onClick={() => setView("lint")}>Lint All</Button>
+            <Button variant="primary">+ Namespace</Button>
+          </>
+        }
+      />
+
+      <div style={{ flex: 1, overflow: "auto", padding: 28, position: "relative" }}>
+        {matrixLoading && (
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: `${theme.bg}dd`,
+              zIndex: 10,
+              borderRadius: 8,
+            }}
+          >
+            <div
+              style={{
+                background: theme.surface,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 10,
+                padding: "24px 36px",
+                textAlign: "center",
+              }}
+            >
+              <div style={{ fontSize: 20, color: theme.accent, marginBottom: 8 }}>{"\u266A"}</div>
+              <div style={{ fontFamily: theme.sans, fontSize: 13, color: theme.textMuted }}>
+                Loading...
+              </div>
+            </div>
+          </div>
+        )}
+        {/* Summary pills */}
+        <div style={{ display: "flex", gap: 10, marginBottom: 28 }}>
+          {[
+            { label: `${healthyCount} healthy`, color: theme.green },
+            { label: `${missingCount} missing keys`, color: theme.red },
+            {
+              label: `${warnCount} schema warning${warnCount !== 1 ? "s" : ""}`,
+              color: theme.yellow,
+            },
+            ...(totalPending > 0
+              ? [
+                  {
+                    label: `${totalPending} pending value${totalPending !== 1 ? "s" : ""}`,
+                    color: theme.accent,
+                  },
+                ]
+              : []),
+          ].map((p) => (
+            <div
+              key={p.label}
+              style={{
+                fontFamily: theme.sans,
+                fontSize: 12,
+                fontWeight: 500,
+                color: p.color,
+                background: `${p.color}14`,
+                border: `1px solid ${p.color}33`,
+                borderRadius: 20,
+                padding: "4px 14px",
+              }}
+            >
+              {p.label}
+            </div>
+          ))}
+        </div>
+
+        <MatrixGrid
+          namespaces={namespaces}
+          environments={environments}
+          matrixStatuses={matrixStatuses}
+          onNamespaceClick={(nsName) => {
+            setNs(nsName);
+            setView("editor");
+          }}
+        />
+
+        {/* Quick actions */}
+        <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
+          <Button data-testid="diff-environments-btn" onClick={() => setView("diff")}>
+            Diff environments
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}