datajunction-ui 0.0.18 → 0.0.20

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

@@ -0,0 +1,136 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { formatRelativeTime, groupByDate } from '../../utils/date';
+
+// Enrich history entries with node info from GraphQL
+const enrichWithNodeInfo = (entries, nodes) => {
+  const nodeMap = new Map(nodes.map(n => [n.name, n]));
+  return entries.map(entry => {
+    const node = nodeMap.get(entry.entity_name);
+    return {
+      ...entry,
+      node_type: node?.type,
+      display_name: node?.current?.displayName,
+    };
+  });
+};
+
+export function NotificationsPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchNotifications() {
+      try {
+        const history = (await djClient.getSubscribedHistory(50)) || [];
+
+        // Get unique entity names and fetch their info via GraphQL
+        const nodeNames = Array.from(new Set(history.map(h => h.entity_name)));
+        const nodes = nodeNames.length
+          ? await djClient.getNodesByNames(nodeNames)
+          : [];
+
+        const enriched = enrichWithNodeInfo(history, nodes);
+        setNotifications(enriched);
+      } catch (error) {
+        console.error('Error fetching notifications:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchNotifications();
+  }, [djClient]);
+
+  const groupedNotifications = groupByDate(notifications);
+
+  return (
+    <div className="mid">
+      <div className="card">
+        <div className="card-header">
+          <h2>Notifications</h2>
+        </div>
+        <div className="card-body">
+          <div className="notifications-list">
+            {loading ? (
+              <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <LoadingIcon />
+              </div>
+            ) : notifications.length === 0 ? (
+              <div
+                style={{
+                  padding: '2rem 1rem',
+                  color: '#666',
+                  textAlign: 'center',
+                }}
+              >
+                No notifications yet. Watch nodes to receive updates when they
+                change.
+              </div>
+            ) : (
+              groupedNotifications.map(group => (
+                <div key={group.label} className="notification-group">
+                  <div
+                    style={{
+                      padding: '0.5rem 0.75rem',
+                      backgroundColor: '#f8f9fa',
+                      borderBottom: '1px solid #eee',
+                      fontSize: '12px',
+                      fontWeight: 600,
+                      color: '#666',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    {group.label}
+                  </div>
+                  {group.items.map(entry => {
+                    const version = entry.details?.version;
+                    const href = version
+                      ? `/nodes/${entry.entity_name}/revisions/${version}`
+                      : `/nodes/${entry.entity_name}/history`;
+
+                    return (
+                      <a
+                        key={entry.id}
+                        className="notification-item"
+                        href={href}
+                      >
+                        <span className="notification-node">
+                          <span className="notification-title">
+                            {entry.display_name || entry.entity_name}
+                            {version && (
+                              <span className="badge version">{version}</span>
+                            )}
+                          </span>
+                          {entry.display_name && (
+                            <span className="notification-entity">
+                              {entry.entity_name}
+                            </span>
+                          )}
+                        </span>
+                        <span className="notification-meta">
+                          {entry.node_type && (
+                            <span
+                              className={`node_type__${entry.node_type} badge node_type`}
+                            >
+                              {entry.node_type.toUpperCase()}
+                            </span>
+                          )}
+                          {entry.activity_type}d by{' '}
+                          <span style={{ color: '#333' }}>{entry.user}</span> ·{' '}
+                          {formatRelativeTime(entry.created_at)}
+                        </span>
+                      </a>
+                    );
+                  })}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -8,9 +8,22 @@ describe('<Root />', () => {
   const mockDjClient = {
     logout: jest.fn(),
     nodeDetails: jest.fn(),
-    listTags: jest.fn(),
+    listTags: jest.fn().mockResolvedValue([]),
+    nodes: jest.fn().mockResolvedValue([]),
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      email: 'test@example.com',
+    }),
+    getSubscribedHistory: jest.fn().mockResolvedValue([]),
+    markNotificationsRead: jest.fn().mockResolvedValue({}),
+    getNodesByNames: jest.fn().mockResolvedValue([]),
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders with the correct title and navigation', async () => {
     render(
       <HelmetProvider>
@@ -20,60 +33,12 @@ describe('<Root />', () => {
       </HelmetProvider>,
     );
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(document.title).toEqual('DataJunction');
-      const metaDescription = document.querySelector(
-        "meta[name='description']",
-      );
-      expect(metaDescription).toBeInTheDocument();
-      expect(metaDescription.content).toBe(
-        'DataJunction Metrics Platform Webapp',
-      );
-
-      expect(screen.getByText(/^DataJunction$/)).toBeInTheDocument();
-      expect(screen.getByText('Explore').closest('a')).toHaveAttribute(
-        'href',
-        '/',
-      );
-      expect(screen.getByText('SQL').closest('a')).toHaveAttribute(
-        'href',
-        '/sql',
-      );
-      expect(screen.getByText('Open-Source').closest('a')).toHaveAttribute(
-        'href',
-        'https://www.datajunction.io',
-      );
     });
-  });
-
-  it('renders Logout button unless REACT_DISABLE_AUTH is true', () => {
-    process.env.REACT_DISABLE_AUTH = 'false';
-    render(
-      <HelmetProvider>
-        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-          <Root />
-        </DJClientContext.Provider>
-      </HelmetProvider>,
-    );
-    expect(screen.getByText('Logout')).toBeInTheDocument();
-  });
-
-  it('calls logout and reloads window on logout button click', () => {
-    process.env.REACT_DISABLE_AUTH = 'false';
-    const originalLocation = window.location;
-    delete window.location;
-    window.location = { ...originalLocation, reload: jest.fn() };
-
-    render(
-      <HelmetProvider>
-        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-          <Root />
-        </DJClientContext.Provider>
-      </HelmetProvider>,
-    );
 
-    screen.getByText('Logout').click();
-    expect(mockDjClient.logout).toHaveBeenCalled();
-    window.location = originalLocation;
+    // Check navigation links exist
+    expect(screen.getByText('Explore')).toBeInTheDocument();
+    expect(screen.getByText('SQL')).toBeInTheDocument();
   });
 });

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

@@ -1,9 +1,11 @@
-import { useContext } from 'react';
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import DJLogo from '../../icons/DJLogo';
 import { Helmet } from 'react-helmet-async';
-import DJClientContext from '../../providers/djclient';
 import Search from '../../components/Search';
+import NotificationBell from '../../components/NotificationBell';
+import UserMenu from '../../components/UserMenu';
+import '../../../styles/nav-bar.css';
 
 // Define the type for the docs sites
 type DocsSites = {
@@ -21,21 +23,16 @@ const docsSites: DocsSites = process.env.REACT_APP_DOCS_SITES
   : defaultDocsSites;
 
 export function Root() {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  const handleLogout = async () => {
-    await djClient.logout();
-    window.location.reload();
-  };
+  // Track which dropdown is open to close others
+  const [openDropdown, setOpenDropdown] = useState<
+    'notifications' | 'user' | null
+  >(null);
 
   return (
     <>
       <Helmet>
         <title>DataJunction</title>
-        <meta
-          name="description"
-          content="DataJunction Metrics Platform Webapp"
-        />
+        <meta name="description" content="DataJunction UI" />
       </Helmet>
       <div className="container d-flex align-items-center justify-content-between">
         <div className="header">
@@ -105,13 +102,20 @@ export function Root() {
         {process.env.REACT_DISABLE_AUTH === 'true' ? (
           ''
         ) : (
-          <span className="menu-link">
-            <span className="menu-title">
-              <a href={'/'} onClick={handleLogout}>
-                Logout
-              </a>
-            </span>
-          </span>
+          <div className="nav-right">
+            <NotificationBell
+              onDropdownToggle={isOpen => {
+                setOpenDropdown(isOpen ? 'notifications' : null);
+              }}
+              forceClose={openDropdown === 'user'}
+            />
+            <UserMenu
+              onDropdownToggle={isOpen => {
+                setOpenDropdown(isOpen ? 'user' : null);
+              }}
+              forceClose={openDropdown === 'notifications'}
+            />
+          </div>
         )}
       </div>
       <Outlet />

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

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+
+/**
+ * Modal for creating a new service account.
+ * Shows a form initially, then displays credentials after successful creation.
+ */
+export function CreateServiceAccountModal({ isOpen, onClose, onCreate }) {
+  const [name, setName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [credentials, setCredentials] = useState(null);
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setCreating(true);
+    try {
+      const result = await onCreate(name.trim());
+      if (result.client_id) {
+        setCredentials(result);
+        setName('');
+      } else if (result.message) {
+        alert(result.message);
+      }
+    } catch (error) {
+      console.error('Error creating service account:', error);
+      alert('Failed to create service account');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleClose = () => {
+    setName('');
+    setCredentials(null);
+    onClose();
+  };
+
+  const copyToClipboard = text => {
+    navigator.clipboard.writeText(text);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={handleClose}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>Create Service Account</h3>
+          <button
+            className="btn-close-modal"
+            onClick={handleClose}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        {credentials ? (
+          /* Show credentials after creation */
+          <div className="modal-body">
+            <div className="credentials-success">
+              <span className="success-icon">✓</span>
+              <h4>Service Account Created!</h4>
+            </div>
+            <p className="credentials-warning">
+              Save these credentials now. The client secret will not be shown
+              again.
+            </p>
+            <div className="credentials-grid">
+              <div className="credential-item">
+                <label>Name</label>
+                <code>{credentials.name}</code>
+              </div>
+              <div className="credential-item">
+                <label>Client ID</label>
+                <div className="credential-value">
+                  <code>{credentials.client_id}</code>
+                  <button
+                    className="btn-copy"
+                    onClick={() => copyToClipboard(credentials.client_id)}
+                    title="Copy"
+                  >
+                    📋
+                  </button>
+                </div>
+              </div>
+              <div className="credential-item">
+                <label>Client Secret</label>
+                <div className="credential-value">
+                  <code>{credentials.client_secret}</code>
+                  <button
+                    className="btn-copy"
+                    onClick={() => copyToClipboard(credentials.client_secret)}
+                    title="Copy"
+                  >
+                    📋
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="modal-actions">
+              <button className="btn-primary" onClick={handleClose}>
+                Done
+              </button>
+            </div>
+          </div>
+        ) : (
+          /* Show creation form */
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              <div className="form-group">
+                <label htmlFor="service-account-name">Name</label>
+                <input
+                  id="service-account-name"
+                  type="text"
+                  placeholder="e.g., my-pipeline, etl-job, ci-cd"
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  disabled={creating}
+                  autoFocus
+                />
+                <span className="form-hint">
+                  A descriptive name to identify this service account
+                </span>
+              </div>
+            </div>
+            <div className="modal-actions">
+              <button
+                type="button"
+                className="btn-secondary"
+                onClick={handleClose}
+                disabled={creating}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn-primary"
+                disabled={creating || !name.trim()}
+              >
+                {creating ? 'Creating...' : 'Create'}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CreateServiceAccountModal;

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

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

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

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import EditIcon from '../../icons/EditIcon';
+
+// Available activity types for subscriptions
+const ACTIVITY_TYPES = [
+  { value: 'create', label: 'Create' },
+  { value: 'update', label: 'Update' },
+  { value: 'delete', label: 'Delete' },
+  { value: 'status_change', label: 'Status Change' },
+  { value: 'refresh', label: 'Refresh' },
+  { value: 'tag', label: 'Tag' },
+];
+
+/**
+ * Displays and manages notification subscriptions.
+ */
+export function NotificationSubscriptionsSection({
+  subscriptions,
+  onUpdate,
+  onUnsubscribe,
+}) {
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [editedActivityTypes, setEditedActivityTypes] = useState([]);
+  const [saving, setSaving] = useState(false);
+
+  const startEditing = index => {
+    setEditingIndex(index);
+    setEditedActivityTypes([...subscriptions[index].activity_types]);
+  };
+
+  const cancelEditing = () => {
+    setEditingIndex(null);
+    setEditedActivityTypes([]);
+  };
+
+  const toggleActivityType = activityType => {
+    if (editedActivityTypes.includes(activityType)) {
+      setEditedActivityTypes(
+        editedActivityTypes.filter(t => t !== activityType),
+      );
+    } else {
+      setEditedActivityTypes([...editedActivityTypes, activityType]);
+    }
+  };
+
+  const saveSubscription = async sub => {
+    if (editedActivityTypes.length === 0) {
+      alert('Please select at least one activity type');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await onUpdate(sub, editedActivityTypes);
+      setEditingIndex(null);
+      setEditedActivityTypes([]);
+    } catch (error) {
+      console.error('Error updating subscription:', error);
+      alert('Failed to update subscription');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUnsubscribe = async (sub, index) => {
+    const confirmed = window.confirm(
+      `Unsubscribe from notifications for "${sub.entity_name}"?`,
+    );
+    if (!confirmed) return;
+
+    try {
+      await onUnsubscribe(sub);
+    } catch (error) {
+      console.error('Error unsubscribing:', error);
+    }
+  };
+
+  return (
+    <section className="settings-section" id="notifications">
+      <h2 className="settings-section-title">Notification Subscriptions</h2>
+      <div className="settings-card">
+        {subscriptions.length === 0 ? (
+          <p className="empty-state">
+            You're not watching any nodes yet. Visit a node page and click
+            "Watch" to subscribe to updates.
+          </p>
+        ) : (
+          <div className="subscriptions-list">
+            {subscriptions.map((sub, index) => (
+              <div key={index} className="subscription-item">
+                <div className="subscription-header">
+                  <div className="subscription-entity">
+                    <a href={`/nodes/${sub.entity_name}`}>{sub.entity_name}</a>
+                    {sub.node_type ? (
+                      <span
+                        className={`node_type__${sub.node_type} badge node_type`}
+                      >
+                        {sub.node_type.toUpperCase()}
+                      </span>
+                    ) : (
+                      <span className="entity-type-badge">
+                        {sub.entity_type}
+                      </span>
+                    )}
+                    {sub.status === 'invalid' && (
+                      <span className="status-badge status-invalid">
+                        INVALID
+                      </span>
+                    )}
+                  </div>
+                  <div className="subscription-actions">
+                    {editingIndex === index ? (
+                      <>
+                        <button
+                          className="btn-save"
+                          onClick={() => saveSubscription(sub)}
+                          disabled={saving}
+                        >
+                          {saving ? 'Saving...' : 'Save'}
+                        </button>
+                        <button
+                          className="btn-cancel"
+                          onClick={cancelEditing}
+                          disabled={saving}
+                        >
+                          Cancel
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <button
+                          className="btn-icon btn-edit"
+                          onClick={() => startEditing(index)}
+                          title="Edit subscription"
+                        >
+                          <EditIcon />
+                        </button>
+                        <button
+                          className="btn-icon btn-unsubscribe"
+                          onClick={() => handleUnsubscribe(sub, index)}
+                          title="Unsubscribe"
+                        >
+                          ×
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                <div className="subscription-activity-types">
+                  <label className="activity-types-label">
+                    Activity types:
+                  </label>
+                  {editingIndex === index ? (
+                    <div className="activity-types-checkboxes">
+                      {ACTIVITY_TYPES.map(type => (
+                        <label key={type.value} className="checkbox-label">
+                          <input
+                            type="checkbox"
+                            checked={editedActivityTypes.includes(type.value)}
+                            onChange={() => toggleActivityType(type.value)}
+                          />
+                          {type.label}
+                        </label>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="activity-types-badges">
+                      {sub.activity_types?.map(type => (
+                        <span
+                          key={type}
+                          className={`activity-badge activity-badge-${type}`}
+                        >
+                          {type}
+                        </span>
+                      )) || <span className="text-muted">All</span>}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default NotificationSubscriptionsSection;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * Displays user profile information including avatar, username, and email.
+ */
+export function ProfileSection({ user }) {
+  const getInitials = () => {
+    if (user?.name) {
+      return user.name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    return user?.username?.slice(0, 2).toUpperCase() || '?';
+  };
+
+  return (
+    <section className="settings-section">
+      <h2 className="settings-section-title">Profile</h2>
+      <div className="settings-card">
+        <div className="profile-info">
+          <div className="profile-avatar">{getInitials()}</div>
+          <div className="profile-details">
+            <div className="profile-field">
+              <label>Username</label>
+              <span>{user?.username || '-'}</span>
+            </div>
+            <div className="profile-field">
+              <label>Email</label>
+              <span>{user?.email || '-'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ProfileSection;