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

package/src/app/pages/OverviewPage/__tests__/TrendsPanel.test.jsx

@@ -0,0 +1,120 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { TrendsPanel } from '../TrendsPanel';
+
+jest.mock('recharts', () => {
+  const Original = jest.requireActual('recharts');
+  return {
+    ...Original,
+    ResponsiveContainer: ({ children, ...props }) => (
+      <div data-testid="responsive-container">{children}</div>
+    ),
+    BarChart: ({ children, data, ...props }) => (
+      <div data-testid="barchart" data-data={JSON.stringify(data)}>
+        {children}
+      </div>
+    ),
+    CartesianGrid: props => <div data-testid="cartesian-grid" />,
+    XAxis: props => <div data-testid="x-axis" />,
+    YAxis: props => <div data-testid="y-axis" />,
+    Tooltip: props => <div data-testid="tooltip" />,
+    Legend: props => <div data-testid="legend" />,
+    Bar: props => (
+      <div data-testid={`bar-${props.dataKey}`} data-fill={props.fill} />
+    ),
+  };
+});
+
+describe('<TrendsPanel />', () => {
+  it('fetches and renders node trends', async () => {
+    const mockNodeTrends = [
+      {
+        date: '2024-01-01',
+        source: 2,
+        dimension: 1,
+        transform: 3,
+        metric: 5,
+        cube: 0,
+      },
+      {
+        date: '2024-01-02',
+        source: 1,
+        dimension: 2,
+        transform: 1,
+        metric: 3,
+        cube: 4,
+      },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_trends: jest.fn().mockResolvedValue(mockNodeTrends),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <TrendsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_trends).toHaveBeenCalled();
+    });
+
+    // Chart title
+    expect(screen.getByText('Trends')).toBeInTheDocument();
+
+    // The Recharts containers render
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+    expect(screen.getByTestId('barchart')).toBeInTheDocument();
+
+    // Should contain grid, axes, tooltip, legend
+    expect(screen.getByTestId('cartesian-grid')).toBeInTheDocument();
+    expect(screen.getByTestId('x-axis')).toBeInTheDocument();
+    expect(screen.getByTestId('y-axis')).toBeInTheDocument();
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+    expect(screen.getByTestId('legend')).toBeInTheDocument();
+
+    // Should render bars with expected colors
+    const expectedBars = {
+      source: '#00C49F',
+      dimension: '#FFBB28',
+      transform: '#0088FE',
+      metric: '#FF91A3',
+      cube: '#AA46BE',
+    };
+
+    Object.entries(expectedBars).forEach(([key, color]) => {
+      const bar = screen.getByTestId(`bar-${key}`);
+      expect(bar).toBeInTheDocument();
+      expect(bar).toHaveAttribute('data-fill', color);
+    });
+
+    // BarChart gets correct data
+    const barChart = screen.getByTestId('barchart');
+    expect(barChart.getAttribute('data-data')).toContain('2024-01-01');
+  });
+
+  it('renders with empty trends', async () => {
+    const mockDjClient = {
+      system: {
+        node_trends: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <TrendsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_trends).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText('Trends')).toBeInTheDocument();
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+    expect(screen.getByTestId('barchart')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import { OverviewPage } from '../index';
+
+jest.mock('../OverviewPanel', () => ({
+  OverviewPanel: () => <div data-testid="overview-panel">OverviewPanel</div>,
+}));
+jest.mock('../NodesByTypePanel', () => ({
+  NodesByTypePanel: () => (
+    <div data-testid="nodes-by-type-panel">NodesByTypePanel</div>
+  ),
+}));
+jest.mock('../GovernanceWarningsPanel', () => ({
+  GovernanceWarningsPanel: () => (
+    <div data-testid="governance-warnings-panel">GovernanceWarningsPanel</div>
+  ),
+}));
+jest.mock('../TrendsPanel', () => ({
+  TrendsPanel: () => <div data-testid="trends-panel">TrendsPanel</div>,
+}));
+jest.mock('../DimensionNodeUsagePanel', () => ({
+  DimensionNodeUsagePanel: () => (
+    <div data-testid="dimension-node-usage-panel">DimensionNodeUsagePanel</div>
+  ),
+}));
+
+describe('<OverviewPage />', () => {
+  it('renders the OverviewPage with all panels', () => {
+    render(<OverviewPage />);
+
+    // Check the main containers
+    const containers = screen.getAllByClassName
+      ? screen.getAllByClassName('chart-container')
+      : document.querySelectorAll('.chart-container');
+
+    expect(containers.length).toBe(2);
+
+    // Check each mocked panel appears
+    expect(screen.getByTestId('overview-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('nodes-by-type-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('governance-warnings-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('trends-panel')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('dimension-node-usage-panel'),
+    ).toBeInTheDocument();
+
+    // Check panels are in the correct containers
+    expect(containers[0].innerHTML).toContain('OverviewPanel');
+    expect(containers[0].innerHTML).toContain('NodesByTypePanel');
+    expect(containers[0].innerHTML).toContain('GovernanceWarningsPanel');
+
+    expect(containers[1].innerHTML).toContain('TrendsPanel');
+    expect(containers[1].innerHTML).toContain('DimensionNodeUsagePanel');
+  });
+});

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

@@ -0,0 +1,22 @@
+import { OverviewPanel } from './OverviewPanel';
+import { NodesByTypePanel } from './NodesByTypePanel';
+import { GovernanceWarningsPanel } from './GovernanceWarningsPanel';
+import { TrendsPanel } from './TrendsPanel';
+import { DimensionNodeUsagePanel } from './DimensionNodeUsagePanel';
+
+export function OverviewPage() {
+  return (
+    <div className="mid">
+      <div className="chart-container">
+        <OverviewPanel />
+        <NodesByTypePanel />
+        <GovernanceWarningsPanel />
+      </div>
+
+      <div className="chart-container">
+        <TrendsPanel />
+        <DimensionNodeUsagePanel />
+      </div>
+    </div>
+  );
+}

package/src/app/pages/RegisterTablePage/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 RegisterTablePage = () => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.RegisterTablePage,
+    {
+      fallback: <div></div>,
+    },
+  )();
+};

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { RegisterTablePage } from '../index';
+
+describe('<RegisterTablePage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        catalogs: jest.fn(),
+        registerTable: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+
+    mockDjClient.DataJunctionAPI.catalogs.mockReturnValue([
+      {
+        name: 'warehouse',
+        engines: [
+          {
+            name: 'duckdb',
+            version: '0.7.1',
+            uri: null,
+            dialect: null,
+          },
+        ],
+      },
+    ]);
+  });
+
+  const renderRegisterTable = element => {
+    return render(
+      <MemoryRouter initialEntries={['/create/source']}>
+        <Routes>
+          <Route path="create/source" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <RegisterTablePage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('registers a table correctly', async () => {
+    mockDjClient.DataJunctionAPI.registerTable.mockReturnValue({
+      status: 201,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { container, getByTestId } = renderRegisterTable(element);
+
+    const catalog = getByTestId('choose-catalog');
+    await waitFor(async () => {
+      fireEvent.keyDown(catalog.firstChild, { key: 'ArrowDown' });
+      const warehouseOptions = screen.getAllByText('warehouse');
+      fireEvent.click(warehouseOptions[warehouseOptions.length - 1]);
+    });
+
+    await userEvent.type(screen.getByLabelText('Schema'), 'schema');
+    await userEvent.type(screen.getByLabelText('Table'), 'some_table');
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.registerTable).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.registerTable).toBeCalledWith(
+        'warehouse',
+        'schema',
+        'some_table',
+      );
+    });
+    expect(container.getElementsByClassName('message')).toMatchSnapshot();
+  }, 60000);
+
+  it('fails to register a table', async () => {
+    mockDjClient.DataJunctionAPI.registerTable.mockReturnValue({
+      status: 500,
+      json: { message: 'table not found' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { getByTestId } = renderRegisterTable(element);
+
+    const catalog = getByTestId('choose-catalog');
+    await waitFor(async () => {
+      fireEvent.keyDown(catalog.firstChild, { key: 'ArrowDown' });
+      const warehouseOptions = screen.getAllByText('warehouse');
+      fireEvent.click(warehouseOptions[warehouseOptions.length - 1]);
+    });
+
+    await userEvent.type(screen.getByLabelText('Schema'), 'schema');
+    await userEvent.type(screen.getByLabelText('Table'), 'some_table');
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByText('table not found')).toBeInTheDocument();
+  }, 60000);
+});

package/src/app/pages/RegisterTablePage/__tests__/__snapshots__/RegisterTablePage.test.jsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RegisterTablePage /> registers a table correctly 1`] = `
+HTMLCollection [
+  <div
+    class="message success"
+    data-testid="success"
+  >
+    <svg
+      class="bi bi-check-circle-fill"
+      data-testid="valid-icon"
+      fill="currentColor"
+      height="25px"
+      viewBox="0 0 16 16"
+      width="25px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
+      />
+    </svg>
+    Successfully registered source node
+     
+    <a
+      href="/nodes/source.warehouse.schema.some_table"
+    >
+      source.warehouse.schema.some_table
+    </a>
+    , which references table 
+    warehouse
+    .
+    schema
+    .
+    some_table
+    .
+  </div>,
+]
+`;

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

@@ -0,0 +1,142 @@
+/**
+ * Node add + edit page for transforms, metrics, and dimensions. The creation and edit flow for these
+ * node types is largely the same, with minor differences handled server-side. For the `query`
+ * field, this page will render a CodeMirror SQL editor with autocompletion and syntax highlighting.
+ */
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import 'styles/node-creation.scss';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export function RegisterTablePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [catalogs, setCatalogs] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const catalogs = await djClient.catalogs();
+      setCatalogs(
+        catalogs.map(catalog => {
+          return { value: catalog.name, label: catalog.name };
+        }),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
+  const initialValues = {
+    catalog: '',
+    schema: '',
+    table: '',
+  };
+
+  const validator = values => {
+    const errors = {};
+    if (!values.table) {
+      errors.table = 'Required';
+    }
+    if (!values.schema) {
+      errors.schema = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    const { status, json } = await djClient.registerTable(
+      values.catalog,
+      values.schema,
+      values.table,
+    );
+    if (status === 200 || status === 201) {
+      setStatus({
+        success: (
+          <>
+            Successfully registered source node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>, which references
+            table {values.catalog}.{values.schema}.{values.table}.
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+    setSubmitting(false);
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h2>
+            Register{' '}
+            <span className={`node_type__source node_type_creation_heading`}>
+              Source
+            </span>
+          </h2>
+          <center>
+            <Formik
+              initialValues={initialValues}
+              validate={validator}
+              onSubmit={handleSubmit}
+            >
+              {function Render({ isSubmitting, status }) {
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {
+                      <>
+                        <div className="SourceCreationInput">
+                          <ErrorMessage name="catalog" component="span" />
+                          <label htmlFor="catalog">Catalog</label>
+                          <span data-testid="choose-catalog">
+                            <FormikSelect
+                              selectOptions={catalogs}
+                              formikFieldName="catalog"
+                              placeholder="Choose Catalog"
+                              defaultValue={catalogs[0]}
+                            />
+                          </span>
+                        </div>
+                        <div className="SourceCreationInput">
+                          <ErrorMessage name="schema" component="span" />
+                          <label htmlFor="schema">Schema</label>
+                          <Field
+                            type="text"
+                            name="schema"
+                            id="schema"
+                            placeholder="Schema"
+                          />
+                        </div>
+                        <div className="SourceCreationInput NodeCreationInput">
+                          <ErrorMessage name="table" component="span" />
+                          <label htmlFor="table">Table</label>
+                          <Field
+                            type="text"
+                            name="table"
+                            id="table"
+                            placeholder="Table"
+                          />
+                        </div>
+                        <button type="submit" disabled={isSubmitting}>
+                          Register
+                        </button>
+                      </>
+                    }
+                  </Form>
+                );
+              }}
+            </Formik>
+          </center>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Root } from '../index';
+import DJClientContext from '../../../providers/djclient';
+import { HelmetProvider } from 'react-helmet-async';
+
+describe('<Root />', () => {
+  const mockDjClient = {
+    logout: jest.fn(),
+    nodeDetails: 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>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <Root />
+        </DJClientContext.Provider>
+      </HelmetProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+    });
+
+    // Check navigation links exist
+    expect(screen.getByText('Explore')).toBeInTheDocument();
+    expect(screen.getByText('SQL')).toBeInTheDocument();
+  });
+});

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

@@ -1,25 +1,57 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import logo from './assets/dj-logo.png';
+import DJLogo from '../../icons/DJLogo';
 import { Helmet } from 'react-helmet-async';
+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 = {
+  [key: string]: string;
+};
+
+// Default docs sites if REACT_APP_DOCS_SITES is not defined
+const defaultDocsSites: DocsSites = {
+  'Open-Source': 'https://www.datajunction.io/',
+};
+
+// Parse the JSON map from the environment variable or use the default
+const docsSites: DocsSites = process.env.REACT_APP_DOCS_SITES
+  ? (JSON.parse(process.env.REACT_APP_DOCS_SITES as string) as DocsSites)
+  : defaultDocsSites;
 
 export function Root() {
+  // 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">
           <div className="logo">
-            <h2>
-              <img src={logo} alt="DJ Logo" width="15%" />
-              DataJunction
-            </h2>
+            <a
+              href={'/'}
+              style={{
+                textTransform: 'none',
+                textDecoration: 'none',
+                color: '#000',
+              }}
+            >
+              <h2>
+                <DJLogo />
+                Data<b>Junction</b>
+              </h2>
+            </a>
           </div>
+          <Search />
           <div className="menu">
             <div className="menu-item here menu-here-bg menu-lg-down-accordion me-0 me-lg-2 fw-semibold">
               <span className="menu-link">
@@ -29,12 +61,62 @@ export function Root() {
               </span>
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/">Help</a>
+                  <a href="/sql">SQL</a>
+                </span>
+              </span>
+              <span className="menu-link">
+                <span className="menu-title">
+                  <div className="dropdown">
+                    <a
+                      className="btn btn-link dropdown-toggle"
+                      href="/"
+                      id="docsDropdown"
+                      role="button"
+                      aria-expanded="false"
+                    >
+                      Docs
+                    </a>
+                    <ul
+                      className="dropdown-menu"
+                      aria-labelledby="docsDropdown"
+                    >
+                      {Object.entries(docsSites).map(([key, value]) => (
+                        <li key={key}>
+                          <a
+                            className="dropdown-item"
+                            href={value}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {key}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </span>
               </span>
             </div>
           </div>
         </div>
+        {process.env.REACT_DISABLE_AUTH === 'true' ? (
+          ''
+        ) : (
+          <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 />
     </>