@clef-sh/ui 0.1.15-beta.98 → 0.1.16-beta.110

package/src/client/components/MatrixGrid.tsx

@@ -8,7 +8,9 @@ export interface MatrixGridProps {
   namespaces: Array<{ name: string }>;
   environments: Array<{ name: string }>;
   matrixStatuses: MatrixStatus[];
-  onNamespaceClick?: (ns: string) => void;
+  onNamespaceClick?: (ns: string, env?: string) => void;
+  onSyncClick?: (ns: string) => void;
+  syncingNs?: string | null;
 }
 
 function getStatusType(status: MatrixStatus): string {
@@ -38,6 +40,8 @@ export function MatrixGrid({
   environments,
   matrixStatuses,
   onNamespaceClick,
+  onSyncClick,
+  syncingNs,
 }: MatrixGridProps) {
   return (
     <div
@@ -98,168 +102,203 @@ export function MatrixGrid({
       </div>
 
       {/* Namespace rows */}
-      {namespaces.map((ns, i) => (
-        <div
-          key={ns.name}
-          data-testid={`matrix-row-${ns.name}`}
-          role="button"
-          tabIndex={0}
-          onClick={() => onNamespaceClick?.(ns.name)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") onNamespaceClick?.(ns.name);
-          }}
-          style={{
-            display: "grid",
-            gridTemplateColumns: `180px ${environments.map(() => "1fr").join(" ")}`,
-            borderBottom: i < namespaces.length - 1 ? `1px solid ${theme.border}` : "none",
-            cursor: onNamespaceClick ? "pointer" : "default",
-            transition: "background 0.1s",
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.background = theme.surfaceHover;
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.background = "transparent";
-          }}
-        >
-          {/* Namespace label */}
+      {namespaces.map((ns, i) => {
+        const nsCells = matrixStatuses.filter((s) => s.cell.namespace === ns.name);
+        const hasDrift = nsCells.some((s) =>
+          s.issues.some((issue) => issue.type === "missing_keys"),
+        );
+
+        return (
           <div
+            key={ns.name}
+            data-testid={`matrix-row-${ns.name}`}
+            role="button"
+            tabIndex={0}
+            onClick={() => onNamespaceClick?.(ns.name)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") onNamespaceClick?.(ns.name);
+            }}
+            // Cell-level clicks pass the environment; row-level is fallback
             style={{
-              padding: "16px 20px",
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
+              display: "grid",
+              gridTemplateColumns: `180px ${environments.map(() => "1fr").join(" ")}`,
+              borderBottom: i < namespaces.length - 1 ? `1px solid ${theme.border}` : "none",
+              cursor: onNamespaceClick ? "pointer" : "default",
+              transition: "background 0.1s",
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLElement).style.background = theme.surfaceHover;
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLElement).style.background = "transparent";
             }}
           >
-            <span
-              style={{
-                fontFamily: theme.mono,
-                fontSize: 11,
-                color: theme.textDim,
-              }}
-            >
-              //
-            </span>
-            <span
+            {/* Namespace label */}
+            <div
               style={{
-                fontFamily: theme.mono,
-                fontSize: 13,
-                fontWeight: 600,
-                color: theme.text,
+                padding: "16px 20px",
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
               }}
             >
-              {ns.name}
-            </span>
-          </div>
-
-          {/* Environment cells */}
-          {environments.map((env) => {
-            const cellStatus = matrixStatuses.find(
-              (s) => s.cell.namespace === ns.name && s.cell.environment === env.name,
-            );
-            const statusType = cellStatus ? getStatusType(cellStatus) : "ok";
-            const keyCount = cellStatus?.keyCount ?? 0;
-            const lastMod = cellStatus?.lastModified
-              ? formatDate(
-                  cellStatus.lastModified instanceof Date
-                    ? cellStatus.lastModified
-                    : new Date(cellStatus.lastModified as unknown as string),
-                )
-              : "never";
-            const missingKeyCount = cellStatus
-              ? new Set(
-                  cellStatus.issues
-                    .filter((i) => i.type === "missing_keys" && i.key)
-                    .map((i) => i.key),
-                ).size
-              : 0;
-            const warnKeyCount = cellStatus
-              ? cellStatus.issues.filter((i) => i.type === "schema_warning").length
-              : 0;
-            const cellPending = cellStatus?.pendingCount ?? 0;
-
-            return (
-              <div
-                key={env.name}
+              <span
                 style={{
-                  padding: "14px 20px",
-                  borderLeft: `1px solid ${theme.border}`,
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 5,
+                  fontFamily: theme.mono,
+                  fontSize: 11,
+                  color: theme.textDim,
                 }}
               >
-                <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
-                  <StatusDot status={statusType} />
-                  <span
-                    style={{
-                      fontFamily: theme.mono,
-                      fontSize: 11,
-                      color: theme.textMuted,
-                    }}
-                  >
-                    {keyCount} keys
-                  </span>
-                  {missingKeyCount > 0 && (
-                    <span
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 10,
-                        color: theme.red,
-                        background: theme.redDim,
-                        border: `1px solid ${theme.red}33`,
-                        borderRadius: 3,
-                        padding: "1px 5px",
-                      }}
-                    >
-                      -{missingKeyCount} missing
-                    </span>
-                  )}
-                  {warnKeyCount > 0 && (
-                    <span
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 10,
-                        color: theme.yellow,
-                        background: theme.yellowDim,
-                        border: `1px solid ${theme.yellow}33`,
-                        borderRadius: 3,
-                        padding: "1px 5px",
-                      }}
-                    >
-                      {warnKeyCount} warn
-                    </span>
-                  )}
-                  {cellPending > 0 && (
+                //
+              </span>
+              <span
+                style={{
+                  fontFamily: theme.mono,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: theme.text,
+                  flex: 1,
+                }}
+              >
+                {ns.name}
+              </span>
+              {hasDrift && syncingNs !== ns.name && onSyncClick && (
+                <button
+                  data-testid={`sync-btn-${ns.name}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSyncClick(ns.name);
+                  }}
+                  style={{
+                    fontFamily: theme.sans,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: theme.accent,
+                    background: `${theme.accent}18`,
+                    border: `1px solid ${theme.accent}33`,
+                    borderRadius: 4,
+                    padding: "2px 8px",
+                    cursor: "pointer",
+                  }}
+                >
+                  Sync
+                </button>
+              )}
+            </div>
+
+            {/* Environment cells */}
+            {environments.map((env) => {
+              const cellStatus = matrixStatuses.find(
+                (s) => s.cell.namespace === ns.name && s.cell.environment === env.name,
+              );
+              const statusType = cellStatus ? getStatusType(cellStatus) : "ok";
+              const keyCount = cellStatus?.keyCount ?? 0;
+              const lastMod = cellStatus?.lastModified
+                ? formatDate(
+                    cellStatus.lastModified instanceof Date
+                      ? cellStatus.lastModified
+                      : new Date(cellStatus.lastModified as unknown as string),
+                  )
+                : "never";
+              const missingKeyCount = cellStatus
+                ? new Set(
+                    cellStatus.issues
+                      .filter((i) => i.type === "missing_keys" && i.key)
+                      .map((i) => i.key),
+                  ).size
+                : 0;
+              const warnKeyCount = cellStatus
+                ? cellStatus.issues.filter((i) => i.type === "schema_warning").length
+                : 0;
+              const cellPending = cellStatus?.pendingCount ?? 0;
+
+              return (
+                <div
+                  key={env.name}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onNamespaceClick?.(ns.name, env.name);
+                  }}
+                  style={{
+                    padding: "14px 20px",
+                    borderLeft: `1px solid ${theme.border}`,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 5,
+                  }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                    <StatusDot status={statusType} />
                     <span
                       style={{
                         fontFamily: theme.mono,
-                        fontSize: 10,
-                        color: theme.accent,
-                        background: `${theme.accent}18`,
-                        border: `1px solid ${theme.accent}33`,
-                        borderRadius: 3,
-                        padding: "1px 5px",
+                        fontSize: 11,
+                        color: theme.textMuted,
                       }}
                     >
-                      {cellPending} pending
+                      {keyCount} keys
                     </span>
-                  )}
-                </div>
-                <div
-                  style={{
-                    fontFamily: theme.mono,
-                    fontSize: 10,
-                    color: theme.textDim,
-                  }}
-                >
-                  {lastMod}
+                    {missingKeyCount > 0 && (
+                      <span
+                        style={{
+                          fontFamily: theme.mono,
+                          fontSize: 10,
+                          color: theme.red,
+                          background: theme.redDim,
+                          border: `1px solid ${theme.red}33`,
+                          borderRadius: 3,
+                          padding: "1px 5px",
+                        }}
+                      >
+                        -{missingKeyCount} missing
+                      </span>
+                    )}
+                    {warnKeyCount > 0 && (
+                      <span
+                        style={{
+                          fontFamily: theme.mono,
+                          fontSize: 10,
+                          color: theme.yellow,
+                          background: theme.yellowDim,
+                          border: `1px solid ${theme.yellow}33`,
+                          borderRadius: 3,
+                          padding: "1px 5px",
+                        }}
+                      >
+                        {warnKeyCount} warn
+                      </span>
+                    )}
+                    {cellPending > 0 && (
+                      <span
+                        style={{
+                          fontFamily: theme.mono,
+                          fontSize: 10,
+                          color: theme.accent,
+                          background: `${theme.accent}18`,
+                          border: `1px solid ${theme.accent}33`,
+                          borderRadius: 3,
+                          padding: "1px 5px",
+                        }}
+                      >
+                        {cellPending} pending
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    style={{
+                      fontFamily: theme.mono,
+                      fontSize: 10,
+                      color: theme.textDim,
+                    }}
+                  >
+                    {lastMod}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      ))}
+              );
+            })}
+          </div>
+        );
+      })}
     </div>
   );
 }

package/src/client/components/SyncPanel.test.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { SyncPanel } from "./SyncPanel";
+
+const mockFetch = jest.fn();
+beforeEach(() => {
+  jest.clearAllMocks();
+  global.fetch = mockFetch;
+});
+afterEach(() => {
+  delete (global as Record<string, unknown>).fetch;
+});
+
+describe("SyncPanel", () => {
+  it("fetches preview on mount and shows missing keys", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          cells: [
+            {
+              namespace: "payments",
+              environment: "production",
+              missingKeys: ["API_KEY"],
+              isProtected: true,
+            },
+          ],
+          totalKeys: 1,
+          hasProtectedEnvs: true,
+        }),
+    } as Response);
+
+    await act(async () => {
+      render(<SyncPanel namespace="payments" onComplete={jest.fn()} onCancel={jest.fn()} />);
+    });
+
+    expect(screen.getByTestId("sync-preview-list")).toBeInTheDocument();
+    expect(screen.getByText(/API_KEY/)).toBeInTheDocument();
+    expect(screen.getByText(/protected/i)).toBeInTheDocument();
+  });
+
+  it("shows 'all in sync' when plan has 0 keys", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ cells: [], totalKeys: 0, hasProtectedEnvs: false }),
+    } as Response);
+
+    await act(async () => {
+      render(<SyncPanel namespace="payments" onComplete={jest.fn()} onCancel={jest.fn()} />);
+    });
+
+    expect(screen.getByTestId("sync-in-sync")).toBeInTheDocument();
+  });
+
+  it("calls /api/sync on execute and shows done state", async () => {
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            cells: [
+              {
+                namespace: "payments",
+                environment: "staging",
+                missingKeys: ["SECRET"],
+                isProtected: false,
+              },
+            ],
+            totalKeys: 1,
+            hasProtectedEnvs: false,
+          }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            success: true,
+            result: {
+              modifiedCells: ["payments/staging"],
+              scaffoldedKeys: { "payments/staging": ["SECRET"] },
+              totalKeysScaffolded: 1,
+            },
+          }),
+      } as Response);
+
+    const onComplete = jest.fn();
+    await act(async () => {
+      render(<SyncPanel namespace="payments" onComplete={onComplete} onCancel={jest.fn()} />);
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("sync-execute-btn"));
+    });
+
+    expect(screen.getByTestId("sync-done")).toBeInTheDocument();
+  });
+
+  it("shows error on preview failure", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      json: () => Promise.resolve({ error: "Something went wrong" }),
+    } as Response);
+
+    await act(async () => {
+      render(<SyncPanel namespace="payments" onComplete={jest.fn()} onCancel={jest.fn()} />);
+    });
+
+    expect(screen.getByText(/Something went wrong/)).toBeInTheDocument();
+  });
+
+  it("calls onCancel when cancel is clicked", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          cells: [
+            {
+              namespace: "payments",
+              environment: "staging",
+              missingKeys: ["KEY"],
+              isProtected: false,
+            },
+          ],
+          totalKeys: 1,
+          hasProtectedEnvs: false,
+        }),
+    } as Response);
+
+    const onCancel = jest.fn();
+    await act(async () => {
+      render(<SyncPanel namespace="payments" onComplete={jest.fn()} onCancel={onCancel} />);
+    });
+
+    fireEvent.click(screen.getByTestId("sync-cancel-btn"));
+    expect(onCancel).toHaveBeenCalled();
+  });
+});