datajunction-ui

import * as React from 'react'; import DashboardCard from '../../components/DashboardCard'; import { formatRelativeTime } from '../../utils/date'; // Git Namespaces Section - shows git-managed namespaces with their branches export function ActiveBranchesSection({ ownedNodes, recentlyEdited, loading }) { // Combine owned and edited nodes to get all user's nodes const allNodes = [...ownedNodes, ...recentlyEdited]; // Group nodes by base git namespace (the root namespace that's git-managed) const gitNamespaceMap = new Map(); allNodes.forEach(node => { if (node.gitInfo && node.gitInfo.repo) { // Extract the base namespace (everything before the branch part) const fullNamespace = node.name.split('.').slice(0, -1).join('.'); // For git-managed namespaces, the base is the parent namespace // If not available, we derive it by removing the branch from the full namespace let baseNamespace; if (node.gitInfo.parentNamespace) { baseNamespace = node.gitInfo.parentNamespace; } else { // Fallback: remove the branch part from fullNamespace // fullNamespace is like "myproject.main", we want "myproject" const dotIdx = fullNamespace.lastIndexOf('.'); baseNamespace = dotIdx > 0 ? fullNamespace.slice(0, dotIdx) : fullNamespace; } if (!gitNamespaceMap.has(baseNamespace)) { gitNamespaceMap.set(baseNamespace, { baseNamespace, repo: node.gitInfo.repo, defaultBranch: node.gitInfo.defaultBranch, branches: new Map(), }); } const gitNs = gitNamespaceMap.get(baseNamespace); const branchKey = node.gitInfo.branch; if (!gitNs.branches.has(branchKey)) { gitNs.branches.set(branchKey, { branch: node.gitInfo.branch, isDefault: node.gitInfo.isDefaultBranch, namespace: fullNamespace, nodes: [], lastActivity: node.current?.updatedAt, }); } const branchInfo = gitNs.branches.get(branchKey); branchInfo.nodes.push(node); // Track most recent activity if ( node.current?.updatedAt && (!branchInfo.lastActivity || node.current.updatedAt > branchInfo.lastActivity) ) { branchInfo.lastActivity = node.current.updatedAt; } } }); // Ensure default branch is always present (even if user has no nodes there) gitNamespaceMap.forEach(gitNs => { if (gitNs.defaultBranch && !gitNs.branches.has(gitNs.defaultBranch)) { gitNs.branches.set(gitNs.defaultBranch, { branch: gitNs.defaultBranch, isDefault: true, namespace: `${gitNs.baseNamespace}.${gitNs.defaultBranch}`, nodes: [], lastActivity: null, }); } }); // Convert to array and sort const gitNamespaces = Array.from(gitNamespaceMap.values()) .map(ns => ({ ...ns, branches: Array.from(ns.branches.values()).sort((a, b) => { // Default branch first if (a.isDefault && !b.isDefault) return -1; if (!a.isDefault && b.isDefault) return 1; // Then by last activity if (!a.lastActivity && !b.lastActivity) return 0; if (!a.lastActivity) return 1; if (!b.lastActivity) return -1; return new Date(b.lastActivity) - new Date(a.lastActivity); }), })) .sort((a, b) => { // Sort git namespaces by most recent activity across all branches const aLatest = Math.max( ...a.branches.map(b => b.lastActivity ? new Date(b.lastActivity).getTime() : 0, ), ); const bLatest = Math.max( ...b.branches.map(b => b.lastActivity ? new Date(b.lastActivity).getTime() : 0, ), ); return bLatest - aLatest; }); const maxDisplay = 3; // Show top 3 git namespaces const gitNamespacesList = gitNamespaces .slice(0, maxDisplay) .map((gitNs, gitNsIdx) => { const isLastGitNs = gitNsIdx === gitNamespaces.slice(0, maxDisplay).length - 1; return ( <div key={gitNs.baseNamespace}> {/* Base namespace and repository header */} <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0.75rem 0 0.5rem 0', marginTop: gitNsIdx === 0 ? '0' : '0', }} > <a href={`/namespaces/${gitNs.baseNamespace}`} style={{ fontSize: '12px', fontWeight: '600', textDecoration: 'none', }} > {gitNs.baseNamespace} </a> <span style={{ fontSize: '9px', padding: '2px 6px', backgroundColor: '#f0f0f0', color: '#666', borderRadius: '3px', fontWeight: '500', }} > {gitNs.repo} </span> </div> {/* Branch list */} {gitNs.branches.map(branchInfo => ( <div key={branchInfo.branch} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0px 1em 0.4em 1em', }} > <div style={{ display: 'flex', alignItems: 'center', gap: '6px', minWidth: 0, flex: 1, }} > <a href={`/namespaces/${branchInfo.namespace}`} style={{ fontSize: '12px', fontWeight: '500', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }} > {branchInfo.branch} </a> {branchInfo.isDefault && ( <span style={{ fontSize: '10px' }}>⭐</span> )} </div> {branchInfo.lastActivity && ( <span style={{ fontSize: '10px', color: '#888', whiteSpace: 'nowrap', }} > updated {formatRelativeTime(branchInfo.lastActivity)} </span> )} </div> ))} {/* Horizontal line between namespaces */} {!isLastGitNs && ( <div style={{ borderBottom: '1px solid var(--border-color, #ddd)', margin: '0.5rem 0', }} /> )} </div> ); }); return ( <DashboardCard title="Git Namespaces" loading={loading} cardStyle={{ padding: '0.25rem 0.25rem 0.5em 0.75rem', maxHeight: '300px', overflowY: 'auto', }} emptyState={ <div style={{ padding: '0', textAlign: 'center' }}> <p style={{ fontSize: '12px', color: '#666', marginBottom: '0.75rem' }} > No git-managed namespaces. </p> <div style={{ padding: '0.75rem', backgroundColor: 'var(--card-bg, #f8f9fa)', border: '1px dashed var(--border-color, #dee2e6)', borderRadius: '6px', }} > <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>🌿</div> <div style={{ fontSize: '11px', fontWeight: '500', marginBottom: '0.25rem', }} > Set up git-backed namespaces </div> <p style={{ fontSize: '10px', color: '#666', marginBottom: '0' }}> Manage your nodes with version control </p> </div> </div> } > {gitNamespaces.length > 0 && ( <div style={{ display: 'flex', flexDirection: 'column' }}> {gitNamespacesList} {gitNamespaces.length > maxDisplay && ( <div style={{ textAlign: 'center', padding: '0.5rem', fontSize: '12px', color: '#666', }} > +{gitNamespaces.length - maxDisplay} more git namespace {gitNamespaces.length - maxDisplay !== 1 ? 's' : ''} </div> )} </div> )} </DashboardCard> ); }