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

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__/FormikSelect.test.jsx

@@ -0,0 +1,44 @@
+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 setup = () => {
+    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,
+    };
+  };
+
+  it('renders the select component with provided options', () => {
+    setup();
+    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,29 @@
+import React from 'react';
+import { render, screen } 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');
+    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__/index.test.jsx.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;
+
+exports[`AddEditNodePage Verify create node page form failed submission 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>,
+]
+`;
+
+exports[`AddEditNodePage Verify create node page user interaction and successful form submission 1`] = `
+HTMLCollection [
+  <div
+    class="message success"
+  >
+    <svg
+      class="bi bi-check-circle-fill"
+      fill="currentColor"
+      height="25"
+      viewBox="0 0 16 16"
+      width="25"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
+      />
+    </svg>
+    Successfully created 
+    dimension
+     node
+     
+    <a
+      href="/nodes/default.special_forces_contractors"
+    >
+      default.special_forces_contractors
+    </a>
+    !
+  </div>,
+]
+`;

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);
+});