datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -0,0 +1,20 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const LazyAddEditNodePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.AddEditNodePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};
+
+export const AddEditNodePage = props => {
+  return <LazyAddEditNodePage {...props} />;
+};

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

@@ -0,0 +1,75 @@
+/**
+ * Metric unit select component
+ */
+import { ErrorMessage, Field } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { labelize } from '../../../utils/form';
+
+export const MetricMetadataFields = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Metric metadata
+  const [metricUnits, setMetricUnits] = useState([]);
+  const [metricDirections, setMetricDirections] = useState([]);
+
+  // Get metric metadata values
+  useEffect(() => {
+    const fetchData = async () => {
+      const metadata = await djClient.listMetricMetadata();
+      setMetricDirections(metadata.directions);
+      setMetricUnits(metadata.units);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div
+      style={{
+        borderRadius: '8px',
+        padding: '10px 10px 20px 10px',
+        margin: '32px 0',
+        background: '#f9f9f9',
+        width: 'max-content',
+        display: 'flex',
+      }}
+    >
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="metric_direction" component="span" />
+        <label htmlFor="MetricDirection">Metric Direction</label>
+        <Field as="select" name="metric_direction" id="MetricDirection">
+          <option value=""></option>
+          {metricDirections.map(direction => (
+            <option value={direction} key={direction}>
+              {labelize(direction)}
+            </option>
+          ))}
+        </Field>
+      </div>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="metric_unit" component="span" />
+        <label htmlFor="MetricUnit">Metric Unit</label>
+        <Field as="select" name="metric_unit" id="MetricUnit">
+          <option value=""></option>
+          {metricUnits.map(unit => (
+            <option value={unit.name} key={unit.name}>
+              {unit.label}
+            </option>
+          ))}
+        </Field>
+      </div>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="significant_digits" component="span" />
+        <label htmlFor="SignificantDigits">Significant Digits</label>
+        <Field as="select" name="significant_digits" id="SignificantDigits">
+          <option value=""></option>
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => (
+            <option value={val} key={val}>
+              {val}
+            </option>
+          ))}
+        </Field>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+/**
+ * Metric aggregate expression input field, which consists of a CodeMirror SQL
+ * editor with autocompletion for node columns and syntax highlighting.
+ */
+import React from 'react';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+
+export const MetricQueryField = ({ djClient, value }) => {
+  const [schema, setSchema] = React.useState([]);
+  const formik = useFormikContext();
+  const sqlExt = langs.sql({ schema: schema });
+
+  const initialAutocomplete = async context => {
+    // Based on the selected upstream, we load the upstream node's columns
+    // into the autocomplete schema
+    const nodeName = formik.values['upstream_node'];
+    const nodeDetails = await djClient.node(nodeName);
+    nodeDetails.columns.forEach(col => {
+      schema[col.name] = [];
+    });
+    setSchema(schema);
+  };
+
+  const updateFormik = val => {
+    formik.setFieldValue('aggregate_expression', val);
+  };
+
+  return (
+    <div className="QueryInput MetricQueryInput NodeCreationInput">
+      <ErrorMessage name="query" component="span" />
+      <label htmlFor="Query">Aggregate Expression *</label>
+      <Field
+        type="textarea"
+        style={{ display: 'none' }}
+        as="textarea"
+        name="aggregate_expression"
+        id="Query"
+      />
+      <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+        <CodeMirror
+          id={'aggregate_expression'}
+          name={'aggregate_expression'}
+          extensions={[
+            sqlExt,
+            sqlExt.language.data.of({
+              autocomplete: initialAutocomplete,
+            }),
+          ]}
+          value={value}
+          options={{
+            theme: 'default',
+            lineNumbers: true,
+          }}
+          width="100%"
+          height="100px"
+          style={{
+            margin: '0 0 23px 0',
+            flex: 1,
+            fontSize: '150%',
+            textAlign: 'left',
+          }}
+          onChange={(value, viewUpdate) => {
+            updateFormik(value);
+          }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { ErrorMessage } from 'formik';
+import { FormikSelect } from './FormikSelect';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export const NamespaceField = ({ initialNamespace }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [namespaces, setNamespaces] = useState([]);
+
+  // Get namespaces, only necessary when creating a node
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      setNamespaces(
+        namespaces.map(m => ({
+          value: m['namespace'],
+          label: m['namespace'],
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div className="NamespaceInput">
+      <ErrorMessage name="namespace" component="span" />
+      <label htmlFor="namespace">Namespace *</label>
+      <FormikSelect
+        selectOptions={namespaces}
+        formikFieldName="namespace"
+        placeholder="Choose Namespace"
+        defaultValue={{
+          value: initialNamespace,
+          label: initialNamespace,
+        }}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const NodeModeField = () => {
+  return (
+    <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>
+  );
+};

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

@@ -0,0 +1,94 @@
+/**
+ * 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 { ErrorMessage, 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 (
+    <div className="QueryInput NodeCreationInput">
+      <ErrorMessage name="query" component="span" />
+      <label htmlFor="Query">Query *</label>
+      <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}
+          placeholder={
+            'SELECT\n\tprimary_key,\n\tmeasure1,\n\tmeasure2,\n\tforeign_key_for_dimension1,\n\tforeign_key_for_dimension2\nFROM source.source_node\nWHERE ...'
+          }
+          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>
+    </div>
+  );
+};

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

@@ -0,0 +1,54 @@
+/**
+ * Owner select field
+ */
+import { ErrorMessage } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const OwnersField = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [availableUsers, setAvailableUsers] = useState([]);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      const users = await djClient.users();
+      setAvailableUsers(
+        users.map(user => {
+          return {
+            value: user.username,
+            label: user.username,
+          };
+        }),
+      );
+      const current = await djClient.whoami();
+      setCurrentUser(current);
+    }
+    fetchData();
+  }, [djClient]);
+
+  return defaultValue || currentUser ? (
+    <div className="NodeCreationInput">
+      <ErrorMessage name="owners" component="span" />
+      <label htmlFor="Owners">Owners</label>
+      <span data-testid="select-owner">
+        <FormikSelect
+          className="MultiSelectInput"
+          defaultValue={
+            defaultValue || [
+              { value: currentUser.username, label: currentUser.username },
+            ]
+          }
+          selectOptions={availableUsers}
+          formikFieldName="owners"
+          placeholder="Select Owners"
+          isMulti={true}
+        />
+      </span>
+    </div>
+  ) : (
+    ''
+  );
+};

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

@@ -0,0 +1,54 @@
+/**
+ * Required dimensions select component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const RequiredDimensionsSelect = ({
+  defaultValue,
+  style,
+  className = 'MultiSelectInput',
+}) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // Select options, i.e., the available dimensions
+  const [selectOptions, setSelectOptions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (values.upstream_node) {
+        const data = await djClient.node(values.upstream_node);
+        setSelectOptions(
+          data.columns.map(col => {
+            return {
+              value: col.name,
+              label: col.name,
+            };
+          }),
+        );
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, values.upstream_node]);
+
+  return (
+    <div className="RequiredDimensionsInput CubeCreationInput">
+      <ErrorMessage name="required_dimensions" component="span" />
+      <label htmlFor="requiredDimensions">Required Dimensions</label>
+      <FormikSelect
+        className={className}
+        defaultValue={defaultValue}
+        selectOptions={selectOptions}
+        formikFieldName={'required_dimensions'}
+        placeholder={'Choose Required Dimensions'}
+        styles={style}
+        isMulti={true}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,47 @@
+/**
+ * Tags select field
+ */
+import { ErrorMessage } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const TagsField = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // All available tags
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(
+        tags.map(tag => ({
+          value: tag.name,
+          label: tag.display_name,
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div
+      className="TagsInput"
+      style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
+    >
+      <ErrorMessage name="tags" component="span" />
+      <label htmlFor="tags">Tags</label>
+      <span data-testid="select-tags">
+        <FormikSelect
+          isMulti={true}
+          selectOptions={tags}
+          formikFieldName="tags"
+          className="MultiSelectInput"
+          placeholder="Choose Tags"
+          defaultValue={defaultValue}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,49 @@
+/**
+ * Upstream node select field
+ */
+import { ErrorMessage } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const UpstreamNodeField = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // All available nodes
+  const [availableNodes, setAvailableNodes] = useState([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      const sources = await djClient.nodesWithType('source');
+      const transforms = await djClient.nodesWithType('transform');
+      const dimensions = await djClient.nodesWithType('dimension');
+      const nodes = sources.concat(transforms).concat(dimensions);
+      setAvailableNodes(
+        nodes.map(node => {
+          return {
+            value: node,
+            label: node,
+          };
+        }),
+      );
+    }
+    fetchData();
+  }, [djClient]);
+
+  return (
+    <div className="NodeCreationInput">
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Upstream Node *</label>
+      <span data-testid="select-upstream-node">
+        <FormikSelect
+          className="SelectInput"
+          defaultValue={defaultValue}
+          selectOptions={availableNodes}
+          formikFieldName="upstream_node"
+          placeholder="Select Upstream Node"
+          isMulti={false}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import { fireEvent, 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' },
+    });
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
+    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',
+        'published',
+        'default',
+        null,
+        undefined,
+        undefined,
+        undefined,
+        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.getNodeForEditing.mockReturnValue(
+      mocks.mockGetMetricNode,
+    );
+    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
+      status: 500,
+      json: { message: 'Update failed' },
+    });
+
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 404,
+      json: { message: 'Some tags were not found' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
+    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.tagsNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.num_repair_orders',
+        ['purpose'],
+      );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toReturnWith({
+        json: { message: 'Some tags were not found' },
+        status: 404,
+      });
+
+      expect(await screen.getByText('Update failed')).toBeInTheDocument();
+    });
+  }, 60000);
+});