datajunction-ui 0.0.1-a1

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

@@ -0,0 +1,396 @@
+/**
+ * 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 { useParams } from 'react-router-dom';
+import { FullNameField } from './FullNameField';
+import { FormikSelect } from './FormikSelect';
+import { NodeQueryField } from './NodeQueryField';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+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 [tags, setTags] = 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 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) {
+      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.query,
+      values.mode,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
+    );
+    const tagsResponse = await djClient.tagsNode(values.name, values.tags);
+    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}, ${tagsResponse.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',
+      'tags',
+    ];
+    fields.forEach(field => {
+      if (
+        field === 'primary_key' &&
+        data[field] !== undefined &&
+        Array.isArray(data[field])
+      ) {
+        data[field] = data[field].join(', ');
+      } else {
+        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]);
+
+  // Get list of tags
+  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, djClient.listTags]);
+
+  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 [selectTags, setSelectTags] = useState(null);
+                const [message, setMessage] = useState('');
+
+                const tagsInput = (
+                  <div
+                    className="TagsInput"
+                    style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
+                  >
+                    <ErrorMessage name="tags" component="span" />
+                    <label htmlFor="react-select-3-input">Tags</label>
+                    <span data-testid="select-tags">
+                      {action === Action.Edit ? (
+                        selectTags
+                      ) : (
+                        <FormikSelect
+                          isMulti={true}
+                          selectOptions={tags}
+                          formikFieldName="tags"
+                          placeholder="Choose Tags"
+                        />
+                      )}
+                    </span>
+                  </div>
+                );
+
+                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);
+                      setSelectTags(
+                        <FormikSelect
+                          isMulti={true}
+                          selectOptions={tags}
+                          formikFieldName="tags"
+                          placeholder="Choose Tags"
+                          defaultValue={data.tags.map(t => {
+                            return { value: t.name, label: t.display_name };
+                          })}
+                        />,
+                      );
+                    }
+                  };
+                  fetchData().catch(console.error);
+                }, [setFieldValue, tags]);
+                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>
+                        {tagsInput}
+                        <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/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);
+});

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

@@ -0,0 +1,132 @@
+/**
+ * Add or edit tags
+ */
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext } from 'react';
+import DJClientContext from '../../providers/djclient';
+import 'styles/node-creation.scss';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export function AddEditTagPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const initialValues = {
+    name: '',
+  };
+
+  const validator = values => {
+    const errors = {};
+    if (!values.name) {
+      errors.name = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    const { status, json } = await djClient.addTag(
+      values.name,
+      values.display_name,
+      values.tag_type,
+      values.description,
+    );
+    if (status === 200 || status === 201) {
+      setStatus({
+        success: (
+          <>
+            Successfully added tag{' '}
+            <a href={`/tags/${json.name}`}>{json.display_name}</a>.
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+    setSubmitting(false);
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h2>
+            Add{' '}
+            <span className={`node_type__source node_type_creation_heading`}>
+              Tag
+            </span>
+          </h2>
+          <center>
+            <Formik
+              initialValues={initialValues}
+              validate={validator}
+              onSubmit={handleSubmit}
+            >
+              {function Render({ isSubmitting, status }) {
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {
+                      <>
+                        <div className="NodeCreationInput">
+                          <ErrorMessage name="name" component="span" />
+                          <label htmlFor="name">Name</label>
+                          <Field
+                            type="text"
+                            name="name"
+                            id="name"
+                            placeholder="Tag Name"
+                          />
+                        </div>
+                        <br />
+                        <div className="FullNameInput NodeCreationInput">
+                          <ErrorMessage name="display_name" component="span" />
+                          <label htmlFor="display_name">Display Name</label>
+                          <Field
+                            type="text"
+                            name="display_name"
+                            id="display_name"
+                            placeholder="Display Name"
+                            class="FullNameField"
+                          />
+                        </div>
+                        <br />
+                        <div className="NodeCreationInput">
+                          <ErrorMessage name="tag_type" component="span" />
+                          <label htmlFor="tag_type">Tag Type</label>
+                          <Field
+                            type="text"
+                            name="tag_type"
+                            id="tag_type"
+                            placeholder="Tag Type"
+                          />
+                        </div>
+                        <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 the tag"
+                          />
+                        </div>
+                        <button type="submit" disabled={isSubmitting}>
+                          Add Tag
+                        </button>
+                      </>
+                    }
+                  </Form>
+                );
+              }}
+            </Formik>
+          </center>
+        </div>
+      </div>
+    </div>
+  );
+}