datajunction-ui 0.0.1-rc.24 → 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/EditColumnPopover.jsx

@@ -1,4 +1,4 @@
-import {useContext, useEffect, useRef, 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';

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>

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

@@ -13,7 +13,11 @@ foundation.hljs['padding'] = '2rem';
 export default function NodeInfoTab({ node }) {
   const [compiledSQL, setCompiledSQL] = useState('');
   const [checked, setChecked] = useState(false);
-  const nodeTags = node?.tags.map(tag => <div>{tag}</div>);
+  const nodeTags = node?.tags.map(tag => (
+    <div className={'badge tag_value'}>
+      <a href={`/tags/${tag.name}`}>{tag.display_name}</a>
+    </div>
+  ));
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   useEffect(() => {
     const fetchData = async () => {

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -70,6 +70,7 @@ describe('<NodePage />', () => {
         {
           name: 'default_DOT_avg_repair_price',
           type: 'double',
+          display_name: 'Default DOT avg repair price',
           attributes: [],
           dimension: null,
         },
@@ -82,7 +83,7 @@ describe('<NodePage />', () => {
         },
       ],
       created_at: '2023-08-21T16:48:56.932162+00:00',
-      tags: [],
+      tags: [{ name: 'purpose', display_name: 'Purpose' }],
       primary_key: [],
       createNodeClientCode:
         'dj = DJBuilder(DJ_URL)\n\navg_repair_price = dj.create_metric(\n    description="Average repair price",\n    display_name="Default: Avg Repair Price",\n    name="default.avg_repair_price",\n    primary_key=[],\n    query="""SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n"""\n)',
@@ -303,13 +304,12 @@ describe('<NodePage />', () => {
         'v1.0',
       );
 
-      // expect(screen.getByRole('dialog', { name: 'Table' })).not.toBeInTheDocument();
       expect(
         screen.getByRole('dialog', { name: 'NodeStatus' }),
       ).toBeInTheDocument();
 
       expect(screen.getByRole('dialog', { name: 'Tags' })).toHaveTextContent(
-        '',
+        'Purpose',
       );
 
       expect(
@@ -416,6 +416,9 @@ describe('<NodePage />', () => {
       expect(
         screen.getByRole('columnheader', { name: 'ColumnName' }),
       ).toHaveTextContent('default_DOT_avg_repair_price');
+      expect(
+        screen.getByRole('columnheader', { name: 'ColumnDisplayName' }),
+      ).toHaveTextContent('Default DOT avg repair price');
       expect(
         screen.getByRole('columnheader', { name: 'ColumnType' }),
       ).toHaveTextContent('double');

package/src/app/pages/RegisterTablePage/__tests__/__snapshots__/RegisterTablePage.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`<RegisterTablePage /> registers a table correctly 1`] = `
 HTMLCollection [
   <div
     class="message success"
+    data-testid="success"
   >
     <svg
       class="bi bi-check-circle-fill"

package/src/app/pages/Root/index.tsx

@@ -59,7 +59,7 @@ export function Root() {
         ) : (
           <span className="menu-link">
             <span className="menu-title">
-              <button onClick={handleLogout}>Logout</button>
+              <a onClick={handleLogout}>Logout</a>
             </span>
           </span>
         )}

package/src/app/pages/TagPage/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 TagPage = () => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.TagPage,
+    {
+      fallback: <div></div>,
+    },
+  )();
+};