@clef-sh/ui 0.1.14 → 0.1.15-beta.108

package/src/client/screens/MatrixView.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { theme } from "../theme";
 import { TopBar } from "../components/TopBar";
 import { Button } from "../components/Button";
 import { MatrixGrid } from "../components/MatrixGrid";
+import { SyncPanel } from "../components/SyncPanel";
 import type { ViewName } from "../components/Sidebar";
 import type { ClefManifest, MatrixStatus } from "@clef-sh/core";
 
@@ -11,9 +12,17 @@ interface MatrixViewProps {
   setNs: (ns: string) => void;
   manifest: ClefManifest | null;
   matrixStatuses: MatrixStatus[];
+  reloadMatrix?: () => void;
 }
 
-export function MatrixView({ setView, setNs, manifest, matrixStatuses }: MatrixViewProps) {
+export function MatrixView({
+  setView,
+  setNs,
+  manifest,
+  matrixStatuses,
+  reloadMatrix,
+}: MatrixViewProps) {
+  const [syncingNs, setSyncingNs] = useState<string | null>(null);
   if (!manifest) {
     return (
       <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
@@ -50,7 +59,16 @@ export function MatrixView({ setView, setNs, manifest, matrixStatuses }: MatrixV
         actions={
           <>
             <Button onClick={() => setView("lint")}>Lint All</Button>
-            <Button variant="primary">+ Namespace</Button>
+            <Button onClick={() => setView("manifest")} data-testid="matrix-add-environment-btn">
+              + Environment
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => setView("manifest")}
+              data-testid="matrix-add-namespace-btn"
+            >
+              + Namespace
+            </Button>
           </>
         }
       />
@@ -129,8 +147,21 @@ export function MatrixView({ setView, setNs, manifest, matrixStatuses }: MatrixV
             setNs(nsName);
             setView("editor");
           }}
+          onSyncClick={(nsName) => setSyncingNs(nsName)}
+          syncingNs={syncingNs}
         />
 
+        {syncingNs && (
+          <SyncPanel
+            namespace={syncingNs}
+            onComplete={() => {
+              setSyncingNs(null);
+              reloadMatrix?.();
+            }}
+            onCancel={() => setSyncingNs(null)}
+          />
+        )}
+
         {/* Quick actions */}
         <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
           <Button data-testid="diff-environments-btn" onClick={() => setView("diff")}>

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

@@ -42,7 +42,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     expect(screen.getByText("DB_HOST")).toBeInTheDocument();
@@ -56,7 +56,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Click production tab
@@ -77,7 +77,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -94,7 +94,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     expect(screen.getByText("Decrypt failed")).toBeInTheDocument();
@@ -107,7 +107,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -126,7 +126,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -149,7 +149,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -188,7 +188,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -206,7 +206,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Open overflow menu
@@ -230,7 +230,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -260,7 +260,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -292,7 +292,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Reveal the value
@@ -318,7 +318,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Reveal a value to start the timer
@@ -347,7 +347,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -384,7 +384,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -435,7 +435,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -480,7 +480,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Switch to production tab
@@ -509,7 +509,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Stay on dev tab (default)
@@ -542,7 +542,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     expect(screen.getByTestId("accept-value-DB_HOST")).toBeInTheDocument();
@@ -569,7 +569,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     // Click accept
@@ -598,7 +598,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -615,7 +615,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -638,7 +638,7 @@ describe("NamespaceEditor", () => {
     global.fetch = fetchMock;
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {
@@ -672,7 +672,7 @@ describe("NamespaceEditor", () => {
     } as Response);
 
     await act(async () => {
-      render(<NamespaceEditor ns="database" manifest={manifest} onCommit={jest.fn()} />);
+      render(<NamespaceEditor ns="database" manifest={manifest} />);
     });
 
     await act(async () => {

package/src/client/screens/NamespaceEditor.tsx

@@ -20,10 +20,9 @@ interface EditorRow {
 interface NamespaceEditorProps {
   ns: string;
   manifest: ClefManifest | null;
-  onCommit: (message: string) => void;
 }
 
-export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps) {
+export function NamespaceEditor({ ns, manifest }: NamespaceEditorProps) {
   const [env, setEnv] = useState("");
   const [rows, setRows] = useState<EditorRow[]>([]);
   const [adding, setAdding] = useState(false);
@@ -35,8 +34,7 @@ export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [commitMessage, setCommitMessage] = useState("");
-  const [showCommitInput, setShowCommitInput] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [sopsInfo, setSopsInfo] = useState("");
   const [lintIssues, setLintIssues] = useState<LintIssue[]>([]);
   const [protectedConfirm, setProtectedConfirm] = useState<"save" | "add" | null>(null);
@@ -129,23 +127,25 @@ export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps
 
   const handleSave = async (confirmed?: boolean) => {
     const dirtyRows = rows.filter((r) => r.edited);
-    await Promise.all(
-      dirtyRows.map((row) => {
+    if (dirtyRows.length === 0) return;
+    setSaving(true);
+    try {
+      // Each PUT auto-commits via the transaction manager, matching CLI
+      // behavior where each `clef set` is its own commit. Serialize so
+      // each transaction completes before the next starts.
+      for (const row of dirtyRows) {
         const payload: Record<string, unknown> = { value: row.value };
         if (confirmed) payload.confirmed = true;
-        return apiFetch(`/api/namespace/${ns}/${env}/${row.key}`, {
+        await apiFetch(`/api/namespace/${ns}/${env}/${row.key}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
         });
-      }),
-    );
-    if (commitMessage) {
-      onCommit(commitMessage);
+      }
+      await loadData();
+    } finally {
+      setSaving(false);
     }
-    setShowCommitInput(false);
-    setCommitMessage("");
-    await loadData();
   };
 
   const handleAdd = async (confirmed?: boolean) => {
@@ -269,45 +269,21 @@ export function NamespaceEditor({ ns, manifest, onCommit }: NamespaceEditorProps
         subtitle={`Namespace \u00B7 ${rows.length} keys`}
         actions={
           <>
-            {hasChanges && !showCommitInput && (
-              <Button variant="primary" onClick={() => setShowCommitInput(true)}>
-                Commit changes
+            {hasChanges && (
+              <Button
+                variant="primary"
+                disabled={saving}
+                onClick={() => {
+                  if (isProduction) {
+                    setProtectedConfirm("save");
+                  } else {
+                    handleSave();
+                  }
+                }}
+              >
+                {saving ? "Saving..." : "Save"}
               </Button>
             )}
-            {showCommitInput && (
-              <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
-                <input
-                  data-testid="commit-message-input"
-                  value={commitMessage}
-                  onChange={(e) => setCommitMessage(e.target.value)}
-                  placeholder="Commit message..."
-                  style={{
-                    background: "#0D0F14",
-                    border: `1px solid ${theme.borderLight}`,
-                    borderRadius: 5,
-                    padding: "5px 10px",
-                    fontFamily: theme.mono,
-                    fontSize: 12,
-                    color: theme.text,
-                    outline: "none",
-                    width: 220,
-                  }}
-                />
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    if (isProduction) {
-                      setProtectedConfirm("save");
-                    } else {
-                      handleSave();
-                    }
-                  }}
-                >
-                  Save & Commit
-                </Button>
-                <Button onClick={() => setShowCommitInput(false)}>Cancel</Button>
-              </div>
-            )}
             <Button variant="primary" data-testid="add-key-btn" onClick={() => setAdding(true)}>
               + Add key
             </Button>