datajunction-ui 0.0.1-rc.2 → 0.0.1-rc.21

package/src/app/index.tsx

@@ -9,37 +9,90 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
+import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
+import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
+import { LoginPage } from './pages/LoginPage';
+import { RegisterTablePage } from './pages/RegisterTablePage';
 import { Root } from './pages/Root/Loadable';
-import { ListNamespacesPage } from './pages/ListNamespacesPage';
+import DJClientContext from './providers/djclient';
+import { DataJunctionAPI } from './services/DJService';
+import { CookiesProvider, useCookies } from 'react-cookie';
+import * as Constants from './constants';
 
 export function App() {
+  const [cookies] = useCookies([Constants.DJ_LOGGED_IN_FLAG_COOKIE]);
   return (
-    <BrowserRouter>
-      <Helmet
-        titleTemplate="DataJunction: %s"
-        defaultTitle="DataJunction: A Metrics Platform"
-      >
-        <meta
-          name="description"
-          content="DataJunction serves as a semantic layer to help manage metrics"
-        />
-      </Helmet>
+    <CookiesProvider>
+      <BrowserRouter>
+        {cookies.__djlif || process.env.REACT_DISABLE_AUTH === 'true' ? (
+          <>
+            <Helmet
+              titleTemplate="DataJunction: %s"
+              defaultTitle="DataJunction: A Metrics Platform"
+            >
+              <meta
+                name="description"
+                content="DataJunction serves as a semantic layer to help manage metrics"
+              />
+            </Helmet>
+            <DJClientContext.Provider value={{ DataJunctionAPI }}>
+              <Routes>
+                <Route
+                  path="/"
+                  element={<Root />}
+                  children={
+                    <>
+                      <Route path="nodes" key="nodes">
+                        <Route path=":name" element={<NodePage />} />
+                        <Route
+                          path=":name/edit"
+                          key="edit"
+                          element={<AddEditNodePage />}
+                        />
+                      </Route>
 
-      <Routes>
-        <Route
-          path="/"
-          element={<Root />}
-          children={
-            <>
-              <Route path="nodes/:name" element={<NodePage />} />
-              <Route path="namespaces" element={<ListNamespacesPage />} />
-              <Route path="namespaces/:namespace" element={<NamespacePage />} />
-            </>
-          }
-        />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
-    </BrowserRouter>
+                      <Route path="/" element={<NamespacePage />} key="index" />
+                      <Route path="namespaces">
+                        <Route
+                          path=":namespace"
+                          element={<NamespacePage />}
+                          key="namespaces"
+                        />
+                      </Route>
+                      <Route
+                        path="create/source"
+                        key="register"
+                        element={<RegisterTablePage />}
+                      ></Route>
+                      <Route path="create/:nodeType">
+                        <Route
+                          path=":initialNamespace"
+                          key="create"
+                          element={<AddEditNodePage />}
+                        />
+                        <Route
+                          path=""
+                          key="create"
+                          element={<AddEditNodePage />}
+                        />
+                      </Route>
+                      <Route
+                        path="sql"
+                        key="sql"
+                        element={<SQLBuilderPage />}
+                      />
+                    </>
+                  }
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </DJClientContext.Provider>
+          </>
+        ) : (
+          <LoginPage />
+        )}
+      </BrowserRouter>
+    </CookiesProvider>
   );
 }

package/src/app/pages/AddEditNodePage/FormikSelect.jsx

@@ -0,0 +1,46 @@
+/**
+ * A React Select component for use in Formik forms.
+ */
+import { useField } from 'formik';
+import Select from 'react-select';
+
+export const FormikSelect = ({
+  selectOptions,
+  formikFieldName,
+  placeholder,
+  defaultValue,
+  style,
+  className = 'SelectInput',
+  isMulti = false,
+}) => {
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField(formikFieldName);
+  const { setValue } = helpers;
+
+  // handles both multi-select and single-select cases
+  const getValue = options => {
+    if (options) {
+      return isMulti ? options.map(option => option.value) : options.value;
+    } else {
+      return isMulti ? [] : '';
+    }
+  };
+
+  return (
+    <Select
+      className={className}
+      defaultValue={defaultValue}
+      options={selectOptions}
+      name={field.name}
+      placeholder={placeholder}
+      onBlur={field.onBlur}
+      onChange={selected => setValue(getValue(selected))}
+      styles={style}
+      isMulti={isMulti}
+    />
+  );
+};
+
+FormikSelect.defaultProps = {
+  placeholder: '',
+};

