datajunction-ui 0.0.27-alpha.0 → 0.0.29

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

@@ -185,7 +185,7 @@ describe('SettingsPage', () => {
     });
   });
 
-  it('handles subscription update', async () => {
+  it('handles subscription update via edit mode and checkbox toggle', async () => {
     mockDjClient.getNotificationPreferences.mockResolvedValue([
       {
         entity_name: 'default.my_metric',
@@ -218,18 +218,93 @@ describe('SettingsPage', () => {
       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();
+    // First click Edit button to enter edit mode and show checkboxes
+    const editBtn = screen.getByTitle('Edit subscription');
+    fireEvent.click(editBtn);
+
+    // Wait for checkboxes to appear
+    await waitFor(() => {
+      expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0);
+    });
+
+    // Add another activity type (e.g., 'create')
+    const createCheckbox = screen.getByLabelText('Create');
+    fireEvent.click(createCheckbox);
+
+    // Save changes
+    const saveBtn = screen.getByText('Save');
+    fireEvent.click(saveBtn);
+
+    await waitFor(() => {
+      expect(mockDjClient.subscribeToNotifications).toHaveBeenCalledWith({
+        entity_type: 'node',
+        entity_name: 'default.my_metric',
+        activity_types: expect.any(Array),
+        alert_types: ['web'],
       });
-    }
+    });
+  });
+
+  it('updates local subscription state after subscription update', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue([
+      {
+        entity_name: 'default.my_metric',
+        entity_type: 'node',
+        activity_types: ['update', 'status_change'],
+        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: 'Updated' },
+    });
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('default.my_metric')).toBeInTheDocument();
+    });
+
+    // First click the Edit button to enter edit mode
+    const editBtn = screen.getByTitle('Edit subscription');
+    fireEvent.click(editBtn);
+
+    // Now checkboxes should be visible
+    await waitFor(() => {
+      expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0);
+    });
+
+    // Toggle a checkbox and save
+    const checkboxes = screen.getAllByRole('checkbox');
+    fireEvent.click(checkboxes[0]);
+
+    // Click Save button
+    const saveBtn = screen.getByText('Save');
+    fireEvent.click(saveBtn);
+
+    await waitFor(() => {
+      expect(mockDjClient.subscribeToNotifications).toHaveBeenCalled();
+    });
   });
 
