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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.21",
+  "version": "0.0.1-rc.23",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/DeleteNode.jsx

@@ -1,14 +1,11 @@
 import DJClientContext from '../providers/djclient';
-import ValidIcon from '../icons/ValidIcon';
-import AlertIcon from '../icons/AlertIcon';
 import * as React from 'react';
 import DeleteIcon from '../icons/DeleteIcon';
 import { Form, Formik } from 'formik';
 import { useContext } from 'react';
+import { displayMessageAfterSubmit } from '../../utils/form';
 
 export default function DeleteNode({ nodeName }) {
-  console.log('nodeName', nodeName);
-
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const deleteNode = async (values, { setSubmitting, setStatus }) => {
     const { status, json } = await djClient.deactivate(values.nodeName);
@@ -24,27 +21,6 @@ export default function DeleteNode({ nodeName }) {
     setSubmitting(false);
   };
 
-  const displayMessageAfterSubmit = status => {
-    return status?.success !== undefined ? (
-      <div className="message success">
-        <ValidIcon />
-        {status?.success}
-      </div>
-    ) : status?.failure !== undefined ? (
-      alertMessage(status?.failure)
-    ) : (
-      ''
-    );
-  };
-
-  const alertMessage = message => {
-    return (
-      <div className="message alert">
-        <AlertIcon />
-        {message}
-      </div>
-    );
-  };
   const initialValues = {
     nodeName: nodeName,
   };

package/src/app/components/__tests__/DeleteNode.test.jsx

@@ -0,0 +1,53 @@
+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 DJClientContext from '../../providers/djclient';
+import DeleteNode from '../DeleteNode';
+
+describe('<DeleteNode />', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderElement = djClient => {
+    return render(
+      <DJClientContext.Provider value={djClient}>
+        <DeleteNode nodeName="default.hard_hat" />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        deactivate: jest.fn(),
+      },
+    };
+  };
+
+  it('deletes a node when clicked', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 204,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
+        'default.hard_hat',
+      );
+    });
+    expect(
+      screen.getByText('Successfully deleted node default.hard_hat'),
+    ).toBeInTheDocument();
+  }, 60000);
+});

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

