datajunction-ui 0.0.18 → 0.0.19

package/package.json

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

package/src/app/components/NotificationBell.tsx

@@ -0,0 +1,223 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../providers/djclient';
+import NotificationIcon from '../icons/NotificationIcon';
+import SettingsIcon from '../icons/SettingsIcon';
+import LoadingIcon from '../icons/LoadingIcon';
+import { formatRelativeTime } from '../utils/date';
+
+interface HistoryEntry {
+  id: number;
+  entity_type: string;
+  entity_name: string;
+  node: string;
+  activity_type: string;
+  user: string;
+  created_at: string;
+  details?: {
+    version?: string;
+    [key: string]: any;
+  };
+}
+
+interface EnrichedHistoryEntry extends HistoryEntry {
+  node_type?: string;
+  display_name?: string;
+}
+
+interface NodeInfo {
+  name: string;
+  type: string;
+  current?: {
+    displayName?: string;
+  };
+}
+
+// Calculate unread count based on last_viewed_notifications_at
+const calculateUnreadCount = (
+  notifs: HistoryEntry[],
+  lastViewed: string | null | undefined,
+): number => {
+  if (!lastViewed) return notifs.length;
+  const lastViewedDate = new Date(lastViewed);
+  return notifs.filter(n => new Date(n.created_at) > lastViewedDate).length;
+};
+
+// Enrich history entries with node info from GraphQL
+const enrichWithNodeInfo = (
+  entries: HistoryEntry[],
+  nodes: NodeInfo[],
+): EnrichedHistoryEntry[] => {
+  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,
+    };
+  });
+};
+
+interface NotificationBellProps {
+  onDropdownToggle?: (isOpen: boolean) => void;
+  forceClose?: boolean;
+}
+
+export default function NotificationBell({
+  onDropdownToggle,
+  forceClose,
+}: NotificationBellProps) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  // Close when forceClose becomes true
+  useEffect(() => {
+    if (forceClose && showDropdown) {
+      setShowDropdown(false);
+    }
+  }, [forceClose, showDropdown]);
+  const [notifications, setNotifications] = useState<EnrichedHistoryEntry[]>(
+    [],
+  );
+  const [loading, setLoading] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  // Fetch notifications on mount
+  useEffect(() => {
+    async function fetchNotifications() {
+      setLoading(true);
+      try {
+        const current = await djClient.whoami();
+        const history: HistoryEntry[] =
+          (await djClient.getSubscribedHistory(10)) || [];
+
+        // Get unique entity names and fetch their info via GraphQL
+        // (some may not be nodes, but GraphQL will just not return them)
+        const nodeNames = Array.from(new Set(history.map(h => h.entity_name)));
+        const nodes: NodeInfo[] = nodeNames.length
+          ? await djClient.getNodesByNames(nodeNames)
+          : [];
+
+        const enriched = enrichWithNodeInfo(history, nodes);
+        setNotifications(enriched);
+        setUnreadCount(
+          calculateUnreadCount(history, current?.last_viewed_notifications_at),
+        );
+      } catch (error) {
+        console.error('Error fetching notifications:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchNotifications();
+  }, [djClient]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.notification-bell-dropdown')) {
+        setShowDropdown(false);
+        onDropdownToggle?.(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [onDropdownToggle]);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const willOpen = !showDropdown;
+
+    // Mark as read when opening
+    if (willOpen && unreadCount > 0) {
+      djClient.markNotificationsRead();
+      setUnreadCount(0);
+    }
+
+    setShowDropdown(willOpen);
+    onDropdownToggle?.(willOpen);
+  };
+
+  return (
+    <div className="nav-dropdown notification-bell-dropdown">
+      <button className="nav-icon-button" onClick={handleToggle}>
+        <NotificationIcon />
+        {unreadCount > 0 && (
+          <span className="notification-badge">{unreadCount}</span>
+        )}
+      </button>
+      {showDropdown && (
+        <div className="nav-dropdown-menu notifications-menu">
+          <div className="dropdown-header">
+            <span className="header-left">
+              <NotificationIcon /> Updates
+            </span>
+            <a
+              href="/settings#notifications"
+              className="header-settings"
+              title="Manage subscriptions"
+            >
+              <SettingsIcon />
+            </a>
+          </div>
+          <div className="notifications-list">
+            {loading ? (
+              <div className="dropdown-item">
+                <LoadingIcon centered={false} />
+              </div>
+            ) : notifications.length === 0 ? (
+              <div className="dropdown-item text-muted">
+                No updates on watched nodes
+              </div>
+            ) : (
+              notifications.slice(0, 5).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>
+          {notifications.length > 0 && (
+            <>
+              <hr className="dropdown-divider" />
+              <a className="dropdown-item view-all" href="/notifications">
+                View all
+              </a>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/UserMenu.tsx

@@ -0,0 +1,100 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../providers/djclient';
+
+interface User {
+  id: number;
+  username: string;
+  email: string;
+  name?: string;
+}
+
+// Extract initials from user's name or username
+const getInitials = (user: User | null): string => {
+  if (!user) return '?';
+  if (user.name) {
+    return user.name
+      .split(' ')
+      .map(n => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+  return user.username.slice(0, 2).toUpperCase();
+};
+
+interface UserMenuProps {
+  onDropdownToggle?: (isOpen: boolean) => void;
+  forceClose?: boolean;
+}
+
+export default function UserMenu({
+  onDropdownToggle,
+  forceClose,
+}: UserMenuProps) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  // Close when forceClose becomes true
+  useEffect(() => {
+    if (forceClose && showDropdown) {
+      setShowDropdown(false);
+    }
+  }, [forceClose, showDropdown]);
+
+  // Fetch current user on mount
+  useEffect(() => {
+    async function fetchUser() {
+      const user = await djClient.whoami();
+      setCurrentUser(user);
+    }
+    fetchUser();
+  }, [djClient]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.user-menu-dropdown')) {
+        setShowDropdown(false);
+        onDropdownToggle?.(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [onDropdownToggle]);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const willOpen = !showDropdown;
+    setShowDropdown(willOpen);
+    onDropdownToggle?.(willOpen);
+  };
+
+  const handleLogout = async () => {
+    await djClient.logout();
+    window.location.reload();
+  };
+
+  return (
+    <div className="nav-dropdown user-menu-dropdown">
+      <button className="avatar-button" onClick={handleToggle}>
+        {getInitials(currentUser)}
+      </button>
+      {showDropdown && (
+        <div className="nav-dropdown-menu">
+          <div className="dropdown-header">
+            {currentUser?.username || 'User'}
+          </div>
+          <hr className="dropdown-divider" />
+          <a className="dropdown-item" href="/settings">
+            Settings
+          </a>
+          <a className="dropdown-item" href="/" onClick={handleLogout}>
+            Logout
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,302 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import NotificationBell from '../NotificationBell';
+import DJClientContext from '../../providers/djclient';
+
+describe('<NotificationBell />', () => {
+  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(Date.now() - 3600000).toISOString(), // 1 hour ago
+      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 = {}) => ({
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      last_viewed_notifications_at: null,
+    }),
+    getSubscribedHistory: jest.fn().mockResolvedValue(mockNotifications),
+    getNodesByNames: jest.fn().mockResolvedValue(mockNodes),
+    markNotificationsRead: jest.fn().mockResolvedValue({}),
+    ...overrides,
+  });
+
+  const renderWithContext = (mockDjClient: any) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NotificationBell />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the notification bell button', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('shows unread badge when there are unread notifications', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    // Wait for notifications to load
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Badge should show count of 2 (all notifications are unread since last_viewed is null)
+    const badge = await screen.findByText('2');
+    expect(badge).toHaveClass('notification-badge');
+  });
+
+  it('does not show badge when all notifications have been viewed', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'testuser',
+        // Set last_viewed to future date so all notifications are "read"
+        last_viewed_notifications_at: new Date(
+          Date.now() + 10000,
+        ).toISOString(),
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Badge should not be present (no unread count shown)
+    const badge = document.querySelector('.notification-badge');
+    expect(badge).toBeNull();
+  });
+
+  it('opens dropdown when bell is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('Updates')).toBeInTheDocument();
+  });
+
+  it('displays notifications in the dropdown', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Check that display names are shown
+    expect(screen.getByText('Revenue Metric')).toBeInTheDocument();
+    expect(screen.getByText('Country')).toBeInTheDocument();
+
+    // Check that entity names are shown below
+    expect(screen.getByText('default.metrics.revenue')).toBeInTheDocument();
+    expect(screen.getByText('default.dimensions.country')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no notifications', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue([]),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('No updates on watched nodes')).toBeInTheDocument();
+  });
+
+  it('marks notifications as read when dropdown is opened', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockDjClient.markNotificationsRead).toHaveBeenCalled();
+  });
+
+  it('does not mark as read if already all read', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'testuser',
+        last_viewed_notifications_at: new Date(
+          Date.now() + 10000,
+        ).toISOString(),
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Should not call markNotificationsRead since unreadCount is 0
+    expect(mockDjClient.markNotificationsRead).not.toHaveBeenCalled();
+  });
+
+  it('shows View all link when there are notifications', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const viewAllLink = screen.getByText('View all');
+    expect(viewAllLink).toHaveAttribute('href', '/notifications');
+  });
+
+  it('calls onDropdownToggle when dropdown state changes', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+
+    render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell onDropdownToggle={onDropdownToggle} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('closes dropdown when forceClose becomes true', async () => {
+    const mockDjClient = createMockDjClient();
+
+    const { rerender } = render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell forceClose={false} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('Updates')).toBeInTheDocument();
+
+    // Rerender with forceClose=true
+    rerender(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell forceClose={true} />
+      </DJClientContext.Provider>,
+    );
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Updates')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+
+    render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell onDropdownToggle={onDropdownToggle} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('Updates')).toBeInTheDocument();
+
+    // Click outside the dropdown
+    fireEvent.click(document.body);
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Updates')).not.toBeInTheDocument();
+
+    // onDropdownToggle should have been called with false
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+});