datajunction-ui 0.0.26 → 0.0.27-alpha.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { Root } from '../index';
 import DJClientContext from '../../../providers/djclient';
 import { HelmetProvider } from 'react-helmet-async';
@@ -20,18 +20,22 @@ describe('<Root />', () => {
     getNodesByNames: jest.fn().mockResolvedValue([]),
   };
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders with the correct title and navigation', async () => {
-    render(
+  const renderRoot = () => {
+    return render(
       <HelmetProvider>
         <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
           <Root />
         </DJClientContext.Provider>
       </HelmetProvider>,
     );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with the correct title and navigation', async () => {
+    renderRoot();
 
     await waitFor(() => {
       expect(document.title).toEqual('DataJunction');
@@ -39,6 +43,73 @@ describe('<Root />', () => {
 
     // Check navigation links exist
     expect(screen.getByText('Explore')).toBeInTheDocument();
-    expect(screen.getByText('SQL')).toBeInTheDocument();
+    expect(screen.getByText('Query Planner')).toBeInTheDocument();
+  });
+
+  it('renders Docs dropdown', async () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(screen.getByText('Docs')).toBeInTheDocument();
+    });
+
+    // Default docs site should be visible in dropdown
+    expect(screen.getByText('Open-Source')).toBeInTheDocument();
+  });
+
+  it('renders notification bell and user menu when auth is enabled', async () => {
+    // Default REACT_DISABLE_AUTH is not 'true', so auth components should show
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    // Look for nav-right container which contains the notification and user menu
+    const navRight = document.querySelector('.nav-right');
+    expect(navRight).toBeInTheDocument();
+  });
+
+  it('handles notification dropdown toggle', async () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    // Find the notification bell button and click it
+    const bellButton = document.querySelector('[aria-label="Notifications"]');
+    if (bellButton) {
+      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 () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    // The nav-right container should be present for auth-enabled mode
+    const navRight = document.querySelector('.nav-right');
+    expect(navRight).toBeInTheDocument();
+  });
+
+  it('renders logo link correctly', async () => {
+    renderRoot();
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    // Check logo link - name is "Data Junction" with space
+    const logoLink = screen.getByRole('link', { name: /data.*junction/i });
+    expect(logoLink).toHaveAttribute('href', '/');
   });
 });

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

@@ -61,12 +61,7 @@ export function Root() {
               </span>
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/sql">SQL</a>
-                </span>
-              </span>
-              <span className="menu-link">
-                <span className="menu-title">
-                  <a href="/materialization-planner">Planner</a>
+                  <a href="/planner">Query Planner</a>
                 </span>
               </span>
               <span className="menu-link">

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

@@ -14,6 +14,7 @@ const mockDjClient = {
   commonDimensions: jest.fn(),
   sqls: jest.fn(),
   data: jest.fn(),
+  stream: jest.fn(),
 };
 
 const mockMetrics = [
@@ -97,6 +98,16 @@ const mockCommonDimensions = [
   },
 ];
 
+// Additional dimensions for testing type handling
+const mockDimensionsWithBool = [
+  {
+    name: 'default.is_active',
+    type: 'bool',
+    path: ['default.repair_order'],
+  },
+  ...mockCommonDimensions,
+];
+
 describe('SQLBuilderPage', () => {
   beforeEach(() => {
     mockDjClient.metrics.mockResolvedValue(mockMetrics);
@@ -171,3 +182,74 @@ describe('SQLBuilderPage', () => {
     expect(mockDjClient.sqls).toHaveBeenCalled();
   });
 });
+
+describe('SQLBuilderPage - Data fetching', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockDjClient.metrics.mockResolvedValue(mockMetrics);
+    mockDjClient.commonDimensions.mockResolvedValue(mockCommonDimensions);
+    mockDjClient.sqls.mockResolvedValue({ sql: 'SELECT * FROM table' });
+    mockDjClient.data.mockResolvedValue({});
+  });
+
+  it('fetches metrics on initial render', async () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <SQLBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByText('3 Available Metrics')[0]).toBeInTheDocument();
+    });
+  });
+
+  it('displays instruction card when no selections', async () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <SQLBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Using the SQL Builder')).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByText(/Start by selecting one or more/),
+    ).toBeInTheDocument();
+  });
+
+  it('clears dimensions when no common dimensions found', async () => {
+    mockDjClient.commonDimensions.mockResolvedValue([]);
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <SQLBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for metrics
+    await waitFor(() => {
+      expect(screen.getAllByText('3 Available Metrics')[0]).toBeInTheDocument();
+    });
+
+    // Select metric
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    fireEvent.keyDown(selectMetrics.firstChild, { key: 'ArrowDown' });
+    await waitFor(() => {
+      expect(screen.getByText('default.num_repair_orders')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('default.num_repair_orders'));
+    fireEvent.click(screen.getAllByText('Group By')[0]);
+
+    // When no common dimensions
+    await waitFor(() => {
+      expect(screen.getAllByText('0 Shared Dimensions')[0]).toBeInTheDocument();
+    });
+  });
+});

