datajunction-ui 0.0.18 → 0.0.20

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

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import CreateServiceAccountModal from './CreateServiceAccountModal';
+
+/**
+ * Displays and manages service accounts.
+ */
+export function ServiceAccountsSection({ accounts, onCreate, onDelete }) {
+  const [showModal, setShowModal] = useState(false);
+
+  const handleDelete = async account => {
+    const confirmed = window.confirm(
+      `Delete service account "${account.name}"?\n\nThis will revoke all access for this account and cannot be undone.`,
+    );
+    if (!confirmed) return;
+
+    try {
+      await onDelete(account.client_id);
+    } catch (error) {
+      console.error('Error deleting service account:', error);
+      alert('Failed to delete service account');
+    }
+  };
+
+  const handleCreate = async name => {
+    const result = await onCreate(name);
+    return result;
+  };
+
+  return (
+    <section className="settings-section" id="service-accounts">
+      <div className="section-title-row">
+        <h2 className="settings-section-title">Service Accounts</h2>
+        <button className="btn-create" onClick={() => setShowModal(true)}>
+          + Create
+        </button>
+      </div>
+      <div className="settings-card">
+        <p className="section-description">
+          Service accounts allow programmatic access to the DJ API. Create
+          accounts for your applications, scripts, or CI/CD pipelines.
+        </p>
+
+        {accounts.length > 0 ? (
+          <div className="service-accounts-list">
+            <table className="service-accounts-table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Client ID</th>
+                  <th>Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {accounts.map(account => (
+                  <tr key={account.id}>
+                    <td>{account.name}</td>
+                    <td>
+                      <code className="client-id">{account.client_id}</code>
+                    </td>
+                    <td className="created-date">
+                      {new Date(account.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="actions-cell">
+                      <button
+                        className="btn-icon btn-delete-account"
+                        onClick={() => handleDelete(account)}
+                        title="Delete service account"
+                      >
+                        ×
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="empty-state">
+            No service accounts yet. Create one to enable programmatic API
+            access.
+          </p>
+        )}
+      </div>
+
+      <CreateServiceAccountModal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        onCreate={handleCreate}
+      />
+    </section>
+  );
+}
+
+export default ServiceAccountsSection;

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

@@ -0,0 +1,318 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { CreateServiceAccountModal } from '../CreateServiceAccountModal';
+
+describe('CreateServiceAccountModal', () => {
+  const mockOnClose = jest.fn();
+  const mockOnCreate = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not render when isOpen is false', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={false}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    expect(
+      screen.queryByText('Create Service Account'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders modal when isOpen is true', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    expect(screen.getByText('Create Service Account')).toBeInTheDocument();
+    expect(screen.getByLabelText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Create')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    fireEvent.click(screen.getByTitle('Close'));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when Cancel button is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when overlay is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    // Click on overlay (modal-overlay class)
+    const overlay = document.querySelector('.modal-overlay');
+    fireEvent.click(overlay);
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('does not close when modal content is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const content = document.querySelector('.modal-content');
+    fireEvent.click(content);
+
+    expect(mockOnClose).not.toHaveBeenCalled();
+  });
+
+  it('disables Create button when name is empty', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const createButton = screen.getByText('Create');
+    expect(createButton).toBeDisabled();
+  });
+
+  it('enables Create button when name is entered', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-new-account' } });
+
+    const createButton = screen.getByText('Create');
+    expect(createButton).not.toBeDisabled();
+  });
+
+  it('calls onCreate with trimmed name on submit', async () => {
+    mockOnCreate.mockResolvedValue({ client_id: 'test-id' });
+
+    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(mockOnCreate).toHaveBeenCalledWith('my-account');
+    });
+  });
+
+  it('shows credentials after successful creation', async () => {
+    const credentials = {
+      name: 'my-account',
+      client_id: 'abc-123',
+      client_secret: 'secret-xyz',
+    };
+    mockOnCreate.mockResolvedValue(credentials);
+
+    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('Service Account Created!')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('abc-123')).toBeInTheDocument();
+    expect(screen.getByText('secret-xyz')).toBeInTheDocument();
+    expect(
+      screen.getByText(/client secret will not be shown again/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Done')).toBeInTheDocument();
+  });
+
+  it('shows alert when creation returns error message', async () => {
+    window.alert = jest.fn();
+    mockOnCreate.mockResolvedValue({ message: 'Account already exists' });
+
+    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(window.alert).toHaveBeenCalledWith('Account already exists');
+    });
+  });
+
+  it('shows alert when creation throws error', async () => {
+    window.alert = jest.fn();
+    mockOnCreate.mockRejectedValue(new Error('Network error'));
+
+    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(window.alert).toHaveBeenCalledWith(
+        'Failed to create service account',
+      );
+    });
+  });
+
+  it('shows Creating... while request is in progress', async () => {
+    let resolveCreate;
+    mockOnCreate.mockImplementation(
+      () => new Promise(resolve => (resolveCreate = resolve)),
+    );
+
+    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'));
+
+    expect(screen.getByText('Creating...')).toBeInTheDocument();
+
+    // Resolve the promise
+    resolveCreate({ client_id: 'test' });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Creating...')).not.toBeInTheDocument();
+    });
+  });
+
+  it('closes and resets state when Done is clicked after creation', async () => {
+    const credentials = {
+      name: 'my-account',
+      client_id: 'abc-123',
+      client_secret: 'secret-xyz',
+    };
+    mockOnCreate.mockResolvedValue(credentials);
+
+    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('Done')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('Done'));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('copies client ID 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('abc-123')).toBeInTheDocument();
+    });
+
+    const copyButtons = screen.getAllByTitle('Copy');
+    fireEvent.click(copyButtons[0]);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('abc-123');
+  });
+});

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

