datajunction-ui 0.0.1-rc.8 → 0.0.2

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

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import '../../../styles/login.css';
+import LoadingIcon from '../../icons/LoadingIcon';
+import logo from '../Root/assets/dj-logo.png';
+import GitHubLoginButton from './assets/sign-in-with-github.png';
+import GoogleLoginButton from './assets/sign-in-with-google.png';
+import * as Yup from 'yup';
+
+const githubLoginURL = new URL('/github/login/', process.env.REACT_APP_DJ_URL);
+const googleLoginURL = new URL('/google/login/', process.env.REACT_APP_DJ_URL);
+
+const LoginSchema = Yup.object().shape({
+  username: Yup.string()
+    .min(2, 'Must be at least 2 characters')
+    .required('Username is required'),
+  password: Yup.string().required('Password is required'),
+});
+
+export default function LoginForm({ setShowSignup }) {
+  const [, setError] = useState('');
+
+  // Add the path that the user was trying to access in order to properly redirect after auth
+  githubLoginURL.searchParams.append('target', window.location.pathname);
+  googleLoginURL.searchParams.append('target', window.location.pathname);
+
+  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 (
+    <Formik
+      initialValues={{
+        username: '',
+        password: '',
+        target: window.location.pathname,
+      }}
+      validationSchema={LoginSchema}
+      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>
+            <Field type="text" name="username" placeholder="Username" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="username"
+              component="span"
+            />
+          </div>
+          <div>
+            <Field type="password" name="password" placeholder="Password" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="password"
+              component="span"
+            />
+          </div>
+          <div>
+            <p>
+              Don't have an account yet?{' '}
+              <a onClick={() => setShowSignup(true)}>Sign Up</a>
+            </p>
+          </div>
+          <button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? <LoadingIcon /> : 'Login'}
+          </button>
+          <div>
+            <p>Or</p>
+          </div>
+          {process.env.REACT_ENABLE_GITHUB_OAUTH === 'true' ? (
+            <div>
+              <a href={githubLoginURL.href}>
+                <img
+                  src={GitHubLoginButton}
+                  alt="Sign in with GitHub"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+          {process.env.REACT_ENABLE_GOOGLE_OAUTH === 'true' ? (
+            <div>
+              <a href={googleLoginURL.href}>
+                <img
+                  src={GoogleLoginButton}
+                  alt="Sign in with Google"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+}

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

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import '../../../styles/login.css';
+import logo from '../Root/assets/dj-logo.png';
+import LoadingIcon from '../../icons/LoadingIcon';
+import GitHubLoginButton from './assets/sign-in-with-github.png';
+import GoogleLoginButton from './assets/sign-in-with-google.png';
+import * as Yup from 'yup';
+
+const githubLoginURL = new URL('/github/login/', process.env.REACT_APP_DJ_URL);
+const googleLoginURL = new URL('/google/login/', process.env.REACT_APP_DJ_URL);
+
+const SignupSchema = Yup.object().shape({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+  signupUsername: Yup.string()
+    .min(3, 'Must be at least 2 characters')
+    .max(20, 'Must be less than 20 characters')
+    .required('Username is required'),
+  signupPassword: Yup.string().required('Password is required'),
+});
+
+export default function SignupForm({ setShowSignup }) {
+  const [, setError] = useState('');
+
+  // Add the path that the user was trying to access in order to properly redirect after auth
+  githubLoginURL.searchParams.append('target', window.location.pathname);
+  googleLoginURL.searchParams.append('target', window.location.pathname);
+
+  const handleBasicSignup = async ({
+    email,
+    signupUsername,
+    signupPassword,
+  }) => {
+    const data = new FormData();
+    data.append('email', email);
+    data.append('username', signupUsername);
+    data.append('password', signupPassword);
+    await fetch(`${process.env.REACT_APP_DJ_URL}/basic/user/`, {
+      method: 'POST',
+      body: data,
+      credentials: 'include',
+    }).catch(error => {
+      setError(error ? JSON.stringify(error) : '');
+    });
+    const loginData = new FormData();
+    loginData.append('username', signupUsername);
+    loginData.append('password', signupPassword);
+    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 (
+    <Formik
+      initialValues={{
+        email: '',
+        signupUsername: '',
+        signupPassword: '',
+        target: window.location.pathname,
+      }}
+      validationSchema={SignupSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          handleBasicSignup(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>
+            <Field type="text" name="email" placeholder="Email" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="email"
+              component="span"
+            />
+          </div>
+          <div>
+            <Field type="text" name="signupUsername" placeholder="Username" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="signupUsername"
+              component="span"
+            />
+          </div>
+          <div>
+            <Field
+              type="password"
+              name="signupPassword"
+              placeholder="Password"
+            />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="signupPassword"
+              component="span"
+            />
+          </div>
+          <div>
+            <p>
+              Have an account already?{' '}
+              <a onClick={() => setShowSignup(false)}>Login</a>
+            </p>
+          </div>
+          <button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? <LoadingIcon /> : 'Sign Up'}
+          </button>
+          <div>
+            <p>Or</p>
+          </div>
+          {process.env.REACT_ENABLE_GITHUB_OAUTH === 'true' ? (
+            <div>
+              <a href={githubLoginURL.href}>
+                <img
+                  src={GitHubLoginButton}
+                  alt="Sign in with GitHub"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+          {process.env.REACT_ENABLE_GOOGLE_OAUTH === 'true' ? (
+            <div>
+              <a href={googleLoginURL.href}>
+                <img
+                  src={GoogleLoginButton}
+                  alt="Sign in with Google"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+}

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { LoginPage } from '../index';
+
+describe('LoginPage', () => {
+  const original = window.location;
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    });
+  });
+
+  beforeEach(() => {
+    fetch.resetMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays error messages when fields are empty and form is submitted', async () => {
+    const { getByText, queryAllByText } = render(<LoginPage />);
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(getByText('DataJunction')).toBeInTheDocument();
+      expect(getByText('Username is required')).toBeInTheDocument();
+      expect(getByText('Password is required')).toBeInTheDocument();
+    });
+  });
+
+  it('calls fetch with correct data on login', async () => {
+    const username = 'testUser';
+    const password = 'testPassword';
+
+    const { getByText, getByPlaceholderText } = render(<LoginPage />);
+    fireEvent.change(getByPlaceholderText('Username'), {
+      target: { value: username },
+    });
+    fireEvent.change(getByPlaceholderText('Password'), {
+      target: { value: password },
+    });
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_DJ_URL}/basic/login/`,
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+          credentials: 'include',
+        }),
+      );
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('calls fetch with correct data on signup', async () => {
+    const email = 'testEmail@testEmail.com';
+    const username = 'testUser';
+    const password = 'testPassword';
+
+    const { getByText, getByPlaceholderText } = render(<LoginPage />);
+    fireEvent.click(getByText('Sign Up'));
+    fireEvent.change(getByPlaceholderText('Email'), {
+      target: { value: email },
+    });
+    fireEvent.change(getByPlaceholderText('Username'), {
+      target: { value: username },
+    });
+    fireEvent.change(getByPlaceholderText('Password'), {
+      target: { value: password },
+    });
+    fireEvent.click(getByText('Sign Up'));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_DJ_URL}/basic/user/`,
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+          credentials: 'include',
+        }),
+      );
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import '../../../styles/login.css';
+import SignupForm from './SignupForm';
+import LoginForm from './LoginForm';
+
+export function LoginPage() {
+  const [showSignup, setShowSignup] = useState(false);
+  return (
+    <div className="container login">
+      {showSignup ? (
+        <SignupForm setShowSignup={setShowSignup} />
+      ) : (
+        <LoginForm setShowSignup={setShowSignup} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import AddItemIcon from '../../icons/AddItemIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function AddNamespacePopover({ namespace }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+
+  const addNamespace = async ({ namespace }, { setSubmitting, setStatus }) => {
+    setSubmitting(false);
+    const response = await djClient.addNamespace(namespace);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="AddNamespaceTogglePopover"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <AddItemIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="AddNamespacePopover"
+        style={{
+          display: popoverAnchor === false ? 'none' : 'block',
+          width: '200px !important',
+          textTransform: 'none',
+          fontWeight: 'normal',
+        }}
+      >
+        <Formik
+          initialValues={{
+            namespace: namespace + '.',
+          }}
+          onSubmit={addNamespace}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="add-namespace">
+                  <ErrorMessage name="namespace" component="span" />
+                  <label htmlFor="namespace">Namespace</label>
+                  <Field
+                    type="text"
+                    name="namespace"
+                    id="namespace"
+                    placeholder="New namespace"
+                    default={namespace}
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveNamespace"
+                  aria-hidden="false"
+                  style={{ marginTop: '1rem' }}
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,61 @@
+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)',
+              }}
+              key={index}
+            >
+              <div
+                className={`${expand ? '' : 'inactive'}`}
+                key={`nested-${index}`}
+              >
+                <Explorer item={item} current={highlight} />
+              </div>
+            </div>
+          ))
+        : null}
+    </>
+  );
+};
+
+export default Explorer;

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

@@ -0,0 +1,21 @@
+import { components } from 'react-select';
+
+const Control = ({ children, ...props }) => {
+  const { label, onLabelClick } = props.selectProps;
+  const style = {
+    cursor: 'pointer',
+    padding: '10px 5px 10px 12px',
+    color: 'rgb(112, 110, 115)',
+  };
+
+  return (
+    <components.Control {...props}>
+      <span onMouseDown={onLabelClick} style={style}>
+        {label}
+      </span>
+      {children}
+    </components.Control>
+  );
+};
+
+export default Control;

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

@@ -0,0 +1,30 @@
+import Select from 'react-select';
+import Control from './FieldControl';
+
+export default function NodeTypeSelect({ onChange }) {
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-type"
+    >
+      <Select
+        name="node_type"
+        isClearable
+        label="Node Type"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        styles={{
+          control: styles => ({ ...styles, backgroundColor: 'white' }),
+        }}
+        options={[
+          { value: 'source', label: 'Source' },
+          { value: 'transform', label: 'Transform' },
+          { value: 'dimension', label: 'Dimension' },
+          { value: 'metric', label: 'Metric' },
+          { value: 'cube', label: 'Cube' },
+        ]}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Control from './FieldControl';
+
+import Select from 'react-select';
+
+export default function TagSelect({ onChange }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [retrieved, setRetrieved] = useState(false);
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(tags);
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '350px' }}
+      data-testid="select-tag"
+    >
+      <Select
+        name="tags"
+        isClearable
+        isMulti
+        label="Tags"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        options={tags?.map(tag => {
+          return {
+            value: tag.name,
+            label: tag.display_name,
+          };
+        })}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Control from './FieldControl';
+
+import Select from 'react-select';
+
+export default function UserSelect({ onChange, currentUser }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [retrieved, setRetrieved] = useState(false);
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const users = await djClient.users();
+      setUsers(users);
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '400px' }}
+      data-testid="select-user"
+    >
+      {retrieved ? (
+        <Select
+          name="edited_by"
+          isClearable
+          label="Edited By"
+          components={{ Control }}
+          onChange={e => onChange(e)}
+          defaultValue={{
+            value: currentUser,
+            label: currentUser,
+          }}
+          options={users?.map(user => {
+            return { value: user.username, label: user.username };
+          })}
+        />
+      ) : (
+        ''
+      )}
+    </span>
+  );
+}