datajunction-ui 0.0.1-rc.19 → 0.0.1-rc.20

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

@@ -1,149 +1,114 @@
 import React from 'react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { render } from '../../../../setupTests';
 import fetchMock from 'jest-fetch-mock';
 import { AddEditNodePage } from '../index.jsx';
+import { mocks } from '../../../../mocks/mockNodes';
 import DJClientContext from '../../../providers/djclient';
 import userEvent from '@testing-library/user-event';
 
 fetchMock.enableMocks();
 
-describe('AddEditNodePage', () => {
-  const initializeMockDJClient = () => {
-    return {
-      DataJunctionAPI: {
-        namespace: _ => {
-          return [
-            {
-              name: 'default.contractors',
-              display_name: 'Default: Contractors',
-              version: 'v1.0',
-              type: 'source',
-              status: 'valid',
-              mode: 'published',
-              updated_at: '2023-08-21T16:48:53.246914+00:00',
-            },
-            {
-              name: 'default.num_repair_orders',
-              display_name: 'Default: Num Repair Orders',
-              version: 'v1.0',
-              type: 'metric',
-              status: 'valid',
-              mode: 'published',
-              updated_at: '2023-08-21T16:48:56.841704+00:00',
-            },
-          ];
-        },
-        metrics: {},
-        namespaces: () => {
-          return [
-            {
-              namespace: 'default',
-              num_nodes: 33,
-            },
-          ];
-        },
-        createNode: jest.fn(),
-        patchNode: jest.fn(),
-        node: jest.fn(),
-      },
-    };
-  };
-
-  const testElement = djClient => {
-    return (
-      <DJClientContext.Provider value={djClient}>
-        <AddEditNodePage />
-      </DJClientContext.Provider>
-    );
-  };
-
-  const mockMetricNode = {
-    namespace: 'default',
-    node_revision_id: 23,
-    node_id: 23,
-    type: 'metric',
-    name: 'default.num_repair_orders',
-    display_name: 'Default: Num Repair Orders',
-    version: 'v1.0',
-    status: 'valid',
-    mode: 'published',
-    catalog: {
-      id: 1,
-      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
-      created_at: '2023-08-21T16:48:51.146121+00:00',
-      updated_at: '2023-08-21T16:48:51.146122+00:00',
-      extra_params: {},
-      name: 'warehouse',
-    },
-    schema_: null,
-    table: null,
-    description: 'Number of repair orders',
-    query:
-      'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
-    availability: null,
-    columns: [
-      {
-        name: 'default_DOT_num_repair_orders',
-        type: 'bigint',
-        attributes: [],
-        dimension: null,
+export const initializeMockDJClient = () => {
+  return {
+    DataJunctionAPI: {
+      namespace: _ => {
+        return [
+          {
+            name: 'default.contractors',
+            display_name: 'Default: Contractors',
+            version: 'v1.0',
+            type: 'source',
+            status: 'valid',
+            mode: 'published',
+            updated_at: '2023-08-21T16:48:53.246914+00:00',
+          },
+          {
+            name: 'default.num_repair_orders',
+            display_name: 'Default: Num Repair Orders',
+            version: 'v1.0',
+            type: 'metric',
+            status: 'valid',
+            mode: 'published',
+            updated_at: '2023-08-21T16:48:56.841704+00:00',
+          },
+        ];
       },
-    ],
-    updated_at: '2023-08-21T16:48:56.841704+00:00',
-    materializations: [],
-    parents: [
-      {
-        name: 'default.repair_orders',
+      metrics: {},
+      namespaces: () => {
+        return [
+          {
+            namespace: 'default',
+            num_nodes: 33,
+          },
+          {
+            namespace: 'default123',
+            num_nodes: 0,
+          },
+        ];
       },
-    ],
-    created_at: '2023-08-21T16:48:56.841631+00:00',
-    tags: [],
+      createNode: jest.fn(),
+      patchNode: jest.fn(),
+      node: jest.fn(),
+    },
   };
+};
+
+export const testElement = djClient => {
+  return (
+    <DJClientContext.Provider value={djClient}>
+      <AddEditNodePage />
+    </DJClientContext.Provider>
+  );
+};
+
+export const renderCreateNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/create/dimension/default']}>
+      <Routes>
+        <Route path="create/:nodeType/:initialNamespace" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
+export const renderEditNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/edit']}>
+      <Routes>
+        <Route path="nodes/:name/edit" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
 
+describe('AddEditNodePage', () => {
   beforeEach(() => {
     fetchMock.resetMocks();
     jest.clearAllMocks();
     window.scrollTo = jest.fn();
   });
 
-  const renderCreateNode = element => {
-    return render(
-      <MemoryRouter initialEntries={['/create/dimension/default']}>
-        <Routes>
-          <Route path="create/:nodeType/:initialNamespace" element={element} />
-        </Routes>
-      </MemoryRouter>,
-    );
-  };
-
-  const renderEditNode = element => {
-    return render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/edit']}>
-        <Routes>
-          <Route path="nodes/:name/edit" element={element} />
-        </Routes>
-      </MemoryRouter>,
-    );
-  };
-
-  it('Create node page renders with the selected nodeType and namespace', () => {
+  it('Create node page renders with the selected nodeType and namespace', async () => {
     const mockDjClient = initializeMockDJClient();
     const element = testElement(mockDjClient);
     const { container } = renderCreateNode(element);
 
     // The node type should be included in the page title
-    expect(
-      container.getElementsByClassName('node_type__metric'),
-    ).toMatchSnapshot();
+    await waitFor(() => {
+      expect(
+        container.getElementsByClassName('node_type__metric'),
+      ).toMatchSnapshot();
 
-    // The namespace should be set to the one provided in params
-    expect(screen.getByText('default')).toBeInTheDocument();
+      // The namespace should be set to the one provided in params
+      expect(screen.getByText('default')).toBeInTheDocument();
+    });
   });
 
   it('Edit node page renders with the selected node', async () => {
     const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mockMetricNode);
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
 
     const element = testElement(mockDjClient);
     renderEditNode(element);
@@ -170,146 +135,6 @@ describe('AddEditNodePage', () => {
     });
   });
 
-  it('Verify create node page user interaction and successful form submission', async () => {
-    const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
-      status: 200,
-      json: { name: 'default.special_forces_contractors', type: 'dimension' },
-    });
-
-    const element = testElement(mockDjClient);
-    const { container } = renderCreateNode(element);
-
-    const query =
-      'select \n' +
-      '  C.contractor_id,\n' +
-      '  C.address, C.contact_title, C.contact_name, C.city from default.contractors C \n' +
-      "where C.contact_title = 'special forces agent'";
-
-    // Fill in display name
-    await userEvent.type(
-      screen.getByLabelText('Display Name'),
-      'Special Forces Contractors',
-    );
-
-    // After typing in a display name, the full name should be updated based on the display name
-    expect(
-      screen.getByDisplayValue('default.special_forces_contractors'),
-    ).toBeInTheDocument();
-
-    // Fill in the rest of the fields and submit
-    await userEvent.type(screen.getByLabelText('Query'), query);
-    await userEvent.type(
-      screen.getByLabelText('Description'),
-      'A curated list of special forces contractors',
-    );
-    await userEvent.type(screen.getByLabelText('Primary Key'), 'contractor_id');
-    await userEvent.click(screen.getByText('Create dimension'));
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledTimes(1);
-      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
-        'dimension',
-        'default.special_forces_contractors',
-        'Special Forces Contractors',
-        'A curated list of special forces contractors',
-        query,
-        'draft',
-        'default',
-        ['contractor_id'],
-      );
-    });
-
-    // After successful creation, it should return a success message
-    expect(container.getElementsByClassName('success')).toMatchSnapshot();
-  }, 60000);
-
-  it('Verify create node page form failed submission', async () => {
-    const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
-      status: 500,
-      json: { message: 'Some columns in the primary key [] were not found' },
-    });
-
-    const element = testElement(mockDjClient);
-    const { container } = renderCreateNode(element);
-
-    await userEvent.type(
-      screen.getByLabelText('Display Name'),
-      'Some Test Metric',
-    );
-    await userEvent.type(screen.getByLabelText('Query'), 'SELECT * FROM test');
-    await userEvent.click(screen.getByText('Create dimension'));
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledTimes(1);
-      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
-        'dimension',
-        'default.some_test_metric',
-        'Some Test Metric',
-        '',
-        'SELECT * FROM test',
-        'draft',
-        'default',
-        null,
-      );
-    });
-
-    // After failed creation, it should return a failure message
-    expect(container.getElementsByClassName('alert')).toMatchSnapshot();
-  }, 60000);
-
-  it('Verify edit node page form submission success', async () => {
-    const mockDjClient = initializeMockDJClient();
-
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mockMetricNode);
-    mockDjClient.DataJunctionAPI.patchNode = jest.fn();
-    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
-      status: 201,
-      json: { name: 'default.num_repair_orders', type: 'metric' },
-    });
-
-    const element = testElement(mockDjClient);
-    renderEditNode(element);
-
-    await userEvent.type(await screen.getByLabelText('Display Name'), '!!!');
-    await userEvent.type(await screen.getByLabelText('Description'), '!!!');
-    await userEvent.click(await screen.getByText('Save'));
-
-    await waitFor(async () => {
-      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
-      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledWith(
-        'default.num_repair_orders',
-        'Default: Num Repair Orders!!!',
-        'Number of repair orders!!!',
-        'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
-        'published',
-        null,
-      );
-    });
-  }, 60000);
-
-  it('Verify edit node page form submission failure displays alert', async () => {
-    const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mockMetricNode);
-    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
-      status: 500,
-      json: { message: 'Update failed' },
-    });
-
-    const element = testElement(mockDjClient);
-    renderEditNode(element);
-
-    await userEvent.type(await screen.getByLabelText('Display Name'), '!!!');
-    await userEvent.type(await screen.getByLabelText('Description'), '!!!');
-    await userEvent.click(await screen.getByText('Save'));
-
-    await waitFor(async () => {
-      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
-      expect(await screen.getByText('Update failed')).toBeInTheDocument();
-    });
-  });
-
   it('Verify edit page node not found', async () => {
     const mockDjClient = initializeMockDJClient();
     mockDjClient.DataJunctionAPI.node = jest.fn();

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

@@ -109,6 +109,10 @@ export function AddEditNodePage() {
     </>
   );
 
+  const primaryKeyToList = primaryKey => {
+    return primaryKey.split(',').map(columnName => columnName.trim());
+  };
+
   const createNode = async (values, setStatus) => {
     const { status, json } = await djClient.createNode(
       nodeType,
@@ -118,7 +122,7 @@ export function AddEditNodePage() {
       values.query,
       values.mode,
       values.namespace,
-      values.primary_key ? values.primary_key.split(',') : null,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
     );
     if (status === 200 || status === 201) {
       setStatus({
@@ -143,7 +147,7 @@ export function AddEditNodePage() {
       values.description,
       values.query,
       values.mode,
-      values.primary_key ? values.primary_key.split(',') : null,
+      values.primary_key ? primaryKeyToList(values.primary_key) : null,
     );
     if (status === 200 || status === 201) {
       setStatus({
@@ -199,10 +203,14 @@ export function AddEditNodePage() {
       'mode',
     ];
     fields.forEach(field => {
-      if (field === 'primary_key' && data[field] !== undefined) {
-        data[field] = data[field].join(',');
+      if (
+        field === 'primary_key' &&
+        data[field] !== undefined &&
+        Array.isArray(data[field])
+      ) {
+        data[field] = data[field].join(', ');
       }
-      setFieldValue(field, data[field], false);
+      setFieldValue(field, data[field] || '', false);
     });
   };
 

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { LoginPage } from '../index';
+
+describe('LoginPage', () => {
+  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();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays error messages when fields are empty and form is submitted', async () => {
+    const { getByText, queryAllByText } = render(<LoginPage />);
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(getByText('DataJunction')).toBeInTheDocument();
+      expect(queryAllByText('Required').length).toEqual(2);
+    });
+  });
+
+  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'), {
+      target: { value: username },
+    });
+    fireEvent.change(getByPlaceholderText('Password'), {
+      target: { value: password },
+    });
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_DJ_URL}/basic/login/`,
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+          credentials: 'include',
+        }),
+      );
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { NamespacePage } from '../index';
+import React from 'react';
+
+const mockDjClient = {
+  namespaces: jest.fn(),
+  namespace: jest.fn(),
+};
+
+describe('NamespacePage', () => {
+  beforeEach(() => {
+    mockDjClient.namespaces.mockResolvedValue([
+      {
+        namespace: 'common.one',
+        num_nodes: 3,
+      },
+      {
+        namespace: 'common.one.a',
+        num_nodes: 6,
+      },
+      {
+        namespace: 'common.one.b',
+        num_nodes: 17,
+      },
+      {
+        namespace: 'common.one.c',
+        num_nodes: 64,
+      },
+      {
+        namespace: 'default',
+        num_nodes: 41,
+      },
+      {
+        namespace: 'default.fruits',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.fruits.citrus.lemons',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.vegetables',
+        num_nodes: 2,
+      },
+    ]);
+    mockDjClient.namespace.mockResolvedValue([
+      {
+        name: 'testNode',
+        display_name: 'Test Node',
+        type: 'transform',
+        mode: 'active',
+        updated_at: new Date(),
+      },
+    ]);
+  });
+
+  it('displays namespaces and renders nodes', async () => {
+    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>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaces).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+
+      // check that it displays namespaces
+      expect(screen.getByText('common')).toBeInTheDocument();
+      expect(screen.getByText('one')).toBeInTheDocument();
+      expect(screen.getByText('fruits')).toBeInTheDocument();
+      expect(screen.getByText('vegetables')).toBeInTheDocument();
+
+      // check that it renders nodes
+      expect(screen.getByText('Test Node')).toBeInTheDocument();
+
+      // click to open and close tab
+      fireEvent.click(screen.getByText('common'));
+      fireEvent.click(screen.getByText('common'));
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});

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

@@ -5,7 +5,7 @@ import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
 import EditIcon from '../../icons/EditIcon';
-import DeleteIcon from '../../icons/DeleteIcon';
+import DeleteNode from '../../components/DeleteNode';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -85,7 +85,7 @@ export function NamespacePage() {
       </td>
       <td>
         <a href={'/nodes/' + node.name} className="link-table">
-          {node.display_name}
+          {node.type !== 'source' ? node.display_name : ''}
         </a>
       </td>
       <td>
@@ -108,9 +108,7 @@ export function NamespacePage() {
         <a href={`/nodes/${node?.name}/edit`} style={{ marginLeft: '0.5rem' }}>
           <EditIcon />
         </a>
-        <a href="#" style={{ marginLeft: '0.5rem' }}>
-          <DeleteIcon />
-        </a>
+        <DeleteNode nodeName={node?.name} />
       </td>
     </tr>
   ));
@@ -126,6 +124,11 @@ export function NamespacePage() {
               <div className="dropdown">
                 <span className="add_node">+ Add Node</span>
                 <div className="dropdown-content">
+                  <a href={`/create/source`}>
+                    <div className="node_type__source node_type_creation_heading">
+                      Register Table
+                    </div>
+                  </a>
                   <a href={`/create/transform/${namespace}`}>
                     <div className="node_type__transform node_type_creation_heading">
                       Transform

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

@@ -10,6 +10,7 @@ export default function ClientCodePopover({ code }) {
     <>
       <button
         className="code-button"
+        aria-label="code-button"
         tabIndex="0"
         height="45px"
         onClick={() => setCodeAnchor(!codeAnchor)}
@@ -18,7 +19,8 @@ export default function ClientCodePopover({ code }) {
       </button>
       <div
         id={`node-create-code`}
-        onClose={() => setCodeAnchor(null)}
+        role="dialog"
+        aria-label="client-code"
         style={{ display: codeAnchor === false ? 'none' : 'block' }}
       >
         <SyntaxHighlighter language="python" style={nightOwl}>