datajunction-ui 0.0.27 → 0.0.29

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

@@ -9,6 +9,7 @@ import AddNodeDropdown from '../../components/AddNodeDropdown';
 import NodeListActions from '../../components/NodeListActions';
 import LoadingIcon from '../../icons/LoadingIcon';
 import CompactSelect from './CompactSelect';
+import { getDJUrl } from '../../services/DJService';
 
 import 'styles/node-list.css';
 import 'styles/sorted-table.css';
@@ -166,6 +167,8 @@ export function NamespacePage() {
   const [retrieved, setRetrieved] = useState(false);
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+  const [namespaceSources, setNamespaceSources] = useState({});
+  const [currentNamespaceSources, setCurrentNamespaceSources] = useState(null);
 
   const [sortConfig, setSortConfig] = useState({
     key: 'updatedAt',
@@ -230,10 +233,32 @@ export function NamespacePage() {
       const namespaces = await djClient.namespaces();
       const hierarchy = createNamespaceHierarchy(namespaces);
       setNamespaceHierarchy(hierarchy);
+
+      // Fetch sources for all namespaces in bulk
+      const allNamespaceNames = namespaces.map(ns => ns.namespace);
+      if (allNamespaceNames.length > 0) {
+        const sourcesResponse = await djClient.namespaceSourcesBulk(
+          allNamespaceNames,
+        );
+        if (sourcesResponse && sourcesResponse.sources) {
+          setNamespaceSources(sourcesResponse.sources);
+        }
+      }
     };
     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);
@@ -458,7 +483,6 @@ export function NamespacePage() {
             }}
           >
             <h2 style={{ margin: 0 }}>Explore</h2>
-            <AddNodeDropdown namespace={namespace} />
           </div>
 
           {/* Unified Filter Bar */}
@@ -466,7 +490,7 @@ export function NamespacePage() {
             style={{
               marginBottom: '1rem',
               padding: '1rem',
-              backgroundColor: '#f8f9fa',
+              backgroundColor: '#f8fafc',
               borderRadius: '8px',
             }}
           >
@@ -482,7 +506,17 @@ export function NamespacePage() {
               <div
                 style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
               >
-                <span style={{ fontSize: '12px', color: '#555' }}>Quick:</span>
+                <span
+                  style={{
+                    fontSize: '11px',
+                    fontWeight: '600',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.5px',
+                    color: '#64748b',
+                  }}
+                >
+                  Quick
+                </span>
                 {presets.map(preset => (
                   <button
                     key={preset.id}
@@ -745,18 +779,23 @@ export function NamespacePage() {
           </div>
 
           <div className="table-responsive">
-            <div className={`sidebar`}>
+            <div
+              className={`sidebar`}
+              style={{ borderRight: '1px solid #e2e8f0', paddingRight: '1rem' }}
+            >
               <div
                 style={{
-                  padding: '1rem 1rem 1rem 0',
+                  paddingBottom: '12px',
+                  marginBottom: '8px',
                 }}
               >
                 <span
                   style={{
-                    textTransform: 'uppercase',
-                    fontSize: '0.8125rem',
+                    fontSize: '11px',
                     fontWeight: '600',
-                    color: '#95aac9',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.5px',
+                    color: '#64748b',
                   }}
                 >
                   Namespaces
@@ -770,54 +809,284 @@ export function NamespacePage() {
                       defaultExpand={true}
                       isTopLevel={true}
                       key={child.namespace}
+                      namespaceSources={namespaceSources}
                     />
                   ))
                 : null}
             </div>
-            <table className="card-table table">
-              <thead>
-                <tr>
-                  {fields.map(field => {
-                    return (
-                      <th key={field}>
-                        <button
-                          type="button"
-                          onClick={() => requestSort(field)}
-                          className={'sortable ' + getClassNamesFor(field)}
+            <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',
+                          }}
                         >
-                          {field.replace(/([a-z](?=[A-Z]))/g, '$1 ')}
-                        </button>
-                      </th>
-                    );
-                  })}
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>{nodesList}</tbody>
-              <tfoot>
-                <tr>
-                  <td>
-                    {retrieved && hasPrevPage ? (
+                          {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
-                        onClick={loadPrev}
-                        className="previous round pagination"
+                        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',
+                        }}
                       >
-                        ← Previous
-                      </a>
-                    ) : (
-                      ''
-                    )}
-                    {retrieved && hasNextPage ? (
-                      <a onClick={loadNext} className="next round pagination">
-                        Next →
+                        <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>
                     ) : (
-                      ''
-                    )}
-                  </td>
-                </tr>
-              </tfoot>
-            </table>
+                      <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' }}
+                >
+                  <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"
+                    >
+                      <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>
+              <table className="card-table table" style={{ marginBottom: 0 }}>
+                <thead>
+                  <tr>
+                    {fields.map(field => {
+                      const thStyle = {
+                        fontFamily:
+                          "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                        fontSize: '11px',
+                        fontWeight: '600',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                        color: '#64748b',
+                        padding: '12px 16px',
+                        borderBottom: '1px solid #e2e8f0',
+                        backgroundColor: 'transparent',
+                      };
+                      return (
+                        <th key={field} style={thStyle}>
+                          <button
+                            type="button"
+                            onClick={() => requestSort(field)}
+                            className={'sortable ' + getClassNamesFor(field)}
+                            style={{
+                              fontSize: 'inherit',
+                              fontWeight: 'inherit',
+                              letterSpacing: 'inherit',
+                              textTransform: 'inherit',
+                              fontFamily: 'inherit',
+                            }}
+                          >
+                            {field.replace(/([a-z](?=[A-Z]))/g, '$1 ')}
+                          </button>
+                        </th>
+                      );
+                    })}
+                    <th
+                      style={{
+                        fontFamily:
+                          "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                        fontSize: '11px',
+                        fontWeight: '600',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                        color: '#64748b',
+                        padding: '12px 16px',
+                        borderBottom: '1px solid #e2e8f0',
+                        backgroundColor: 'transparent',
+                      }}
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="nodes-table-body">{nodesList}</tbody>
+                <tfoot>
+                  <tr>
+                    <td>
+                      {retrieved && hasPrevPage ? (
+                        <a
+                          onClick={loadPrev}
+                          className="previous round pagination"
+                        >
+                          ← Previous
+                        </a>
+                      ) : (
+                        ''
+                      )}
+                      {retrieved && hasNextPage ? (
+                        <a onClick={loadNext} className="next round pagination">
+                          Next →
+                        </a>
+                      ) : (
+                        ''
+                      )}
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
           </div>
         </div>
       </div>

package/src/app/pages/NotificationsPage/__tests__/index.test.jsx

@@ -284,4 +284,32 @@ describe('<NotificationsPage />', () => {
 
     consoleSpy.mockRestore();
   });
+
+  it('handles null response from getSubscribedHistory', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue(null),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Should show empty state when API returns null
+    expect(screen.getByText(/No notifications yet/i)).toBeInTheDocument();
+  });
+
+  it('handles undefined response from getSubscribedHistory', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue(undefined),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Should show empty state when API returns undefined
+    expect(screen.getByText(/No notifications yet/i)).toBeInTheDocument();
+  });
 });