package/src/app/pages/SettingsPage/__tests__/CreateServiceAccountModal.test.jsx

@@ -315,4 +315,41 @@ describe('CreateServiceAccountModal', () => {
 
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith('abc-123');
   });
+
+  it('copies client secret to clipboard when copy button is clicked', async () => {
+    const credentials = {
+      name: 'my-account',
+      client_id: 'abc-123',
+      client_secret: 'secret-xyz',
+    };
+    mockOnCreate.mockResolvedValue(credentials);
+
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValue(),
+      },
+    });
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(screen.getByText('secret-xyz')).toBeInTheDocument();
+    });
+
+    // Click the second copy button (client secret)
+    const copyButtons = screen.getAllByTitle('Copy');
+    fireEvent.click(copyButtons[1]);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('secret-xyz');
+  });
 });

package/src/app/pages/SettingsPage/__tests__/ServiceAccountsSection.test.jsx

@@ -147,4 +147,52 @@ describe('ServiceAccountsSection', () => {
     expect(screen.getByText('Client ID')).toBeInTheDocument();
     expect(screen.getByText('Created')).toBeInTheDocument();
   });
+
+  it('handles delete error gracefully', async () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    const alertSpy = jest.spyOn(window, 'alert').mockImplementation();
+    window.confirm = jest.fn().mockReturnValue(true);
+    mockOnDelete.mockRejectedValue(new Error('Delete failed'));
+
+    render(
+      <ServiceAccountsSection
+        accounts={mockAccounts}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const deleteButtons = screen.getAllByTitle('Delete service account');
+    fireEvent.click(deleteButtons[0]);
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith('Failed to delete service account');
+    });
+
+    consoleSpy.mockRestore();
+    alertSpy.mockRestore();
+  });
+
+  it('closes modal when close button is clicked', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={[]}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    // Open modal
+    fireEvent.click(screen.getByText('+ Create'));
+    expect(screen.getByText('Create Service Account')).toBeInTheDocument();
+
+    // Close modal
+    fireEvent.click(screen.getByTitle('Close'));
+
+    // Modal should no longer be visible (it stays in DOM but should be hidden)
+    // The modal content should be hidden
+    expect(
+      screen.queryByText('Create Service Account'),
+    ).not.toBeInTheDocument();
+  });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { SettingsPage } from '../index';
 import DJClientContext from '../../../providers/djclient';
 import { UserProvider } from '../../../providers/UserProvider';
@@ -184,4 +184,172 @@ describe('SettingsPage', () => {
       expect(screen.getByText('SOURCE')).toBeInTheDocument();
     });
   });