@@ -0,0 +1,233 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { NotificationSubscriptionsSection } from '../NotificationSubscriptionsSection';
+
+describe('NotificationSubscriptionsSection', () => {
+  const mockOnUpdate = jest.fn();
+  const mockOnUnsubscribe = jest.fn();
+
+  const mockSubscriptions = [
+    {
+      entity_name: 'default.orders_count',
+      entity_type: 'node',
+      node_type: 'metric',
+      activity_types: ['update', 'delete'],
+      status: 'valid',
+    },
+    {
+      entity_name: 'default.dim_customers',
+      entity_type: 'node',
+      node_type: 'dimension',
+      activity_types: ['create'],
+      status: 'invalid',
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders empty state when no subscriptions', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={[]}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText(/not watching any nodes/i)).toBeInTheDocument();
+  });
+
+  it('renders subscriptions list', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('default.orders_count')).toBeInTheDocument();
+    expect(screen.getByText('default.dim_customers')).toBeInTheDocument();
+    expect(screen.getByText('METRIC')).toBeInTheDocument();
+    expect(screen.getByText('DIMENSION')).toBeInTheDocument();
+  });
+
+  it('shows invalid badge for invalid status', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('INVALID')).toBeInTheDocument();
+  });
+
+  it('displays activity types as badges', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('update')).toBeInTheDocument();
+    expect(screen.getByText('delete')).toBeInTheDocument();
+    expect(screen.getByText('create')).toBeInTheDocument();
+  });
+
+  it('enters edit mode when edit button is clicked', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByLabelText('Update')).toBeInTheDocument();
+  });
+
+  it('cancels editing when cancel button is clicked', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+  });
+
+  it('calls onUnsubscribe when unsubscribe is confirmed', async () => {
+    window.confirm = jest.fn().mockReturnValue(true);
+    mockOnUnsubscribe.mockResolvedValue();
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const unsubscribeButtons = screen.getAllByTitle('Unsubscribe');
+    fireEvent.click(unsubscribeButtons[0]);
+
+    expect(window.confirm).toHaveBeenCalledWith(
+      'Unsubscribe from notifications for "default.orders_count"?',
+    );
+    expect(mockOnUnsubscribe).toHaveBeenCalledWith(mockSubscriptions[0]);
+  });
+
+  it('does not call onUnsubscribe when unsubscribe is cancelled', () => {
+    window.confirm = jest.fn().mockReturnValue(false);
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const unsubscribeButtons = screen.getAllByTitle('Unsubscribe');
+    fireEvent.click(unsubscribeButtons[0]);
+
+    expect(mockOnUnsubscribe).not.toHaveBeenCalled();
+  });
+
+  it('shows alert when trying to save with no activity types', () => {
+    window.alert = jest.fn();
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    // Uncheck all activity types
+    const updateCheckbox = screen.getByLabelText('Update');
+    const deleteCheckbox = screen.getByLabelText('Delete');
+    fireEvent.click(updateCheckbox);
+    fireEvent.click(deleteCheckbox);
+
+    fireEvent.click(screen.getByText('Save'));
+
+    expect(window.alert).toHaveBeenCalledWith(
+      'Please select at least one activity type',
+    );
+    expect(mockOnUpdate).not.toHaveBeenCalled();
+  });
+
+  it('calls onUpdate with new activity types when saved', async () => {
+    mockOnUpdate.mockResolvedValue();
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    // Add 'create' activity type
+    const createCheckbox = screen.getByLabelText('Create');
+    fireEvent.click(createCheckbox);
+
+    fireEvent.click(screen.getByText('Save'));
+
+    await waitFor(() => {
+      expect(mockOnUpdate).toHaveBeenCalledWith(mockSubscriptions[0], [
+        'update',
+        'delete',
+        'create',
+      ]);
+    });
+  });
+
+  it('renders entity type badge when node_type is not available', () => {
+    const subscriptionsWithoutNodeType = [
+      {
+        entity_name: 'some_entity',
+        entity_type: 'namespace',
+        activity_types: ['create'],
+      },
+    ];
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={subscriptionsWithoutNodeType}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('namespace')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ProfileSection } from '../ProfileSection';
+
+describe('ProfileSection', () => {
+  it('renders user initials from name', () => {
+    const user = {
+      name: 'John Doe',
+      username: 'johndoe',
+      email: 'john@example.com',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('JD')).toBeInTheDocument();
+    expect(screen.getByText('johndoe')).toBeInTheDocument();
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+  });
+
+  it('renders initials from username when name is not available', () => {
+    const user = {
+      username: 'alice',
+      email: 'alice@example.com',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('AL')).toBeInTheDocument();
+  });
+
+  it('renders fallback when no user info available', () => {
+    render(<ProfileSection user={null} />);
+
+    expect(screen.getByText('?')).toBeInTheDocument();
+    expect(screen.getAllByText('-')).toHaveLength(2);
+  });
+
+  it('renders section title', () => {
+    render(<ProfileSection user={null} />);
+
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  it('handles single name', () => {
+    const user = {
+      name: 'Alice',
+      username: 'alice',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('handles multi-word name and takes only first two initials', () => {
+    const user = {
+      name: 'John Paul Smith',
+      username: 'jps',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('JP')).toBeInTheDocument();
+  });
+});