import { useContext, useEffect, useState, useRef } from 'react';
import {
searchNamespaces,
topLevelNamespaces,
} from '../pages/NamespacePage/namespaceOptions';
import DJClientContext from '../providers/djclient';
import {
secondaryButtonStyle as buttonStyle,
primaryButtonStyle,
onSecondaryHover,
onSecondaryOut,
} from './buttonStyles';
import {
GitSettingsModal,
CreateBranchModal,
SyncToGitModal,
CreatePRModal,
DeleteBranchModal,
} from './git';
import { detectShape } from './git/gitShape';
import GitMenu from './GitMenu';
export default function NamespaceHeader({
namespace,
children,
onGitConfigLoaded,
onReadOnlyChange,
namespaceOptions,
currentNamespace,
}) {
const djClient = useContext(DJClientContext).DataJunctionAPI;
const [sources, setSources] = useState(null);
const [recentDeployments, setRecentDeployments] = useState([]);
const [deploymentsDropdownOpen, setDeploymentsDropdownOpen] = useState(false);
const dropdownRef = useRef(null);
// Git config state
const [gitConfig, setGitConfig] = useState(null);
const [gitConfigLoading, setGitConfigLoading] = useState(true);
const [parentGitConfig, setParentGitConfig] = useState(null);
const [existingPR, setExistingPR] = useState(null);
const [prLoading, setPrLoading] = useState(false);
// Branch switcher state
const [branches, setBranches] = useState([]);
const [branchDropdownOpen, setBranchDropdownOpen] = useState(false);
const branchDropdownRef = useRef(null);
// Namespace switcher state (opt-in: only active when namespaceOptions is provided)
const [nsSwitcherOpen, setNsSwitcherOpen] = useState(false);
const [nsQuery, setNsQuery] = useState('');
const nsSwitcherRef = useRef(null);
// Modal states
const [showGitSettings, setShowGitSettings] = useState(false);
const [showCreateBranch, setShowCreateBranch] = useState(false);
const [showSyncToGit, setShowSyncToGit] = useState(false);
const [showCreatePR, setShowCreatePR] = useState(false);
const [showDeleteBranch, setShowDeleteBranch] = useState(false);
useEffect(() => {
// Reset loading state when namespace changes
setGitConfigLoading(true);
setPrLoading(false);
setExistingPR(null);
const fetchData = async () => {
if (!namespace) {
if (onGitConfigLoaded) onGitConfigLoaded(null);
setGitConfigLoading(false);
return;
}
if (namespace) {
// Fetch deployment sources
try {
const data = await djClient.namespaceSources(namespace);
setSources(data);
try {
const deployments = await djClient.listDeployments(namespace, 5);
setRecentDeployments(deployments || []);
} catch (err) {
console.error('Failed to fetch deployments:', err);
setRecentDeployments([]);
}
} catch (e) {
// Silently fail - badge just won't show
}
// Fetch git config
try {
const config = await djClient.getNamespaceGitConfig(namespace);
setGitConfig(config);
if (onGitConfigLoaded) {
onGitConfigLoaded(config);
}
// If this namespace is inside a branch (or IS the branch), fetch
// parent/branches/PR.
const branchNs = config?.branch_namespace;
if (branchNs) {
// The branch namespace itself carries the parent_namespace FK to
// the git root. If this is a subnamespace, fetch the branch's
// config to get that FK; otherwise the current config already
// has it.
const branchConfig =
branchNs === namespace
? config
: await djClient
.getNamespaceGitConfig(branchNs)
.catch(() => null);
const gitRootNs = branchConfig?.parent_namespace;
if (gitRootNs) {
try {
const parentConfig = await djClient.getNamespaceGitConfig(
gitRootNs,
);
setParentGitConfig(parentConfig);
} catch (e) {
console.error('Failed to fetch parent git config:', e);
}
try {
const branchList = await djClient.getNamespaceBranches(
gitRootNs,
);
setBranches(branchList || []);
} catch (e) {
console.error('Failed to fetch branches:', e);
}
}
// Check for existing PR scoped to the branch, not the current
// (sub)namespace — a branch has at most one PR regardless of
// which subnamespace page the user is on.
setPrLoading(true);
try {
const pr = await djClient.getPullRequest(branchNs);
setExistingPR(pr);
} catch (e) {
// No PR or error - that's fine
setExistingPR(null);
} finally {
setPrLoading(false);
}
}
} catch (e) {
// Git config not available
setGitConfig(null);
if (onGitConfigLoaded) {
onGitConfigLoaded(null);
}
} finally {
setGitConfigLoading(false);
}
}
};
fetchData();
}, [djClient, namespace]);
// Close dropdowns when clicking outside
useEffect(() => {
const handleClickOutside = event => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setDeploymentsDropdownOpen(false);
}
if (
branchDropdownRef.current &&
!branchDropdownRef.current.contains(event.target)
) {
setBranchDropdownOpen(false);
}
if (
nsSwitcherRef.current &&
!nsSwitcherRef.current.contains(event.target)
) {
setNsSwitcherOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const namespaceParts = namespace ? namespace.split('.') : [];
// ``branch_namespace`` is the branch this namespace belongs to (equals the
// namespace when called against the branch itself, the ancestor branch when
// called against a descendant).
// isInBranch = "this lives under a branch" (used to show branch-scoped git
// controls on subnamespaces too).
const branchNamespace = gitConfig?.branch_namespace || null;
const isInBranch = !!branchNamespace;
const branchScopeNamespace = branchNamespace || namespace;
// Descendants inherit github_repo_path via cascade, so compare against
// git_root_namespace to know if this namespace IS the git root.
const isGitRoot =
gitConfig?.github_repo_path && gitConfig?.git_root_namespace === namespace;
// Handlers for git operations
const handleSaveGitConfig = async config => {
const result = await djClient.updateNamespaceGitConfig(
gitConfigOwnerNamespace,
config,
);
if (!result?._error) {
if (isBranch) setParentGitConfig(prev => ({ ...prev, ...result }));
else setGitConfig(result);
}
return result;
};
const handleRemoveGitConfig = async () => {
if (
!window.confirm(
'Remove this git config binding? If this namespace is still being deployed from git by CI, it will remain read-only. This does not delete any nodes or repo files.',
)
)
return;
const result = await djClient.deleteNamespaceGitConfig(
gitConfigOwnerNamespace,
);
if (!result?._error) {
if (isBranch) setParentGitConfig(null);
else setGitConfig(null);
}
};
// Branches are always created under the git root, forking from its default
// branch — whether we're viewing the root itself or one of its branches (on a
// branch page the root is carried by git_root_namespace / parentGitConfig).
const gitRootNamespace = gitConfig?.git_root_namespace || namespace;
const rootDefaultBranch = isGitRoot
? gitConfig?.default_branch
: parentGitConfig?.default_branch;
const canCreateBranch = !!(gitRootNamespace && rootDefaultBranch);
const handleCreateBranch = async branchName => {
return await djClient.createBranch(gitRootNamespace, branchName);
};
// Sync/PR operations always target the whole branch namespace, even
// when invoked from a subnamespace page.
const handleSyncToGit = async commitMessage => {
return await djClient.syncNamespaceToGit(
branchScopeNamespace,
commitMessage,
);
};
const handleCreatePR = async (title, body, onProgress) => {
// First sync changes to git using PR title as commit message
if (onProgress) onProgress('syncing');
const syncResult = await djClient.syncNamespaceToGit(
branchScopeNamespace,
title,
);
if (syncResult?._error) {
return syncResult;
}
// Then create the PR
if (onProgress) onProgress('creating');
const result = await djClient.createPullRequest(
branchScopeNamespace,
title,
body,
);
if (result && !result._error) {
setExistingPR(result);
}
return result;
};
const handleDeleteBranch = async deleteGitBranch => {
return await djClient.deleteBranch(
gitConfig.parent_namespace,
namespace,
deleteGitBranch,
);
};
// Git state derivations
const gitShape = detectShape(gitConfig || {});
// Read-only follows the branch, not the resolved config's flat/root shape.
// A sub-namespace inside a feature branch resolves as `flat` (it inherits
// github_repo_path + git_branch from the branch but carries no
// parent_namespace of its own), so the shape test alone wrongly locks
// editable feature branches — the actual regression here. Instead: content
// on the repo's default branch, on a git root, or in a 1:1 flat namespace is
// read-only; a non-default (feature) branch and its sub-namespaces are
// editable. `rootDefaultBranch` is resolved above from the git root's config
// (parentGitConfig), which has finished loading by the time the verdict fires
// below — setGitConfigLoading(false) runs after that fetch.
const onSubBranch = !!branchNamespace && branchNamespace !== gitRootNamespace;
const isDefaultBranch = onSubBranch
? gitConfig?.git_branch === rootDefaultBranch
: gitShape === 'root' || gitShape === 'flat';
const isReadOnly = !!gitConfig?.git_only || isDefaultBranch;
const isGitDeployed =
!!sources &&
sources.total_deployments > 0 &&
sources.primary_source?.type === 'git';
// A non-default (feature) branch and its sub-namespaces stay editable even
// when git-deployed — editing then syncing back is the point. The
// git-deployed lock only applies elsewhere (default branch, 1:1 flat, git
// root, or an unrecognized-but-git-deployed shape), which `isReadOnly`
// already covers for the recognized cases.
const isFeatureBranch = onSubBranch && !isDefaultBranch;
const isGitManaged = isReadOnly || (isGitDeployed && !isFeatureBranch);
// Repo config is owned by the git root. On a branch, edits target the root
// (its config is parentGitConfig — branches sit one level below the root); a
// flat or plain namespace owns its own config. This keeps flat namespaces
// (e.g. magnesium.tech, no parent) editing themselves.
const isBranch = gitShape === 'branch';
const gitConfigOwnerNamespace = isBranch ? gitRootNamespace : namespace;
const gitConfigOwnerConfig = isBranch ? parentGitConfig : gitConfig;
// Report the read-only verdict only once it's actually known (git config +
// sources loaded). Firing a premature `false` on mount makes consumers flash
// editable UI (e.g. the node edit form) before the real verdict arrives.
useEffect(() => {
if (onReadOnlyChange && !gitConfigLoading) onReadOnlyChange(!!isGitManaged);
}, [isGitManaged, gitConfigLoading, onReadOnlyChange]);
const viewInGitUrl = () => {
const repo = gitConfig?.github_repo_path;
if (!repo) return null;
const branch = gitConfig?.git_branch || gitConfig?.default_branch || 'main';
const path = gitConfig?.git_path
? `/${gitConfig.git_path.replace(/^\/|\/$/g, '')}`
: '';
return `https://github.netflix.net/${repo}/tree/${branch}${path}`;
};
return (
<>
{namespace ? (
namespaceParts.map((part, index, arr) => {
const isLast = index === arr.length - 1;
const cumulative = arr.slice(0, index + 1).join('.');
const href = `/namespaces/${cumulative}`;
// The branch crumb (the segment whose cumulative path equals the
// branch namespace) becomes the branch switcher — at ANY depth, not
// only when the URL is exactly the branch root (so it stays available
// after drilling into sub-namespaces below the branch).
const isBranchCrumb =
isInBranch && cumulative === branchNamespace;
return (
{/* The branch crumb becomes the branch switcher. The first
segment becomes a searchable namespace switcher when
namespaceOptions is provided (opt-in). */}
{isBranchCrumb ? (
{(() => {
// Default list: top-level namespaces only (the
// switcher is for jumping between top-level areas;
// deeper levels are reached by drilling folders).
// Typing searches across ALL depths.
const results = nsQuery.trim()
? searchNamespaces(namespaceOptions, nsQuery)
: topLevelNamespaces(namespaceOptions);
if (results.length === 0) {
return (