package/src/app/pages/QueryPlannerPage/PreAggDetailsPanel.jsx

@@ -2517,26 +2517,6 @@ export function PreAggDetailsPanel({
         </div>
       </div>
 
-      {/* Metrics Using This */}
-      <div className="details-section">
-        <h3 className="section-title">
-          <span className="section-icon">◈</span>
-          Metrics Using This
-        </h3>
-        <div className="metrics-list">
-          {relatedMetrics.length > 0 ? (
-            relatedMetrics.map((m, i) => (
-              <div key={i} className="related-metric">
-                <span className="metric-name">{m.short_name}</span>
-                {m.is_derived && <span className="derived-badge">Derived</span>}
-              </div>
-            ))
-          ) : (
-            <span className="empty-text">No metrics found</span>
-          )}
-        </div>
-      </div>
-
       {/* Components Table */}
       <div
         className="details-section details-section-full"
@@ -2585,6 +2565,26 @@ export function PreAggDetailsPanel({
         </div>
       </div>
 
+      {/* Metrics Using This */}
+      <div className="details-section">
+        <h3 className="section-title">
+          <span className="section-icon">◈</span>
+          Metrics Using This
+        </h3>
+        <div className="metrics-list">
+          {relatedMetrics.length > 0 ? (
+            relatedMetrics.map((m, i) => (
+              <div key={i} className="related-metric">
+                <span className="metric-name">{m.short_name}</span>
+                {m.is_derived && <span className="derived-badge">Derived</span>}
+              </div>
+            ))
+          ) : (
+            <span className="empty-text">No metrics found</span>
+          )}
+        </div>
+      </div>
+
       {/* SQL Section */}
       {preAgg.sql && (
         <div className="details-section details-section-full details-sql-section">

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

@@ -1026,7 +1026,7 @@ export function QueryPlannerPage() {
         selectedMetrics,
         selectedDimensions,
         '',
-        false, // use_materialized = false for raw SQL
+        false, // useMaterialized = false for raw SQL
       );
       return result.sql;
     } catch (err) {

package/src/app/pages/Root/__tests__/index.test.jsx

@@ -70,7 +70,7 @@ describe('<Root />', () => {
     expect(navRight).toBeInTheDocument();
   });
 
-  it('handles notification dropdown toggle', async () => {
+  it('handles notification dropdown toggle and closes user menu', async () => {
     renderRoot();
 
     await waitFor(() => {
@@ -80,16 +80,21 @@ describe('<Root />', () => {
     // Find the notification bell button and click it
     const bellButton = document.querySelector('[aria-label="Notifications"]');
     if (bellButton) {
+      // First click opens notifications
+      fireEvent.click(bellButton);
+      await waitFor(() => {
+        expect(bellButton).toBeInTheDocument();
+      });
+
+      // Click again to close
       fireEvent.click(bellButton);
-      // The dropdown should open
       await waitFor(() => {
-        // After clicking, the dropdown state changes
         expect(bellButton).toBeInTheDocument();
       });
     }
   });
 
-  it('handles user menu dropdown toggle', async () => {
+  it('handles user menu dropdown toggle and closes notification dropdown', async () => {
     renderRoot();
 
     await waitFor(() => {
@@ -99,6 +104,17 @@ describe('<Root />', () => {
     // The nav-right container should be present for auth-enabled mode
     const navRight = document.querySelector('.nav-right');
     expect(navRight).toBeInTheDocument();
+
+    // Find the user menu button (look for avatar or user icon)
+    const userMenuBtn = document.querySelector(
+      '.user-menu-button, .user-avatar, [aria-label*="user"], [aria-label*="menu"]',
+    );
+    if (userMenuBtn) {
+      fireEvent.click(userMenuBtn);
+      await waitFor(() => {
+        expect(userMenuBtn).toBeInTheDocument();
+      });
+    }
   });
 
   it('renders logo link correctly', async () => {
@@ -112,4 +128,83 @@ describe('<Root />', () => {
     const logoLink = screen.getByRole('link', { name: /data.*junction/i });
     expect(logoLink).toHaveAttribute('href', '/');
   });
+
+  it('toggles between notification and user dropdowns exclusively', async () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    const navRight = document.querySelector('.nav-right');
+    expect(navRight).toBeInTheDocument();
+
+    // Find both dropdown triggers
+    const bellButton = document.querySelector('[aria-label="Notifications"]');
+    const userMenuTrigger = navRight?.querySelector('button, [role="button"]');
+
+    if (bellButton && userMenuTrigger && bellButton !== userMenuTrigger) {
+      // Click notification first
+      fireEvent.click(bellButton);
+      await waitFor(() => {
+        expect(bellButton).toBeInTheDocument();
+      });
+
+      // Now click user menu - should close notifications
+      fireEvent.click(userMenuTrigger);
+      await waitFor(() => {
+        expect(userMenuTrigger).toBeInTheDocument();
+      });
+
+      // Click notifications again - should close user menu
+      fireEvent.click(bellButton);
+      await waitFor(() => {
+        expect(bellButton).toBeInTheDocument();
+      });
+    }
+  });
+
+  it('sets openDropdown state correctly for notification toggle', async () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    const bellButton = document.querySelector('[aria-label="Notifications"]');
+    if (bellButton) {
+      // Open notifications dropdown
+      fireEvent.click(bellButton);
+
+      // The dropdown toggle handler should have been called with isOpen=true
+      // which sets openDropdown to 'notifications'
+      await waitFor(() => {
+        expect(bellButton).toBeInTheDocument();
+      });
+    }
+  });
+
+  it('sets openDropdown state correctly for user menu toggle', async () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    const navRight = document.querySelector('.nav-right');
+    if (navRight) {
+      // Find user menu element (usually second clickable element in nav-right)
+      const buttons = navRight.querySelectorAll('button, [role="button"]');
+      if (buttons.length > 0) {
+        const userButton = buttons[buttons.length - 1]; // Last button is usually user menu
+        fireEvent.click(userButton);
+
+        // The dropdown toggle handler should have been called with isOpen=true
+        // which sets openDropdown to 'user'
+        await waitFor(() => {
+          expect(userButton).toBeInTheDocument();
+        });
+      }
+    }
+  });
 });