datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ServiceAccountsSection } from '../ServiceAccountsSection';
+
+describe('ServiceAccountsSection', () => {
+  const mockOnCreate = jest.fn();
+  const mockOnDelete = jest.fn();
+
+  const mockAccounts = [
+    {
+      id: 1,
+      name: 'my-pipeline',
+      client_id: 'abc-123-xyz',
+      created_at: '2024-12-01T00:00:00Z',
+    },
+    {
+      id: 2,
+      name: 'etl-job',
+      client_id: 'def-456-uvw',
+      created_at: '2024-12-02T00:00:00Z',
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders empty state when no accounts', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={[]}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    expect(screen.getByText(/No service accounts yet/i)).toBeInTheDocument();
+  });
+
+  it('renders accounts list', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={mockAccounts}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    expect(screen.getByText('my-pipeline')).toBeInTheDocument();
+    expect(screen.getByText('etl-job')).toBeInTheDocument();
+    expect(screen.getByText('abc-123-xyz')).toBeInTheDocument();
+    expect(screen.getByText('def-456-uvw')).toBeInTheDocument();
+  });
+
+  it('renders section title and create button', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={[]}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    expect(screen.getByText('Service Accounts')).toBeInTheDocument();
+    expect(screen.getByText('+ Create')).toBeInTheDocument();
+  });
+
+  it('opens create modal when create button is clicked', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={[]}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('+ Create'));
+
+    expect(screen.getByText('Create Service Account')).toBeInTheDocument();
+  });
+
+  it('calls onDelete when delete is confirmed', async () => {
+    window.confirm = jest.fn().mockReturnValue(true);
+    mockOnDelete.mockResolvedValue();
+
+    render(
+      <ServiceAccountsSection
+        accounts={mockAccounts}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const deleteButtons = screen.getAllByTitle('Delete service account');
+    fireEvent.click(deleteButtons[0]);
+
+    expect(window.confirm).toHaveBeenCalledWith(
+      'Delete service account "my-pipeline"?\n\nThis will revoke all access for this account and cannot be undone.',
+    );
+
+    await waitFor(() => {
+      expect(mockOnDelete).toHaveBeenCalledWith('abc-123-xyz');
+    });
+  });
+
+  it('does not call onDelete when delete is cancelled', () => {
+    window.confirm = jest.fn().mockReturnValue(false);
+
+    render(
+      <ServiceAccountsSection
+        accounts={mockAccounts}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    const deleteButtons = screen.getAllByTitle('Delete service account');
+    fireEvent.click(deleteButtons[0]);
+
+    expect(mockOnDelete).not.toHaveBeenCalled();
+  });
+
+  it('renders description text', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={[]}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    expect(
+      screen.getByText(/Service accounts allow programmatic access/i),
+    ).toBeInTheDocument();
+  });
+
+  it('shows table headers when accounts exist', () => {
+    render(
+      <ServiceAccountsSection
+        accounts={mockAccounts}
+        onCreate={mockOnCreate}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Client ID')).toBeInTheDocument();
+    expect(screen.getByText('Created')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,184 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SettingsPage } from '../index';
+import DJClientContext from '../../../providers/djclient';
+
+describe('SettingsPage', () => {
+  const mockDjClient = {
+    whoami: jest.fn(),
+    getNotificationPreferences: jest.fn(),
+    getNodesByNames: jest.fn(),
+    listServiceAccounts: jest.fn(),
+    subscribeToNotifications: jest.fn(),
+    unsubscribeFromNotifications: jest.fn(),
+    createServiceAccount: jest.fn(),
+    deleteServiceAccount: jest.fn(),
+  };
+
+  const renderWithContext = () => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <SettingsPage />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Default mock implementations
+    mockDjClient.whoami.mockResolvedValue({
+      username: 'testuser',
+      email: 'test@example.com',
+      name: 'Test User',
+    });
+    mockDjClient.getNotificationPreferences.mockResolvedValue([]);
+    mockDjClient.getNodesByNames.mockResolvedValue([]);
+    mockDjClient.listServiceAccounts.mockResolvedValue([]);
+  });
+
+  it('shows loading state initially', () => {
+    // Make whoami hang
+    mockDjClient.whoami.mockImplementation(() => new Promise(() => {}));
+
+    renderWithContext();
+
+    // Should show loading icon (or some loading indicator)
+    expect(document.querySelector('.settings-page')).toBeInTheDocument();
+  });
+
+  it('renders all sections after loading', async () => {
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+    expect(screen.getByText('Notification Subscriptions')).toBeInTheDocument();
+    expect(screen.getByText('Service Accounts')).toBeInTheDocument();
+  });
+
+  it('fetches and displays user profile', async () => {
+    mockDjClient.whoami.mockResolvedValue({
+      username: 'alice',
+      email: 'alice@example.com',
+      name: 'Alice Smith',
+    });
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('alice')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
+    expect(screen.getByText('AS')).toBeInTheDocument(); // initials
+  });
+
+  it('fetches and displays subscriptions', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue([
+      {
+        entity_name: 'default.my_metric',
+        entity_type: 'node',
+        activity_types: ['update'],
+      },
+    ]);
+
+    mockDjClient.getNodesByNames.mockResolvedValue([
+      {
+        name: 'default.my_metric',
+        type: 'METRIC',
+        current: {
+          displayName: 'My Metric',
+          status: 'VALID',
+          mode: 'PUBLISHED',
+        },
+      },
+    ]);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('default.my_metric')).toBeInTheDocument();
+    });
+  });
+
+  it('fetches and displays service accounts', async () => {
+    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();
+    });
+
+    expect(screen.getByText('abc-123')).toBeInTheDocument();
+  });
+
+  it('handles service accounts API error gracefully', async () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+    mockDjClient.listServiceAccounts.mockRejectedValue(
+      new Error('Not available'),
+    );
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Page should still render without service accounts
+    expect(screen.getByText(/No service accounts yet/i)).toBeInTheDocument();
+
+    consoleSpy.mockRestore();
+  });
+
+  it('handles fetch error gracefully', async () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    mockDjClient.whoami.mockRejectedValue(new Error('Network error'));
+
+    renderWithContext();
+
+    await waitFor(() => {
+      // Page should render even after error
+      expect(document.querySelector('.settings-page')).toBeInTheDocument();
+    });
+
+    consoleSpy.mockRestore();
+  });
+
+  it('enriches subscriptions with node info from GraphQL', async () => {
+    mockDjClient.getNotificationPreferences.mockResolvedValue([
+      {
+        entity_name: 'default.orders',
+        entity_type: 'node',
+        activity_types: ['update'],
+      },
+    ]);
+
+    mockDjClient.getNodesByNames.mockResolvedValue([
+      {
+        name: 'default.orders',
+        type: 'SOURCE',
+        current: {
+          displayName: 'Orders Table',
+          status: 'VALID',
+        },
+      },
+    ]);
+
+    renderWithContext();
+
+    await waitFor(() => {
+      expect(screen.getByText('SOURCE')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,148 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import LoadingIcon from '../../icons/LoadingIcon';
+import ProfileSection from './ProfileSection';
+import NotificationSubscriptionsSection from './NotificationSubscriptionsSection';
+import ServiceAccountsSection from './ServiceAccountsSection';
+import '../../../styles/settings.css';
+
+/**
+ * Main Settings page that orchestrates all settings sections.
+ */
+export function SettingsPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [currentUser, setCurrentUser] = useState(null);
+  const [subscriptions, setSubscriptions] = useState([]);
+  const [serviceAccounts, setServiceAccounts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        // Fetch user profile
+        const user = await djClient.whoami();
+        setCurrentUser(user);
+
+        // Fetch notification subscriptions
+        const prefs = await djClient.getNotificationPreferences();
+
+        // Fetch node details for subscriptions via GraphQL
+        const nodeNames = (prefs || [])
+          .filter(p => p.entity_type === 'node')
+          .map(p => p.entity_name);
+
+        let nodeInfoMap = {};
+        if (nodeNames.length > 0) {
+          const nodes = await djClient.getNodesByNames(nodeNames);
+          nodeInfoMap = Object.fromEntries(
+            nodes.map(n => [
+              n.name,
+              {
+                node_type: n.type?.toLowerCase(),
+                display_name: n.current?.displayName,
+                status: n.current?.status?.toLowerCase(),
+                mode: n.current?.mode?.toLowerCase(),
+              },
+            ]),
+          );
+        }
+
+        // Merge node info into subscriptions
+        const enrichedPrefs = (prefs || []).map(pref => ({
+          ...pref,
+          ...(nodeInfoMap[pref.entity_name] || {}),
+        }));
+        setSubscriptions(enrichedPrefs);
+
+        // Fetch service accounts
+        try {
+          const accounts = await djClient.listServiceAccounts();
+          setServiceAccounts(accounts || []);
+        } catch (err) {
+          // Service accounts may not be available, ignore error
+          console.log('Service accounts not available:', err);
+        }
+      } catch (error) {
+        console.error('Error fetching settings data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [djClient]);
+
+  // Subscription handlers
+  const handleUpdateSubscription = async (sub, activityTypes) => {
+    await djClient.subscribeToNotifications({
+      entity_type: sub.entity_type,
+      entity_name: sub.entity_name,
+      activity_types: activityTypes,
+      alert_types: sub.alert_types || ['web'],
+    });
+
+    // Update local state
+    setSubscriptions(
+      subscriptions.map(s =>
+        s.entity_name === sub.entity_name
+          ? { ...s, activity_types: activityTypes }
+          : s,
+      ),
+    );
+  };
+
+  const handleUnsubscribe = async sub => {
+    await djClient.unsubscribeFromNotifications({
+      entity_type: sub.entity_type,
+      entity_name: sub.entity_name,
+    });
+    setSubscriptions(
+      subscriptions.filter(s => s.entity_name !== sub.entity_name),
+    );
+  };
+
+  // Service account handlers
+  const handleCreateServiceAccount = async name => {
+    const result = await djClient.createServiceAccount(name);
+    if (result.client_id) {
+      setServiceAccounts([...serviceAccounts, result]);
+    }
+    return result;
+  };
+
+  const handleDeleteServiceAccount = async clientId => {
+    await djClient.deleteServiceAccount(clientId);
+    setServiceAccounts(serviceAccounts.filter(a => a.client_id !== clientId));
+  };
+
+  if (loading) {
+    return (
+      <div className="settings-page">
+        <div className="settings-container">
+          <LoadingIcon />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="settings-page">
+      <div className="settings-container">
+        <h1 className="settings-title">Settings</h1>
+
+        <ProfileSection user={currentUser} />
+
+        <NotificationSubscriptionsSection
+          subscriptions={subscriptions}
+          onUpdate={handleUpdateSubscription}
+          onUnsubscribe={handleUnsubscribe}
+        />
+
+        <ServiceAccountsSection
+          accounts={serviceAccounts}
+          onCreate={handleCreateServiceAccount}
+          onDelete={handleDeleteServiceAccount}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const TagPage = () => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.TagPage,
+    {
+      fallback: <div></div>,
+    },
+  )();
+};

package/src/app/pages/TagPage/__tests__/TagPage.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { TagPage } from '../index';
+
+describe('<TagPage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        getTag: jest.fn(),
+        listNodesForTag: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+
+    mockDjClient.DataJunctionAPI.getTag.mockReturnValue({
+      name: 'domains.com',
+      tag_type: 'domains',
+      description: 'Top-level domain .com',
+    });
+    mockDjClient.DataJunctionAPI.listNodesForTag.mockReturnValue([
+      {
+        name: 'random.node_a',
+        type: 'metric',
+        display_name: 'Node A',
+      },
+    ]);
+  });
+
+  const renderTagsPage = element => {
+    return render(
+      <MemoryRouter initialEntries={['/tags/:name']}>
+        <Routes>
+          <Route path="tags/:name" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <TagPage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('renders the tag page correctly', async () => {
+    const element = testElement(mockDjClient);
+    renderTagsPage(element);
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.getTag).toHaveBeenCalledTimes(1);
+      expect(
+        mockDjClient.DataJunctionAPI.listNodesForTag,
+      ).toHaveBeenCalledTimes(1);
+    });
+    expect(screen.getByText('Nodes')).toBeInTheDocument();
+    expect(screen.getByText('Node A')).toBeInTheDocument();
+  }, 60000);
+});

package/src/app/pages/TagPage/index.jsx

@@ -0,0 +1,79 @@
+/**
+ * For a given tag, displays nodes tagged with it
+ */
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext, useEffect, useState } from 'react';
+import 'styles/node-creation.scss';
+import DJClientContext from '../../providers/djclient';
+import { useParams } from 'react-router-dom';
+
+export function TagPage() {
+  const [nodes, setNodes] = useState([]);
+  const [tag, setTag] = useState([]);
+
+  const { name } = useParams();
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.listNodesForTag(name);
+      const tagData = await djClient.getTag(name);
+      setNodes(data);
+      setTag(tagData);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h3
+            className="card-title align-items-start flex-column"
+            style={{ display: 'inline-block' }}
+          >
+            Tag
+          </h3>
+          <div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Display Name</h6>
+              <p className="mb-0 opacity-75">{tag.display_name}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Name</h6>
+              <p className="mb-0 opacity-75">{name}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Tag Type</h6>
+              <p className="mb-0 opacity-75">{tag.tag_type}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Description</h6>
+              <p className="mb-0 opacity-75">{tag.description}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Nodes</h6>
+              <div className={`list-group-item`}>
+                {nodes?.map(node => (
+                  <div
+                    className="button-3 cube-element"
+                    key={node.name}
+                    role="cell"
+                    aria-label="CubeElement"
+                    aria-hidden="false"
+                  >
+                    <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+                    <span className={`badge node_type__${node.type}`}>
+                      {node.type}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}