-  it('handles subscription unsubscribe', async () => {
+  it('handles subscription unsubscribe and removes from list', async () => {
+    // Mock window.confirm to return true
+    const originalConfirm = window.confirm;
+    window.confirm = jest.fn().mockReturnValue(true);
+
     mockDjClient.getNotificationPreferences.mockResolvedValue([
       {
         entity_name: 'default.my_metric',
@@ -237,6 +312,12 @@ describe('SettingsPage', () => {
         activity_types: ['update'],
         alert_types: ['web'],
       },
+      {
+        entity_name: 'default.another_metric',
+        entity_type: 'node',
+        activity_types: ['status_change'],
+        alert_types: ['web'],
+      },
     ]);
 
     mockDjClient.getNodesByNames.mockResolvedValue([
@@ -249,6 +330,15 @@ describe('SettingsPage', () => {
           mode: 'PUBLISHED',
         },
       },
+      {
+        name: 'default.another_metric',
+        type: 'METRIC',
+        current: {
+          displayName: 'Another Metric',
+          status: 'VALID',
+          mode: 'PUBLISHED',
+        },
+      },
     ]);
 
     mockDjClient.unsubscribeFromNotifications.mockResolvedValue({
@@ -260,18 +350,20 @@ describe('SettingsPage', () => {
 
     await waitFor(() => {
       expect(screen.getByText('default.my_metric')).toBeInTheDocument();
+      expect(screen.getByText('default.another_metric')).toBeInTheDocument();
     });
 
-    // Find unsubscribe button
-    const unsubscribeBtn = screen.queryByRole('button', {
-      name: /unsubscribe/i,
+    // Find unsubscribe buttons (there are multiple, one per subscription)
+    const unsubscribeBtns = screen.getAllByTitle('Unsubscribe');
+    fireEvent.click(unsubscribeBtns[0]);
+
+    await waitFor(() => {
+      expect(window.confirm).toHaveBeenCalled();
+      expect(mockDjClient.unsubscribeFromNotifications).toHaveBeenCalled();
     });
-    if (unsubscribeBtn) {
-      fireEvent.click(unsubscribeBtn);
-      await waitFor(() => {
-        expect(mockDjClient.unsubscribeFromNotifications).toHaveBeenCalled();
-      });
-    }
+
+    // Restore original confirm
+    window.confirm = originalConfirm;
   });
 
   it('opens create service account modal', async () => {
@@ -291,7 +383,69 @@ describe('SettingsPage', () => {
     });
   });
 
-  it('handles service account deletion', async () => {
+  it('creates service account and adds to list when successful', async () => {
+    const newAccount = {
+      id: 99,
+      name: 'new-account',
+      client_id: 'new-client-id-123',
+      client_secret: 'secret-xyz',
+      created_at: '2025-01-11T00:00:00Z',
+    };
+
+    mockDjClient.listServiceAccounts.mockResolvedValue([]);
+    mockDjClient.createServiceAccount.mockResolvedValue(newAccount);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Open create modal
+    const createBtn = screen.getByRole('button', { name: /create/i });
+    fireEvent.click(createBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('Create Service Account')).toBeInTheDocument();
+    });
+
+    // Fill in the name input using ID
+    const nameInput = document.getElementById('service-account-name');
+    fireEvent.change(nameInput, { target: { value: 'new-account' } });
+
+    // Submit the form by clicking the submit button in the modal
+    const submitBtns = screen.getAllByRole('button', { name: /create/i });
+    // The second Create button is the submit button in the modal
+    fireEvent.click(submitBtns[submitBtns.length - 1]);
+
+    await waitFor(() => {
+      expect(mockDjClient.createServiceAccount).toHaveBeenCalledWith(
+        'new-account',
+      );
+    });
+  });
+
+  it('does not add service account to list if creation returns no client_id', async () => {
+    mockDjClient.listServiceAccounts.mockResolvedValue([]);
+    mockDjClient.createServiceAccount.mockResolvedValue({
+      error: 'Name already exists',
+    });
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // The service accounts section should still show empty state
+    expect(screen.getByText(/No service accounts yet/i)).toBeInTheDocument();
+  });
+
+  it('handles service account deletion by clicking delete button with confirmation', async () => {
+    // Mock window.confirm to return true
+    const originalConfirm = window.confirm;
+    window.confirm = jest.fn().mockReturnValue(true);
+
     mockDjClient.listServiceAccounts.mockResolvedValue([
       {
         id: 1,
@@ -299,6 +453,12 @@ describe('SettingsPage', () => {
         client_id: 'abc-123',
         created_at: '2024-12-01T00:00:00Z',
       },
+      {
+        id: 2,
+        name: 'other-pipeline',
+        client_id: 'def-456',
+        created_at: '2024-12-02T00:00:00Z',
+      },
     ]);
 
     mockDjClient.deleteServiceAccount.mockResolvedValue({
@@ -309,16 +469,98 @@ describe('SettingsPage', () => {
 
     await waitFor(() => {
       expect(screen.getByText('my-pipeline')).toBeInTheDocument();
+      expect(screen.getByText('other-pipeline')).toBeInTheDocument();
     });
 
-    // Find delete button
-    const deleteBtn = screen.queryByRole('button', { name: /delete/i });
-    if (deleteBtn) {
-      fireEvent.click(deleteBtn);
-      await waitFor(() => {
-        expect(mockDjClient.deleteServiceAccount).toHaveBeenCalled();
-      });
-    }
+    // Find delete button by title attribute (exact match) - first one for my-pipeline
+    const deleteBtn = screen.getAllByTitle('Delete service account')[0];
+    fireEvent.click(deleteBtn);
+
+    await waitFor(() => {
+      expect(window.confirm).toHaveBeenCalled();
+      expect(mockDjClient.deleteServiceAccount).toHaveBeenCalledWith('abc-123');
+    });
+
+    // Restore original confirm
+    window.confirm = originalConfirm;
+  });
+
+  it('removes service account from list after deletion', async () => {
+    // Mock window.confirm to return true
+    const originalConfirm = window.confirm;
+    window.confirm = jest.fn().mockReturnValue(true);
+
+    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 and click the delete button
+    const deleteBtn = screen.getByTitle('Delete service account');
+    fireEvent.click(deleteBtn);
+
+    await waitFor(() => {
+      expect(mockDjClient.deleteServiceAccount).toHaveBeenCalledWith('abc-123');
+    });
+
+    // After deletion, the account should be removed
+    await waitFor(() => {
+      expect(screen.queryByText('my-pipeline')).not.toBeInTheDocument();
+    });
+
+    // Restore original confirm
+    window.confirm = originalConfirm;
+  });
+
+  it('does not delete service account when confirmation is cancelled', async () => {
+    // Mock window.confirm to return false
+    const originalConfirm = window.confirm;
+    window.confirm = jest.fn().mockReturnValue(false);
+
+    mockDjClient.listServiceAccounts.mockResolvedValue([
+      {
+        id: 1,
+        name: 'my-pipeline',
+        client_id: 'abc-123',
+        created_at: '2024-12-01T00:00:00Z',
+      },
+    ]);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('my-pipeline')).toBeInTheDocument();
+    });
+
+    // Find and click the delete button
+    const deleteBtn = screen.getByTitle('Delete service account');
+    fireEvent.click(deleteBtn);
+
+    // Should show confirmation
+    expect(window.confirm).toHaveBeenCalled();
+
+    // deleteServiceAccount should NOT be called since user cancelled
+    expect(mockDjClient.deleteServiceAccount).not.toHaveBeenCalled();
+
+    // Account should still be in the list
+    expect(screen.getByText('my-pipeline')).toBeInTheDocument();
+
+    // Restore original confirm
+    window.confirm = originalConfirm;
   });
 
   it('handles non-node subscription types gracefully', async () => {
@@ -352,4 +594,49 @@ describe('SettingsPage', () => {
     // getNotificationPreferences should not be called while user is loading
     expect(mockDjClient.getNotificationPreferences).not.toHaveBeenCalled();
   });
+
+  it('handles notification preferences fetch error gracefully', async () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    mockDjClient.getNotificationPreferences.mockRejectedValue(
+      new Error('Failed to fetch preferences'),
+    );
+
+    renderWithContext();
+
+    await waitFor(() => {
+      // Page should still render after error
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Error should be logged
+    expect(consoleSpy).toHaveBeenCalled();
+
+    consoleSpy.mockRestore();
+  });
+
+  it('handles null notification preferences response', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue(null);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Should render subscriptions section with empty list
+    expect(screen.getByText(/not watching any nodes yet/i)).toBeInTheDocument();
+  });
+
+  it('handles null service accounts response', async () => {
+    mockDjClient.listServiceAccounts.mockResolvedValue(null);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Should render service accounts section with empty list
+    expect(screen.getByText(/No service accounts yet/i)).toBeInTheDocument();
+  });
 });

package/src/app/services/DJService.js

@@ -10,6 +10,9 @@ const DJ_GQL = process.env.REACT_APP_DJ_GQL
   ? process.env.REACT_APP_DJ_GQL
   : process.env.REACT_APP_DJ_URL + '/graphql';
 
+// Export the base URL for components that need direct access
+export const getDJUrl = () => DJ_URL;
+
 export const DataJunctionAPI = {
   listNodesForLanding: async function (
     namespace,
@@ -1014,6 +1017,27 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  namespaceSources: async function (namespace) {
+    return await (
+      await fetch(`${DJ_URL}/namespaces/${namespace}/sources`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
+  namespaceSourcesBulk: async function (namespaces) {
+    return await (
+      await fetch(`${DJ_URL}/namespaces/sources/bulk`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ namespaces }),
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   sql: async function (metric_name, selection) {
     const params = new URLSearchParams(selection);
     for (const [key, value] of Object.entries(selection)) {
@@ -1107,6 +1131,7 @@ export const DataJunctionAPI = {
     metricSelection,
     dimensionSelection,
     filters = '',
+    useMaterialized = true,
   ) {
     const params = new URLSearchParams();
     metricSelection.forEach(metric => params.append('metrics', metric));
@@ -1116,9 +1141,17 @@ export const DataJunctionAPI = {
     if (filters) {
       params.append('filters', filters);
     }
+    if (useMaterialized) {
+      params.append('use_materialized', 'true');
+      params.append('dialect', 'druid');
+    } else {
+      params.append('use_materialized', 'false');
+      params.append('dialect', 'spark');
+    }
     return await (
       await fetch(`${DJ_URL}/sql/metrics/v3/?${params}`, {
         credentials: 'include',
+        params: params,
       })
     ).json();
   },