package/src/app/pages/AddEditNodePage/FullNameField.jsx

@@ -0,0 +1,37 @@
+/**
+ * A field for the full node name, which is generated based on the node's input
+ * namespace and display name.
+ */
+import { useField, useFormikContext } from 'formik';
+import { useEffect } from 'react';
+
+export const FullNameField = props => {
+  const { values, setFieldValue } = useFormikContext();
+  const [field, meta] = useField(props);
+
+  useEffect(() => {
+    // Set the value of the node's full name based on its namespace and display name
+    if (values.namespace && values.display_name) {
+      setFieldValue(
+        props.name,
+        `${values.namespace}.${values.display_name
+          .toLowerCase()
+          .replace(/ /g, '_')}` || '',
+      );
+    }
+  }, [setFieldValue, props.name, values]);
+
+  return (
+    <>
+      <input
+        {...props}
+        {...field}
+        className="FullNameField"
+        disabled="disabled"
+        id="FullName"
+        value={values.name || ''}
+      />
+      {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+    </>
+  );
+};

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

package/src/app/pages/AddEditNodePage/NodeQueryField.jsx

@@ -0,0 +1,89 @@
+/**
+ * SQL query input field, which consists of a CodeMirror SQL editor with autocompletion
+ * (for node names and columns) and syntax highlighting.
+ */
+import React from 'react';
+import { Field, useFormikContext } from 'formik';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+
+export const NodeQueryField = ({ djClient, value }) => {
+  const [schema, setSchema] = React.useState([]);
+  const formik = useFormikContext();
+  const sqlExt = langs.sql({ schema: schema });
+
+  const initialAutocomplete = async context => {
+    // Based on the parsed prefix, we load node names with that prefix
+    // into the autocomplete schema. At this stage we don't load the columns
+    // to save on unnecessary calls
+    const word = context.matchBefore(/[\.\w]*/);
+    const matches = await djClient.nodes(word.text);
+    matches.forEach(nodeName => {
+      if (schema[nodeName] === undefined) {
+        schema[nodeName] = [];
+        setSchema(schema);
+      }
+    });
+  };
+
+  const updateFormik = val => {
+    formik.setFieldValue('query', val);
+  };
+
+  const updateAutocomplete = async (value, _) => {
+    // If a particular node has been chosen, load the columns of that node into
+    // the autocomplete schema for column-level autocompletion
+    for (var nodeName in schema) {
+      if (
+        value.includes(nodeName) &&
+        (!schema.hasOwnProperty(nodeName) ||
+          (schema.hasOwnProperty(nodeName) && schema[nodeName].length === 0))
+      ) {
+        const nodeDetails = await djClient.node(nodeName);
+        schema[nodeName] = nodeDetails.columns.map(col => col.name);
+        setSchema(schema);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Field
+        type="textarea"
+        style={{ display: 'none' }}
+        as="textarea"
+        name="query"
+        id="Query"
+      />
+      <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+        <CodeMirror
+          id={'query'}
+          name={'query'}
+          extensions={[
+            sqlExt,
+            sqlExt.language.data.of({
+              autocomplete: initialAutocomplete,
+            }),
+          ]}
+          value={value}
+          options={{
+            theme: 'default',
+            lineNumbers: true,
+          }}
+          width="100%"
+          height="400px"
+          style={{
+            margin: '0 0 23px 0',
+            flex: 1,
+            fontSize: '150%',
+            textAlign: 'left',
+          }}
+          onChange={(value, viewUpdate) => {
+            updateFormik(value);
+            updateAutocomplete(value, viewUpdate);
+          }}
+        />
+      </div>
+    </>
+  );
+};

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import {
+  initializeMockDJClient,
+  renderCreateNode,
+  renderEditNode,
+  testElement,
+} from './index.test';
+import { mocks } from '../../../../mocks/mockNodes';
+
+describe('AddEditNodePage submission failed', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  it('for creating a node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
+      status: 500,
+      json: { message: 'Some columns in the primary key [] were not found' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Some Test Metric',
+    );
+    await userEvent.type(screen.getByLabelText('Query'), 'SELECT * FROM test');
+    await userEvent.click(screen.getByText('Create dimension'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
+        'dimension',
+        'default.some_test_metric',
+        'Some Test Metric',
+        '',
+        'SELECT * FROM test',
+        'draft',
+        'default',
+        null,
+      );
+      expect(
+        screen.getByText(/Some columns in the primary key \[] were not found/),
+      ).toBeInTheDocument();
+    });
+
+    // After failed creation, it should return a failure message
+    expect(container.getElementsByClassName('alert')).toMatchSnapshot();
+  }, 60000);
+
+  it('for editing a node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
+      status: 500,
+      json: { message: 'Update failed' },
+    });
+
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await userEvent.type(screen.getByLabelText('Display Name'), '!!!');
+    await userEvent.type(screen.getByLabelText('Description'), '!!!');
+    await userEvent.click(screen.getByText('Save'));
+    await waitFor(async () => {
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
+      expect(await screen.getByText('Update failed')).toBeInTheDocument();
+    });
+  }, 60000);
+});

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import {
+  initializeMockDJClient,
+  renderCreateNode,
+  renderEditNode,
+  testElement,
+} from './index.test';
+import { mocks } from '../../../../mocks/mockNodes';
+
+describe('AddEditNodePage submission succeeded', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  it('for creating a node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
+      status: 500,
+      json: { message: 'Some columns in the primary key [] were not found' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Some Test Metric',
+    );
+    await userEvent.type(screen.getByLabelText('Query'), 'SELECT * FROM test');
+    await userEvent.click(screen.getByText('Create dimension'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
+        'dimension',
+        'default.some_test_metric',
+        'Some Test Metric',
+        '',
+        'SELECT * FROM test',
+        'draft',
+        'default',
+        null,
+      );
+      expect(
+        screen.getByText(/Some columns in the primary key \[] were not found/),
+      ).toBeInTheDocument();
+    });
+
+    // After failed creation, it should return a failure message
+    expect(container.getElementsByClassName('alert')).toMatchSnapshot();
+  }, 60000);
+
+  it('for editing a node', async () => {
+    const mockDjClient = initializeMockDJClient();
+
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    mockDjClient.DataJunctionAPI.patchNode = jest.fn();
+    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
+      status: 201,
+      json: { name: 'default.num_repair_orders', type: 'metric' },
+    });
+
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await userEvent.type(screen.getByLabelText('Display Name'), '!!!');
+    await userEvent.type(screen.getByLabelText('Description'), '!!!');
+    await userEvent.click(screen.getByText('Save'));
+
+    await waitFor(async () => {
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledWith(
+        'default.num_repair_orders',
+        'Default: Num Repair Orders!!!',
+        'Number of repair orders!!!',
+        'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
+        'published',
+        ['repair_order_id', 'country'],
+      );
+      expect(
+        await screen.getByDisplayValue('repair_order_id, country'),
+      ).toBeInTheDocument();
+      expect(
+        await screen.getByText(/Successfully updated metric node/),
+      ).toBeInTheDocument();
+    });
+  }, 1000000);
+});

