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

package/.env

@@ -1,2 +1,3 @@
 REACT_APP_DJ_URL=http://localhost:8000
 REACT_USE_SSE=true
+REACT_ENABLE_GOOGLE_OAUTH=true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.23",
+  "version": "0.0.1-rc.25",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -98,7 +98,8 @@
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",
     "webpack-cli": "5.0.2",
-    "webpack-dev-server": "4.13.3"
+    "webpack-dev-server": "4.13.3",
+    "yup": "1.3.2"
   },
   "scripts": {
     "webpack-start": "webpack-dev-server --open",

package/src/app/components/Tab.jsx

@@ -12,7 +12,6 @@ export default class Tab extends Component {
               className="nav-link"
               tabIndex="0"
               onClick={onClick}
-              role="button"
               aria-label={this.props.name}
               aria-hidden="false"
             >

package/src/app/constants.js

@@ -1,2 +1,2 @@
-export const DJ_AUTH_COOKIE = '__dj';
-export const DJ_LOGGED_IN_FLAG_COOKIE = '__djlif';
+export const AUTH_COOKIE = '__dj';
+export const LOGGED_IN_FLAG_COOKIE = '__djlif';

package/src/app/icons/LoadingIcon.jsx

@@ -0,0 +1,14 @@
+import '../../styles/loading.css';
+
+export default function LoadingIcon() {
+  return (
+    <center>
+      <div class="lds-ring">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </center>
+  );
+}

package/src/app/index.tsx

@@ -10,7 +10,9 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
+import { TagPage } from './pages/TagPage/Loadable';
 import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
+import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { LoginPage } from './pages/LoginPage';
 import { RegisterTablePage } from './pages/RegisterTablePage';
@@ -21,7 +23,7 @@ import { CookiesProvider, useCookies } from 'react-cookie';
 import * as Constants from './constants';
 
 export function App() {
-  const [cookies] = useCookies([Constants.DJ_LOGGED_IN_FLAG_COOKIE]);
+  const [cookies] = useCookies([Constants.LOGGED_IN_FLAG_COOKIE]);
   return (
     <CookiesProvider>
       <BrowserRouter>
@@ -60,6 +62,11 @@ export function App() {
                           key="namespaces"
                         />
                       </Route>
+                      <Route
+                        path="create/tag"
+                        key="createtag"
+                        element={<AddEditTagPage />}
+                      ></Route>
                       <Route
                         path="create/source"
                         key="register"
@@ -82,6 +89,9 @@ export function App() {
                         key="sql"
                         element={<SQLBuilderPage />}
                       />
+                      <Route path="tags" key="tags">
+                        <Route path=":name" element={<TagPage />} />
+                      </Route>
                     </>
                   }
                 />

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
 import userEvent from '@testing-library/user-event';
 import {
@@ -23,6 +23,10 @@ describe('AddEditNodePage submission failed', () => {
       status: 500,
       json: { message: 'Some columns in the primary key [] were not found' },
     });
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
 
     const element = testElement(mockDjClient);
     const { container } = renderCreateNode(element);
@@ -63,6 +67,16 @@ describe('AddEditNodePage submission failed', () => {
       json: { message: 'Update failed' },
     });
 
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 404,
+      json: { message: 'Some tags were not found' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
     const element = testElement(mockDjClient);
     renderEditNode(element);
 
@@ -71,7 +85,19 @@ describe('AddEditNodePage submission failed', () => {
     await userEvent.click(screen.getByText('Save'));
     await waitFor(async () => {
       expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
-      expect(await screen.getByText('Update failed')).toBeInTheDocument();
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.num_repair_orders',
+        [{ display_name: 'Purpose', name: 'purpose' }],
+      );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toReturnWith({
+        json: { message: 'Some tags were not found' },
+        status: 404,
+      });
+
+      expect(
+        await screen.getByText('Update failed, Some tags were not found'),
+      ).toBeInTheDocument();
     });
   }, 60000);
 });

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
 import userEvent from '@testing-library/user-event';
 import {
@@ -24,10 +24,20 @@ describe('AddEditNodePage submission succeeded', () => {
   it('for creating a node', async () => {
     const mockDjClient = initializeMockDJClient();
     mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
-      status: 500,
-      json: { message: 'Some columns in the primary key [] were not found' },
+      status: 200,
+      json: { name: 'default.some_test_metric' },
     });
 
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
     const element = testElement(mockDjClient);
     const { container } = renderCreateNode(element);
 
@@ -50,13 +60,18 @@ describe('AddEditNodePage submission succeeded', () => {
         'default',
         null,
       );
-      expect(
-        screen.getByText(/Some columns in the primary key \[] were not found/),
-      ).toBeInTheDocument();
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.some_test_metric',
+        undefined,
+      );
+      expect(screen.getByText(/default.some_test_metric/)).toBeInTheDocument();
     });
 
-    // After failed creation, it should return a failure message
-    expect(container.getElementsByClassName('alert')).toMatchSnapshot();
+    // After successful creation, it should return a success message
+    expect(screen.getByTestId('success')).toHaveTextContent(
+      'Successfully created node default.some_test_metric',
+    );
   }, 60000);
 
   it('for editing a node', async () => {
@@ -69,13 +84,27 @@ describe('AddEditNodePage submission succeeded', () => {
       json: { name: 'default.num_repair_orders', type: 'metric' },
     });
 
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
     const element = testElement(mockDjClient);
-    renderEditNode(element);
+    const { getByTestId } = renderEditNode(element);
 
     await userEvent.type(screen.getByLabelText('Display Name'), '!!!');
     await userEvent.type(screen.getByLabelText('Description'), '!!!');
     await userEvent.click(screen.getByText('Save'));
 
+    const selectTags = getByTestId('select-tags');
+    await fireEvent.keyDown(selectTags.firstChild, { key: 'ArrowDown' });
+    await fireEvent.click(screen.getByText('Purpose'));
+
     await waitFor(async () => {
       expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledWith(
@@ -86,6 +115,12 @@ describe('AddEditNodePage submission succeeded', () => {
         'published',
         ['repair_order_id', 'country'],
       );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.num_repair_orders',
+        [{ display_name: 'Purpose', name: 'purpose' }],
+      );
+
       expect(
         await screen.getByDisplayValue('repair_order_id, country'),
       ).toBeInTheDocument();

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormFailed.test.jsx.snap

@@ -6,6 +6,7 @@ exports[`AddEditNodePage submission failed for creating a node 1`] = `
 HTMLCollection [
   <div
     class="message alert"
+    data-testid="failure"
   >
     <svg
       height="2em"

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormSuccess.test.jsx.snap

@@ -1,53 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;
-
-exports[`AddEditNodePage submission succeeded for creating a node 1`] = `
-HTMLCollection [
-  <div
-    class="message alert"
-  >
-    <svg
-      height="2em"
-      version="1.1"
-      viewBox="0 0 24 24"
-      width="2em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        alert_fill
-      </title>
-      <g
-        fill="none"
-        fill-rule="evenodd"
-        id="page-1"
-        stroke="none"
-        stroke-width="1"
-      >
-        <g
-          fill-rule="nonzero"
-          id="System"
-          transform="translate(-48.000000, -48.000000)"
-        >
-          <g
-            id="alert_fill"
-            transform="translate(48.000000, 48.000000)"
-          >
-            <path
-              d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
-              fill-rule="nonzero"
-              id="MingCute"
-            />
-            <path
-              d="M13.299,3.1477 L21.933,18.1022 C22.5103,19.1022 21.7887,20.3522 20.634,20.3522 L3.36601,20.3522 C2.21131,20.3522 1.48962,19.1022 2.06697,18.1022 L10.7009,3.14771 C11.2783,2.14771 12.7217,2.1477 13.299,3.1477 Z M12,15 C11.4477,15 11,15.4477 11,16 C11,16.5523 11.4477,17 12,17 C12.5523,17 13,16.5523 13,16 C13,15.4477 12.5523,15 12,15 Z M12,8 C11.48715,8 11.0644908,8.38604429 11.0067275,8.88337975 L11,9 L11,13 C11,13.5523 11.4477,14 12,14 C12.51285,14 12.9355092,13.613973 12.9932725,13.1166239 L13,13 L13,9 C13,8.44772 12.5523,8 12,8 Z"
-              fill="#09244B"
-              id="shape"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-    Some columns in the primary key [] were not found
-  </div>,
-]
-`;

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

@@ -51,6 +51,8 @@ export const initializeMockDJClient = () => {
       createNode: jest.fn(),
       patchNode: jest.fn(),
       node: jest.fn(),
+      tagsNode: jest.fn(),
+      listTags: jest.fn(),
     },
   };
 };

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

@@ -10,12 +10,11 @@ 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';
-import { displayMessageAfterSubmit } from '../../../utils/form';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
 
 class Action {
   static Add = new Action('add');
@@ -33,6 +32,7 @@ export function AddEditNodePage() {
   const action = name !== undefined ? Action.Edit : Action.Add;
 
   const [namespaces, setNamespaces] = useState([]);
+  const [tags, setTags] = useState([]);
 
   const initialValues = {
     name: action === Action.Edit ? name : '',
@@ -110,6 +110,7 @@ export function AddEditNodePage() {
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
     );
     if (status === 200 || status === 201) {
+      await djClient.tagsNode(values.name, values.tags);
       setStatus({
         success: (
           <>
@@ -134,7 +135,8 @@ export function AddEditNodePage() {
       values.mode,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
     );
-    if (status === 200 || status === 201) {
+    const tagsResponse = await djClient.tagsNode(values.name, values.tags);
+    if ((status === 200 || status === 201) && tagsResponse.status === 200) {
       setStatus({
         success: (
           <>
@@ -145,7 +147,7 @@ export function AddEditNodePage() {
       });
     } else {
       setStatus({
-        failure: `${json.message}`,
+        failure: `${json.message}, ${tagsResponse.json.message}`,
       });
     }
   };
@@ -186,6 +188,7 @@ export function AddEditNodePage() {
       'description',
       'primary_key',
       'mode',
+      'tags',
     ];
     fields.forEach(field => {
       if (
@@ -194,8 +197,9 @@ export function AddEditNodePage() {
         Array.isArray(data[field])
       ) {
         data[field] = data[field].join(', ');
+      } else {
+        setFieldValue(field, data[field] || '', false);
       }
-      setFieldValue(field, data[field] || '', false);
     });
   };
 
@@ -224,6 +228,20 @@ export function AddEditNodePage() {
     }
   }, [action, djClient, djClient.metrics]);
 
+  // Get list of tags
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(
+        tags.map(tag => ({
+          value: tag.name,
+          label: tag.display_name,
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.listTags]);
+
   return (
     <div className="mid">
       <NamespaceHeader namespace="" />
@@ -238,7 +256,31 @@ export function AddEditNodePage() {
             >
               {function Render({ isSubmitting, status, setFieldValue }) {
                 const [node, setNode] = useState([]);
+                const [selectTags, setSelectTags] = useState(null);
                 const [message, setMessage] = useState('');
+
+                const tagsInput = (
+                  <div
+                    className="TagsInput"
+                    style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
+                  >
+                    <ErrorMessage name="tags" component="span" />
+                    <label htmlFor="react-select-3-input">Tags</label>
+                    <span data-testid="select-tags">
+                      {action === Action.Edit ? (
+                        selectTags
+                      ) : (
+                        <FormikSelect
+                          isMulti={true}
+                          selectOptions={tags}
+                          formikFieldName="tags"
+                          placeholder="Choose Tags"
+                        />
+                      )}
+                    </span>
+                  </div>
+                );
+
                 useEffect(() => {
                   const fetchData = async () => {
                     if (action === Action.Edit) {
@@ -263,10 +305,21 @@ export function AddEditNodePage() {
                       // Update fields with existing data to prepare for edit
                       updateFieldsWithNodeData(data, setFieldValue);
                       setNode(data);
+                      setSelectTags(
+                        <FormikSelect
+                          isMulti={true}
+                          selectOptions={tags}
+                          formikFieldName="tags"
+                          placeholder="Choose Tags"
+                          defaultValue={data.tags.map(t => {
+                            return { value: t.name, label: t.display_name };
+                          })}
+                        />,
+                      );
                     }
                   };
                   fetchData().catch(console.error);
-                }, [setFieldValue]);
+                }, [setFieldValue, tags]);
                 return (
                   <Form>
                     {displayMessageAfterSubmit(status)}
@@ -317,6 +370,7 @@ export function AddEditNodePage() {
                             placeholder="Comma-separated list of PKs"
                           />
                         </div>
+                        {tagsInput}
                         <div className="NodeModeInput NodeCreationInput">
                           <ErrorMessage name="mode" component="span" />
                           <label htmlFor="Mode">Mode</label>

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

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { AddEditTagPage } from '../index';
+
+describe('<AddEditTagPage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        addTag: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderAddEditTagPage = element => {
+    return render(
+      <MemoryRouter initialEntries={['/create/tag']}>
+        <Routes>
+          <Route path="create/tag" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <AddEditTagPage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('adds a tag correctly', async () => {
+    mockDjClient.DataJunctionAPI.addTag.mockReturnValue({
+      status: 200,
+      json: {
+        name: 'amanita_muscaria',
+        display_name: 'Amanita Muscaria',
+        tag_type: 'fungi',
+        description: 'Fly agaric, is poisonous',
+      },
+    });
+
+    const element = testElement(mockDjClient);
+    renderAddEditTagPage(element);
+
+    await userEvent.type(screen.getByLabelText('Name'), 'amanita_muscaria');
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Amanita Muscaria',
+    );
+    await userEvent.type(screen.getByLabelText('Tag Type'), 'fungi');
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addTag).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.addTag).toBeCalledWith(
+        'amanita_muscaria',
+        'Amanita Muscaria',
+        'fungi',
+        undefined,
+      );
+      expect(screen.getByTestId('success')).toHaveTextContent(
+        'Successfully added tag Amanita Muscaria',
+      );
+    });
+  }, 60000);
+
+  it('fails to add a tag', async () => {
+    mockDjClient.DataJunctionAPI.addTag.mockReturnValue({
+      status: 500,
+      json: { message: 'Tag exists' },
+    });
+
+    const element = testElement(mockDjClient);
+    renderAddEditTagPage(element);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await userEvent.type(screen.getByLabelText('Name'), 'amanita_muscaria');
+    await userEvent.type(
+      screen.getByLabelText('Display Name'),
+      'Amanita Muscaria',
+    );
+    await userEvent.type(screen.getByLabelText('Tag Type'), 'fungi');
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addTag).toBeCalled();
+      expect(screen.getByTestId('failure')).toHaveTextContent(
+        'alert_fillTag exists',
+      );
+    });
+  }, 60000);
+});