datajunction-ui 0.0.1-rc.23 → 0.0.1-rc.25

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

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

@@ -0,0 +1,116 @@
+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,144 @@
+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

@@ -33,11 +33,12 @@ describe('LoginPage', () => {
 
     await waitFor(() => {
       expect(getByText('DataJunction')).toBeInTheDocument();
-      expect(queryAllByText('Required').length).toEqual(2);
+      expect(getByText('Username is required')).toBeInTheDocument();
+      expect(getByText('Password is required')).toBeInTheDocument();
     });
   });
 
-  it('calls fetch with correct data on submit', async () => {
+  it('calls fetch with correct data on login', async () => {
     const username = 'testUser';
     const password = 'testPassword';
 
@@ -62,4 +63,35 @@ describe('LoginPage', () => {
       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

@@ -1,90 +1,17 @@
 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';
+import SignupForm from './SignupForm';
+import LoginForm from './LoginForm';
 
 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();
-  };
-
+  const [showSignup, setShowSignup] = useState(false);
   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 className="container login">
+      {showSignup ? (
+        <SignupForm setShowSignup={setShowSignup} />
+      ) : (
+        <LoginForm setShowSignup={setShowSignup} />
+      )}
     </div>
   );
 }

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

@@ -145,6 +145,11 @@ export function NamespacePage() {
                       Dimension
                     </div>
                   </a>
+                  <a href={`/create/tag`}>
+                    <div className="entity__tag node_type_creation_heading">
+                      Tag
+                    </div>
+                  </a>
                 </div>
               </div>
             </span>

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

@@ -1,10 +1,23 @@
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { useState } from 'react';
+import { useEffect, useRef, 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);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setCodeAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setCodeAnchor]);
 
   return (
     <>
@@ -22,6 +35,7 @@ export default function ClientCodePopover({ code }) {
         role="dialog"
         aria-label="client-code"
         style={{ display: codeAnchor === false ? 'none' : 'block' }}
+        ref={ref}
       >
         <SyntaxHighlighter language="python" style={nightOwl}>
           {code}

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

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
 import { Form, Formik } from 'formik';
@@ -9,6 +9,19 @@ 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 ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
 
   const saveAttributes = async (
     { node, column, attributes },
@@ -44,6 +57,7 @@ export default function EditColumnPopover({ column, node, options, onSubmit }) {
         role="dialog"
         aria-label="client-code"
         style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
       >
         <Formik
           initialValues={{

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

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
 import { Form, Formik } from 'formik';
@@ -14,6 +14,20 @@ export default function LinkDimensionPopover({
 }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
   const columnDimension = column.dimension;
 
   const handleSubmit = async (
@@ -73,6 +87,7 @@ export default function LinkDimensionPopover({
         role="dialog"
         aria-label="client-code"
         style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
       >
         <Formik
           initialValues={{

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

@@ -60,6 +60,16 @@ export default function NodeColumnTab({ node, djClient }) {
         >
           {col.name}
         </td>
+        <td>
+          <span
+            className=""
+            role="columnheader"
+            aria-label="ColumnDisplayName"
+            aria-hidden="false"
+          >
+            {col.display_name}
+          </span>
+        </td>
         <td>
           <span
             className="node_type__transform badge node_type"
@@ -111,6 +121,7 @@ export default function NodeColumnTab({ node, djClient }) {
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
           <tr>
             <th className="text-start">Column</th>
+            <th>Display Name</th>
             <th>Type</th>
             <th>Linked Dimension</th>
             <th>Attributes</th>