package/src/app/pages/AddEditNodePage/__tests__/FormikSelect.test.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { FormikSelect } from '../FormikSelect';
+
+describe('FormikSelect', () => {
+  const namespaces = [
+    { value: 'default', label: 'default' },
+    { value: 'basic', label: 'basic' },
+    { value: 'basic.one', label: 'basic.one' },
+    { value: 'basic.two', label: 'basic.two' },
+  ];
+
+  const singleSelect = () => {
+    const utils = render(
+      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={namespaces}
+            formikFieldName="namespace"
+            placeholder="Choose Namespace"
+            defaultValue={{
+              value: 'basic.one',
+              label: 'basic.one',
+            }}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    const selectInput = screen.getByRole('combobox');
+    return {
+      ...utils,
+      selectInput,
+    };
+  };
+
+  const multiSelect = () => {
+    const utils = render(
+      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={namespaces}
+            formikFieldName="namespace"
+            placeholder="Choose Namespace"
+            defaultValue={{
+              value: 'basic.one',
+              label: 'basic.one',
+            }}
+            isMulti={true}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    const selectInput = screen.getByRole('combobox');
+    return {
+      ...utils,
+      selectInput,
+    };
+  };
+
+  it('renders the single select component with provided options', () => {
+    singleSelect();
+    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    expect(screen.getByText('basic.one')).toBeInTheDocument();
+  });
+
+  it('renders the multi-select component with provided options', () => {
+    multiSelect();
+    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    expect(screen.getByText('basic.one')).toBeInTheDocument();
+  });
+});

package/src/app/pages/AddEditNodePage/__tests__/FullNameField.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { FullNameField } from '../FullNameField';
+
+describe('FullNameField', () => {
+  const setup = initialValues => {
+    return render(
+      <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+        <Form>
+          <FullNameField name="full_name" />
+        </Form>
+      </Formik>,
+    );
+  };
+
+  it('generates the full name based on namespace and display name', () => {
+    setup({ namespace: 'cats', display_name: 'Jasper the Cat' });
+    const fullNameInput = screen.getByRole('textbox');
+    waitFor(() => {
+      expect(fullNameInput.value).toBe('cats.jasper_the_cat');
+    });
+  });
+
+  it('does not set the full name if namespace or display name is missing', () => {
+    setup({ namespace: '', display_name: '' });
+
+    const fullNameInput = screen.getByRole('textbox');
+    expect(fullNameInput.value).toBe('');
+  });
+});

package/src/app/pages/AddEditNodePage/__tests__/NodeQueryField.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { NodeQueryField } from '../NodeQueryField';
+
+describe('NodeQueryField', () => {
+  const mockDjClient = {
+    nodes: jest.fn(),
+    node: jest.fn(),
+  };
+  const renderWithFormik = (djClient = mockDjClient) => {
+    return render(
+      <Formik initialValues={{ query: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <NodeQueryField djClient={djClient} />
+        </Form>
+      </Formik>,
+    );
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWithFormik();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormFailed.test.jsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;
+
+exports[`AddEditNodePage submission failed for creating a node 1`] = `
+HTMLCollection [
+  <div
+    class="message alert"
+  >
+    <svg
+      height="2em"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="2em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        alert_fill
+      </title>
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        id="page-1"
+        stroke="none"
+        stroke-width="1"
+      >
+        <g
+          fill-rule="nonzero"
+          id="System"
+          transform="translate(-48.000000, -48.000000)"
+        >
+          <g
+            id="alert_fill"
+            transform="translate(48.000000, 48.000000)"
+          >
+            <path
+              d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
+              fill-rule="nonzero"
+              id="MingCute"
+            />
+            <path
+              d="M13.299,3.1477 L21.933,18.1022 C22.5103,19.1022 21.7887,20.3522 20.634,20.3522 L3.36601,20.3522 C2.21131,20.3522 1.48962,19.1022 2.06697,18.1022 L10.7009,3.14771 C11.2783,2.14771 12.7217,2.1477 13.299,3.1477 Z M12,15 C11.4477,15 11,15.4477 11,16 C11,16.5523 11.4477,17 12,17 C12.5523,17 13,16.5523 13,16 C13,15.4477 12.5523,15 12,15 Z M12,8 C11.48715,8 11.0644908,8.38604429 11.0067275,8.88337975 L11,9 L11,13 C11,13.5523 11.4477,14 12,14 C12.51285,14 12.9355092,13.613973 12.9932725,13.1166239 L13,13 L13,9 C13,8.44772 12.5523,8 12,8 Z"
+              fill="#09244B"
+              id="shape"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+    Some columns in the primary key [] were not found
+  </div>,
+]
+`;