@@ -9,6 +9,10 @@ import {
   testElement,
 } from './index.test';
 import { mocks } from '../../../../mocks/mockNodes';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { AddEditNodePage } from '../index';
 
 describe('AddEditNodePage submission succeeded', () => {
   beforeEach(() => {

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

@@ -15,6 +15,7 @@ import { useParams } from 'react-router-dom';
 import { FullNameField } from './FullNameField';
 import { FormikSelect } from './FormikSelect';
 import { NodeQueryField } from './NodeQueryField';
+import { displayMessageAfterSubmit } from '../../../utils/form';
 
 class Action {
   static Add = new Action('add');
@@ -70,22 +71,6 @@ export function AddEditNodePage() {
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
   };
 
-  const displayMessageAfterSubmit = status => {
-    return status?.success !== undefined ? (
-      <div className="message success">
-        <ValidIcon />
-        {status?.success}
-      </div>
-    ) : status?.failure !== undefined ? (
-      <div className="message alert">
-        <AlertIcon />
-        {status?.failure}
-      </div>
-    ) : (
-      ''
-    );
-  };
-
   const pageTitle =
     action === Action.Add ? (
       <h2>

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

@@ -5,10 +5,6 @@ import { LoginPage } from '../index';
 describe('LoginPage', () => {
   const original = window.location;
 
-  const reloadFn = () => {
-    window.location.reload();
-  };
-
   beforeAll(() => {
     Object.defineProperty(window, 'location', {
       configurable: true,
@@ -44,7 +40,6 @@ describe('LoginPage', () => {
   it('calls fetch with correct data on submit', async () => {
     const username = 'testUser';
     const password = 'testPassword';
-    reloadFn();
 
     const { getByText, getByPlaceholderText } = render(<LoginPage />);
     fireEvent.change(getByPlaceholderText('Username'), {

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

@@ -6,7 +6,7 @@ import { FormikSelect } from '../AddEditNodePage/FormikSelect';
 import EditIcon from '../../icons/EditIcon';
 import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
 
-export default function AddNamespacePopover({ namespace, onSubmit }) {
+export default function AddNamespacePopover({ namespace }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [popoverAnchor, setPopoverAnchor] = useState(false);
 
@@ -20,7 +20,6 @@ export default function AddNamespacePopover({ namespace, onSubmit }) {
         failure: `${response.json.message}`,
       });
     }
-    onSubmit();
     window.location.reload();
   };
 

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

@@ -3,14 +3,37 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import DJClientContext from '../../../providers/djclient';
 import { NamespacePage } from '../index';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 
 const mockDjClient = {
   namespaces: jest.fn(),
   namespace: jest.fn(),
+  addNamespace: jest.fn(),
 };
 
 describe('NamespacePage', () => {
+  const original = window.location;
+
+  const reloadFn = () => {
+    window.location.reload();
+  };
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    });
+  });
+
   beforeEach(() => {
+    fetch.resetMocks();
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -56,7 +79,12 @@ describe('NamespacePage', () => {
     ]);
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('displays namespaces and renders nodes', async () => {
+    reloadFn();
     const element = (
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
         <NamespacePage />
@@ -92,4 +120,98 @@ describe('NamespacePage', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
+
+  it('can add new namespace via add namespace popover', async () => {
+    mockDjClient.addNamespace.mockReturnValue({
+      status: 201,
+      json: {},
+    });
+    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>,
+    );
+
+    // Find the button to toggle the add namespace popover
+    const addNamespaceToggle = screen.getByRole('button', {
+      name: 'AddNamespaceTogglePopover',
+    });
+    expect(addNamespaceToggle).toBeInTheDocument();
+
+    // Click the toggle and verify that the popover displays
+    fireEvent.click(addNamespaceToggle);
+    const addNamespacePopover = screen.getByRole('dialog', {
+      name: 'AddNamespacePopover',
+    });
+    expect(addNamespacePopover).toBeInTheDocument();
+
+    // Type in the new namespace
+    await userEvent.type(
+      screen.getByLabelText('Namespace'),
+      'some.random.namespace',
+    );
+
+    // Save
+    const saveNamespace = screen.getByRole('button', {
+      name: 'SaveNamespace',
+    });
+    await waitFor(() => {
+      fireEvent.click(saveNamespace);
+    });
+    expect(mockDjClient.addNamespace).toHaveBeenCalled();
+    expect(mockDjClient.addNamespace).toHaveBeenCalledWith(
+      'some.random.namespace',
+    );
+    expect(screen.getByText('Saved')).toBeInTheDocument();
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('can fail to add namespace', async () => {
+    mockDjClient.addNamespace.mockReturnValue({
+      status: 500,
+      json: { message: 'you failed' },
+    });
+    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>,
+    );
+
+    // Open the add namespace popover
+    const addNamespaceToggle = screen.getByRole('button', {
+      name: 'AddNamespaceTogglePopover',
+    });
+    fireEvent.click(addNamespaceToggle);
+
+    // Type in the new namespace
+    await userEvent.type(
+      screen.getByLabelText('Namespace'),
+      'some.random.namespace',
+    );
+
+    // Save
+    const saveNamespace = screen.getByRole('button', {
+      name: 'SaveNamespace',
+    });
+    await waitFor(() => {
+      fireEvent.click(saveNamespace);
+    });
+
+    // Should display failure alert
+    expect(screen.getByText('you failed')).toBeInTheDocument();
+  });
 });

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import { fireEvent, 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 { RegisterTablePage } from '../index';
+
+describe('<RegisterTablePage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        catalogs: jest.fn(),
+        registerTable: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+
+    mockDjClient.DataJunctionAPI.catalogs.mockReturnValue([
+      {
+        name: 'warehouse',
+        engines: [
+          {
+            name: 'duckdb',
+            version: '0.7.1',
+            uri: null,
+            dialect: null,
+          },
+        ],
+      },
+    ]);
+  });
+
+  const renderRegisterTable = element => {
+    return render(
+      <MemoryRouter initialEntries={['/create/source']}>
+        <Routes>
+          <Route path="create/source" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <RegisterTablePage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('registers a table correctly', async () => {
+    mockDjClient.DataJunctionAPI.registerTable.mockReturnValue({
+      status: 201,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { container, getByTestId } = renderRegisterTable(element);
+
+    const catalog = getByTestId('choose-catalog');
+    await waitFor(async () => {
+      fireEvent.keyDown(catalog.firstChild, { key: 'ArrowDown' });
+      fireEvent.click(screen.getByText('warehouse'));
+    });
+
+    await userEvent.type(screen.getByLabelText('Schema'), 'schema');
+    await userEvent.type(screen.getByLabelText('Table'), 'some_table');
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.registerTable).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.registerTable).toBeCalledWith(
+        'warehouse',
+        'schema',
+        'some_table',
+      );
+    });
+    expect(container.getElementsByClassName('message')).toMatchSnapshot();
+  }, 60000);
+
+  it('fails to register a table', async () => {
+    mockDjClient.DataJunctionAPI.registerTable.mockReturnValue({
+      status: 500,
+      json: { message: 'table not found' },
+    });
+
+    const element = testElement(mockDjClient);
+    const { getByTestId } = renderRegisterTable(element);
+
+    const catalog = getByTestId('choose-catalog');
+    await waitFor(async () => {
+      fireEvent.keyDown(catalog.firstChild, { key: 'ArrowDown' });
+      fireEvent.click(screen.getByText('warehouse'));
+    });
+
+    await userEvent.type(screen.getByLabelText('Schema'), 'schema');
+    await userEvent.type(screen.getByLabelText('Table'), 'some_table');
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByText('table not found')).toBeInTheDocument();
+  }, 60000);
+});

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

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RegisterTablePage /> registers a table correctly 1`] = `
+HTMLCollection [
+  <div
+    class="message success"
+  >
+    <svg
+      class="bi bi-check-circle-fill"
+      fill="currentColor"
+      height="25"
+      viewBox="0 0 16 16"
+      width="25"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
+      />
+    </svg>
+    Successfully registered source node
+     
+    <a
+      href="/nodes/source.warehouse.schema.some_table"
+    >
+      source.warehouse.schema.some_table
+    </a>
+    , which references table 
+    warehouse
+    .
+    schema
+    .
+    some_table
+    .
+  </div>,
+]
+`;

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

@@ -9,9 +9,8 @@ import NamespaceHeader from '../../components/NamespaceHeader';
 import React, { 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 { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import { displayMessageAfterSubmit } from '../../../utils/form';
 
 export function RegisterTablePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -71,28 +70,6 @@ export function RegisterTablePage() {
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
   };
 
-  const displayMessageAfterSubmit = status => {
-    return status?.success !== undefined ? (
-      <div className="message success">
-        <ValidIcon />
-        {status?.success}
-      </div>
-    ) : status?.failure !== undefined ? (
-      alertMessage(status?.failure)
-    ) : (
-      ''
-    );
-  };
-
-  const alertMessage = message => {
-    return (
-      <div className="message alert">
-        <AlertIcon />
-        {message}
-      </div>
-    );
-  };
-
   return (
     <div className="mid">
       <NamespaceHeader namespace="" />
@@ -110,7 +87,7 @@ export function RegisterTablePage() {
               validate={validator}
               onSubmit={handleSubmit}
             >
-              {function Render({ isSubmitting, status, setFieldValue }) {
+              {function Render({ isSubmitting, status }) {
                 return (
                   <Form>
                     {displayMessageAfterSubmit(status)}
@@ -119,12 +96,14 @@ export function RegisterTablePage() {
                         <div className="SourceCreationInput">
                           <ErrorMessage name="catalog" component="span" />
                           <label htmlFor="catalog">Catalog</label>
-                          <FormikSelect
-                            selectOptions={catalogs}
-                            formikFieldName="catalog"
-                            placeholder="Choose Catalog"
-                            defaultValue={catalogs[0]}
-                          />
+                          <span data-testid="choose-catalog">
+                            <FormikSelect
+                              selectOptions={catalogs}
+                              formikFieldName="catalog"
+                              placeholder="Choose Catalog"
+                              defaultValue={catalogs[0]}
+                            />
+                          </span>
                         </div>
                         <div className="SourceCreationInput">
                           <ErrorMessage name="schema" component="span" />