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

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

@@ -0,0 +1,287 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { NotificationsPage } from '../index';
+import DJClientContext from '../../../providers/djclient';
+
+describe('<NotificationsPage />', () => {
+  const mockNotifications = [
+    {
+      id: 1,
+      entity_type: 'node',
+      entity_name: 'default.metrics.revenue',
+      node: 'default.metrics.revenue',
+      activity_type: 'update',
+      user: 'alice',
+      created_at: new Date().toISOString(),
+      details: { version: 'v2' },
+    },
+    {
+      id: 2,
+      entity_type: 'node',
+      entity_name: 'default.dimensions.country',
+      node: 'default.dimensions.country',
+      activity_type: 'create',
+      user: 'bob',
+      created_at: new Date().toISOString(),
+      details: { version: 'v1' },
+    },
+  ];
+
+  const mockNodes = [
+    {
+      name: 'default.metrics.revenue',
+      type: 'metric',
+      current: { displayName: 'Revenue Metric' },
+    },
+    {
+      name: 'default.dimensions.country',
+      type: 'dimension',
+      current: { displayName: 'Country' },
+    },
+  ];
+
+  const createMockDjClient = (overrides = {}) => ({
+    getSubscribedHistory: jest.fn().mockResolvedValue(mockNotifications),
+    getNodesByNames: jest.fn().mockResolvedValue(mockNodes),
+    ...overrides,
+  });
+
+  const renderWithContext = mockDjClient => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NotificationsPage />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the page title', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('shows loading state initially', () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockImplementation(
+        () => new Promise(() => {}), // Never resolves
+      ),
+    });
+    renderWithContext(mockDjClient);
+
+    // LoadingIcon should be present (check for the container)
+    const loadingContainer = document.querySelector(
+      '[style*="text-align: center"]',
+    );
+    expect(loadingContainer).toBeInTheDocument();
+  });
+
+  it('shows empty state when no notifications', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue([]),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText(/No notifications yet/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Watch nodes to receive updates/i),
+    ).toBeInTheDocument();
+  });
+
+  it('displays notifications with display names', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Display names should be shown
+    expect(await screen.findByText('Revenue Metric')).toBeInTheDocument();
+    expect(await screen.findByText('Country')).toBeInTheDocument();
+  });
+
+  it('displays entity names below display names', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Entity names should be shown
+    expect(
+      await screen.findByText('default.metrics.revenue'),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText('default.dimensions.country'),
+    ).toBeInTheDocument();
+  });
+
+  it('falls back to entity_name when no display_name', async () => {
+    const mockDjClient = createMockDjClient({
+      getNodesByNames: jest.fn().mockResolvedValue([]), // No node info
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Entity names should be shown as the title (no display names)
+    const revenueElements = await screen.findAllByText(
+      'default.metrics.revenue',
+    );
+    expect(revenueElements.length).toBeGreaterThan(0);
+  });
+
+  it('shows version badge when version is available', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(await screen.findByText('v2')).toBeInTheDocument();
+    expect(await screen.findByText('v1')).toBeInTheDocument();
+  });
+
+  it('links to revision page when version is available', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      const links = document.querySelectorAll('a.notification-item');
+      expect(links.length).toBe(2);
+
+      const revenueLink = Array.from(links).find(l =>
+        l.textContent.includes('Revenue Metric'),
+      );
+      expect(revenueLink).toHaveAttribute(
+        'href',
+        '/nodes/default.metrics.revenue/revisions/v2',
+      );
+    });
+  });
+
+  it('links to history page when no version', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue([
+        {
+          id: 1,
+          entity_type: 'node',
+          entity_name: 'default.source.orders',
+          node: 'default.source.orders',
+          activity_type: 'update',
+          user: 'alice',
+          created_at: new Date().toISOString(),
+          details: {}, // No version
+        },
+      ]),
+      getNodesByNames: jest.fn().mockResolvedValue([]),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      const link = document.querySelector('a.notification-item');
+      expect(link).toHaveAttribute(
+        'href',
+        '/nodes/default.source.orders/history',
+      );
+    });
+  });
+
+  it('shows node type badge', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(await screen.findByText('METRIC')).toBeInTheDocument();
+    expect(await screen.findByText('DIMENSION')).toBeInTheDocument();
+  });
+
+  it('shows activity type and user', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    expect(await screen.findByText('alice')).toBeInTheDocument();
+    expect(await screen.findByText('bob')).toBeInTheDocument();
+  });
+
+  it('groups notifications by date', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Both notifications are from today
+    expect(await screen.findByText('Today')).toBeInTheDocument();
+  });
+
+  it('fetches node info via GraphQL', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalledWith(50);
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.getNodesByNames).toHaveBeenCalledWith([
+        'default.metrics.revenue',
+        'default.dimensions.country',
+      ]);
+    });
+  });
+
+  it('handles errors gracefully', async () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest
+        .fn()
+        .mockRejectedValue(new Error('Network error')),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Error fetching notifications:',
+        expect.any(Error),
+      );
+    });
+
+    // Should show empty state after error
+    expect(screen.getByText(/No notifications yet/i)).toBeInTheDocument();
+
+    consoleSpy.mockRestore();
+  });
+});

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/OverviewPage/ByStatusPanel.jsx

