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

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

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

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import '../../../styles/login.css';
+import logo from '../Root/assets/dj-logo.png';
+import GitHubLoginButton from './assets/sign-in-with-github.png';
+
+export function LoginPage() {
+  const [, setError] = useState('');
+  const githubLoginURL = new URL('/github/login/', process.env.REACT_APP_DJ_URL)
+    .href;
+
+  const handleBasicLogin = async ({ username, password }) => {
+    const data = new FormData();
+    data.append('username', username);
+    data.append('password', password);
+    await fetch(`${process.env.REACT_APP_DJ_URL}/basic/login/`, {
+      method: 'POST',
+      body: data,
+      credentials: 'include',
+    }).catch(error => {
+      setError(error ? JSON.stringify(error) : '');
+    });
+    window.location.reload();
+  };
+
+  return (
+    <div className="container">
+      <div className="login">
+        <center>
+          <Formik
+            initialValues={{ username: '', password: '' }}
+            validate={values => {
+              const errors = {};
+              if (!values.username) {
+                errors.username = 'Required';
+              }
+              if (!values.password) {
+                errors.password = 'Required';
+              }
+              return errors;
+            }}
+            onSubmit={(values, { setSubmitting }) => {
+              setTimeout(() => {
+                handleBasicLogin(values);
+                setSubmitting(false);
+              }, 400);
+            }}
+          >
+            {({ isSubmitting }) => (
+              <Form>
+                <div className="logo-title">
+                  <img src={logo} alt="DJ Logo" width="75px" height="75px" />
+                  <h2>DataJunction</h2>
+                </div>
+                <div className="inputContainer">
+                  <ErrorMessage name="username" component="span" />
+                  <Field type="text" name="username" placeholder="Username" />
+                </div>
+                <div>
+                  <ErrorMessage name="password" component="span" />
+                  <Field
+                    type="password"
+                    name="password"
+                    placeholder="Password"
+                  />
+                </div>
+                <button type="submit" disabled={isSubmitting}>
+                  Login
+                </button>
+                {process.env.REACT_ENABLE_GITHUB_OAUTH === 'true' ? (
+                  <div>
+                    <a href={githubLoginURL}>
+                      <img
+                        src={GitHubLoginButton}
+                        alt="Sign in with GitHub"
+                        width="200px"
+                      />
+                    </a>
+                  </div>
+                ) : (
+                  ''
+                )}
+              </Form>
+            )}
+          </Formik>
+        </center>
+      </div>
+    </div>
+  );
+}

package/src/app/pages/NamespacePage/__tests__/__snapshots__/index.test.tsx.snap

@@ -13,6 +13,54 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
       <h2>
         Explore
       </h2>
+      <span
+        className="menu-link"
+      >
+        <span
+          className="menu-title"
+        >
+          <div
+            className="dropdown"
+          >
+            <span
+              className="add_node"
+            >
+              + Add Node
+            </span>
+            <div
+              className="dropdown-content"
+            >
+              <a
+                href="/create/transform/undefined"
+              >
+                <div
+                  className="node_type__transform node_type_creation_heading"
+                >
+                  Transform
+                </div>
+              </a>
+              <a
+                href="/create/metric/undefined"
+              >
+                <div
+                  className="node_type__metric node_type_creation_heading"
+                >
+                  Metric
+                </div>
+              </a>
+              <a
+                href="/create/dimension/undefined"
+              >
+                <div
+                  className="node_type__dimension node_type_creation_heading"
+                >
+                  Dimension
+                </div>
+              </a>
+            </div>
+          </div>
+        </span>
+      </span>
       <div
         className="table-responsive"
       >
@@ -54,10 +102,10 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
                 Mode
               </th>
               <th>
-                Tags
+                Last Updated
               </th>
               <th>
-                Last Updated
+                Actions
               </th>
             </tr>
           </thead>

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

@@ -4,6 +4,8 @@ import { useContext, useEffect, useState } from 'react';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
+import EditIcon from '../../icons/EditIcon';
+import DeleteIcon from '../../icons/DeleteIcon';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -20,7 +22,7 @@ export function NamespacePage() {
     const hierarchy = [];
 
     for (const item of namespaceList) {
-      const namespaces = item.split('.');
+      const namespaces = item.namespace.split('.');
       let currentLevel = hierarchy;
 
       let path = '';
@@ -58,10 +60,7 @@ export function NamespacePage() {
       if (namespace === undefined && namespaceHierarchy !== undefined) {
         namespace = namespaceHierarchy.children[0].path;
       }
-      const djNodes = await djClient.namespace(namespace);
-      const nodes = djNodes.map(node => {
-        return djClient.node(node);
-      });
+      const nodes = await djClient.namespace(namespace);
       const foundNodes = await Promise.all(nodes);
       setState({
         namespace: namespace,
@@ -100,14 +99,19 @@ export function NamespacePage() {
       <td>
         <span className="status">{node.mode}</span>
       </td>
-      <td>
-        <span className="status">{node.tags}</span>
-      </td>
       <td>
         <span className="status">
           {new Date(node.updated_at).toLocaleString('en-us')}
         </span>
       </td>
+      <td>
+        <a href={`/nodes/${node?.name}/edit`} style={{ marginLeft: '0.5rem' }}>
+          <EditIcon />
+        </a>
+        <a href="#" style={{ marginLeft: '0.5rem' }}>
+          <DeleteIcon />
+        </a>
+      </td>
     </tr>
   ));
 
@@ -116,6 +120,31 @@ export function NamespacePage() {
       <div className="card">
         <div className="card-header">
           <h2>Explore</h2>
+
+          <span className="menu-link">
+            <span className="menu-title">
+              <div className="dropdown">
+                <span className="add_node">+ Add Node</span>
+                <div className="dropdown-content">
+                  <a href={`/create/transform/${namespace}`}>
+                    <div className="node_type__transform node_type_creation_heading">
+                      Transform
+                    </div>
+                  </a>
+                  <a href={`/create/metric/${namespace}`}>
+                    <div className="node_type__metric node_type_creation_heading">
+                      Metric
+                    </div>
+                  </a>
+                  <a href={`/create/dimension/${namespace}`}>
+                    <div className="node_type__dimension node_type_creation_heading">
+                      Dimension
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </span>
+          </span>
           <div className="table-responsive">
             <div className={`sidebar`}>
               <span
@@ -147,8 +176,8 @@ export function NamespacePage() {
                   <th>Type</th>
                   <th>Status</th>
                   <th>Mode</th>
-                  <th>Tags</th>
                   <th>Last Updated</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
               <tbody>{nodesList}</tbody>

package/src/app/pages/NodePage/NodeGraphTab.jsx

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { MarkerType } from 'reactflow';
 
 import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
-import DJNode from '../../components/djgraph/DJNode';
 import DJClientContext from '../../providers/djclient';
 import LayoutFlow from '../../components/djgraph/LayoutFlow';
 

package/src/app/pages/NodePage/NodeHistory.jsx

@@ -15,7 +15,6 @@ export default function NodeHistory({ node, djClient }) {
   }, [djClient, node]);
 
   const eventData = event => {
-    console.log('event', event);
     if (
       event.activity_type === 'set_attribute' &&
       event.entity_type === 'column_attribute'