@clef-sh/ui 0.1.13-beta.88

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

@@ -0,0 +1,113 @@
+// packages/ui/src/client/screens/GitLogView.test.tsx
+import React from "react";
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { GitLogView } from "./GitLogView";
+import { apiFetch } from "../api";
+import type { ClefManifest } from "@clef-sh/core";
+
+jest.mock("../api");
+const mockApiFetch = apiFetch as jest.MockedFunction<typeof apiFetch>;
+
+const manifest: ClefManifest = {
+  version: 1,
+  environments: [
+    { name: "dev", description: "Dev" },
+    { name: "staging", description: "Staging" },
+  ],
+  namespaces: [
+    { name: "app", description: "App" },
+    { name: "db", description: "DB" },
+  ],
+  sops: { default_backend: "age" },
+  file_pattern: "{namespace}/{environment}.enc.yaml",
+};
+
+const commits = [
+  {
+    hash: "abc1234def5678",
+    author: "Alice",
+    date: new Date("2024-06-01").toISOString(),
+    message: "feat: add secret",
+  },
+  {
+    hash: "bcd2345efg6789",
+    author: "Bob",
+    date: new Date("2024-05-30").toISOString(),
+    message: "fix: rotate key",
+  },
+];
+
+function mockOkResponse(data: unknown) {
+  return { ok: true, json: async () => data } as Response;
+}
+
+describe("GitLogView", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it("renders commit log on successful fetch", async () => {
+    mockApiFetch.mockResolvedValue(mockOkResponse({ log: commits }));
+    await act(async () => {
+      render(<GitLogView manifest={manifest} />);
+    });
+    expect(screen.getByText("abc1234")).toBeInTheDocument(); // short hash
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("feat: add secret")).toBeInTheDocument();
+  });
+
+  it("shows empty state when log is empty", async () => {
+    mockApiFetch.mockResolvedValue(mockOkResponse({ log: [] }));
+    await act(async () => {
+      render(<GitLogView manifest={manifest} />);
+    });
+    expect(screen.getByText(/No commits found/)).toBeInTheDocument();
+  });
+
+  it("shows error state on API failure", async () => {
+    mockApiFetch.mockResolvedValue({
+      ok: false,
+      json: async () => ({ error: "Git error" }),
+    } as Response);
+    await act(async () => {
+      render(<GitLogView manifest={manifest} />);
+    });
+    expect(screen.getByText("Git error")).toBeInTheDocument();
+  });
+
+  it("shows loading state while fetching", async () => {
+    let resolve!: (r: Response) => void;
+    mockApiFetch.mockReturnValue(
+      new Promise<Response>((r) => {
+        resolve = r;
+      }),
+    );
+    render(<GitLogView manifest={manifest} />);
+    expect(screen.getByText("Loading…")).toBeInTheDocument();
+    await act(async () => {
+      resolve(mockOkResponse({ log: [] }));
+    });
+  });
+
+  it("re-fetches when namespace selector changes", async () => {
+    mockApiFetch.mockResolvedValue(mockOkResponse({ log: commits }));
+    const { getByDisplayValue } = render(<GitLogView manifest={manifest} />);
+    // Wait for initial fetch
+    await act(async () => {});
+    expect(mockApiFetch).toHaveBeenCalledTimes(1);
+    // Change namespace
+    const select = getByDisplayValue("app");
+    await act(async () => {
+      fireEvent.change(select, { target: { value: "db" } });
+    });
+    expect(mockApiFetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("renders null manifest gracefully (no crash)", async () => {
+    mockApiFetch.mockResolvedValue(mockOkResponse({ log: [] }));
+    await act(async () => {
+      render(<GitLogView manifest={null} />);
+    });
+    // Should render without throwing
+    expect(screen.getByText(/No commits found/)).toBeInTheDocument();
+  });
+});

package/src/client/screens/GitLogView.tsx

@@ -0,0 +1,192 @@
+// packages/ui/src/client/screens/GitLogView.tsx
+import React, { useState, useEffect, useCallback } from "react";
+import { theme } from "../theme";
+import { apiFetch } from "../api";
+import { TopBar } from "../components/TopBar";
+import type { ClefManifest, GitCommit } from "@clef-sh/core";
+
+interface GitLogViewProps {
+  manifest: ClefManifest | null;
+}
+
+export function GitLogView({ manifest }: GitLogViewProps) {
+  const namespaces = manifest?.namespaces ?? [];
+  const environments = manifest?.environments ?? [];
+
+  const [ns, setNs] = useState(namespaces[0]?.name ?? "");
+  const [env, setEnv] = useState(environments[0]?.name ?? "");
+  const [commits, setCommits] = useState<GitCommit[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Sync selectors when manifest loads
+  useEffect(() => {
+    if (namespaces.length > 0 && !ns) setNs(namespaces[0].name);
+    if (environments.length > 0 && !env) setEnv(environments[0].name);
+  }, [namespaces, environments, ns, env]);
+
+  const loadLog = useCallback(async () => {
+    if (!ns || !env) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await apiFetch(`/api/git/log/${ns}/${env}`);
+      if (res.ok) {
+        const data = await res.json();
+        setCommits(data.log as GitCommit[]);
+      } else {
+        const body = await res.json().catch(() => ({}));
+        setError((body as { error?: string }).error ?? "Failed to load history");
+        setCommits([]);
+      }
+    } catch {
+      setError("Network error — could not load history");
+      setCommits([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [ns, env]);
+
+  // Auto-load when selectors change
+  useEffect(() => {
+    loadLog();
+  }, [loadLog]);
+
+  return (
+    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      <TopBar title="History" subtitle="Commit log per encrypted file" />
+
+      {/* Selectors */}
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          padding: "16px 24px",
+          borderBottom: `1px solid ${theme.border}`,
+        }}
+      >
+        <label
+          style={{
+            display: "flex",
+            gap: 8,
+            alignItems: "center",
+            fontFamily: theme.mono,
+            fontSize: 12,
+            color: theme.textMuted,
+          }}
+        >
+          Namespace
+          <select
+            value={ns}
+            onChange={(e) => setNs(e.target.value)}
+            style={{
+              fontFamily: theme.mono,
+              fontSize: 12,
+              background: theme.surface,
+              color: theme.text,
+              border: `1px solid ${theme.border}`,
+              borderRadius: 4,
+              padding: "3px 8px",
+            }}
+          >
+            {namespaces.map((n) => (
+              <option key={n.name} value={n.name}>
+                {n.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label
+          style={{
+            display: "flex",
+            gap: 8,
+            alignItems: "center",
+            fontFamily: theme.mono,
+            fontSize: 12,
+            color: theme.textMuted,
+          }}
+        >
+          Environment
+          <select
+            value={env}
+            onChange={(e) => setEnv(e.target.value)}
+            style={{
+              fontFamily: theme.mono,
+              fontSize: 12,
+              background: theme.surface,
+              color: theme.text,
+              border: `1px solid ${theme.border}`,
+              borderRadius: 4,
+              padding: "3px 8px",
+            }}
+          >
+            {environments.map((e) => (
+              <option key={e.name} value={e.name}>
+                {e.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, overflow: "auto", padding: "0 24px 24px" }}>
+        {loading && (
+          <div
+            style={{ padding: 24, color: theme.textMuted, fontFamily: theme.mono, fontSize: 12 }}
+          >
+            Loading…
+          </div>
+        )}
+        {!loading && error && (
+          <div style={{ padding: 24, color: theme.red, fontFamily: theme.mono, fontSize: 12 }}>
+            {error}
+          </div>
+        )}
+        {!loading && !error && commits.length === 0 && (
+          <div
+            style={{ padding: 24, color: theme.textMuted, fontFamily: theme.mono, fontSize: 12 }}
+          >
+            No commits found for {ns}/{env}.
+          </div>
+        )}
+        {!loading && !error && commits.length > 0 && (
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              fontFamily: theme.mono,
+              fontSize: 12,
+              marginTop: 16,
+            }}
+          >
+            <thead>
+              <tr style={{ borderBottom: `1px solid ${theme.border}`, color: theme.textDim }}>
+                <th style={{ textAlign: "left", padding: "6px 12px 6px 0", fontWeight: 600 }}>
+                  Hash
+                </th>
+                <th style={{ textAlign: "left", padding: "6px 12px", fontWeight: 600 }}>Date</th>
+                <th style={{ textAlign: "left", padding: "6px 12px", fontWeight: 600 }}>Author</th>
+                <th style={{ textAlign: "left", padding: "6px 0", fontWeight: 600 }}>Message</th>
+              </tr>
+            </thead>
+            <tbody>
+              {commits.map((c) => (
+                <tr key={c.hash} style={{ borderBottom: `1px solid ${theme.border}22` }}>
+                  <td style={{ padding: "8px 12px 8px 0", color: theme.accent }}>
+                    {c.hash.slice(0, 7)}
+                  </td>
+                  <td style={{ padding: "8px 12px", color: theme.textMuted, whiteSpace: "nowrap" }}>
+                    {new Date(c.date).toLocaleDateString()}
+                  </td>
+                  <td style={{ padding: "8px 12px", color: theme.textMuted }}>{c.author}</td>
+                  <td style={{ padding: "8px 0", color: theme.text }}>{c.message}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}