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

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormSuccess.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 succeeded 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>,
+]
+`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;

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

@@ -0,0 +1,178 @@
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { screen, waitFor } from '@testing-library/react';
+import { render } from '../../../../setupTests';
+import fetchMock from 'jest-fetch-mock';
+import { AddEditNodePage } from '../index.jsx';
+import { mocks } from '../../../../mocks/mockNodes';
+import DJClientContext from '../../../providers/djclient';
+import userEvent from '@testing-library/user-event';
+
+fetchMock.enableMocks();
+
+export const initializeMockDJClient = () => {
+  return {
+    DataJunctionAPI: {
+      namespace: _ => {
+        return [
+          {
+            name: 'default.contractors',
+            display_name: 'Default: Contractors',
+            version: 'v1.0',
+            type: 'source',
+            status: 'valid',
+            mode: 'published',
+            updated_at: '2023-08-21T16:48:53.246914+00:00',
+          },
+          {
+            name: 'default.num_repair_orders',
+            display_name: 'Default: Num Repair Orders',
+            version: 'v1.0',
+            type: 'metric',
+            status: 'valid',
+            mode: 'published',
+            updated_at: '2023-08-21T16:48:56.841704+00:00',
+          },
+        ];
+      },
+      metrics: {},
+      namespaces: () => {
+        return [
+          {
+            namespace: 'default',
+            num_nodes: 33,
+          },
+          {
+            namespace: 'default123',
+            num_nodes: 0,
+          },
+        ];
+      },
+      createNode: jest.fn(),
+      patchNode: jest.fn(),
+      node: jest.fn(),
+    },
+  };
+};
+
+export const testElement = djClient => {
+  return (
+    <DJClientContext.Provider value={djClient}>
+      <AddEditNodePage />
+    </DJClientContext.Provider>
+  );
+};
+
+export const renderCreateNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/create/dimension/default']}>
+      <Routes>
+        <Route path="create/:nodeType/:initialNamespace" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
+export const renderEditNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/edit']}>
+      <Routes>
+        <Route path="nodes/:name/edit" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
+describe('AddEditNodePage', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  it('Create node page renders with the selected nodeType and namespace', async () => {
+    const mockDjClient = initializeMockDJClient();
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    // The node type should be included in the page title
+    await waitFor(() => {
+      expect(
+        container.getElementsByClassName('node_type__metric'),
+      ).toMatchSnapshot();
+
+      // The namespace should be set to the one provided in params
+      expect(screen.getByText('default')).toBeInTheDocument();
+    });
+  });
+
+  it('Edit node page renders with the selected node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await waitFor(() => {
+      // Should be an edit node page
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+
+      // The node name should be loaded onto the page
+      expect(screen.getByText('default.num_repair_orders')).toBeInTheDocument();
+
+      // The node type should be loaded onto the page
+      expect(screen.getByText('metric')).toBeInTheDocument();
+
+      // The description should be populated
+      expect(screen.getByText('Number of repair orders')).toBeInTheDocument();
+
+      // The query should be populated
+      expect(
+        screen.getByText(
+          'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('Verify edit page node not found', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node = jest.fn();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue({
+      message: 'A node with name `default.num_repair_orders` does not exist.',
+      errors: [],
+      warnings: [],
+    });
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.node).toBeCalledTimes(1);
+      expect(
+        screen.getByText('Node default.num_repair_orders does not exist!'),
+      ).toBeInTheDocument();
+    });
+  }, 60000);
+
+  it('Verify only transforms, metrics, and dimensions can be edited', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node = jest.fn();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue({
+      namespace: 'default',
+      type: 'source',
+      name: 'default.repair_orders',
+      display_name: 'Default: Repair Orders',
+    });
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.node).toBeCalledTimes(1);
+      expect(
+        screen.getByText(
+          'Node default.num_repair_orders is of type source and cannot be edited',
+        ),
+      ).toBeInTheDocument();
+    });
+  }, 60000);
+});

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

@@ -0,0 +1,357 @@
+/**
+ * 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 { 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 { useParams } from 'react-router-dom';
+import { FullNameField } from './FullNameField';
+import { FormikSelect } from './FormikSelect';
+import { NodeQueryField } from './NodeQueryField';
+
+class Action {
+  static Add = new Action('add');
+  static Edit = new Action('edit');
+
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+export function AddEditNodePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  let { nodeType, initialNamespace, name } = useParams();
+  const action = name !== undefined ? Action.Edit : Action.Add;
+
+  const [namespaces, setNamespaces] = useState([]);
+
+  const initialValues = {
+    name: action === Action.Edit ? name : '',
+    namespace: action === Action.Add ? initialNamespace : '',
+    display_name: '',
+    query: '',
+    node_type: '',
+    description: '',
+    primary_key: '',
+    mode: 'draft',
+  };
+
+  const validator = values => {
+    const errors = {};
+    if (!values.name) {
+      errors.name = 'Required';
+    }
+    if (!values.query) {
+      errors.query = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = (values, { setSubmitting, setStatus }) => {
+    if (action === Action.Add) {
+      setTimeout(() => {
+        createNode(values, setStatus);
+        setSubmitting(false);
+      }, 400);
+    } else {
+      setTimeout(() => {
+        patchNode(values, setStatus);
+        setSubmitting(false);
+      }, 400);
+    }
+    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 ? (
+      <div className="message alert">
+        <AlertIcon />
+        {status?.failure}
+      </div>
+    ) : (
+      ''
+    );
+  };
+
+  const pageTitle =
+    action === Action.Add ? (
+      <h2>
+        Create{' '}
+        <span className={`node_type__${nodeType} node_type_creation_heading`}>
+          {nodeType}
+        </span>
+      </h2>
+    ) : (
+      <h2>Edit</h2>
+    );
+
+  const staticFieldsInEdit = node => (
+    <>
+      <div className="NodeNameInput NodeCreationInput">
+        <label htmlFor="name">Name</label> {name}
+      </div>
+      <div className="NodeNameInput NodeCreationInput">
+        <label htmlFor="name">Type</label> {node.type}
+      </div>
+    </>
+  );
+
+  const primaryKeyToList = primaryKey => {
+    return primaryKey.split(',').map(columnName => columnName.trim());
+  };
+
+  const createNode = async (values, setStatus) => {
+    const { status, json } = await djClient.createNode(
+      nodeType,
+      values.name,
+      values.display_name,
+      values.description,
+      values.query,
+      values.mode,
+      values.namespace,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
+    );
+    if (status === 200 || status === 201) {
+      setStatus({
+        success: (
+          <>
+            Successfully created {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const patchNode = async (values, setStatus) => {
+    const { status, json } = await djClient.patchNode(
+      values.name,
+      values.display_name,
+      values.description,
+      values.query,
+      values.mode,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
+    );
+    if (status === 200 || status === 201) {
+      setStatus({
+        success: (
+          <>
+            Successfully updated {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const namespaceInput = (
+    <div className="NamespaceInput">
+      <ErrorMessage name="namespace" component="span" />
+      <label htmlFor="react-select-3-input">Namespace</label>
+      <FormikSelect
+        selectOptions={namespaces}
+        formikFieldName="namespace"
+        placeholder="Choose Namespace"
+        defaultValue={{
+          value: initialNamespace,
+          label: initialNamespace,
+        }}
+      />
+    </div>
+  );
+
+  const fullNameInput = (
+    <div className="FullNameInput NodeCreationInput">
+      <ErrorMessage name="name" component="span" />
+      <label htmlFor="FullName">Full Name</label>
+      <FullNameField type="text" name="name" />
+    </div>
+  );
+
+  const nodeCanBeEdited = nodeType => {
+    return new Set(['transform', 'metric', 'dimension']).has(nodeType);
+  };
+
+  const updateFieldsWithNodeData = (data, setFieldValue) => {
+    const fields = [
+      'display_name',
+      'query',
+      'type',
+      'description',
+      'primary_key',
+      'mode',
+    ];
+    fields.forEach(field => {
+      if (
+        field === 'primary_key' &&
+        data[field] !== undefined &&
+        Array.isArray(data[field])
+      ) {
+        data[field] = data[field].join(', ');
+      }
+      setFieldValue(field, data[field] || '', false);
+    });
+  };
+
+  const alertMessage = message => {
+    return (
+      <div className="message alert">
+        <AlertIcon />
+        {message}
+      </div>
+    );
+  };
+
+  // Get namespaces, only necessary when creating a node
+  useEffect(() => {
+    if (action === Action.Add) {
+      const fetchData = async () => {
+        const namespaces = await djClient.namespaces();
+        setNamespaces(
+          namespaces.map(m => ({
+            value: m['namespace'],
+            label: m['namespace'],
+          })),
+        );
+      };
+      fetchData().catch(console.error);
+    }
+  }, [action, djClient, djClient.metrics]);
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          {pageTitle}
+          <center>
+            <Formik
+              initialValues={initialValues}
+              validate={validator}
+              onSubmit={handleSubmit}
+            >
+              {function Render({ isSubmitting, status, setFieldValue }) {
+                const [node, setNode] = useState([]);
+                const [message, setMessage] = useState('');
+                useEffect(() => {
+                  const fetchData = async () => {
+                    if (action === Action.Edit) {
+                      const data = await djClient.node(name);
+
+                      // Check if node exists
+                      if (data.message !== undefined) {
+                        setNode(null);
+                        setMessage(`Node ${name} does not exist!`);
+                        return;
+                      }
+
+                      // Check if node type can be edited
+                      if (!nodeCanBeEdited(data.type)) {
+                        setNode(null);
+                        setMessage(
+                          `Node ${name} is of type ${data.type} and cannot be edited`,
+                        );
+                        return;
+                      }
+
+                      // Update fields with existing data to prepare for edit
+                      updateFieldsWithNodeData(data, setFieldValue);
+                      setNode(data);
+                    }
+                  };
+                  fetchData().catch(console.error);
+                }, [setFieldValue]);
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {action === Action.Edit && message ? (
+                      alertMessage(message)
+                    ) : (
+                      <>
+                        {action === Action.Add
+                          ? namespaceInput
+                          : staticFieldsInEdit(node)}
+                        <div className="DisplayNameInput NodeCreationInput">
+                          <ErrorMessage name="display_name" component="span" />
+                          <label htmlFor="displayName">Display Name</label>
+                          <Field
+                            type="text"
+                            name="display_name"
+                            id="displayName"
+                            placeholder="Human readable display name"
+                          />
+                        </div>
+                        {action === Action.Add ? fullNameInput : ''}
+                        <div className="DescriptionInput NodeCreationInput">
+                          <ErrorMessage name="description" component="span" />
+                          <label htmlFor="Description">Description</label>
+                          <Field
+                            type="textarea"
+                            as="textarea"
+                            name="description"
+                            id="Description"
+                            placeholder="Describe your node"
+                          />
+                        </div>
+                        <div className="QueryInput NodeCreationInput">
+                          <ErrorMessage name="query" component="span" />
+                          <label htmlFor="Query">Query</label>
+                          <NodeQueryField
+                            djClient={djClient}
+                            value={node.query ? node.query : ''}
+                          />
+                        </div>
+                        <div className="PrimaryKeyInput NodeCreationInput">
+                          <ErrorMessage name="primary_key" component="span" />
+                          <label htmlFor="primaryKey">Primary Key</label>
+                          <Field
+                            type="text"
+                            name="primary_key"
+                            id="primaryKey"
+                            placeholder="Comma-separated list of PKs"
+                          />
+                        </div>
+                        <div className="NodeModeInput NodeCreationInput">
+                          <ErrorMessage name="mode" component="span" />
+                          <label htmlFor="Mode">Mode</label>
+                          <Field as="select" name="mode" id="Mode">
+                            <option value="draft">Draft</option>
+                            <option value="published">Published</option>
+                          </Field>
+                        </div>
+                        <button type="submit" disabled={isSubmitting}>
+                          {action === Action.Add ? 'Create' : 'Save'} {nodeType}
+                        </button>
+                      </>
+                    )}
+                  </Form>
+                );
+              }}
+            </Formik>
+          </center>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { LoginPage } from '../index';
+
+describe('LoginPage', () => {
+  const original = window.location;
+
+  const reloadFn = () => {
+    window.location.reload();
+  };
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    });
+  });
+
+  beforeEach(() => {
+    fetch.resetMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays error messages when fields are empty and form is submitted', async () => {
+    const { getByText, queryAllByText } = render(<LoginPage />);
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(getByText('DataJunction')).toBeInTheDocument();
+      expect(queryAllByText('Required').length).toEqual(2);
+    });
+  });
+
+  it('calls fetch with correct data on submit', async () => {
+    const username = 'testUser';
+    const password = 'testPassword';
+    reloadFn();
+
+    const { getByText, getByPlaceholderText } = render(<LoginPage />);
+    fireEvent.change(getByPlaceholderText('Username'), {
+      target: { value: username },
+    });
+    fireEvent.change(getByPlaceholderText('Password'), {
+      target: { value: password },
+    });
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_DJ_URL}/basic/login/`,
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+          credentials: 'include',
+        }),
+      );
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+});