datajunction-ui 0.0.1-rc.9 → 0.0.2

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

@@ -0,0 +1,506 @@
+/**
+ * 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, 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 { useParams, useNavigate } from 'react-router-dom';
+import { FullNameField } from './FullNameField';
+import { MetricQueryField } from './MetricQueryField';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import { NodeQueryField } from './NodeQueryField';
+import { MetricMetadataFields } from './MetricMetadataFields';
+import { UpstreamNodeField } from './UpstreamNodeField';
+import { OwnersField } from './OwnersField';
+import { TagsField } from './TagsField';
+import { NamespaceField } from './NamespaceField';
+import { AlertMessage } from './AlertMessage';
+import { DisplayNameField } from './DisplayNameField';
+import { DescriptionField } from './DescriptionField';
+import { NodeModeField } from './NodeModeField';
+import { RequiredDimensionsSelect } from './RequiredDimensionsSelect';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { ColumnsSelect } from './ColumnsSelect';
+
+class Action {
+  static Add = new Action('add');
+  static Edit = new Action('edit');
+
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+export function AddEditNodePage({ extensions = {} }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const navigate = useNavigate();
+
+  let { nodeType, initialNamespace, name } = useParams();
+  const action = name !== undefined ? Action.Edit : Action.Add;
+
+  const initialValues = {
+    name: action === Action.Edit ? name : '',
+    namespace: action === Action.Add ? initialNamespace : '',
+    display_name: '',
+    query: '',
+    type: nodeType,
+    description: '',
+    primary_key: '',
+    mode: 'published',
+    owners: [],
+  };
+
+  const validator = values => {
+    const errors = {};
+    if (!values.name) {
+      errors.name = 'Required';
+    }
+    if (values.type !== 'metric' && !values.query) {
+      errors.query = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    if (action === Action.Add) {
+      await createNode(values, setStatus).then(_ => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        setSubmitting(false);
+      });
+    } else {
+      await patchNode(values, setStatus).then(_ => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        setSubmitting(false);
+      });
+    }
+  };
+  const submitHandlers = [handleSubmit];
+
+  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>Name</label> {name}
+      </div>
+      <div className="NodeNameInput NodeCreationInput">
+        <label>Type</label> {node.type}
+      </div>
+    </>
+  );
+
+  const primaryKeyToList = primaryKey => {
+    return primaryKey.map(columnName => columnName.trim());
+  };
+
+  const createNode = async (values, setStatus) => {
+    const { status, json } = await djClient.createNode(
+      nodeType,
+      values.name,
+      values.display_name,
+      values.description,
+      values.type === 'metric'
+        ? `SELECT ${values.aggregate_expression} \n FROM ${values.upstream_node}`
+        : values.query,
+      values.mode,
+      values.namespace,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
+      values.metric_direction,
+      values.metric_unit,
+      values.required_dimensions,
+    );
+    if (status === 200 || status === 201) {
+      if (values.tags) {
+        await djClient.tagsNode(values.name, values.tags);
+      }
+      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.type === 'metric'
+        ? `SELECT ${values.aggregate_expression} \n FROM ${values.upstream_node}`
+        : values.query,
+      values.mode,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
+      values.metric_direction,
+      values.metric_unit,
+      values.significant_digits,
+      values.required_dimensions,
+      values.owners,
+    );
+    const tagsResponse = await djClient.tagsNode(
+      values.name,
+      values.tags.map(tag => tag),
+    );
+    if ((status === 200 || status === 201) && tagsResponse.status === 200) {
+      setStatus({
+        success: (
+          <>
+            Successfully updated {json.type} node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>!
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  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 getExistingNodeData = async name => {
+    const node = await djClient.getNodeForEditing(name);
+    if (node === null) {
+      return { message: `Node ${name} does not exist` };
+    }
+    const baseData = {
+      name: node.name,
+      type: node.type.toLowerCase(),
+      display_name: node.current.displayName,
+      description: node.current.description,
+      primary_key: node.current.primaryKey,
+      query: node.current.query,
+      tags: node.tags,
+      mode: node.current.mode.toLowerCase(),
+      owners: node.owners,
+    };
+
+    if (node.type === 'METRIC') {
+      return {
+        ...baseData,
+        metric_direction: node.current.metricMetadata?.direction?.toLowerCase(),
+        metric_unit: node.current.metricMetadata?.unit?.name?.toLowerCase(),
+        significant_digits: node.current.metricMetadata?.significantDigits,
+        required_dimensions: node.current.requiredDimensions.map(
+          dim => dim.name,
+        ),
+        upstream_node: node.current.parents[0]?.name,
+        aggregate_expression: node.current.metricMetadata?.expression,
+      };
+    }
+    return baseData;
+  };
+
+  const runValidityChecks = (data, setNode, setMessage) => {
+    // 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);
+      if (data.type === 'cube') {
+        navigate(`/nodes/${data.name}/edit-cube`);
+      }
+      setMessage(`Node ${name} is of type ${data.type} and cannot be edited`);
+    }
+  };
+
+  const updateFieldsWithNodeData = (
+    data,
+    setFieldValue,
+    setNode,
+    setSelectTags,
+    setSelectPrimaryKey,
+    setSelectUpstreamNode,
+    setSelectRequiredDims,
+    setSelectOwners,
+  ) => {
+    // Update fields with existing data to prepare for edit
+    const fields = [
+      'display_name',
+      'query',
+      'type',
+      'description',
+      'primary_key',
+      'mode',
+      'tags',
+      'aggregate_expression',
+      'upstream_node',
+      'metric_unit',
+      'metric_direction',
+      'significant_digits',
+      'owners',
+    ];
+    fields.forEach(field => {
+      if (field === 'tags') {
+        setFieldValue(
+          field,
+          data[field].map(tag => tag.name),
+        );
+      } else if (field === 'owners') {
+        setFieldValue(
+          field,
+          data[field].map(owner => owner.username),
+        );
+      } else {
+        setFieldValue(field, data[field] || '', false);
+      }
+    });
+    setNode(data);
+
+    // For react-select fields, we have to explicitly set the entire
+    // field rather than just the values
+    setSelectTags(
+      <TagsField
+        defaultValue={data.tags.map(t => {
+          return { value: t.name, label: t.displayName };
+        })}
+      />,
+    );
+    setSelectPrimaryKey(
+      <ColumnsSelect
+        defaultValue={data.primary_key}
+        fieldName="primary_key"
+        label="Primary Key"
+        isMulti={true}
+      />,
+    );
+    if (data.required_dimensions) {
+      setSelectRequiredDims(
+        <RequiredDimensionsSelect
+          defaultValue={data.required_dimensions.map(dim => {
+            return { value: dim, label: dim };
+          })}
+        />,
+      );
+    }
+    setSelectUpstreamNode(
+      <UpstreamNodeField
+        defaultValue={{
+          value: data.upstream_node,
+          label: data.upstream_node,
+        }}
+      />,
+    );
+    if (data.owners) {
+      setSelectOwners(
+        <OwnersField
+          defaultValue={data.owners.map(owner => {
+            return { value: owner.username, label: owner.username };
+          })}
+        />,
+      );
+    }
+  };
+
+  return (
+    <div className="mid">
+      <NamespaceHeader
+        namespace={
+          initialNamespace
+            ? initialNamespace
+            : name
+            ? name.substring(0, name.lastIndexOf('.'))
+            : ''
+        }
+      />
+      <div className="card">
+        <div className="card-header">
+          {pageTitle}
+          <center>
+            <Formik
+              initialValues={initialValues}
+              validate={validator}
+              onSubmit={async (values, { setSubmitting, setStatus }) => {
+                try {
+                  for (const handler of submitHandlers) {
+                    await handler(values, { setSubmitting, setStatus });
+                  }
+                } catch (error) {
+                  console.error('Error in submission', error);
+                } finally {
+                  setSubmitting(false);
+                }
+              }}
+            >
+              {function Render({ isSubmitting, status, setFieldValue }) {
+                const [node, setNode] = useState([]);
+                const [selectPrimaryKey, setSelectPrimaryKey] = useState(null);
+                const [selectRequiredDims, setSelectRequiredDims] =
+                  useState(null);
+                const [selectUpstreamNode, setSelectUpstreamNode] =
+                  useState(null);
+                const [selectOwners, setSelectOwners] = useState(null);
+                const [selectTags, setSelectTags] = useState(null);
+                const [message, setMessage] = useState('');
+
+                useEffect(() => {
+                  const fetchData = async () => {
+                    if (action === Action.Edit) {
+                      const data = await getExistingNodeData(name);
+                      runValidityChecks(data, setNode, setMessage);
+                      updateFieldsWithNodeData(
+                        data,
+                        setFieldValue,
+                        setNode,
+                        setSelectTags,
+                        setSelectPrimaryKey,
+                        setSelectUpstreamNode,
+                        setSelectRequiredDims,
+                        setSelectOwners,
+                      );
+                    }
+                  };
+                  fetchData().catch(console.error);
+                }, [setFieldValue]);
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {action === Action.Edit && message ? (
+                      <AlertMessage message={message} />
+                    ) : (
+                      <>
+                        {action === Action.Add ? (
+                          <NamespaceField initialNamespace={initialNamespace} />
+                        ) : (
+                          staticFieldsInEdit(node)
+                        )}
+                        <DisplayNameField />
+                        {action === Action.Add ? fullNameInput : ''}
+                        <DescriptionField />
+                        <br />
+                        {nodeType === 'metric' || node?.type === 'metric' ? (
+                          action === Action.Edit ? (
+                            selectUpstreamNode
+                          ) : (
+                            <UpstreamNodeField />
+                          )
+                        ) : (
+                          ''
+                        )}
+                        <br />
+                        <br />
+                        {action === Action.Edit ? (
+                          selectOwners
+                        ) : (
+                          <OwnersField />
+                        )}
+                        <br />
+                        <br />
+                        {nodeType === 'metric' || node.type === 'metric' ? (
+                          <MetricQueryField
+                            djClient={djClient}
+                            value={
+                              node.aggregate_expression
+                                ? node.aggregate_expression
+                                : ''
+                            }
+                          />
+                        ) : (
+                          <NodeQueryField
+                            djClient={djClient}
+                            value={node.query ? node.query : ''}
+                          />
+                        )}
+                        <br />
+                        {nodeType === 'metric' || node.type === 'metric' ? (
+                          <MetricMetadataFields />
+                        ) : (
+                          ''
+                        )}
+                        {nodeType !== 'metric' && node.type !== 'metric' ? (
+                          action === Action.Edit ? (
+                            selectPrimaryKey
+                          ) : (
+                            <ColumnsSelect
+                              defaultValue={[]}
+                              fieldName="primary_key"
+                              label="Primary Key"
+                              isMulti={true}
+                            />
+                          )
+                        ) : action === Action.Edit ? (
+                          selectRequiredDims
+                        ) : (
+                          <RequiredDimensionsSelect />
+                        )}
+                        {Object.entries(extensions).map(
+                          ([key, ExtensionComponent]) => (
+                            <div key={key} className="mt-4 border-t pt-4">
+                              <ExtensionComponent
+                                node={node}
+                                action={action}
+                                registerSubmitHandler={(
+                                  onSubmit,
+                                  { prepend } = {},
+                                ) => {
+                                  if (!submitHandlers.includes(onSubmit)) {
+                                    if (prepend) {
+                                      submitHandlers.unshift(onSubmit);
+                                    } else {
+                                      submitHandlers.push(onSubmit);
+                                    }
+                                  }
+                                }}
+                              />
+                            </div>
+                          ),
+                        )}
+                        {action === Action.Edit ? selectTags : <TagsField />}
+                        <NodeModeField />
+
+                        <button type="submit" disabled={isSubmitting}>
+                          {isSubmitting ? (
+                            <LoadingIcon />
+                          ) : (
+                            (action === Action.Add ? 'Create ' : 'Save ') +
+                            (nodeType ? nodeType : '')
+                          )}
+                        </button>
+                      </>
+                    )}
+                  </Form>
+                );
+              }}
+            </Formik>
+          </center>
+        </div>
+      </div>
+    </div>
+  );
+}

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

package/src/app/pages/AddEditTagPage/__tests__/AddEditTagPage.test.jsx

@@ -0,0 +1,107 @@
+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 { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { AddEditTagPage } from '../index';
+
+describe('<AddEditTagPage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        addTag: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderAddEditTagPage = element => {
+    return render(
+      <MemoryRouter initialEntries={['/create/tag']}>
+        <Routes>
+          <Route path="create/tag" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <AddEditTagPage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('adds a tag correctly', async () => {
+    mockDjClient.DataJunctionAPI.addTag.mockReturnValue({
+      status: 200,
+      json: {
+        name: 'amanita_muscaria',
+        display_name: 'Amanita Muscaria',
+        tag_type: 'fungi',
+        description: 'Fly agaric, is poisonous',
+      },
+    });
+
+    const element = testElement(mockDjClient);
+    renderAddEditTagPage(element);
+
+    await userEvent.type(screen.getByLabelText('Name'), 'amanita_muscaria');
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Amanita Muscaria',
+    );
+    await userEvent.type(screen.getByLabelText('Tag Type'), 'fungi');
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addTag).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.addTag).toBeCalledWith(
+        'amanita_muscaria',
+        'Amanita Muscaria',
+        'fungi',
+        undefined,
+      );
+      expect(screen.getByTestId('success')).toHaveTextContent(
+        'Successfully added tag Amanita Muscaria',
+      );
+    });
+  }, 60000);
+
+  it('fails to add a tag', async () => {
+    mockDjClient.DataJunctionAPI.addTag.mockReturnValue({
+      status: 500,
+      json: { message: 'Tag exists' },
+    });
+
+    const element = testElement(mockDjClient);
+    renderAddEditTagPage(element);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await userEvent.type(screen.getByLabelText('Name'), 'amanita_muscaria');
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Amanita Muscaria',
+    );
+    await userEvent.type(screen.getByLabelText('Tag Type'), 'fungi');
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addTag).toBeCalled();
+      expect(screen.getByTestId('failure')).toHaveTextContent(
+        'alert_fillTag exists',
+      );
+    });
+  }, 60000);
+});