+
+  it('handles subscription update', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue([
+      {
+        entity_name: 'default.my_metric',
+        entity_type: 'node',
+        activity_types: ['update'],
+        alert_types: ['web'],
+      },
+    ]);
+
+    mockDjClient.getNodesByNames.mockResolvedValue([
+      {
+        name: 'default.my_metric',
+        type: 'METRIC',
+        current: {
+          displayName: 'My Metric',
+          status: 'VALID',
+          mode: 'PUBLISHED',
+        },
+      },
+    ]);
+
+    mockDjClient.subscribeToNotifications.mockResolvedValue({
+      status: 200,
+      json: { message: 'Subscribed' },
+    });
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('default.my_metric')).toBeInTheDocument();
+    });
+
+    // The subscription is rendered with checkboxes for activity types
+    // Find and interact with the update checkbox (if available in UI)
+    const updateCheckbox = screen.queryByLabelText(/update/i);
+    if (updateCheckbox) {
+      fireEvent.click(updateCheckbox);
+      await waitFor(() => {
+        expect(mockDjClient.subscribeToNotifications).toHaveBeenCalled();
+      });
+    }
+  });
+
+  it('handles subscription unsubscribe', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue([
+      {
+        entity_name: 'default.my_metric',
+        entity_type: 'node',
+        activity_types: ['update'],
+        alert_types: ['web'],
+      },
+    ]);
+
+    mockDjClient.getNodesByNames.mockResolvedValue([
+      {
+        name: 'default.my_metric',
+        type: 'METRIC',
+        current: {
+          displayName: 'My Metric',
+          status: 'VALID',
+          mode: 'PUBLISHED',
+        },
+      },
+    ]);
+
+    mockDjClient.unsubscribeFromNotifications.mockResolvedValue({
+      status: 200,
+      json: { message: 'Unsubscribed' },
+    });
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('default.my_metric')).toBeInTheDocument();
+    });
+
+    // Find unsubscribe button
+    const unsubscribeBtn = screen.queryByRole('button', {
+      name: /unsubscribe/i,
+    });
+    if (unsubscribeBtn) {
+      fireEvent.click(unsubscribeBtn);
+      await waitFor(() => {
+        expect(mockDjClient.unsubscribeFromNotifications).toHaveBeenCalled();
+      });
+    }
+  });
+
+  it('opens create service account modal', async () => {
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Find and click create button
+    const createBtn = screen.getByRole('button', { name: /create/i });
+    fireEvent.click(createBtn);
+
+    // Modal should be visible
+    await waitFor(() => {
+      expect(screen.getByText('Create Service Account')).toBeInTheDocument();
+    });
+  });
+
+  it('handles service account deletion', async () => {
+    mockDjClient.listServiceAccounts.mockResolvedValue([
+      {
+        id: 1,
+        name: 'my-pipeline',
+        client_id: 'abc-123',
+        created_at: '2024-12-01T00:00:00Z',
+      },
+    ]);
+
+    mockDjClient.deleteServiceAccount.mockResolvedValue({
+      message: 'Deleted',
+    });
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('my-pipeline')).toBeInTheDocument();
+    });
+
+    // Find delete button
+    const deleteBtn = screen.queryByRole('button', { name: /delete/i });
+    if (deleteBtn) {
+      fireEvent.click(deleteBtn);
+      await waitFor(() => {
+        expect(mockDjClient.deleteServiceAccount).toHaveBeenCalled();
+      });
+    }
+  });
+
+  it('handles non-node subscription types gracefully', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue([
+      {
+        entity_name: 'namespace.test',
+        entity_type: 'namespace',
+        activity_types: ['create'],
+        alert_types: ['web'],
+      },
+    ]);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Namespace subscription should still appear
+    await waitFor(() => {
+      expect(screen.getByText('namespace.test')).toBeInTheDocument();
+    });
+  });
+
+  it('skips fetching if userLoading', async () => {
+    // When user is still loading, the component waits
+    mockDjClient.whoami.mockImplementation(() => new Promise(() => {}));
+
+    renderWithContext();
+
+    // getNotificationPreferences should not be called while user is loading
+    expect(mockDjClient.getNotificationPreferences).not.toHaveBeenCalled();
+  });
 });