datajunction-ui 0.0.1-rc.2 → 0.0.1-rc.20

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/Explorer.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import CollapsedIcon from '../../icons/CollapsedIcon';
+import ExpandedIcon from '../../icons/ExpandedIcon';
+
+const Explorer = ({ item = [], current }) => {
+  const [items, setItems] = useState([]);
+  const [expand, setExpand] = useState(false);
+  const [highlight, setHighlight] = useState(false);
+
+  useEffect(() => {
+    setItems(item);
+    setHighlight(current);
+    if (current === undefined || current?.startsWith(item.path)) {
+      setExpand(true);
+    } else setExpand(false);
+  }, [current, item]);
+
+  const handleClickOnParent = e => {
+    e.stopPropagation();
+    setExpand(prev => {
+      return !prev;
+    });
+  };
+
+  return (
+    <>
+      <div
+        className={`select-name ${
+          highlight === items.path ? 'select-name-highlight' : ''
+        }`}
+        onClick={handleClickOnParent}
+      >
+        {items.children && items.children.length > 0 ? (
+          <span>{!expand ? <CollapsedIcon /> : <ExpandedIcon />} </span>
+        ) : null}
+        <a href={`/namespaces/${items.path}`}>{items.namespace}</a>{' '}
+      </div>
+      {items.children
+        ? items.children.map((item, index) => (
+            <div
+              style={{
+                paddingLeft: '1.4rem',
+                marginLeft: '1rem',
+                borderLeft: '1px solid rgb(218 233 255)',
+              }}
+            >
+              <div className={`${expand ? '' : 'inactive'}`}>
+                <Explorer item={item} current={highlight} />
+              </div>
+            </div>
+          ))
+        : null}
+    </>
+  );
+};
+
+export default Explorer;

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

@@ -5,10 +5,12 @@
 import * as React from 'react';
 import { lazyLoad } from '../../../utils/loadable';
 