@@ -0,0 +1,69 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
+
+const COLOR_MAPPING = {
+  valid: '#00b368',
+  invalid: '#FF91A3', // '#b34b00',
+};
+
+export const ByStatusPanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodesByStatus, setNodesByStatus] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodesByStatus(await djClient.system.node_counts_by_status());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <>
+      <div className="chart-box" style={{ flex: '0 0 2%' }}>
+        <div className="horiz-box">
+          <div className="chart-title">Nodes By Status</div>
+          {nodesByStatus?.map(entry => (
+            <div
+              className="jss316 badge"
+              style={{ color: '#000', margin: '0.2em' }}
+              key={entry.name}
+            >
+              <span style={{ color: COLOR_MAPPING[entry.name.toLowerCase()] }}>
+                {entry.name === 'VALID' ? (
+                  <ValidIcon
+                    width={'45px'}
+                    height={'45px'}
+                    style={{ marginTop: '0.75em' }}
+                  />
+                ) : (
+                  <InvalidIcon
+                    width={'45px'}
+                    height={'45px'}
+                    style={{ marginTop: '0.75em' }}
+                  />
+                )}
+              </span>
+
+              <div style={{ display: 'inline-grid', alignItems: 'center' }}>
+                <strong
+                  className="horiz-box-value"
+                  style={{
+                    color: COLOR_MAPPING[entry.name.toLowerCase()],
+                  }}
+                >
+                  {entry.value}
+                </strong>
+                <span className={'horiz-box-label'}>
+                  {entry.name.toLowerCase()} nodes
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/app/pages/OverviewPage/DimensionNodeUsagePanel.jsx

@@ -0,0 +1,48 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export const DimensionNodeUsagePanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [dimensionNodes, setDimensionNodes] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setDimensionNodes(await djClient.system.dimensions());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <>
+      <div className="chart-box">
+        <div className="chart-title">Dimension Node Usage</div>
+        <table className="card-inner-table table" style={{ marginTop: '0' }}>
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Dimension</th>
+              <th className="a">Links</th>
+              <th className="a">Cubes</th>
+            </tr>
+          </thead>
+          <tbody>
+            {dimensionNodes
+              ?.sort(
+                (a, b) =>
+                  b.cube_count + b.indegree - (a.cube_count + a.indegree),
+              )
+              .slice(0, 6)
+              .map((dim, index) => (
+                <tr key={index}>
+                  <td className="a">
+                    <a href={`/nodes/${dim.name}`}>{dim.name}</a>
+                  </td>
+                  <td className="a">{dim.indegree}</td>
+                  <td className="a">{dim.cube_count}</td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};

package/src/app/pages/OverviewPage/GovernanceWarningsPanel.jsx

@@ -0,0 +1,107 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import '../../../styles/node-creation.scss';
+const COLOR_MAPPING = {
+  source: '#00C49F',
+  dimension: '#FFBB28', //'#FF8042',
+  transform: '#0088FE',
+  metric: '#ff91a3', //'#FFBB28',
+  cube: '#AA46BE',
+  valid: '#00b368',
+  invalid: '#b34b00',
+};
+
+export const GovernanceWarningsPanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodesWithoutDescription, setNodesWithoutDescription] = useState(null);
+  const [dimensionNodes, setDimensionNodes] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodesWithoutDescription(
+        await djClient.system.nodes_without_description(),
+      );
+      setDimensionNodes(await djClient.system.dimensions());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div className="chart-box" style={{ flex: '1 1 10%', maxWidth: '470px' }}>
+      <div className="chart-title">Governance Warnings</div>
+      <div
+        className="horiz-box"
+        style={{
+          padding: '5px 10px',
+          marginTop: '10px',
+          border: '1px solid #AA46BE30',
+        }}
+      >
+        <span style={{ color: '#FF804255', fontSize: '30px' }}>⚠</span>
+        <span style={{ padding: '10px 12px', fontSize: '18px' }}>
+          Missing Description
+        </span>
+        <div style={{ display: 'block' }}>
+          {nodesWithoutDescription?.map(entry => (
+            <div
+              className="jss316 badge"
+              style={{
+                margin: '5px 10px',
+                fontSize: '14px',
+                padding: '10px',
+                color: COLOR_MAPPING[entry.name.toLowerCase()],
+                backgroundColor: COLOR_MAPPING[entry.name.toLowerCase()] + '10',
+              }}
+              key={entry.name}
+            >
+              <strong>{Math.round(entry.value * 100)}%</strong>{' '}
+              <span>{entry.name.toLowerCase()}s</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div
+        className="horiz-box"
+        style={{
+          padding: '5px 10px',
+          marginTop: '10px',
+          border: '1px solid #AA46BE30',
+        }}
+      >
+        <div
+          style={{ width: '100%', display: 'inline-flex', marginTop: '-10px' }}
+        >
+          <span style={{ color: '#FF804255', fontSize: '40px' }}>∅</span>
+          <span
+            style={{
+              padding: '10px 12px',
+              fontSize: '18px',
+              marginTop: '10px',
+            }}
+          >
+            Orphaned Dimensions
+          </span>
+        </div>
+        <div style={{ display: 'block' }}>
+          <div
+            className="jss316 badge"
+            style={{
+              margin: '5px 10px',
+              fontSize: '14px',
+              padding: '10px',
+              color: COLOR_MAPPING.dimension,
+              backgroundColor: COLOR_MAPPING.dimension + '10',
+            }}
+          >
+            <strong>
+              {dimensionNodes?.filter(
+                dim => dim.indegree === 0 || dim.cube_count === 0,
+              ).length || '...'}
+            </strong>
+            <span> dimension nodes</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

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