datajunction-ui 0.0.1-rc.22 → 0.0.1-rc.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.22",
+  "version": "0.0.1-rc.24",
   "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/index.tsx

@@ -16,7 +16,7 @@ import { LoginPage } from './pages/LoginPage';
 import { RegisterTablePage } from './pages/RegisterTablePage';
 import { Root } from './pages/Root/Loadable';
 import DJClientContext from './providers/djclient';
-import { DataJunctionAPI, DJ_URL } from './services/DJService';
+import { DataJunctionAPI } from './services/DJService';
 import { CookiesProvider, useCookies } from 'react-cookie';
 import * as Constants from './constants';
 
@@ -36,7 +36,7 @@ export function App() {
                 content="DataJunction serves as a semantic layer to help manage metrics"
               />
             </Helmet>
-            <DJClientContext.Provider value={{ DataJunctionAPI, DJ_URL }}>
+            <DJClientContext.Provider value={{ DataJunctionAPI }}>
               <Routes>
                 <Route
                   path="/"

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

@@ -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 { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } 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);
+        }}
+      >
+        <EditIcon />
+      </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: '',
+          }}
+          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"
+                  />
+                </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/__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/NamespacePage/index.jsx

@@ -6,6 +6,7 @@ import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
 import EditIcon from '../../icons/EditIcon';
 import DeleteNode from '../../components/DeleteNode';
+import AddNamespacePopover from './AddNamespacePopover';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -58,7 +59,7 @@ export function NamespacePage() {
   useEffect(() => {
     const fetchData = async () => {
       if (namespace === undefined && namespaceHierarchy !== undefined) {
-        namespace = namespaceHierarchy.children[0].path;
+        namespace = namespaceHierarchy[0].namespace;
       }
       const nodes = await djClient.namespace(namespace);
       const foundNodes = await Promise.all(nodes);
@@ -159,7 +160,7 @@ export function NamespacePage() {
                   padding: '1rem 1rem 1rem 0',
                 }}
               >
-                Namespaces
+                Namespaces <AddNamespacePopover />
               </span>
               {namespaceHierarchy
                 ? namespaceHierarchy.map(child => (

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/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" />

package/src/app/providers/djclient.jsx

@@ -1,5 +1,5 @@
-import { DataJunctionAPI, DJ_URL } from '../services/DJService';
+import { DataJunctionAPI } from '../services/DJService';
 import * as React from 'react';
 
-const DJClientContext = React.createContext({ DataJunctionAPI, DJ_URL });
+const DJClientContext = React.createContext({ DataJunctionAPI });
 export default DJClientContext;

package/src/app/services/DJService.js

@@ -1,6 +1,6 @@
 import { MarkerType } from 'reactflow';
 
-export const DJ_URL = process.env.REACT_APP_DJ_URL
+const DJ_URL = process.env.REACT_APP_DJ_URL
   ? process.env.REACT_APP_DJ_URL
   : 'http://localhost:8000';
 
@@ -487,4 +487,14 @@ export const DataJunctionAPI = {
     });
     return { status: response.status, json: await response.json() };
   },
+  addNamespace: async function (namespace) {
+    const response = await fetch(`${DJ_URL}/namespaces/${namespace}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
 };

package/src/styles/index.css

@@ -890,7 +890,7 @@ pre {
   border-radius: 10px;
   text-align: left;
   position: absolute;
-  min-width: 200px;
+  min-width: 210px;
   max-width: 100%;
   z-index: 1;
 }