datajunction-ui 0.0.17 → 0.0.19

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

@@ -0,0 +1,287 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { NotificationsPage } from '../index';
+import DJClientContext from '../../../providers/djclient';
+
+describe('<NotificationsPage />', () => {
+  const mockNotifications = [
+    {
+      id: 1,
+      entity_type: 'node',
+      entity_name: 'default.metrics.revenue',
+      node: 'default.metrics.revenue',
+      activity_type: 'update',
+      user: 'alice',
+      created_at: new Date().toISOString(),
+      details: { version: 'v2' },
+    },
+    {
+      id: 2,
+      entity_type: 'node',
+      entity_name: 'default.dimensions.country',
+      node: 'default.dimensions.country',
+      activity_type: 'create',
+      user: 'bob',
+      created_at: new Date().toISOString(),
+      details: { version: 'v1' },
+    },
+  ];
+
+  const mockNodes = [
+    {
+      name: 'default.metrics.revenue',
+      type: 'metric',
+      current: { displayName: 'Revenue Metric' },
+    },
+    {
+      name: 'default.dimensions.country',
+      type: 'dimension',
+      current: { displayName: 'Country' },
+    },
+  ];
+
+  const createMockDjClient = (overrides = {}) => ({
+    getSubscribedHistory: jest.fn().mockResolvedValue(mockNotifications),
+    getNodesByNames: jest.fn().mockResolvedValue(mockNodes),
+    ...overrides,
+  });
+
+  const renderWithContext = mockDjClient => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NotificationsPage />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the page title', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('shows loading state initially', () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockImplementation(
+        () => new Promise(() => {}), // Never resolves
+      ),
+    });
+    renderWithContext(mockDjClient);
+
+    // LoadingIcon should be present (check for the container)
+    const loadingContainer = document.querySelector(
+      '[style*="text-align: center"]',
+    );
+    expect(loadingContainer).toBeInTheDocument();
+  });
+
+  it('shows empty state when no notifications', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue([]),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText(/No notifications yet/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Watch nodes to receive updates/i),
+    ).toBeInTheDocument();
+  });
+
+  it('displays notifications with display names', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Display names should be shown
+    expect(await screen.findByText('Revenue Metric')).toBeInTheDocument();
+    expect(await screen.findByText('Country')).toBeInTheDocument();
+  });
+
+  it('displays entity names below display names', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Entity names should be shown
+    expect(
+      await screen.findByText('default.metrics.revenue'),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText('default.dimensions.country'),
+    ).toBeInTheDocument();
+  });
+
+  it('falls back to entity_name when no display_name', async () => {
+    const mockDjClient = createMockDjClient({
+      getNodesByNames: jest.fn().mockResolvedValue([]), // No node info
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Entity names should be shown as the title (no display names)
+    const revenueElements = await screen.findAllByText(
+      'default.metrics.revenue',
+    );
+    expect(revenueElements.length).toBeGreaterThan(0);
+  });
+
+  it('shows version badge when version is available', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(await screen.findByText('v2')).toBeInTheDocument();
+    expect(await screen.findByText('v1')).toBeInTheDocument();
+  });
+
+  it('links to revision page when version is available', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      const links = document.querySelectorAll('a.notification-item');
+      expect(links.length).toBe(2);
+
+      const revenueLink = Array.from(links).find(l =>
+        l.textContent.includes('Revenue Metric'),
+      );
+      expect(revenueLink).toHaveAttribute(
+        'href',
+        '/nodes/default.metrics.revenue/revisions/v2',
+      );
+    });
+  });
+
+  it('links to history page when no version', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue([
+        {
+          id: 1,
+          entity_type: 'node',
+          entity_name: 'default.source.orders',
+          node: 'default.source.orders',
+          activity_type: 'update',
+          user: 'alice',
+          created_at: new Date().toISOString(),
+          details: {}, // No version
+        },
+      ]),
+      getNodesByNames: jest.fn().mockResolvedValue([]),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      const link = document.querySelector('a.notification-item');
+      expect(link).toHaveAttribute(
+        'href',
+        '/nodes/default.source.orders/history',
+      );
+    });
+  });
+
+  it('shows node type badge', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(await screen.findByText('METRIC')).toBeInTheDocument();
+    expect(await screen.findByText('DIMENSION')).toBeInTheDocument();
+  });
+
+  it('shows activity type and user', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(await screen.findByText('alice')).toBeInTheDocument();
+    expect(await screen.findByText('bob')).toBeInTheDocument();
+  });
+
+  it('groups notifications by date', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Both notifications are from today
+    expect(await screen.findByText('Today')).toBeInTheDocument();
+  });
+
+  it('fetches node info via GraphQL', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalledWith(50);
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.getNodesByNames).toHaveBeenCalledWith([
+        'default.metrics.revenue',
+        'default.dimensions.country',
+      ]);
+    });
+  });
+
+  it('handles errors gracefully', async () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest
+        .fn()
+        .mockRejectedValue(new Error('Network error')),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Error fetching notifications:',
+        expect.any(Error),
+      );
+    });
+
+    // Should show empty state after error
+    expect(screen.getByText(/No notifications yet/i)).toBeInTheDocument();
+
+    consoleSpy.mockRestore();
+  });
+});

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

