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

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;

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;