datajunction-ui 0.0.54 → 0.0.56

package/src/app/components/__tests__/NodeListActions.test.jsx

@@ -47,9 +47,11 @@ describe('<NodeListActions />', () => {
         'default.hard_hat',
       );
     });
-    expect(
-      screen.getByText('Successfully deleted node default.hard_hat'),
-    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByText('Successfully deleted node default.hard_hat'),
+      ).toBeInTheDocument();
+    });
   }, 60000);
 
   it('skips a node deletion during confirm', async () => {

package/src/app/components/__tests__/__snapshots__/NamespaceHeader.test.jsx.snap

@@ -148,5 +148,100 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
       </a>
     </span>
   </div>
+  <div
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "gap": "8px",
+      }
+    }
+  >
+    <React.Fragment>
+      <button
+        onClick={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "border": "1px solid #e2e8f0",
+            "borderRadius": "4px",
+            "color": "#475569",
+            "cursor": "pointer",
+            "display": "flex",
+            "fontSize": "12px",
+            "gap": "4px",
+            "height": "28px",
+            "padding": "0 10px",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        <svg
+          fill="none"
+          height="14"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="6"
+            x2="6"
+            y1="3"
+            y2="15"
+          />
+          <circle
+            cx="18"
+            cy="6"
+            r="3"
+          />
+          <circle
+            cx="6"
+            cy="18"
+            r="3"
+          />
+          <path
+            d="M18 9a9 9 0 0 1-9 9"
+          />
+        </svg>
+        Configure Git
+      </button>
+    </React.Fragment>
+  </div>
+  <GitSettingsModal
+    currentConfig={null}
+    isOpen={false}
+    namespace="shared.dimensions.accounts"
+    onClose={[Function]}
+    onSave={[Function]}
+  />
+  <CreateBranchModal
+    isOpen={false}
+    namespace="shared.dimensions.accounts"
+    onClose={[Function]}
+    onCreate={[Function]}
+  />
+  <SyncToGitModal
+    isOpen={false}
+    namespace="shared.dimensions.accounts"
+    onClose={[Function]}
+    onSync={[Function]}
+  />
+  <CreatePRModal
+    isOpen={false}
+    namespace="shared.dimensions.accounts"
+    onClose={[Function]}
+    onCreate={[Function]}
+  />
+  <DeleteBranchModal
+    isOpen={false}
+    namespace="shared.dimensions.accounts"
+    onClose={[Function]}
+    onDelete={[Function]}
+  />
 </div>
 `;

package/src/app/components/git/CreateBranchModal.jsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+
+/**
+ * Modal for creating a new branch namespace.
+ */
+export function CreateBranchModal({
+  isOpen,
+  onClose,
+  onCreate,
+  namespace,
+  gitBranch,
+}) {
+  const [branchName, setBranchName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+
+  // Convert branch name to expected namespace suffix for preview
+  const previewNamespace = branchName
+    ? `${namespace.split('.').slice(0, -1).join('.') || namespace}.${branchName
+        .replace(/-/g, '_')
+        .replace(/\//g, '_')}`
+    : '';
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    if (!branchName.trim()) return;
+
+    setError(null);
+    setCreating(true);
+
+    try {
+      const res = await onCreate(branchName.trim());
+      if (res?._error) {
+        setError(res.message);
+      } else {
+        setResult(res);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to create branch');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleClose = () => {
+    setBranchName('');
+    setError(null);
+    setResult(null);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={handleClose}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>Create Branch</h3>
+          <button
+            className="btn-close-modal"
+            onClick={handleClose}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        {result ? (
+          <div className="modal-body">
+            <div
+              style={{
+                textAlign: 'center',
+                padding: '16px 0',
+              }}
+            >
+              <span
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '48px',
+                  height: '48px',
+                  borderRadius: '50%',
+                  backgroundColor: '#dcfce7',
+                  color: '#16a34a',
+                  fontSize: '24px',
+                  marginBottom: '12px',
+                }}
+              >
+                ✓
+              </span>
+              <h4 style={{ margin: '0 0 8px 0' }}>Branch Created!</h4>
+            </div>
+
+            <div
+              style={{
+                backgroundColor: '#f8fafc',
+                borderRadius: '6px',
+                padding: '12px',
+                fontSize: '13px',
+              }}
+            >
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Namespace:</strong>{' '}
+                <a
+                  href={`/namespaces/${result.branch.namespace}`}
+                  style={{ color: '#3b82f6' }}
+                >
+                  {result.branch.namespace}
+                </a>
+              </div>
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Git Branch:</strong> {result.branch.git_branch}
+              </div>
+              <div>
+                <strong>Parent:</strong> {result.branch.parent_namespace}
+              </div>
+              {result.deployment_results?.length > 0 && (
+                <div style={{ marginTop: '12px' }}>
+                  <strong>Nodes copied:</strong>{' '}
+                  {result.deployment_results.length}
+                </div>
+              )}
+            </div>
+
+            <div className="modal-actions">
+              <button className="btn-secondary" onClick={handleClose}>
+                Close
+              </button>
+              <a
+                href={`/namespaces/${result.branch.namespace}`}
+                className="btn-primary"
+                style={{ textDecoration: 'none' }}
+              >
+                Go to Branch
+              </a>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              {error && (
+                <div
+                  style={{
+                    padding: '12px',
+                    backgroundColor: '#fef2f2',
+                    border: '1px solid #fecaca',
+                    borderRadius: '6px',
+                    color: '#dc2626',
+                    fontSize: '13px',
+                    marginBottom: '16px',
+                  }}
+                >
+                  {error}
+                </div>
+              )}
+
+              <div className="form-group">
+                <label htmlFor="branch-name">Branch Name</label>
+                <input
+                  id="branch-name"
+                  type="text"
+                  placeholder="feature-xyz"
+                  value={branchName}
+                  onChange={e => setBranchName(e.target.value)}
+                  disabled={creating}
+                  autoFocus
+                />
+                <span className="form-hint">
+                  Name for the new git branch (e.g., "feature-xyz", "fix-bug")
+                </span>
+              </div>
+
+              {branchName && (
+                <div
+                  style={{
+                    backgroundColor: '#f0f9ff',
+                    border: '1px solid #bae6fd',
+                    borderRadius: '6px',
+                    padding: '12px',
+                    fontSize: '13px',
+                    marginTop: '16px',
+                  }}
+                >
+                  <div style={{ fontWeight: 500, marginBottom: '8px' }}>
+                    This will:
+                  </div>
+                  <ul
+                    style={{
+                      margin: 0,
+                      paddingLeft: '20px',
+                      color: '#475569',
+                    }}
+                  >
+                    <li>
+                      Create git branch "{branchName}" from "{gitBranch}"
+                    </li>
+                    <li>Create namespace "{previewNamespace}"</li>
+                  </ul>
+                </div>
+              )}
+            </div>
+
+            <div className="modal-actions">
+              <button
+                type="button"
+                className="btn-secondary"
+                onClick={handleClose}
+                disabled={creating}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn-primary"
+                disabled={creating || !branchName.trim()}
+              >
+                {creating ? 'Creating...' : 'Create Branch'}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CreateBranchModal;

package/src/app/components/git/CreatePRModal.jsx

@@ -0,0 +1,270 @@
+import React, { useState } from 'react';
+
+/**
+ * Modal for creating a pull request from a branch namespace.
+ */
+export function CreatePRModal({
+  isOpen,
+  onClose,
+  onCreate,
+  namespace,
+  gitBranch,
+  parentBranch,
+  repoPath,
+}) {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [progress, setProgress] = useState(null); // null | 'syncing' | 'creating'
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    if (!title.trim()) return;
+
+    setError(null);
+    setProgress('syncing');
+
+    try {
+      const res = await onCreate(
+        title.trim(),
+        body.trim() || null,
+        setProgress,
+      );
+      if (res?._error) {
+        setError(res.message);
+      } else {
+        setResult(res);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to create pull request');
+    } finally {
+      setProgress(null);
+    }
+  };
+
+  const getProgressText = () => {
+    if (progress === 'syncing') return 'Syncing to git...';
+    if (progress === 'creating') return 'Creating PR...';
+    return 'Create PR';
+  };
+
+  const handleClose = () => {
+    setTitle('');
+    setBody('');
+    setError(null);
+    setResult(null);
+    setProgress(null);
+    onClose();
+  };
+
+  const isWorking = progress !== null;
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={handleClose}>
+      <div
+        className="modal-content"
+        onClick={e => e.stopPropagation()}
+        style={{ maxWidth: '560px' }}
+      >
+        <div className="modal-header">
+          <h3>Create Pull Request</h3>
+          <button
+            className="btn-close-modal"
+            onClick={handleClose}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        {result ? (
+          <div className="modal-body">
+            <div
+              style={{
+                textAlign: 'center',
+                padding: '16px 0',
+              }}
+            >
+              <span
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '48px',
+                  height: '48px',
+                  borderRadius: '50%',
+                  backgroundColor: '#dcfce7',
+                  color: '#16a34a',
+                  fontSize: '24px',
+                  marginBottom: '12px',
+                }}
+              >
+                ✓
+              </span>
+              <h4 style={{ margin: '0 0 8px 0' }}>
+                Pull Request #{result.pr_number} Created!
+              </h4>
+            </div>
+
+            <div
+              style={{
+                backgroundColor: '#f8fafc',
+                borderRadius: '6px',
+                padding: '12px',
+                fontSize: '13px',
+              }}
+            >
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Title:</strong> {title}
+              </div>
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Branch:</strong> {result.head_branch} →{' '}
+                {result.base_branch}
+              </div>
+              <div>
+                <strong>URL:</strong>{' '}
+                <a
+                  href={result.pr_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: '#3b82f6' }}
+                >
+                  {result.pr_url}
+                </a>
+              </div>
+            </div>
+
+            <div className="modal-actions">
+              <button className="btn-secondary" onClick={handleClose}>
+                Close
+              </button>
+              <a
+                href={result.pr_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary"
+                style={{ textDecoration: 'none' }}
+              >
+                View on GitHub
+              </a>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              {/* Branch flow indicator */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '12px',
+                  padding: '12px',
+                  backgroundColor: '#f8fafc',
+                  borderRadius: '6px',
+                  marginBottom: '16px',
+                  fontSize: '13px',
+                }}
+              >
+                <span
+                  style={{
+                    padding: '4px 8px',
+                    backgroundColor: '#dbeafe',
+                    borderRadius: '4px',
+                    fontFamily: 'monospace',
+                  }}
+                >
+                  {gitBranch}
+                </span>
+                <span style={{ color: '#64748b' }}>→</span>
+                <span
+                  style={{
+                    padding: '4px 8px',
+                    backgroundColor: '#dcfce7',
+                    borderRadius: '4px',
+                    fontFamily: 'monospace',
+                  }}
+                >
+                  {parentBranch}
+                </span>
+              </div>
+
+              {error && (
+                <div
+                  style={{
+                    padding: '12px',
+                    backgroundColor: '#fef2f2',
+                    border: '1px solid #fecaca',
+                    borderRadius: '6px',
+                    color: '#dc2626',
+                    fontSize: '13px',
+                    marginBottom: '16px',
+                  }}
+                >
+                  {error}
+                </div>
+              )}
+
+              <div className="form-group">
+                <label htmlFor="pr-title">Title *</label>
+                <input
+                  id="pr-title"
+                  type="text"
+                  placeholder="Add new metrics for revenue tracking"
+                  value={title}
+                  onChange={e => setTitle(e.target.value)}
+                  disabled={isWorking}
+                  autoFocus
+                />
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="pr-body">Description</label>
+                <textarea
+                  id="pr-body"
+                  placeholder="Describe the changes in this pull request..."
+                  value={body}
+                  onChange={e => setBody(e.target.value)}
+                  disabled={isWorking}
+                  rows={4}
+                  style={{
+                    width: '100%',
+                    padding: '8px 12px',
+                    border: '1px solid #e2e8f0',
+                    borderRadius: '6px',
+                    fontSize: '14px',
+                    fontFamily: 'inherit',
+                    resize: 'vertical',
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="modal-actions">
+              <button
+                type="button"
+                className="btn-secondary"
+                onClick={handleClose}
+                disabled={isWorking}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn-primary"
+                disabled={isWorking || !title.trim()}
+              >
+                {getProgressText()}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CreatePRModal;