-export const NamespacePage = lazyLoad(
-  () => import('./index'),
-  module => module.NamespacePage,
-  {
-    fallback: <div></div>,
-  },
-);
+export const NamespacePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.NamespacePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

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

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { NamespacePage } from '../index';
+import React from 'react';
+
+const mockDjClient = {
+  namespaces: jest.fn(),
+  namespace: jest.fn(),
+};
+
+describe('NamespacePage', () => {
+  beforeEach(() => {
+    mockDjClient.namespaces.mockResolvedValue([
+      {
+        namespace: 'common.one',
+        num_nodes: 3,
+      },
+      {
+        namespace: 'common.one.a',
+        num_nodes: 6,
+      },
+      {
+        namespace: 'common.one.b',
+        num_nodes: 17,
+      },
+      {
+        namespace: 'common.one.c',
+        num_nodes: 64,
+      },
+      {
+        namespace: 'default',
+        num_nodes: 41,
+      },
+      {
+        namespace: 'default.fruits',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.fruits.citrus.lemons',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.vegetables',
+        num_nodes: 2,
+      },
+    ]);
+    mockDjClient.namespace.mockResolvedValue([
+      {
+        name: 'testNode',
+        display_name: 'Test Node',
+        type: 'transform',
+        mode: 'active',
+        updated_at: new Date(),
+      },
+    ]);
+  });
+
+  it('displays namespaces and renders nodes', async () => {
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaces).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+
+      // check that it displays namespaces
+      expect(screen.getByText('common')).toBeInTheDocument();
+      expect(screen.getByText('one')).toBeInTheDocument();
+      expect(screen.getByText('fruits')).toBeInTheDocument();
+      expect(screen.getByText('vegetables')).toBeInTheDocument();
+
+      // check that it renders nodes
+      expect(screen.getByText('Test Node')).toBeInTheDocument();
+
+      // click to open and close tab
+      fireEvent.click(screen.getByText('common'));
+      fireEvent.click(screen.getByText('common'));
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});

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

@@ -1,33 +1,66 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
-import NamespaceHeader from '../../components/NamespaceHeader';
+import { useContext, useEffect, useState } from 'react';
 import NodeStatus from '../NodePage/NodeStatus';
-
-export async function loader({ params }) {
-  const djNode = await DataJunctionAPI.node(params.name);
-  if (djNode.type === 'metric') {
-    const metricNode = await DataJunctionAPI.metric(params.name);
-    djNode.dimensions = metricNode.dimensions;
-  }
-  return djNode;
-}
+import DJClientContext from '../../providers/djclient';
+import Explorer from '../NamespacePage/Explorer';
+import EditIcon from '../../icons/EditIcon';
+import DeleteNode from '../../components/DeleteNode';
 
 export function NamespacePage() {
-  const { namespace } = useParams();
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  var { namespace } = useParams();
 
   const [state, setState] = useState({
     namespace: namespace,
     nodes: [],
   });
 
+  const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+
+  const createNamespaceHierarchy = namespaceList => {
+    const hierarchy = [];
+
+    for (const item of namespaceList) {
+      const namespaces = item.namespace.split('.');
+      let currentLevel = hierarchy;
+
+      let path = '';
+      for (const ns of namespaces) {
+        path += ns;
+
+        let existingNamespace = currentLevel.find(el => el.namespace === ns);
+        if (!existingNamespace) {
+          existingNamespace = {
+            namespace: ns,
+            children: [],
+            path: path,
+          };
+          currentLevel.push(existingNamespace);
+        }
+
+        currentLevel = existingNamespace.children;
+        path += '.';
+      }
+    }
+    return hierarchy;
+  };
+
   useEffect(() => {
     const fetchData = async () => {
-      const djNodes = await DataJunctionAPI.namespace(namespace);
-      const nodes = djNodes.map(node => {
-        return DataJunctionAPI.node(node);
-      });
+      const namespaces = await djClient.namespaces();
+      const hierarchy = createNamespaceHierarchy(namespaces);
+      setNamespaceHierarchy(hierarchy);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (namespace === undefined && namespaceHierarchy !== undefined) {
+        namespace = namespaceHierarchy.children[0].path;
+      }
+      const nodes = await djClient.namespace(namespace);
       const foundNodes = await Promise.all(nodes);
       setState({
         namespace: namespace,
@@ -35,16 +68,13 @@ export function NamespacePage() {
       });
     };
     fetchData().catch(console.error);
-  }, [namespace]);
+  }, [djClient, namespace, namespaceHierarchy]);
 
   const nodesList = state.nodes.map(node => (
     <tr>
-      <td>
-        <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
-      </td>
       <td>
         <a href={'/nodes/' + node.name} className="link-table">
-          {node.display_name}
+          {node.name}
         </a>
         <span
           className="rounded-pill badge bg-secondary-soft"
@@ -53,6 +83,11 @@ export function NamespacePage() {
           {node.version}
         </span>
       </td>
+      <td>
+        <a href={'/nodes/' + node.name} className="link-table">
+          {node.type !== 'source' ? node.display_name : ''}
+        </a>
+      </td>
       <td>
         <span className={'node_type__' + node.type + ' badge node_type'}>
           {node.type}
@@ -64,26 +99,91 @@ export function NamespacePage() {
       <td>
         <span className="status">{node.mode}</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>
+        <DeleteNode nodeName={node?.name} />
+      </td>
     </tr>
   ));
 
-  // @ts-ignore
   return (
     <div className="mid">
-      <NamespaceHeader namespace={namespace} />
       <div className="card">
         <div className="card-header">
-          <h2>Nodes</h2>
+          <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/source`}>
+                    <div className="node_type__source node_type_creation_heading">
+                      Register Table
+                    </div>
+                  </a>
+                  <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
+                style={{
+                  textTransform: 'uppercase',
+                  fontSize: '0.8125rem',
+                  fontWeight: '600',
+                  color: '#95aac9',
+                  padding: '1rem 1rem 1rem 0',
+                }}
+              >
+                Namespaces
+              </span>
+              {namespaceHierarchy
+                ? namespaceHierarchy.map(child => (
+                    <Explorer
+                      item={child}
+                      current={state.namespace}
+                      defaultExpand={true}
+                    />
+                  ))
+                : null}
+            </div>
             <table className="card-table table">
               <thead>
-                <th>Namespace</th>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Status</th>
-                <th>Mode</th>
+                <tr>
+                  <th>Name</th>
+                  <th>Display Name</th>
+                  <th>Type</th>
+                  <th>Status</th>
+                  <th>Mode</th>
+                  <th>Last Updated</th>
+                  <th>Actions</th>
+                </tr>
               </thead>
-              {nodesList}
+              <tbody>{nodesList}</tbody>
             </table>
           </div>
         </div>

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

@@ -0,0 +1,32 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useState } from 'react';
+import { nightOwl } from 'react-syntax-highlighter/src/styles/hljs';
+import PythonIcon from '../../icons/PythonIcon';
+
+export default function ClientCodePopover({ code }) {
+  const [codeAnchor, setCodeAnchor] = useState(false);
+
+  return (
+    <>
+      <button
+        className="code-button"
+        aria-label="code-button"
+        tabIndex="0"
+        height="45px"
+        onClick={() => setCodeAnchor(!codeAnchor)}
+      >
+        <PythonIcon />
+      </button>
+      <div
+        id={`node-create-code`}
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: codeAnchor === false ? 'none' : 'block' }}
+      >
+        <SyntaxHighlighter language="python" style={nightOwl}>
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function EditColumnPopover({ column, node, options, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+
+  const saveAttributes = async (
+    { node, column, attributes },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setAttributes(node, column, attributes);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    // window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumn"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            attributes: [],
+          }}
+          onSubmit={saveAttributes}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-attributes">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="attributes"
+                    placeholder="Select column attributes"
+                    className=""
+                    defaultValue={column.attributes.map(attr => {
+                      return {
+                        value: attr.attribute_type.name,
+                        label: labelize(attr.attribute_type.name),
+                      };
+                    })}
+                    isMulti={true}
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}