@@ -0,0 +1,136 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { formatRelativeTime, groupByDate } from '../../utils/date';
+
+// Enrich history entries with node info from GraphQL
+const enrichWithNodeInfo = (entries, nodes) => {
+  const nodeMap = new Map(nodes.map(n => [n.name, n]));
+  return entries.map(entry => {
+    const node = nodeMap.get(entry.entity_name);
+    return {
+      ...entry,
+      node_type: node?.type,
+      display_name: node?.current?.displayName,
+    };
+  });
+};
+
+export function NotificationsPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchNotifications() {
+      try {
+        const history = (await djClient.getSubscribedHistory(50)) || [];
+
+        // Get unique entity names and fetch their info via GraphQL
+        const nodeNames = Array.from(new Set(history.map(h => h.entity_name)));
+        const nodes = nodeNames.length
+          ? await djClient.getNodesByNames(nodeNames)
+          : [];
+
+        const enriched = enrichWithNodeInfo(history, nodes);
+        setNotifications(enriched);
+      } catch (error) {
+        console.error('Error fetching notifications:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchNotifications();
+  }, [djClient]);
+
+  const groupedNotifications = groupByDate(notifications);
+
+  return (
+    <div className="mid">
+      <div className="card">
+        <div className="card-header">
+          <h2>Notifications</h2>
+        </div>
+        <div className="card-body">
+          <div className="notifications-list">
+            {loading ? (
+              <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <LoadingIcon />
+              </div>
+            ) : notifications.length === 0 ? (
+              <div
+                style={{
+                  padding: '2rem 1rem',
+                  color: '#666',
+                  textAlign: 'center',
+                }}
+              >
+                No notifications yet. Watch nodes to receive updates when they
+                change.
+              </div>
+            ) : (
+              groupedNotifications.map(group => (
+                <div key={group.label} className="notification-group">
+                  <div
+                    style={{
+                      padding: '0.5rem 0.75rem',
+                      backgroundColor: '#f8f9fa',
+                      borderBottom: '1px solid #eee',
+                      fontSize: '12px',
+                      fontWeight: 600,
+                      color: '#666',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    {group.label}
+                  </div>
+                  {group.items.map(entry => {
+                    const version = entry.details?.version;
+                    const href = version
+                      ? `/nodes/${entry.entity_name}/revisions/${version}`
+                      : `/nodes/${entry.entity_name}/history`;
+
+                    return (
+                      <a
+                        key={entry.id}
+                        className="notification-item"
+                        href={href}
+                      >
+                        <span className="notification-node">
+                          <span className="notification-title">
+                            {entry.display_name || entry.entity_name}
+                            {version && (
+                              <span className="badge version">{version}</span>
+                            )}
+                          </span>
+                          {entry.display_name && (
+                            <span className="notification-entity">
+                              {entry.entity_name}
+                            </span>
+                          )}
+                        </span>
+                        <span className="notification-meta">
+                          {entry.node_type && (
+                            <span
+                              className={`node_type__${entry.node_type} badge node_type`}
+                            >
+                              {entry.node_type.toUpperCase()}
+                            </span>
+                          )}
+                          {entry.activity_type}d by{' '}
+                          <span style={{ color: '#333' }}>{entry.user}</span> ·{' '}
+                          {formatRelativeTime(entry.created_at)}
+                        </span>
+                      </a>
+                    );
+                  })}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -8,9 +8,22 @@ describe('<Root />', () => {
   const mockDjClient = {
     logout: jest.fn(),
     nodeDetails: jest.fn(),
-    listTags: jest.fn(),
+    listTags: jest.fn().mockResolvedValue([]),
+    nodes: jest.fn().mockResolvedValue([]),
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      email: 'test@example.com',
+    }),
+    getSubscribedHistory: jest.fn().mockResolvedValue([]),
+    markNotificationsRead: jest.fn().mockResolvedValue({}),
+    getNodesByNames: jest.fn().mockResolvedValue([]),
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders with the correct title and navigation', async () => {
     render(
       <HelmetProvider>
@@ -20,60 +33,12 @@ describe('<Root />', () => {
       </HelmetProvider>,
     );
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(document.title).toEqual('DataJunction');
-      const metaDescription = document.querySelector(
-        "meta[name='description']",
-      );
-      expect(metaDescription).toBeInTheDocument();
-      expect(metaDescription.content).toBe(
-        'DataJunction Metrics Platform Webapp',
-      );
-
-      expect(screen.getByText(/^DataJunction$/)).toBeInTheDocument();
-      expect(screen.getByText('Explore').closest('a')).toHaveAttribute(
-        'href',
-        '/',
-      );
-      expect(screen.getByText('SQL').closest('a')).toHaveAttribute(
-        'href',
-        '/sql',
-      );
-      expect(screen.getByText('Open-Source').closest('a')).toHaveAttribute(
-        'href',
-        'https://www.datajunction.io',
-      );
     });
-  });
-
-  it('renders Logout button unless REACT_DISABLE_AUTH is true', () => {
-    process.env.REACT_DISABLE_AUTH = 'false';
-    render(
-      <HelmetProvider>
-        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-          <Root />
-        </DJClientContext.Provider>
-      </HelmetProvider>,
-    );
-    expect(screen.getByText('Logout')).toBeInTheDocument();
-  });
-
-  it('calls logout and reloads window on logout button click', () => {
-    process.env.REACT_DISABLE_AUTH = 'false';
-    const originalLocation = window.location;
-    delete window.location;
-    window.location = { ...originalLocation, reload: jest.fn() };
-
-    render(
-      <HelmetProvider>
-        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-          <Root />
-        </DJClientContext.Provider>
-      </HelmetProvider>,
-    );
 
-    screen.getByText('Logout').click();
-    expect(mockDjClient.logout).toHaveBeenCalled();
-    window.location = originalLocation;
+    // Check navigation links exist
+    expect(screen.getByText('Explore')).toBeInTheDocument();
+    expect(screen.getByText('SQL')).toBeInTheDocument();
   });
 });

package/src/app/pages/Root/index.tsx

@@ -1,9 +1,11 @@
-import { useContext } from 'react';
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import DJLogo from '../../icons/DJLogo';
 import { Helmet } from 'react-helmet-async';
-import DJClientContext from '../../providers/djclient';
 import Search from '../../components/Search';
+import NotificationBell from '../../components/NotificationBell';
+import UserMenu from '../../components/UserMenu';
+import '../../../styles/nav-bar.css';
 
 // Define the type for the docs sites
 type DocsSites = {
@@ -21,21 +23,16 @@ const docsSites: DocsSites = process.env.REACT_APP_DOCS_SITES
   : defaultDocsSites;
 
 export function Root() {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  const handleLogout = async () => {
-    await djClient.logout();
-    window.location.reload();
-  };
+  // Track which dropdown is open to close others
+  const [openDropdown, setOpenDropdown] = useState<
+    'notifications' | 'user' | null
+  >(null);
 
   return (
     <>
       <Helmet>
         <title>DataJunction</title>
-        <meta
-          name="description"
-          content="DataJunction Metrics Platform Webapp"
-        />
+        <meta name="description" content="DataJunction UI" />
       </Helmet>
       <div className="container d-flex align-items-center justify-content-between">
         <div className="header">
@@ -105,13 +102,20 @@ export function Root() {
         {process.env.REACT_DISABLE_AUTH === 'true' ? (
           ''
         ) : (
-          <span className="menu-link">
-            <span className="menu-title">
-              <a href={'/'} onClick={handleLogout}>
-                Logout
-              </a>
-            </span>
-          </span>
+          <div className="nav-right">
+            <NotificationBell
+              onDropdownToggle={isOpen => {
+                setOpenDropdown(isOpen ? 'notifications' : null);
+              }}
+              forceClose={openDropdown === 'user'}
+            />
+            <UserMenu
+              onDropdownToggle={isOpen => {
+                setOpenDropdown(isOpen ? 'user' : null);
+              }}
+              forceClose={openDropdown === 'notifications'}
+            />
+          </div>
         )}
       </div>
       <Outlet />