datajunction-ui 0.0.1-rc.19 → 0.0.1-rc.20

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

@@ -0,0 +1,163 @@
+/**
+ * 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 AlertIcon from '../../icons/AlertIcon';
+import ValidIcon from '../../icons/ValidIcon';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+
+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' });
+  };
+
+  const displayMessageAfterSubmit = status => {
+    return status?.success !== undefined ? (
+      <div className="message success">
+        <ValidIcon />
+        {status?.success}
+      </div>
+    ) : status?.failure !== undefined ? (
+      alertMessage(status?.failure)
+    ) : (
+      ''
+    );
+  };
+
+  const alertMessage = message => {
+    return (
+      <div className="message alert">
+        <AlertIcon />
+        {message}
+      </div>
+    );
+  };
+
+  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, setFieldValue }) {
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {
+                      <>
+                        <div className="SourceCreationInput">
+                          <ErrorMessage name="catalog" component="span" />
+                          <label htmlFor="catalog">Catalog</label>
+                          <FormikSelect
+                            selectOptions={catalogs}
+                            formikFieldName="catalog"
+                            placeholder="Choose Catalog"
+                            defaultValue={catalogs[0]}
+                          />
+                        </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,77 @@
+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(),
+  };
+
+  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('Docs').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/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();
+  });
+});

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

@@ -204,48 +204,54 @@ export function SQLBuilderPage() {
         <div className="card">
           <div className="card-header">
             <h4>Metrics</h4>
-            <Select
-              name="metrics"
-              options={metrics}
-              isDisabled={
-                !!(selectedMetrics.length && selectedDimensions.length)
-              }
-              noOptionsMessage={() => 'No metrics found.'}
-              placeholder={`${metrics.length} Available Metrics`}
-              isMulti
-              isClearable
-              closeMenuOnSelect={false}
-              onChange={e => {
-                setSelectedDimensions([]);
-                resetView();
-                setStagedMetrics(e.map(m => m.value));
-              }}
-              onMenuClose={() => {
-                resetView();
-                setSelectedDimensions([]);
-                setSelectedMetrics(stagedMetrics);
-              }}
-            />
+            <span data-testid="select-metrics">
+              <Select
+                name="metrics"
+                options={metrics}
+                isDisabled={
+                  !!(selectedMetrics.length && selectedDimensions.length)
+                }
+                noOptionsMessage={() => 'No metrics found.'}
+                placeholder={`${metrics.length} Available Metrics`}
+                isMulti
+                isClearable
+                closeMenuOnSelect={false}
+                onChange={e => {
+                  setSelectedDimensions([]);
+                  resetView();
+                  setStagedMetrics(e.map(m => m.value));
+                  setSelectedMetrics(stagedMetrics);
+                }}
+                onMenuClose={() => {
+                  resetView();
+                  setSelectedDimensions([]);
+                  setSelectedMetrics(stagedMetrics);
+                }}
+              />
+            </span>
             <h4>Group By</h4>
-            <Select
-              name="dimensions"
-              formatOptionLabel={formatOptionLabel}
-              options={commonDimensionsList}
-              noOptionsMessage={() =>
-                'No shared dimensions found. Try selecting different metrics.'
-              }
-              placeholder={`${commonDimensionsList.length} Shared Dimensions`}
-              isMulti
-              isClearable
-              closeMenuOnSelect={false}
-              onChange={e => {
-                resetView();
-                setStagedDimensions(e.map(d => d.value));
-              }}
-              onMenuClose={() => {
-                setSelectedDimensions(stagedDimensions);
-              }}
-            />
+            <span data-testid="select-dimensions">
+              <Select
+                name="dimensions"
+                formatOptionLabel={formatOptionLabel}
+                options={commonDimensionsList}
+                noOptionsMessage={() =>
+                  'No shared dimensions found. Try selecting different metrics.'
+                }
+                placeholder={`${commonDimensionsList.length} Shared Dimensions`}
+                isMulti
+                isClearable
+                closeMenuOnSelect={false}
+                onChange={e => {
+                  resetView();
+                  setStagedDimensions(e.map(d => d.value));
+                  setSelectedDimensions(stagedDimensions);
+                }}
+                onMenuClose={() => {
+                  setSelectedDimensions(stagedDimensions);
+                }}
+              />
+            </span>
             <h4>Filter By</h4>
             <QueryBuilder
               fields={fields}
@@ -293,11 +299,23 @@ export function SQLBuilderPage() {
             {query ? (
               <>
                 {loadingData ? (
-                  <span className="button-3 executing-button">
+                  <span
+                    className="button-3 executing-button"
+                    onClick={getData}
+                    role="button"
+                    aria-label="RunQuery"
+                    aria-hidden="false"
+                  >
                     {'Running Query'}
                   </span>
                 ) : (
-                  <span className="button-3 execute-button" onClick={getData}>
+                  <span
+                    className="button-3 execute-button"
+                    onClick={getData}
+                    role="button"
+                    aria-label="RunQuery"
+                    aria-hidden="false"
+                  >
                     {'Run Query'}
                   </span>
                 )}