datajunction-ui 0.0.18 → 0.0.19

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

@@ -0,0 +1,241 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import UserMenu from '../UserMenu';
+import DJClientContext from '../../providers/djclient';
+
+describe('<UserMenu />', () => {
+  const createMockDjClient = (overrides = {}) => ({
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      email: 'test@example.com',
+    }),
+    logout: jest.fn().mockResolvedValue({}),
+    ...overrides,
+  });
+
+  const renderWithContext = (mockDjClient: any, props = {}) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <UserMenu {...props} />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  // Mock window.location.reload
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    delete (window as any).location;
+    (window as any).location = { ...originalLocation, reload: jest.fn() };
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+  });
+
+  it('renders the avatar button', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('avatar-button');
+  });
+
+  it('shows "?" before user is loaded', () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockImplementation(
+        () => new Promise(() => {}), // Never resolves
+      ),
+    });
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('?');
+  });
+
+  it('displays initials from username (first two letters uppercase)', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JO');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('displays initials from name when available', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+        name: 'John Doe',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JD');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('opens dropdown when avatar is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('shows Settings and Logout links in dropdown', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const settingsLink = screen.getByText('Settings');
+    expect(settingsLink).toHaveAttribute('href', '/settings');
+
+    const logoutLink = screen.getByText('Logout');
+    expect(logoutLink).toHaveAttribute('href', '/');
+  });
+
+  it('calls logout and reloads page when Logout is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const logoutLink = screen.getByText('Logout');
+    fireEvent.click(logoutLink);
+
+    expect(mockDjClient.logout).toHaveBeenCalled();
+  });
+
+  it('calls onDropdownToggle when dropdown is opened', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).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 }}
+      >
+        <UserMenu forceClose={false} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Rerender with forceClose=true
+    rerender(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <UserMenu forceClose={true} />
+      </DJClientContext.Provider>,
+    );
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Click outside
+    fireEvent.click(document.body);
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+
+    // onDropdownToggle should be called with false
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('toggles dropdown closed when clicking avatar again', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+
+    // Open
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Close by clicking again
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+});

package/src/app/icons/NotificationIcon.jsx

@@ -0,0 +1,27 @@
+const NotificationIcon = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 16.1 19"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_27_">
+      <path
+        id="XMLID_5_"
+        className="st0"
+        d="M8.1,19c1,0,1.9-0.9,1.9-1.9H6.2C6.2,18.1,7,19,8.1,19z"
+      />
+      <path
+        id="XMLID_46_"
+        className="st0"
+        d="M14.2,13.3V8.1c0-2.9-2-5.3-4.8-6V1.4C9.5,0.7,8.8,0,8.1,0S6.7,0.7,6.7,1.4v0.7
+            c-2.8,0.7-4.8,3-4.8,6v5.2L0,15.2v0.9h16.1v-0.9L14.2,13.3z"
+      />
+    </g>
+  </svg>
+);
+export default NotificationIcon;

package/src/app/icons/SettingsIcon.jsx

@@ -0,0 +1,28 @@
+const SettingsIcon = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 19 19"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_196_">
+      <path
+        id="settings_2_"
+        className="st0"
+        d="M18.3,8.1l-1.9-0.3c-0.1-0.6-0.3-1.1-0.6-1.6L17,4.7c0.3-0.3,0.2-0.8,0-1.1l-0.7-0.8
+		c-0.3-0.3-0.7-0.4-1.1-0.2l-1.6,1c-0.7-0.5-1.5-0.9-2.4-1.1l-0.3-1.9C10.8,0.3,10.5,0,10.1,0H8.9C8.5,0,8.2,0.3,8.1,0.7L7.8,2.6
+		C7.1,2.8,6.4,3,5.8,3.4L4.3,2.3C4,2.1,3.5,2.1,3.2,2.4L2.4,3.2C2.1,3.5,2.1,4,2.3,4.3l1.1,1.5c-0.4,0.6-0.6,1.3-0.8,2L0.7,8.1
+		C0.3,8.2,0,8.5,0,8.9v1.1c0,0.4,0.3,0.8,0.7,0.8l1.9,0.3c0.1,0.6,0.4,1.1,0.6,1.7L2,14.3c-0.3,0.3-0.2,0.8,0,1.1l0.7,0.8
+		c0.3,0.3,0.7,0.4,1.1,0.2l1.6-1c0.7,0.5,1.5,0.8,2.3,1l0.3,1.9C8.2,18.7,8.5,19,8.9,19h1.1c0.4,0,0.8-0.3,0.8-0.7l0.3-1.9
+		c0.7-0.2,1.4-0.5,2-0.8l1.6,1.1c0.3,0.2,0.8,0.2,1.1-0.1l0.8-0.8c0.3-0.3,0.3-0.7,0.1-1.1l-1.1-1.6c0.4-0.6,0.7-1.3,0.8-2l1.9-0.3
+		c0.4-0.1,0.7-0.4,0.7-0.8V8.9C19,8.5,18.7,8.2,18.3,8.1z M9.5,13.1c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6
+		C13.1,11.5,11.5,13.1,9.5,13.1z"
+      />
+    </g>
+  </svg>
+);
+export default SettingsIcon;

package/src/app/index.tsx

@@ -9,6 +9,8 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { OverviewPage } from './pages/OverviewPage/Loadable';
+import { SettingsPage } from './pages/SettingsPage/Loadable';
+import { NotificationsPage } from './pages/NotificationsPage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
 import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
@@ -122,6 +124,16 @@ export function App() {
                         key="overview"
                         element={<OverviewPage />}
                       />
+                      <Route
+                        path="settings"
+                        key="settings"
+                        element={<SettingsPage />}
+                      />
+                      <Route
+                        path="notifications"
+                        key="notifications"
+                        element={<NotificationsPage />}
+                      />
                     </>
                   }
                 />

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

@@ -0,0 +1,6 @@
+import { lazyLoad } from '../../../utils/loadable';
+
+export const NotificationsPage = lazyLoad(
+  () => import('./index'),
+  module => module.NotificationsPage,
+);

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();
+  });
+});