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

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

@@ -0,0 +1,353 @@
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import { AddEditNodePage } from '../index.jsx';
+import DJClientContext from '../../../providers/djclient';
+import userEvent from '@testing-library/user-event';
+
+fetchMock.enableMocks();
+
+describe('AddEditNodePage', () => {
+  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,
+            },
+          ];
+        },
+        createNode: jest.fn(),
+        patchNode: jest.fn(),
+        node: jest.fn(),
+      },
+    };
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <AddEditNodePage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  const mockMetricNode = {
+    namespace: 'default',
+    node_revision_id: 23,
+    node_id: 23,
+    type: 'metric',
+    name: 'default.num_repair_orders',
+    display_name: 'Default: Num Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: null,
+    table: null,
+    description: 'Number of repair orders',
+    query:
+      'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
+    availability: null,
+    columns: [
+      {
+        name: 'default_DOT_num_repair_orders',
+        type: 'bigint',
+        attributes: [],
+        dimension: null,
+      },
+    ],
+    updated_at: '2023-08-21T16:48:56.841704+00:00',
+    materializations: [],
+    parents: [
+      {
+        name: 'default.repair_orders',
+      },
+    ],
+    created_at: '2023-08-21T16:48:56.841631+00:00',
+    tags: [],
+  };
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderCreateNode = element => {
+    return render(
+      <MemoryRouter initialEntries={['/create/dimension/default']}>
+        <Routes>
+          <Route path="create/:nodeType/:initialNamespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const renderEditNode = element => {
+    return render(
+      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/edit']}>
+        <Routes>
+          <Route path="nodes/:name/edit" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  it('Create node page renders with the selected nodeType and namespace', () => {
+    const mockDjClient = initializeMockDJClient();
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    // The node type should be included in the page title
+    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(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 create node page user interaction and successful form submission', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
+      status: 200,
+      json: { name: 'default.special_forces_contractors', type: 'dimension' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    const query =
+      'select \n' +
+      '  C.contractor_id,\n' +
+      '  C.address, C.contact_title, C.contact_name, C.city from default.contractors C \n' +
+      "where C.contact_title = 'special forces agent'";
+
+    // Fill in display name
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Special Forces Contractors',
+    );
+
+    // After typing in a display name, the full name should be updated based on the display name
+    expect(
+      screen.getByDisplayValue('default.special_forces_contractors'),
+    ).toBeInTheDocument();
+
+    // Fill in the rest of the fields and submit
+    await userEvent.type(screen.getByLabelText('Query'), query);
+    await userEvent.type(
+      screen.getByLabelText('Description'),
+      'A curated list of special forces contractors',
+    );
+    await userEvent.type(screen.getByLabelText('Primary Key'), 'contractor_id');
+    await userEvent.click(screen.getByText('Create dimension'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
+        'dimension',
+        'default.special_forces_contractors',
+        'Special Forces Contractors',
+        'A curated list of special forces contractors',
+        query,
+        'draft',
+        'default',
+        ['contractor_id'],
+      );
+    });
+
+    // After successful creation, it should return a success message
+    expect(container.getElementsByClassName('success')).toMatchSnapshot();
+  }, 60000);
+
+  it('Verify create node page form failed submission', 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).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
+        'dimension',
+        'default.some_test_metric',
+        'Some Test Metric',
+        '',
+        'SELECT * FROM test',
+        'draft',
+        'default',
+        null,
+      );
+    });
+
+    // After failed creation, it should return a failure message
+    expect(container.getElementsByClassName('alert')).toMatchSnapshot();
+  }, 60000);
+
+  it('Verify edit node page form submission success', async () => {
+    const mockDjClient = initializeMockDJClient();
+
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(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(await screen.getByLabelText('Display Name'), '!!!');
+    await userEvent.type(await screen.getByLabelText('Description'), '!!!');
+    await userEvent.click(await 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',
+        null,
+      );
+    });
+  }, 60000);
+
+  it('Verify edit node page form submission failure displays alert', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mockMetricNode);
+    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
+      status: 500,
+      json: { message: 'Update failed' },
+    });
+
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await userEvent.type(await screen.getByLabelText('Display Name'), '!!!');
+    await userEvent.type(await screen.getByLabelText('Description'), '!!!');
+    await userEvent.click(await screen.getByText('Save'));
+
+    await waitFor(async () => {
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
+      expect(await screen.getByText('Update failed')).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,349 @@
+/**
+ * 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 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 ? values.primary_key.split(',') : 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 ? values.primary_key.split(',') : 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) {
+        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>
+  );
+}