datajunction-ui 0.0.54 → 0.0.56

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

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+
+/**
+ * Modal for confirming branch deletion.
+ */
+export function DeleteBranchModal({
+  isOpen,
+  onClose,
+  onDelete,
+  namespace,
+  gitBranch,
+  parentNamespace,
+}) {
+  const [deleteGitBranch, setDeleteGitBranch] = useState(true);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    setError(null);
+    setDeleting(true);
+
+    try {
+      const result = await onDelete(deleteGitBranch);
+      if (result?._error) {
+        setError(result.message);
+      } else {
+        onClose();
+        // Redirect to parent namespace
+        window.location.href = `/namespaces/${parentNamespace}`;
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to delete branch');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const handleClose = () => {
+    setDeleteGitBranch(false);
+    setError(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>Delete Branch</h3>
+          <button
+            className="btn-close-modal"
+            onClick={handleClose}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div className="modal-body">
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '12px',
+                padding: '12px 12px 0 12px',
+                backgroundColor: '#fef3c7',
+                border: '1px solid #fcd34d',
+                borderRadius: '6px',
+                marginBottom: '16px',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: '20px',
+                  paddingBottom: '12px',
+                  margin: '-5px -1px 0 0',
+                }}
+              >
+                ⚠️
+              </span>
+              <div style={{ fontSize: '13px' }}>
+                Are you sure you want to delete this branch namespace?
+              </div>
+            </div>
+
+            {error && (
+              <div
+                style={{
+                  padding: '12px',
+                  backgroundColor: '#fef2f2',
+                  border: '1px solid #fecaca',
+                  borderRadius: '6px',
+                  color: '#dc2626',
+                  fontSize: '13px',
+                  marginBottom: '16px',
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            <div
+              style={{
+                backgroundColor: '#f8fafc',
+                borderRadius: '6px',
+                padding: '12px',
+                fontSize: '13px',
+                marginBottom: '16px',
+              }}
+            >
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Namespace:</strong> {namespace}
+              </div>
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Git Branch:</strong> {gitBranch}
+              </div>
+              <div>
+                <strong>Parent:</strong> {parentNamespace}
+              </div>
+            </div>
+
+            <label
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                fontSize: '13px',
+                cursor: 'pointer',
+                fontWeight: 'none',
+                textTransform: 'none',
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={deleteGitBranch}
+                onChange={e => setDeleteGitBranch(e.target.checked)}
+                disabled={deleting}
+              />
+              Also delete git branch on GitHub
+            </label>
+          </div>
+
+          <div className="modal-actions">
+            <button
+              type="button"
+              className="btn-secondary"
+              onClick={handleClose}
+              disabled={deleting}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={deleting}
+              style={{
+                backgroundColor: '#dc2626',
+                borderColor: '#dc2626',
+              }}
+            >
+              {deleting ? 'Deleting...' : 'Delete Branch'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default DeleteBranchModal;

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

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+
+/**
+ * Modal for configuring git settings for a namespace.
+ */
+export function GitSettingsModal({
+  isOpen,
+  onClose,
+  onSave,
+  currentConfig,
+  namespace,
+}) {
+  const [repoPath, setRepoPath] = useState('');
+  const [branch, setBranch] = useState('');
+  const [path, setPath] = useState('');
+  const [gitOnly, setGitOnly] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    if (currentConfig) {
+      setRepoPath(currentConfig.github_repo_path || '');
+      setBranch(currentConfig.git_branch || '');
+      setPath(currentConfig.git_path || 'nodes/');
+      // If git is already configured (has repo path), use the existing git_only value
+      // Otherwise, default to read-only (true) for new git configurations
+      const hasExistingGitConfig = !!currentConfig.github_repo_path;
+      setGitOnly(hasExistingGitConfig ? currentConfig.git_only : true);
+    } else {
+      // New configuration - default to read-only and nodes/ path
+      setPath('nodes/');
+      setGitOnly(true);
+    }
+    setSuccess(false);
+    setError(null);
+  }, [currentConfig]);
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+    setSaving(true);
+
+    try {
+      const config = {
+        github_repo_path: repoPath.trim() || null,
+        git_branch: branch.trim() || null,
+        git_path: path.trim() || null,
+        git_only: gitOnly,
+      };
+
+      const result = await onSave(config);
+      if (result?._error) {
+        setError(result.message);
+      } else {
+        setSuccess(true);
+        // Keep modal open so user can see success message
+        // User can close manually via Close button or X
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to save git settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleClose = () => {
+    setError(null);
+    setSuccess(false);
+    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>Git Configuration</h3>
+          <button
+            className="btn-close-modal"
+            onClick={handleClose}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div className="modal-body">
+            <p
+              style={{
+                color: '#64748b',
+                fontSize: '13px',
+                marginBottom: '16px',
+              }}
+            >
+              Configure git integration for <strong>{namespace}</strong> to
+              enable branch management and sync changes to GitHub.
+            </p>
+
+            {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="git-repo-path">Repository</label>
+              <input
+                id="git-repo-path"
+                type="text"
+                placeholder="owner/repo"
+                value={repoPath}
+                onChange={e => setRepoPath(e.target.value)}
+                disabled={saving}
+              />
+              <span className="form-hint">
+                GitHub repository path (e.g., "myorg/dj-definitions")
+              </span>
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="git-branch">Branch</label>
+              <input
+                id="git-branch"
+                type="text"
+                placeholder="main"
+                value={branch}
+                onChange={e => setBranch(e.target.value)}
+                disabled={saving}
+              />
+              <span className="form-hint">
+                Git branch for this namespace (e.g., "main" or "production")
+              </span>
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="git-path">Path</label>
+              <input
+                id="git-path"
+                type="text"
+                placeholder="nodes/"
+                value={path}
+                onChange={e => setPath(e.target.value)}
+                disabled={saving}
+                required
+              />
+              <span className="form-hint">
+                Subdirectory within the repo for node YAML files
+              </span>
+            </div>
+
+            <div
+              style={{
+                marginTop: '16px',
+                padding: '12px',
+                backgroundColor: gitOnly ? '#fef3c7' : '#f0fdf4',
+                borderRadius: '6px',
+                border: `1px solid ${gitOnly ? '#fcd34d' : '#86efac'}`,
+              }}
+            >
+              <label
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: '10px',
+                  cursor: 'pointer',
+                  margin: 0,
+                  textTransform: 'none',
+                  letterSpacing: 'normal',
+                  fontSize: '14px',
+                  fontWeight: 'normal',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={gitOnly}
+                  onChange={e => setGitOnly(e.target.checked)}
+                  disabled={saving}
+                  style={{ marginTop: '3px' }}
+                />
+                <span>
+                  <span
+                    style={{
+                      fontWeight: 600,
+                      color: gitOnly ? '#92400e' : '#166534',
+                      textTransform: 'none',
+                    }}
+                  >
+                    {gitOnly
+                      ? 'Read-only (Git is source of truth)'
+                      : 'Editable (UI edits allowed)'}
+                  </span>
+                  <span
+                    style={{
+                      display: 'block',
+                      marginTop: '4px',
+                      fontSize: '12px',
+                      color: '#64748b',
+                      fontWeight: 'normal',
+                      textTransform: 'none',
+                    }}
+                  >
+                    {gitOnly
+                      ? 'Changes must be made via git and deployed through CI/CD. UI editing is disabled.'
+                      : 'Users can edit nodes in the UI. Changes can be synced to git.'}
+                  </span>
+                </span>
+              </label>
+            </div>
+
+            {success && (
+              <div
+                style={{
+                  marginTop: '16px',
+                  padding: '12px',
+                  backgroundColor: '#f0fdf4',
+                  border: '1px solid #86efac',
+                  borderRadius: '6px',
+                  color: '#166534',
+                  fontSize: '13px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                  <polyline points="22 4 12 14.01 9 11.01" />
+                </svg>
+                Git configuration saved successfully!
+              </div>
+            )}
+          </div>
+
+          <div className="modal-actions">
+            <button
+              type="button"
+              className="btn-secondary"
+              onClick={handleClose}
+              disabled={saving}
+            >
+              {success ? 'Close' : 'Cancel'}
+            </button>
+            {!success && (
+              <button
+                type="submit"
+                className="btn-primary"
+                disabled={saving}
+                style={
+                  saving
+                    ? {
+                        opacity: 0.7,
+                        cursor: 'wait',
+                        backgroundColor: '#9ca3af',
+                      }
+                    : {}
+                }
+              >
+                {saving ? 'Saving...' : 'Save Settings'}
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default GitSettingsModal;

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

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+
+/**
+ * Modal for syncing namespace to git.
+ */
+export function SyncToGitModal({
+  isOpen,
+  onClose,
+  onSync,
+  namespace,
+  gitBranch,
+  repoPath,
+}) {
+  const [commitMessage, setCommitMessage] = useState('');
+  const [syncing, setSyncing] = useState(false);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    setError(null);
+    setSyncing(true);
+
+    try {
+      const res = await onSync(commitMessage.trim() || null);
+      if (res?._error) {
+        setError(res.message);
+      } else {
+        setResult(res);
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to sync to git');
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const handleClose = () => {
+    setCommitMessage('');
+    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>Sync to Git</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' }}>
+                Synced {result.files_synced} file
+                {result.files_synced !== 1 ? 's' : ''}!
+              </h4>
+            </div>
+
+            <div
+              style={{
+                backgroundColor: '#f8fafc',
+                borderRadius: '6px',
+                padding: '12px',
+                fontSize: '13px',
+              }}
+            >
+              <div style={{ marginBottom: '8px' }}>
+                <strong>Commit:</strong>{' '}
+                <a
+                  href={result.commit_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                    color: '#3b82f6',
+                  }}
+                >
+                  {result.commit_sha?.slice(0, 7)}
+                </a>
+              </div>
+              <div>
+                <strong>Branch:</strong> {gitBranch}
+              </div>
+            </div>
+
+            <div className="modal-actions">
+              <button className="btn-secondary" onClick={handleClose}>
+                Close
+              </button>
+              <a
+                href={result.commit_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary"
+                style={{ textDecoration: 'none' }}
+              >
+                View Commit
+              </a>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              <p
+                style={{
+                  color: '#64748b',
+                  fontSize: '13px',
+                  marginBottom: '16px',
+                }}
+              >
+                Sync all nodes in <strong>{namespace}</strong> to git as YAML
+                files.
+              </p>
+
+              {error && (
+                <div
+                  style={{
+                    padding: '12px',
+                    backgroundColor: '#fef2f2',
+                    border: '1px solid #fecaca',
+                    borderRadius: '6px',
+                    color: '#dc2626',
+                    fontSize: '13px',
+                    marginBottom: '16px',
+                  }}
+                >
+                  {error}
+                </div>
+              )}
+
+              <div
+                style={{
+                  backgroundColor: '#f8fafc',
+                  borderRadius: '6px',
+                  padding: '12px',
+                  fontSize: '13px',
+                  marginBottom: '16px',
+                }}
+              >
+                <div style={{ marginBottom: '4px' }}>
+                  <strong>Repository:</strong> {repoPath}
+                </div>
+                <div>
+                  <strong>Branch:</strong> {gitBranch}
+                </div>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="commit-message">
+                  Commit Message (optional)
+                </label>
+                <input
+                  id="commit-message"
+                  type="text"
+                  placeholder={`Sync ${namespace}`}
+                  value={commitMessage}
+                  onChange={e => setCommitMessage(e.target.value)}
+                  disabled={syncing}
+                />
+                <span className="form-hint">
+                  Leave blank to use default message
+                </span>
+              </div>
+            </div>
+
+            <div className="modal-actions">
+              <button
+                type="button"
+                className="btn-secondary"
+                onClick={handleClose}
+                disabled={syncing}
+              >
+                Cancel
+              </button>
+              <button type="submit" className="btn-primary" disabled={syncing}>
+                {syncing ? 'Syncing...' : 'Sync Now'}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SyncToGitModal;

package/src/app/components/git/index.js

@@ -0,0 +1,5 @@
+export { GitSettingsModal } from './GitSettingsModal';
+export { CreateBranchModal } from './CreateBranchModal';
+export { SyncToGitModal } from './SyncToGitModal';
+export { CreatePRModal } from './CreatePRModal';
+export { DeleteBranchModal } from './DeleteBranchModal';

package/src/app/icons/DeleteIcon.jsx

@@ -1,14 +1,14 @@
-const DeleteIcon = props => (
+const DeleteIcon = ({ size = 14 }) => (
   <svg
     className="feather feather-trash-2"
     fill="none"
-    height="24"
+    height={size}
     stroke="currentColor"
     strokeLinecap="round"
     strokeLinejoin="round"
     strokeWidth="2"
     viewBox="0 0 24 24"
-    width="24"
+    width={size}
     xmlns="http://www.w3.org/2000/svg"
   >
     <polyline points="3 6 5 6 21 6" />