datajunction-ui 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/__tests__/reportWebVitals.test.ts

@@ -0,0 +1,27 @@
+import reportWebVitals from '../reportWebVitals';
+
+describe('reportWebVitals', () => {
+  it('calls web vitals functions when handler is provided', async () => {
+    const mockHandler = jest.fn();
+
+    // Call reportWebVitals with a handler
+    reportWebVitals(mockHandler);
+
+    // Wait for dynamic import to resolve
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // The handler should have been called by web vitals
+    // (we just verify it doesn't throw)
+    expect(mockHandler).toBeDefined();
+  });
+
+  it('does nothing when no handler is provided', () => {
+    // Should not throw
+    expect(() => reportWebVitals()).not.toThrow();
+  });
+
+  it('does nothing when handler is not a function', () => {
+    // Should not throw
+    expect(() => reportWebVitals(undefined)).not.toThrow();
+  });
+});

package/src/app/components/NamespaceHeader.jsx

@@ -1,10 +1,12 @@
-import { useContext, useEffect, useState } from 'react';
-import HorizontalHierarchyIcon from '../icons/HorizontalHierarchyIcon';
+import { useContext, useEffect, useState, useRef } from 'react';
 import DJClientContext from '../providers/djclient';
 
-export default function NamespaceHeader({ namespace }) {
+export default function NamespaceHeader({ namespace, children }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [sources, setSources] = useState(null);
+  const [recentDeployments, setRecentDeployments] = useState([]);
+  const [deploymentsDropdownOpen, setDeploymentsDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
   useEffect(() => {
     const fetchSources = async () => {
@@ -12,6 +14,15 @@ export default function NamespaceHeader({ namespace }) {
         try {
           const data = await djClient.namespaceSources(namespace);
           setSources(data);
+
+          // Fetch recent deployments for this namespace
+          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
         }
@@ -20,82 +31,418 @@ export default function NamespaceHeader({ namespace }) {
     fetchSources();
   }, [djClient, namespace]);
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDeploymentsDropdownOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
   const namespaceParts = namespace ? namespace.split('.') : [];
-  const namespaceList = namespaceParts.map((piece, index) => {
-    return (
-      <li className="breadcrumb-item" key={index}>
-        <a
-          className="link-body-emphasis"
-          href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
-        >
-          {piece}
-        </a>
-      </li>
-    );
-  });
-
-  // Render source badge
-  const renderSourceBadge = () => {
-    if (!sources || sources.total_deployments === 0) {
-      return null;
-    }
-
-    const isGit = sources.primary_source?.type === 'git';
-    const hasMultiple = sources.has_multiple_sources;
-
-    return (
-      <li
-        className="breadcrumb-item"
-        style={{ display: 'flex', alignItems: 'center' }}
-      >
-        <span
-          title={
-            hasMultiple
-              ? `Warning: ${sources.sources.length} deployment sources`
-              : isGit
-              ? `CI-managed: ${sources.primary_source.repository}${
-                  sources.primary_source.branch
-                    ? ` (${sources.primary_source.branch})`
-                    : ''
-                }`
-              : 'Local/adhoc deployment'
-          }
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '4px',
-            padding: '2px 8px',
-            fontSize: '11px',
-            borderRadius: '12px',
-            backgroundColor: hasMultiple
-              ? '#fff3cd'
-              : isGit
-              ? '#d4edda'
-              : '#e2e3e5',
-            color: hasMultiple ? '#856404' : isGit ? '#155724' : '#383d41',
-            cursor: 'help',
-          }}
-        >
-          {hasMultiple ? '⚠️' : isGit ? '🔗' : '📁'}
-          {hasMultiple
-            ? `${sources.sources.length} sources`
-            : isGit
-            ? 'CI'
-            : 'Local'}
-        </span>
-      </li>
-    );
-  };
 
   return (
-    <ol className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
-      <li className="breadcrumb-item">
-        <a href="/">
-          <HorizontalHierarchyIcon />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '12px 12px 12px 20px',
+        marginBottom: '16px',
+        borderTop: '1px solid #e2e8f0',
+        borderBottom: '1px solid #e2e8f0',
+        background: '#ffffff',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <a href="/" style={{ display: 'flex', alignItems: 'center' }}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z" />
+          </svg>
         </a>
-      </li>
-      {namespaceList}
-      {renderSourceBadge()}
-    </ol>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          fill="#6c757d"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+          />
+        </svg>
+        {namespace ? (
+          namespaceParts.map((part, index, arr) => (
+            <span
+              key={index}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+              }}
+            >
+              <a
+                href={`/namespaces/${arr.slice(0, index + 1).join('.')}`}
+                style={{
+                  fontWeight: '400',
+                  color: '#1e293b',
+                  textDecoration: 'none',
+                }}
+              >
+                {part}
+              </a>
+              {index < arr.length - 1 && (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  fill="#94a3b8"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+                  />
+                </svg>
+              )}
+            </span>
+          ))
+        ) : (
+          <span style={{ fontWeight: '600', color: '#1e293b' }}>
+            All Namespaces
+          </span>
+        )}
+
+        {/* Deployment badge + dropdown */}
+        {sources && sources.total_deployments > 0 && (
+          <div
+            style={{ position: 'relative', marginLeft: '8px' }}
+            ref={dropdownRef}
+          >
+            <button
+              onClick={() =>
+                setDeploymentsDropdownOpen(!deploymentsDropdownOpen)
+              }
+              style={{
+                height: '32px',
+                padding: '0 12px',
+                fontSize: '12px',
+                border: 'none',
+                borderRadius: '4px',
+                backgroundColor: '#ffffff',
+                color: '#0b3d91',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {sources.primary_source?.type === 'git' ? (
+                <>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <line x1="6" y1="3" x2="6" y2="15"></line>
+                    <circle cx="18" cy="6" r="3"></circle>
+                    <circle cx="6" cy="18" r="3"></circle>
+                    <path d="M18 9a9 9 0 0 1-9 9"></path>
+                  </svg>
+                  Git Managed
+                </>
+              ) : (
+                <>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <circle cx="12" cy="7" r="4" />
+                    <path d="M5.5 21a6.5 6.5 0 0 1 13 0Z" />
+                  </svg>
+                  Local Deploy
+                </>
+              )}
+              <span style={{ fontSize: '8px' }}>
+                {deploymentsDropdownOpen ? '▲' : '▼'}
+              </span>
+            </button>
+
+            {deploymentsDropdownOpen && (
+              <div
+                style={{
+                  position: 'absolute',
+                  top: '100%',
+                  left: 0,
+                  marginTop: '4px',
+                  padding: '12px',
+                  backgroundColor: 'white',
+                  border: '1px solid #ddd',
+                  borderRadius: '8px',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                  zIndex: 1000,
+                  minWidth: 'max-content',
+                }}
+              >
+                {sources.primary_source?.type === 'git' ? (
+                  <a
+                    href={
+                      sources.primary_source.repository?.startsWith('http')
+                        ? sources.primary_source.repository
+                        : `https://${sources.primary_source.repository}`
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                      fontSize: '13px',
+                      fontWeight: 400,
+                      textDecoration: 'none',
+                      marginBottom: '12px',
+                    }}
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <line x1="6" y1="3" x2="6" 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>
+                    {sources.primary_source.repository}
+                    {sources.primary_source.branch &&
+                      ` (${sources.primary_source.branch})`}
+                  </a>
+                ) : (
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                      fontSize: '13px',
+                      fontWeight: 600,
+                      color: '#0b3d91',
+                      marginBottom: '12px',
+                    }}
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <circle cx="12" cy="7" r="4" />
+                      <path d="M5.5 21a6.5 6.5 0 0 1 13 0Z" />
+                    </svg>
+                    {recentDeployments?.[0]?.created_by
+                      ? `Local deploys by ${recentDeployments[0].created_by}`
+                      : 'Local/adhoc deployments'}
+                  </div>
+                )}
+
+                {/* Separator */}
+                <div
+                  style={{
+                    height: '1px',
+                    backgroundColor: '#e2e8f0',
+                    marginBottom: '8px',
+                  }}
+                />
+
+                {/* Recent deployments list */}
+                {recentDeployments?.length > 0 ? (
+                  recentDeployments.map((d, idx) => {
+                    const isGit = d.source?.type === 'git';
+                    const statusColor =
+                      d.status === 'success'
+                        ? '#22c55e'
+                        : d.status === 'failed'
+                        ? '#ef4444'
+                        : '#94a3b8';
+
+                    const commitUrl =
+                      isGit && d.source?.repository && d.source?.commit_sha
+                        ? `${
+                            d.source.repository.startsWith('http')
+                              ? d.source.repository
+                              : `https://${d.source.repository}`
+                          }/commit/${d.source.commit_sha}`
+                        : null;
+
+                    const detail = isGit
+                      ? d.source?.branch || 'main'
+                      : d.source?.reason || d.source?.hostname || 'adhoc';
+
+                    const shortSha = d.source?.commit_sha?.slice(0, 7);
+
+                    return (
+                      <div
+                        key={`${d.uuid}-${idx}`}
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: '18px 1fr auto',
+                          alignItems: 'center',
+                          gap: '8px',
+                          padding: '6px 0',
+                          borderBottom:
+                            idx === recentDeployments.length - 1
+                              ? 'none'
+                              : '1px solid #f1f5f9',
+                          fontSize: '12px',
+                        }}
+                      >
+                        {/* Status dot */}
+                        <div
+                          style={{
+                            width: '8px',
+                            height: '8px',
+                            borderRadius: '50%',
+                            backgroundColor: statusColor,
+                          }}
+                          title={d.status}
+                        />
+
+                        {/* User + detail */}
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            minWidth: 0,
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontWeight: 500,
+                              color: '#0f172a',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {d.created_by || 'unknown'}
+                          </span>
+                          <span style={{ color: '#cbd5e1' }}>—</span>
+                          {isGit ? (
+                            <>
+                              <span
+                                style={{
+                                  color: '#64748b',
+                                  whiteSpace: 'nowrap',
+                                }}
+                              >
+                                {detail}
+                              </span>
+                              {shortSha && (
+                                <>
+                                  <span style={{ color: '#cbd5e1' }}>@</span>
+                                  {commitUrl ? (
+                                    <a
+                                      href={commitUrl}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      style={{
+                                        fontFamily: 'monospace',
+                                        fontSize: '11px',
+                                        color: '#3b82f6',
+                                        textDecoration: 'none',
+                                      }}
+                                    >
+                                      {shortSha}
+                                    </a>
+                                  ) : (
+                                    <span
+                                      style={{
+                                        fontFamily: 'monospace',
+                                        fontSize: '11px',
+                                        color: '#64748b',
+                                      }}
+                                    >
+                                      {shortSha}
+                                    </span>
+                                  )}
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            <span
+                              style={{
+                                color: '#64748b',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }}
+                            >
+                              {detail}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* Timestamp */}
+                        <span
+                          style={{
+                            color: '#94a3b8',
+                            fontSize: '11px',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {new Date(d.created_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div style={{ color: '#94a3b8', fontSize: '12px' }}>
+                    No recent deployments
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Right side actions passed as children */}
+      {children && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          {children}
+        </div>
+      )}
+    </div>
   );
 }

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

@@ -15,24 +15,17 @@ describe('<NamespaceHeader />', () => {
     expect(renderedOutput).toMatchSnapshot();
   });
 
-  it('should render git source badge when source type is git', async () => {
+  it('should render git source badge when source type is git with branch', async () => {
     const mockDjClient = {
       namespaceSources: jest.fn().mockResolvedValue({
         total_deployments: 5,
-        has_multiple_sources: false,
         primary_source: {
           type: 'git',
           repository: 'github.com/test/repo',
           branch: 'main',
         },
-        sources: [
-          {
-            type: 'git',
-            repository: 'github.com/test/repo',
-            branch: 'main',
-          },
-        ],
       }),
+      listDeployments: jest.fn().mockResolvedValue([]),
     };
 
     render(
@@ -49,26 +42,21 @@ describe('<NamespaceHeader />', () => {
       );
     });
 
-    // Should render CI badge for git source
-    expect(screen.getByText(/CI/)).toBeInTheDocument();
+    // Should render Git Managed badge for git source
+    expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
   });
 
-  it('should render local source badge when source type is local', async () => {
+  it('should render git source badge when source type is git without branch', async () => {
     const mockDjClient = {
       namespaceSources: jest.fn().mockResolvedValue({
-        total_deployments: 2,
-        has_multiple_sources: false,
+        total_deployments: 3,
         primary_source: {
-          type: 'local',
-          hostname: 'localhost',
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: null,
         },
-        sources: [
-          {
-            type: 'local',
-            hostname: 'localhost',
-          },
-        ],
       }),
+      listDeployments: jest.fn().mockResolvedValue([]),
     };
 
     render(
@@ -85,24 +73,20 @@ describe('<NamespaceHeader />', () => {
       );
     });
 
-    // Should render Local badge for local source
-    expect(screen.getByText(/Local/)).toBeInTheDocument();
+    // Should render Git Managed badge for git source even without branch
+    expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
   });
 
-  it('should render warning badge when multiple sources exist', async () => {
+  it('should render local source badge when source type is local', async () => {
     const mockDjClient = {
       namespaceSources: jest.fn().mockResolvedValue({
-        total_deployments: 10,
-        has_multiple_sources: true,
+        total_deployments: 2,
         primary_source: {
-          type: 'git',
-          repository: 'github.com/test/repo',
+          type: 'local',
+          hostname: 'localhost',
         },
-        sources: [
-          { type: 'git', repository: 'github.com/test/repo' },
-          { type: 'local', hostname: 'localhost' },
-        ],
       }),
+      listDeployments: jest.fn().mockResolvedValue([]),
     };
 
     render(
@@ -119,18 +103,17 @@ describe('<NamespaceHeader />', () => {
       );
     });
 
-    // Should render warning badge for multiple sources
-    expect(screen.getByText(/2 sources/)).toBeInTheDocument();
+    // Should render Local Deploy badge for local source
+    expect(screen.getByText(/Local Deploy/)).toBeInTheDocument();
   });
 
   it('should not render badge when no deployments', async () => {
     const mockDjClient = {
       namespaceSources: jest.fn().mockResolvedValue({
         total_deployments: 0,
-        has_multiple_sources: false,
         primary_source: null,
-        sources: [],
       }),
+      listDeployments: jest.fn().mockResolvedValue([]),
     };
 
     render(
@@ -148,13 +131,14 @@ describe('<NamespaceHeader />', () => {
     });
 
     // Should not render any source badge
-    expect(screen.queryByText(/CI/)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Local/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Git Managed/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Local Deploy/)).not.toBeInTheDocument();
   });
 
   it('should handle API error gracefully', async () => {
     const mockDjClient = {
       namespaceSources: jest.fn().mockRejectedValue(new Error('API Error')),
+      listDeployments: jest.fn().mockResolvedValue([]),
     };
 
     render(
@@ -174,6 +158,6 @@ describe('<NamespaceHeader />', () => {
     // Should still render breadcrumb without badge
     expect(screen.getByText('test')).toBeInTheDocument();
     expect(screen.getByText('namespace')).toBeInTheDocument();
-    expect(screen.queryByText(/CI/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Git Managed/)).not.toBeInTheDocument();
   });
 });

package/src/app/components/__tests__/NotificationBell.test.tsx

@@ -310,4 +310,27 @@ describe('<NotificationBell />', () => {
     // onDropdownToggle should have been called with false
     expect(onDropdownToggle).toHaveBeenCalledWith(false);
   });
+
+  it('handles error when fetching notifications fails', async () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest
+        .fn()
+        .mockRejectedValue(new Error('Network error')),
+    });
+
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Error fetching notifications:',
+        expect.any(Error),
+      );
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
 });

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

@@ -1,47 +1,152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
-<ol
-  className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "background": "#ffffff",
+      "borderBottom": "1px solid #e2e8f0",
+      "borderTop": "1px solid #e2e8f0",
+      "display": "flex",
+      "justifyContent": "space-between",
+      "marginBottom": "16px",
+      "padding": "12px 12px 12px 20px",
+    }
+  }
 >
-  <li
-    className="breadcrumb-item"
+  <div
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "gap": "8px",
+      }
+    }
   >
     <a
       href="/"
+      style={
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+        }
+      }
     >
-      <HorizontalHierarchyIcon />
+      <svg
+        fill="currentColor"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"
+        />
+      </svg>
     </a>
-  </li>
-  <li
-    className="breadcrumb-item"
-  >
-    <a
-      className="link-body-emphasis"
-      href="/namespaces/shared"
+    <svg
+      fill="#6c757d"
+      height="12"
+      viewBox="0 0 16 16"
+      width="12"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      shared
-    </a>
-  </li>
-  <li
-    className="breadcrumb-item"
-  >
-    <a
-      className="link-body-emphasis"
-      href="/namespaces/shared.dimensions"
+      <path
+        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+        fillRule="evenodd"
+      />
+    </svg>
+    <span
+      style={
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "gap": "8px",
+        }
+      }
     >
-      dimensions
-    </a>
-  </li>
-  <li
-    className="breadcrumb-item"
-  >
-    <a
-      className="link-body-emphasis"
-      href="/namespaces/shared.dimensions.accounts"
+      <a
+        href="/namespaces/shared"
+        style={
+          Object {
+            "color": "#1e293b",
+            "fontWeight": "400",
+            "textDecoration": "none",
+          }
+        }
+      >
+        shared
+      </a>
+      <svg
+        fill="#94a3b8"
+        height="12"
+        viewBox="0 0 16 16"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </span>
+    <span
+      style={
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "gap": "8px",
+        }
+      }
     >
-      accounts
-    </a>
-  </li>
-</ol>
+      <a
+        href="/namespaces/shared.dimensions"
+        style={
+          Object {
+            "color": "#1e293b",
+            "fontWeight": "400",
+            "textDecoration": "none",
+          }
+        }
+      >
+        dimensions
+      </a>
+      <svg
+        fill="#94a3b8"
+        height="12"
+        viewBox="0 0 16 16"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </span>
+    <span
+      style={
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "gap": "8px",
+        }
+      }
+    >
+      <a
+        href="/namespaces/shared.dimensions.accounts"
+        style={
+          Object {
+            "color": "#1e293b",
+            "fontWeight": "400",
+            "textDecoration": "none",
+          }
+        }
+      >
+        accounts
+      </a>
+    </span>
+  </div>
+</div>
 `;

package/src/app/components/djgraph/__tests__/DJNode.test.tsx

@@ -21,4 +21,40 @@ describe('<DJNode />', () => {
     const renderedOutput = renderer.getRenderOutput();
     expect(renderedOutput).toMatchSnapshot();
   });
+
+  it('should render with is_current true and non-metric type (collapsed=false)', () => {
+    renderer.render(
+      <DJNode
+        id="2"
+        data={{
+          name: 'shared.dimensions.accounts',
+          column_names: ['a', 'b'],
+          type: 'dimension',
+          primary_key: ['id'],
+          is_current: true,
+          display_name: 'Accounts',
+        }}
+      />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toBeTruthy();
+  });
+
+  it('should render with metric type (collapsed=true)', () => {
+    renderer.render(
+      <DJNode
+        id="3"
+        data={{
+          name: 'default.revenue',
+          column_names: [],
+          type: 'metric',
+          primary_key: [],
+          is_current: true,
+          display_name: 'Revenue',
+        }}
+      />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toBeTruthy();
+  });
 });

package/src/app/icons/__tests__/Icons.test.jsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import CommitIcon from '../CommitIcon';
+import InvalidIcon from '../InvalidIcon';
+
+describe('Icon components', () => {
+  it('should render CommitIcon with default props', () => {
+    render(<CommitIcon />);
+    expect(document.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('should render InvalidIcon with default props', () => {
+    render(<InvalidIcon />);
+    expect(screen.getByTestId('invalid-icon')).toBeInTheDocument();
+  });
+
+  it('should render InvalidIcon with custom props', () => {
+    render(<InvalidIcon width="50px" height="50px" style={{ color: 'red' }} />);
+    const icon = screen.getByTestId('invalid-icon');
+    expect(icon).toHaveAttribute('width', '50px');
+    expect(icon).toHaveAttribute('height', '50px');
+  });
+});

package/src/app/pages/NamespacePage/index.jsx

@@ -7,6 +7,7 @@ import { useCurrentUser } from '../../providers/UserProvider';
 import Explorer from '../NamespacePage/Explorer';
 import AddNodeDropdown from '../../components/AddNodeDropdown';
 import NodeListActions from '../../components/NodeListActions';
+import NamespaceHeader from '../../components/NamespaceHeader';
 import LoadingIcon from '../../icons/LoadingIcon';
 import CompactSelect from './CompactSelect';
 import { getDJUrl } from '../../services/DJService';
@@ -168,7 +169,6 @@ export function NamespacePage() {
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
   const [namespaceSources, setNamespaceSources] = useState({});
-  const [currentNamespaceSources, setCurrentNamespaceSources] = useState(null);
 
   const [sortConfig, setSortConfig] = useState({
     key: 'updatedAt',
@@ -248,17 +248,6 @@ export function NamespacePage() {
     fetchData().catch(console.error);
   }, [djClient, djClient.namespaces]);
 
-  // Fetch sources for the current namespace (for the header badge)
-  useEffect(() => {
-    const fetchCurrentSources = async () => {
-      if (namespace) {
-        const sources = await djClient.namespaceSources(namespace);
-        setCurrentNamespaceSources(sources);
-      }
-    };
-    fetchCurrentSources().catch(console.error);
-  }, [djClient, namespace]);
-
   useEffect(() => {
     const fetchData = async () => {
       setRetrieved(false);
@@ -815,199 +804,51 @@ export function NamespacePage() {
                 : null}
             </div>
             <div style={{ flex: 1, minWidth: 0, marginLeft: '1.5rem' }}>
-              {/* Namespace Header */}
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  paddingBottom: '12px',
-                  marginBottom: '16px',
-                  borderBottom: '1px solid #e2e8f0',
-                }}
-              >
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
-                >
-                  <a href="/" style={{ display: 'flex', alignItems: 'center' }}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      fill="currentColor"
-                      viewBox="0 0 16 16"
-                    >
-                      <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z" />
-                    </svg>
-                  </a>
-                  <span style={{ color: '#6c757d' }}>/</span>
-                  {namespace ? (
-                    namespace.split('.').map((part, index, arr) => (
-                      <span
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '8px',
-                        }}
-                      >
-                        <a
-                          href={`/namespaces/${arr
-                            .slice(0, index + 1)
-                            .join('.')}`}
-                          style={{
-                            fontWeight: '400',
-                            color: '#1e293b',
-                            textDecoration: 'none',
-                          }}
-                        >
-                          {part}
-                        </a>
-                        {index < arr.length - 1 && (
-                          <span style={{ color: '#94a3b8', fontWeight: '400' }}>
-                            /
-                          </span>
-                        )}
-                      </span>
-                    ))
-                  ) : (
-                    <span style={{ fontWeight: '600', color: '#1e293b' }}>
-                      All Namespaces
-                    </span>
-                  )}
-                  {currentNamespaceSources &&
-                    currentNamespaceSources.total_deployments > 0 &&
-                    (currentNamespaceSources.primary_source?.type === 'git' ? (
-                      <a
-                        href={`https://${currentNamespaceSources.primary_source.repository}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        title={`${
-                          currentNamespaceSources.primary_source.repository
-                        }${
-                          currentNamespaceSources.primary_source.branch
-                            ? ` (${currentNamespaceSources.primary_source.branch})`
-                            : ''
-                        }`}
-                        style={{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          gap: '4px',
-                          padding: '4px 8px',
-                          marginLeft: '8px',
-                          fontSize: '13px',
-                          borderRadius: '12px',
-                          backgroundColor: '#fff4de',
-                          border: '1px solid #d4edda',
-                          color: '#155724',
-                          textDecoration: 'none',
-                          cursor: 'pointer',
-                        }}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="12"
-                          height="12"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          style={{ marginRight: '2px' }}
-                        >
-                          <line x1="6" y1="3" x2="6" y2="15"></line>
-                          <circle cx="18" cy="6" r="3"></circle>
-                          <circle cx="6" cy="18" r="3"></circle>
-                          <path d="M18 9a9 9 0 0 1-9 9"></path>
-                        </svg>
-                        Git Managed
-                      </a>
-                    ) : (
-                      <span
-                        title={
-                          currentNamespaceSources.has_multiple_sources
-                            ? `Warning: ${currentNamespaceSources.sources.length} deployment sources`
-                            : currentNamespaceSources.sources?.[0]
-                                ?.last_deployed_by
-                            ? `Last deployed by ${currentNamespaceSources.sources[0].last_deployed_by}`
-                            : 'Local/adhoc deployment'
-                        }
-                        style={{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          gap: '4px',
-                          padding: '2px 8px',
-                          marginLeft: '8px',
-                          fontSize: '11px',
-                          borderRadius: '12px',
-                          backgroundColor:
-                            currentNamespaceSources.has_multiple_sources
-                              ? '#fff3cd'
-                              : '#e2e3e5',
-                          color: currentNamespaceSources.has_multiple_sources
-                            ? '#856404'
-                            : '#383d41',
-                          cursor: 'help',
-                        }}
-                      >
-                        {currentNamespaceSources.has_multiple_sources
-                          ? `⚠️ ${currentNamespaceSources.sources.length} sources`
-                          : currentNamespaceSources.sources?.[0]
-                              ?.last_deployed_by
-                          ? `Local deploy by ${currentNamespaceSources.sources[0].last_deployed_by}`
-                          : 'Local'}
-                      </span>
-                    ))}
-                </div>
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+              <NamespaceHeader namespace={namespace}>
+                <a
+                  href={`${getDJUrl()}/namespaces/${namespace}/export/yaml`}
+                  download
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    // padding: '6px 12px',
+                    fontSize: '13px',
+                    fontWeight: '500',
+                    color: '#475569',
+                    // backgroundColor: '#f8fafc',
+                    // border: '1px solid #e2e8f0',
+                    borderRadius: '6px',
+                    textDecoration: 'none',
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                    margin: '0.5em 0px 0px 1em',
+                  }}
+                  onMouseOver={e => {
+                    e.currentTarget.style.color = '#333333';
+                  }}
+                  onMouseOut={e => {
+                    e.currentTarget.style.color = '#475569';
+                  }}
+                  title="Export namespace to YAML"
                 >
-                  <a
-                    href={`${getDJUrl()}/namespaces/${namespace}/export/yaml`}
-                    download
-                    style={{
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      gap: '4px',
-                      // padding: '6px 12px',
-                      fontSize: '13px',
-                      fontWeight: '500',
-                      color: '#475569',
-                      // backgroundColor: '#f8fafc',
-                      // border: '1px solid #e2e8f0',
-                      borderRadius: '6px',
-                      textDecoration: 'none',
-                      cursor: 'pointer',
-                      transition: 'all 0.15s ease',
-                      margin: '0.5em 0px 0px 1em',
-                    }}
-                    onMouseOver={e => {
-                      e.currentTarget.style.color = '#333333';
-                    }}
-                    onMouseOut={e => {
-                      e.currentTarget.style.color = '#475569';
-                    }}
-                    title="Export namespace to YAML"
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                   >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                      <polyline points="7 10 12 15 17 10"></polyline>
-                      <line x1="12" y1="15" x2="12" y2="3"></line>
-                    </svg>
-                  </a>
-                  <AddNodeDropdown namespace={namespace} />
-                </div>
-              </div>
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                    <polyline points="7 10 12 15 17 10"></polyline>
+                    <line x1="12" y1="15" x2="12" y2="3"></line>
+                  </svg>
+                </a>
+                <AddNodeDropdown namespace={namespace} />
+              </NamespaceHeader>
               <table className="card-table table" style={{ marginBottom: 0 }}>
                 <thead>
                   <tr>

package/src/app/pages/OverviewPage/OverviewPanel.jsx

@@ -37,9 +37,7 @@ export const OverviewPanel = () => {
               <NodeIcon color="#FFBB28" style={{ marginTop: '0.75em' }} />
               <div style={{ display: 'inline-grid', alignItems: 'center' }}>
                 <strong className="horiz-box-value">{entry.value}</strong>
-                <span className={'horiz-box-label'}>
-                  {entry.name === 'true' ? 'Active Nodes' : 'Deactivated'}
-                </span>
+                <span className={'horiz-box-label'}>Active Nodes</span>
               </div>
             </div>
           ))}

package/src/app/providers/UserProvider.tsx

@@ -68,11 +68,7 @@ export function UserProvider({ children }: { children: React.ReactNode }) {
 }
 
 export function useCurrentUser() {
-  const context = useContext(UserContext);
-  if (context === undefined) {
-    throw new Error('useCurrentUser must be used within a UserProvider');
-  }
-  return context;
+  return useContext(UserContext);
 }
 
 export default UserContext;

package/src/app/services/DJService.js

@@ -1038,6 +1038,19 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  listDeployments: async function (namespace, limit = 5) {
+    const params = new URLSearchParams();
+    if (namespace) {
+      params.append('namespace', namespace);
+    }
+    params.append('limit', limit);
+    return await (
+      await fetch(`${DJ_URL}/deployments?${params.toString()}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   sql: async function (metric_name, selection) {
     const params = new URLSearchParams(selection);
     for (const [key, value] of Object.entries(selection)) {