datajunction-ui 0.0.15 → 0.0.17

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

@@ -0,0 +1,390 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  waitFor,
+  screen,
+  act,
+} from '@testing-library/react';
+import ManageDimensionLinksDialog from '../ManageDimensionLinksDialog';
+import DJClientContext from '../../../providers/djclient';
+
+// Mock window.location.reload
+delete window.location;
+window.location = { reload: jest.fn() };
+
+// Mock window.confirm
+window.confirm = jest.fn(() => true);
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    linkDimension: jest.fn(),
+    unlinkDimension: jest.fn(),
+    addReferenceDimensionLink: jest.fn(),
+    removeReferenceDimensionLink: jest.fn(),
+  },
+  node: jest.fn().mockResolvedValue({
+    name: 'default.test_dimension',
+    columns: [{ name: 'id', type: 'int' }],
+  }),
+};
+
+describe('<ManageDimensionLinksDialog />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.alert = jest.fn();
+    window.confirm.mockReturnValue(true);
+  });
+
+  const defaultProps = {
+    column: { name: 'test_column', type: 'int' },
+    node: { name: 'default.node1' },
+    dimensions: [
+      { value: 'default.dim1', label: 'dim1 (5 links)' },
+      { value: 'default.dim2', label: 'dim2 (3 links)' },
+    ],
+    fkLinks: [],
+    onSubmit: jest.fn(),
+  };
+
+  it('renders the toggle button', () => {
+    const { getByLabelText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    expect(getByLabelText('ManageDimensionLinksToggle')).toBeInTheDocument();
+  });
+
+  it('opens modal when toggle button is clicked', async () => {
+    const { getByLabelText, getByRole } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(
+        getByRole('dialog', { name: 'ManageDimensionLinksDialog' }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('displays column name and type in header', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog
+          column={{ name: 'test_column', type: 'varchar' }}
+          node={defaultProps.node}
+          dimensions={defaultProps.dimensions}
+          fkLinks={[]}
+          onSubmit={defaultProps.onSubmit}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('test_column')).toBeInTheDocument();
+      expect(getByText('varchar')).toBeInTheDocument();
+    });
+  });
+
+  it('shows two tabs: FK Links and Reference Links', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('FK Links')).toBeInTheDocument();
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+  });
+
+  it('switches to reference links tab when clicked', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Dimension Node *')).toBeInTheDocument();
+      expect(getByText('Dimension Column *')).toBeInTheDocument();
+    });
+  });
+
+  it('displays FK links when provided', async () => {
+    const propsWithFkLinks = {
+      ...defaultProps,
+      fkLinks: ['default.dim1', 'default.dim2'],
+    };
+
+    const { getByLabelText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithFkLinks} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      // The FK Links tab should be displayed by default
+      expect(getByLabelText('ManageDimensionLinksToggle')).toBeInTheDocument();
+    });
+  });
+
+  it('shows FK Links form with select dimensions field', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Select Dimensions')).toBeInTheDocument();
+      expect(getByText('Save')).toBeInTheDocument();
+    });
+  });
+
+  it('displays reference link form fields', async () => {
+    const { getByLabelText, getByText, getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+
+    // Switch to reference link tab
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Dimension Node *')).toBeInTheDocument();
+      expect(getByText('Dimension Column *')).toBeInTheDocument();
+      expect(
+        getByPlaceholderText('e.g., birth_date, registration_date'),
+      ).toBeInTheDocument();
+      expect(getByText('Add Link')).toBeInTheDocument();
+    });
+  });
+
+  it('handles removing reference link', async () => {
+    mockDjClient.DataJunctionAPI.removeReferenceDimensionLink.mockResolvedValue(
+      {
+        status: 200,
+      },
+    );
+
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+
+    // Switch to reference link tab
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+
+    // Remove the link
+    const removeButton = getByText('Remove Link');
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    await waitFor(() => {
+      expect(window.confirm).toHaveBeenCalledWith(
+        'Are you sure you want to remove this reference link?',
+      );
+      expect(
+        mockDjClient.DataJunctionAPI.removeReferenceDimensionLink,
+      ).toHaveBeenCalledWith('default.node1', 'test_column');
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('does not remove reference link when user cancels confirm dialog', async () => {
+    window.confirm.mockReturnValueOnce(false);
+
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+
+    const removeButton = getByText('Remove Link');
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    expect(
+      mockDjClient.DataJunctionAPI.removeReferenceDimensionLink,
+    ).not.toHaveBeenCalled();
+  });
+
+  it('handles failed reference link removal', async () => {
+    mockDjClient.DataJunctionAPI.removeReferenceDimensionLink.mockResolvedValue(
+      {
+        status: 500,
+        json: { message: 'Server error' },
+      },
+    );
+
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+
+    const removeButton = getByText('Remove Link');
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    await waitFor(() => {
+      expect(window.alert).toHaveBeenCalled();
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+  });
+
+  it('shows Update Link button when reference link exists', async () => {
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'user_id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Update Link')).toBeInTheDocument();
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+  });
+
+  it('shows validation error when submitting reference link without required fields', async () => {
+    const { getByLabelText, getByText, getAllByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Add Link')).toBeInTheDocument();
+    });
+
+    // Try to submit without filling required fields
+    const saveButton = getByText('Add Link');
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      const requiredErrors = getAllByText('Required');
+      expect(requiredErrors.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('closes modal when clicking backdrop', async () => {
+    const { getByLabelText, getByRole, queryByRole } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByRole('dialog')).toBeInTheDocument();
+    });
+
+    // Click the backdrop
+    const backdrop = getByRole('dialog').parentElement;
+    fireEvent.click(backdrop);
+
+    await waitFor(() => {
+      expect(queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -50,6 +50,17 @@ describe('<NodePage />', () => {
         unsubscribeFromNotifications: jest
           .fn()
           .mockResolvedValue({ status: 200 }),
+        setAttributes: jest.fn().mockResolvedValue({ status: 200 }),
+        linkDimension: jest.fn().mockResolvedValue({ status: 200 }),
+        unlinkDimension: jest.fn().mockResolvedValue({ status: 200 }),
+        addReferenceDimensionLink: jest.fn().mockResolvedValue({ status: 200 }),
+        removeReferenceDimensionLink: jest
+          .fn()
+          .mockResolvedValue({ status: 200 }),
+        addComplexDimensionLink: jest.fn().mockResolvedValue({ status: 200 }),
+        removeComplexDimensionLink: jest
+          .fn()
+          .mockResolvedValue({ status: 200 }),
       },
     };
   };
@@ -408,15 +419,15 @@ describe('<NodePage />', () => {
 
   it('renders the NodeColumns tab correctly', async () => {
     const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.node.mockResolvedValue(mocks.mockMetricNode);
     djClient.DataJunctionAPI.getMetric.mockReturnValue(
       mocks.mockMetricNodeJson,
     );
-    djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.attributes.mockReturnValue(mocks.attributes);
-    djClient.DataJunctionAPI.dimensions.mockReturnValue(mocks.dimensions);
+    djClient.DataJunctionAPI.columns.mockResolvedValue(mocks.metricNodeColumns);
+    djClient.DataJunctionAPI.attributes.mockResolvedValue(mocks.attributes);
+    djClient.DataJunctionAPI.dimensions.mockResolvedValue(mocks.dimensions);
     djClient.DataJunctionAPI.engines.mockReturnValue([]);
-    djClient.DataJunctionAPI.setPartition.mockReturnValue({
+    djClient.DataJunctionAPI.setPartition.mockResolvedValue({
       status: 200,
       json: { message: '' },
     });
@@ -459,14 +470,14 @@ describe('<NodePage />', () => {
         screen.getByRole('button', { name: 'SaveEditColumn' }),
       ).toBeInTheDocument();
 
-      // check that the link dimension popover can be clicked
-      const linkDimensionPopover = screen.getByRole('button', {
-        name: 'LinkDimension',
+      // check that the manage dimension links dialog can be opened
+      const manageDimensionLinksButton = screen.getByRole('button', {
+        name: 'ManageDimensionLinksToggle',
       });
-      expect(linkDimensionPopover).toBeInTheDocument();
-      fireEvent.click(linkDimensionPopover);
+      expect(manageDimensionLinksButton).toBeInTheDocument();
+      fireEvent.click(manageDimensionLinksButton);
       expect(
-        screen.getByRole('button', { name: 'SaveLinkDimension' }),
+        screen.getByRole('dialog', { name: 'ManageDimensionLinksDialog' }),
       ).toBeInTheDocument();
 
       // check that the set column partition popover can be clicked
@@ -483,7 +494,6 @@ describe('<NodePage />', () => {
       expect(screen.getByText('Saved!'));
     });
   }, 60000);
-  // check compiled SQL on nodeInfo page
 
   it('renders the NodeHistory tab correctly', async () => {
     const djClient = mockDJClient();

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

@@ -69,7 +69,8 @@ describe('<RegisterTablePage />', () => {
     const catalog = getByTestId('choose-catalog');
     await waitFor(async () => {
       fireEvent.keyDown(catalog.firstChild, { key: 'ArrowDown' });
-      fireEvent.click(screen.getByText('warehouse'));
+      const warehouseOptions = screen.getAllByText('warehouse');
+      fireEvent.click(warehouseOptions[warehouseOptions.length - 1]);
     });
 
     await userEvent.type(screen.getByLabelText('Schema'), 'schema');
@@ -99,7 +100,8 @@ describe('<RegisterTablePage />', () => {
     const catalog = getByTestId('choose-catalog');
     await waitFor(async () => {
       fireEvent.keyDown(catalog.firstChild, { key: 'ArrowDown' });
-      fireEvent.click(screen.getByText('warehouse'));
+      const warehouseOptions = screen.getAllByText('warehouse');
+      fireEvent.click(warehouseOptions[warehouseOptions.length - 1]);
     });
 
     await userEvent.type(screen.getByLabelText('Schema'), 'schema');

package/src/app/services/DJService.js

@@ -1090,10 +1090,10 @@ export const DataJunctionAPI = {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        dimensionNode: dimensionNode,
-        joinType: joinType,
-        joinOn: joinOn,
-        joinCardinality: joinCardinality,
+        dimension_node: dimensionNode,
+        join_type: joinType,
+        join_on: joinOn,
+        join_cardinality: joinCardinality,
         role: role,
       }),
       credentials: 'include',
@@ -1112,7 +1112,7 @@ export const DataJunctionAPI = {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        dimensionNode: dimensionNode,
+        dimension_node: dimensionNode,
         role: role,
       }),
       credentials: 'include',
@@ -1120,6 +1120,46 @@ export const DataJunctionAPI = {
     return { status: response.status, json: await response.json() };
   },
 
+  addReferenceDimensionLink: async function (
+    nodeName,
+    nodeColumn,
+    dimensionNode,
+    dimensionColumn,
+    role = null,
+  ) {
+    const url = new URL(
+      `${DJ_URL}/nodes/${nodeName}/columns/${nodeColumn}/link`,
+    );
+    url.searchParams.append('dimension_node', dimensionNode);
+    url.searchParams.append('dimension_column', dimensionColumn);
+    if (role) {
+      url.searchParams.append('role', role);
+    }
+
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
+  removeReferenceDimensionLink: async function (nodeName, nodeColumn) {
+    const response = await fetch(
+      `${DJ_URL}/nodes/${nodeName}/columns/${nodeColumn}/link`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  },
+
   deactivate: async function (nodeName) {
     const response = await fetch(`${DJ_URL}/nodes/${nodeName}`, {
       method: 'DELETE',
@@ -1409,7 +1449,7 @@ export const DataJunctionAPI = {
     url.searchParams.append('entity_type', entity_type);
     url.searchParams.append('entity_name', entity_name);
 
-    const response = await fetch(url, {
+    const response = await fetch(url.toString(), {
       method: 'DELETE',
       credentials: 'include',
     });