datajunction-ui 0.0.1-rc.9 → 0.0.3

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

@@ -0,0 +1,79 @@
+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(),
+  };
+
+  it('renders with the correct title and navigation', async () => {
+    render(
+      <HelmetProvider>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <Root />
+        </DJClientContext.Provider>
+      </HelmetProvider>,
+    );
+
+    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;
+  });
+});

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

@@ -1,8 +1,33 @@
+import { useContext } 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 DJClientContext from '../../providers/djclient';
+import Search from '../../components/Search';
+
+// 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() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const handleLogout = async () => {
+    await djClient.logout();
+    window.location.reload();
+  };
+
   return (
     <>
       <Helmet>
@@ -15,11 +40,21 @@ export function Root() {
       <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 +64,55 @@ 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' ? (
+          ''
+        ) : (
+          <span className="menu-link">
+            <span className="menu-title">
+              <a href={'/'} onClick={handleLogout}>
+                Logout
+              </a>
+            </span>
+          </span>
+        )}
       </div>
       <Outlet />
     </>

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

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

@@ -0,0 +1,173 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  waitForElement,
+  act,
+} from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { SQLBuilderPage } from '../index';
+
+const mockDjClient = {
+  metrics: jest.fn(),
+  commonDimensions: jest.fn(),
+  sqls: jest.fn(),
+  data: jest.fn(),
+};
+
+const mockMetrics = [
+  'default.num_repair_orders',
+  'default.avg_repair_price',
+  'default.total_repair_cost',
+];
+
+const mockCommonDimensions = [
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.dateint',
+    type: 'timestamp',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.day',
+    type: 'int',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.day',
+    type: 'int',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.month',
+    type: 'int',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.month',
+    type: 'int',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.year',
+    type: 'int',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.birth_date',
+    ],
+  },
+  {
+    name: 'default.date_dim.year',
+    type: 'int',
+    path: [
+      'default.repair_order_details.repair_order_id',
+      'default.repair_order.hard_hat_id',
+      'default.hard_hat.hire_date',
+    ],
+  },
+];
+
+describe('SQLBuilderPage', () => {
+  beforeEach(() => {
+    mockDjClient.metrics.mockResolvedValue(mockMetrics);
+    mockDjClient.commonDimensions.mockResolvedValue(mockCommonDimensions);
+    mockDjClient.sqls.mockResolvedValue({ sql: 'SELECT ...' });
+    mockDjClient.data.mockResolvedValue({});
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <SQLBuilderPage />
+      </DJClientContext.Provider>,
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    expect(screen.getByText('Using the SQL Builder')).toBeInTheDocument();
+  });
+
+  it('renders the Metrics section', () => {
+    expect(screen.getByText('Metrics')).toBeInTheDocument();
+  });
+
+  it('renders the Group By section', () => {
+    expect(screen.getByText('Group By')).toBeInTheDocument();
+  });
+
+  it('renders the Filter By section', () => {
+    expect(screen.getByText('Filter By')).toBeInTheDocument();
+  });
+
+  it('fetches metrics on mount', async () => {
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <SQLBuilderPage />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
+    const selectMetrics = screen.getAllByTestId('select-metrics')[0];
+    expect(selectMetrics).toBeDefined();
+    expect(selectMetrics).not.toBeNull();
+    expect(screen.getAllByText('3 Available Metrics')[0]).toBeInTheDocument();
+
+    fireEvent.keyDown(selectMetrics.firstChild, { key: 'ArrowDown' });
+    for (const metric of mockMetrics) {
+      await waitFor(() => {
+        expect(screen.getByText(metric)).toBeInTheDocument();
+        fireEvent.click(screen.getByText(metric));
+      });
+    }
+    fireEvent.click(screen.getAllByText('Group By')[0]);
+
+    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+
+    const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
+    expect(selectDimensions).toBeDefined();
+    expect(selectDimensions).not.toBeNull();
+    expect(screen.getAllByText('8 Shared Dimensions')[0]).toBeInTheDocument();
+    fireEvent.keyDown(selectDimensions.firstChild, { key: 'ArrowDown' });
+
+    for (const dim of mockCommonDimensions) {
+      expect(screen.getAllByText(dim.name)[0]).toBeInTheDocument();
+      fireEvent.click(screen.getAllByText(dim.name)[0]);
+    }
+    expect(mockDjClient.sqls).toHaveBeenCalled();
+  });
+});