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

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

@@ -8,8 +8,10 @@ export default function NodeMaterializationTab({ node, djClient }) {
   const [materializations, setMaterializations] = useState([]);
   useEffect(() => {
     const fetchData = async () => {
-      const data = await djClient.materializations(node.name);
-      setMaterializations(data);
+      if (node) {
+        const data = await djClient.materializations(node.name);
+        setMaterializations(data);
+      }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
@@ -35,7 +37,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
 
   const materializationRows = materializations => {
     return materializations.map(materialization => (
-      <tr>
+      <tr key={materialization.name}>
         <td className="text-start node_name">
           <a href={materialization.urls[0]}>{materialization.name}</a>
           <ClientCodePopover code={materialization.clientCode} />
@@ -53,20 +55,25 @@ export default function NodeMaterializationTab({ node, djClient }) {
           {materialization.config.partitions ? (
             materialization.config.partitions.map(partition =>
               partition.type_ === 'categorical' ? (
-                <div className="partition__full">
+                <div className="partition__full" key={partition.name}>
                   <div className="partition__header">{partition.name}</div>
                   <div className="partition__body">
                     {partition.values !== null && partition.values.length > 0
                       ? partition.values.map(val => (
-                          <span className="badge partition_value">{val}</span>
+                          <span
+                            className="badge partition_value"
+                            key={`partition-value-${val}`}
+                          >
+                            {val}
+                          </span>
                         ))
                       : null}
                     {partition.range !== null && partition.range.length > 0
                       ? rangePartition(partition)
                       : null}
                     {(partition.range === null && partition.values === null) ||
-                    (partition.range.length === 0 &&
-                      partition.values.length === 0) ? (
+                    (partition.range?.length === 0 &&
+                      partition.values?.length === 0) ? (
                       <span className={`badge partition_value_highlight`}>
                         ALL
                       </span>
@@ -81,7 +88,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
         </td>
         <td>
           {materialization.output_tables.map(table => (
-            <div className={`table__full`}>
+            <div className={`table__full`} key={table}>
               <div className="table__header">
                 <TableIcon />{' '}
                 <span className={`entity-info`}>
@@ -100,7 +107,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
           {materialization.config.partitions ? (
             materialization.config.partitions.map(partition =>
               partition.type_ === 'temporal' ? (
-                <div className="partition__full">
+                <div className="partition__full" key={partition.name}>
                   <div className="partition__header">{partition.name}</div>
                   <div className="partition__body">
                     {partition.values !== null && partition.values.length > 0
@@ -121,7 +128,9 @@ export default function NodeMaterializationTab({ node, djClient }) {
         </td>
         <td>
           {materialization.urls.map((url, idx) => (
-            <a href={url}>[{idx + 1}]</a>
+            <a href={url} key={`url-${idx}`}>
+              [{idx + 1}]
+            </a>
           ))}
         </td>
       </tr>
@@ -129,23 +138,37 @@ export default function NodeMaterializationTab({ node, djClient }) {
   };
   return (
     <div className="table-responsive">
-      <table className="card-inner-table table">
-        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <th className="text-start">Name</th>
-          <th>Schedule</th>
-          <th>Engine</th>
-          <th>Partitions</th>
-          <th>Output Tables</th>
-          <th>Backfills</th>
-          <th>URLs</th>
-        </thead>
-        {materializationRows(
-          materializations.filter(
-            materialization =>
-              !(materialization.name === 'default' && node.type === 'cube'),
-          ),
-        )}
-      </table>
+      {materializations.length > 0 ? (
+        <table
+          className="card-inner-table table"
+          aria-label="Materializations"
+          aria-hidden="false"
+        >
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Name</th>
+              <th>Schedule</th>
+              <th>Engine</th>
+              <th>Partitions</th>
+              <th>Output Tables</th>
+              <th>Backfills</th>
+              <th>URLs</th>
+            </tr>
+          </thead>
+          <tbody>
+            {materializationRows(
+              materializations.filter(
+                materialization =>
+                  !(materialization.name === 'default' && node.type === 'cube'),
+              ),
+            )}
+          </tbody>
+        </table>
+      ) : (
+        <div className="message alert" style={{ marginTop: '10px' }}>
+          No materializations available for this node
+        </div>
+      )}
     </div>
   );
 }

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

@@ -27,16 +27,6 @@ const NodeSQLTab = djNode => {
       }))
     : [''];
 
-  // const options = [
-  //   { value: '>=', label: '>=' },
-  //   { value: '<=', label: '<=' },
-  //   { value: '>', label: '>' },
-  //   { value: '<', label: '<' },
-  //   { value: '=', label: '=' },
-  //   { value: '!=', label: '!=' },
-  //   { value: 'IN', label: 'IN' },
-  // ];
-
   const handleSubmit = event => {
     event.preventDefault();
   };

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

@@ -15,8 +15,10 @@ export default function NodesWithDimension({ node, djClient }) {
     <div className="table-responsive">
       <table className="card-inner-table table">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <th className="text-start">Name</th>
-          <th>Type</th>
+          <tr>
+            <th className="text-start">Name</th>
+            <th>Type</th>
+          </tr>
         </thead>
         <tbody>
           {availableNodes.map(node => (

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import ClientCodePopover from '../ClientCodePopover';
+import userEvent from '@testing-library/user-event';
+
+describe('<ClientCodePopover />', () => {
+  const defaultProps = {
+    code: "print('Hello, World!')",
+  };
+
+  it('toggles the code popover visibility when the button is clicked', async () => {
+    render(<ClientCodePopover {...defaultProps} />);
+
+    const button = screen.getByRole('button', 'code-button');
+
+    // Initially, the popover should be hidden
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
+      'display: none',
+    );
+
+    // Clicking the button should display the popover
+    fireEvent.click(button);
+    expect(screen.getByRole('dialog', { hidden: true })).not.toHaveStyle(
+      'display: none',
+    );
+
+    // Clicking the button again should hide the popover
+    fireEvent.click(button);
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
+      'display: none',
+    );
+
+    // Trigger onClose by pressing <escape>
+    userEvent.keyboard('{Escape}');
+    // fireEvent.click(screen.getByTestId('body').firstChild());
+    await waitFor(() => {
+      expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
+        'display: none',
+      );
+    });
+  });
+
+  it('renders the provided code within the SyntaxHighlighter', () => {
+    render(<ClientCodePopover {...defaultProps} />);
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveTextContent(
+      defaultProps.code,
+    );
+  });
+});

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import EditColumnPopover from '../EditColumnPopover';
+import DJClientContext from '../../../providers/djclient';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    setAttributes: jest.fn(),
+  },
+};
+
+describe('<EditColumnPopover />', () => {
+  it('renders correctly and handles form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      dimension: { name: 'dimension1' },
+      attributes: [
+        { attribute_type: { name: 'primary_key', namespace: 'system' } },
+      ],
+    };
+    const node = { name: 'default.node1' };
+    const options = [
+      { value: 'dimension', label: 'Dimension' },
+      { value: 'primary_key', label: 'Primary Key' },
+    ];
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.setAttributes.mockReturnValue({
+      status: 201,
+      json: [
+        {
+          name: 'id',
+          type: 'int',
+          attributes: [
+            { attribute_type: { name: 'primary_key', namespace: 'system' } },
+          ],
+          dimension: null,
+        },
+      ],
+    });
+
+    // Render the component
+    const { getByLabelText, getByText, getByTestId } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnPopover
+          column={column}
+          node={node}
+          options={options}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+
+    // Click on one attribute in the select
+    const editAttributes = getByTestId('edit-attributes');
+    fireEvent.keyDown(editAttributes.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.setAttributes).toHaveBeenCalled();
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+
+    // Click on two attributes in the select
+    fireEvent.keyDown(editAttributes.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension'));
+    fireEvent.click(screen.getByText('Primary Key'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.setAttributes).toHaveBeenCalledWith(
+        'default.node1',
+        'column1',
+        ['primary_key', 'dimension'],
+      );
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+
+    // Close the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+  });
+
+  it('handles failed form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      dimension: { name: 'dimension1' },
+      attributes: [
+        { attribute_type: { name: 'primary_key', namespace: 'system' } },
+      ],
+    };
+    const node = { name: 'default.node1' };
+    const options = [
+      { value: 'dimension', label: 'Dimension' },
+      { value: 'primary_key', label: 'Primary Key' },
+    ];
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.setAttributes.mockReturnValue({
+      status: 500,
+      json: { message: 'bad request' },
+    });
+
+    // Render the component
+    const { getByLabelText, getByText, getByTestId } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnPopover
+          column={column}
+          node={node}
+          options={options}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+
+    // Click on one attribute in the select
+    const editAttributes = getByTestId('edit-attributes');
+    fireEvent.keyDown(editAttributes.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called and the failure message to show up
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.setAttributes).toHaveBeenCalled();
+      expect(getByText('bad request')).toBeInTheDocument();
+    });
+
+    // Close the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+  });
+});

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import LinkDimensionPopover from '../LinkDimensionPopover';
+import DJClientContext from '../../../providers/djclient';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    linkDimension: jest.fn(),
+    unlinkDimension: jest.fn(),
+  },
+};
+
+describe('<LinkDimensionPopover />', () => {
+  it('renders correctly and handles form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      dimension: { name: 'default.dimension1' },
+    };
+    const node = { name: 'default.node1' };
+    const options = [
+      { value: 'Remove', label: '[Remove dimension link]' },
+      { value: 'default.dimension1', label: 'Dimension 1' },
+      { value: 'default.dimension2', label: 'Dimension 2' },
+    ];
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.linkDimension.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.unlinkDimension.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    // Render the component
+    const { getByLabelText, getByText, getByTestId } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <LinkDimensionPopover
+          column={column}
+          node={node}
+          options={options}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('LinkDimension'));
+
+    // Click on a dimension and save
+    const linkDimension = getByTestId('link-dimension');
+    fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension 1'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect linkDimension to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.linkDimension).toHaveBeenCalledWith(
+        'default.node1',
+        'column1',
+        'default.dimension1',
+      );
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+
+    // Click on the 'Remove' option and save
+    fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('[Remove dimension link]'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect unlinkDimension to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.unlinkDimension).toHaveBeenCalledWith(
+        'default.node1',
+        'column1',
+        'default.dimension1',
+      );
+      expect(getByText('Removed dimension link!')).toBeInTheDocument();
+    });
+  });
+
+  it('handles failed form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      dimension: { name: 'default.dimension1' },
+    };
+    const node = { name: 'default.node1' };
+    const options = [
+      { value: 'Remove', label: '[Remove dimension link]' },
+      { value: 'default.dimension1', label: 'Dimension 1' },
+      { value: 'default.dimension2', label: 'Dimension 2' },
+    ];
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.linkDimension.mockReturnValue({
+      status: 500,
+      json: { message: 'Failed due to nonexistent dimension' },
+    });
+
+    mockDjClient.DataJunctionAPI.unlinkDimension.mockReturnValue({
+      status: 500,
+      json: { message: 'Failed due to no dimension link' },
+    });
+
+    // Render the component
+    const { getByLabelText, getByText, getByTestId } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <LinkDimensionPopover
+          column={column}
+          node={node}
+          options={options}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('LinkDimension'));
+
+    // Click on a dimension and save
+    const linkDimension = getByTestId('link-dimension');
+    fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension 1'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect linkDimension to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.linkDimension).toHaveBeenCalledWith(
+        'default.node1',
+        'column1',
+        'default.dimension1',
+      );
+      expect(
+        getByText('Failed due to nonexistent dimension'),
+      ).toBeInTheDocument();
+    });
+
+    // Click on the 'Remove' option and save
+    fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('[Remove dimension link]'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect unlinkDimension to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.unlinkDimension).toHaveBeenCalledWith(
+        'default.node1',
+        'column1',
+        'default.dimension1',
+      );
+      expect(getByText('Failed due to no dimension link')).toBeInTheDocument();
+    });
+  });
+});