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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.19",
+  "version": "0.0.1-rc.20",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -160,10 +160,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 90,
-        "functions": 90,
+        "statements": 90,
+        "branches": 75,
         "lines": 90,
-        "statements": 90
+        "functions": 85
       }
     }
   },
@@ -182,6 +182,7 @@
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
     "jest-fetch-mock": "3.0.3",
-    "mini-css-extract-plugin": "2.7.6"
+    "mini-css-extract-plugin": "2.7.6",
+    "resize-observer-polyfill": "1.5.1"
   }
 }

package/src/__tests__/reportWebVitals.test.jsx

@@ -0,0 +1,44 @@
+import reportWebVitals from '../reportWebVitals';
+
+// Mocking the web-vitals module
+jest.mock('web-vitals', () => ({
+  getCLS: jest.fn(),
+  getFID: jest.fn(),
+  getFCP: jest.fn(),
+  getLCP: jest.fn(),
+  getTTFB: jest.fn(),
+}));
+
+describe('reportWebVitals', () => {
+  // Mock web-vitals functions
+  const mockGetCLS = jest.fn();
+  const mockGetFID = jest.fn();
+  const mockGetFCP = jest.fn();
+  const mockGetLCP = jest.fn();
+  const mockGetTTFB = jest.fn();
+
+  beforeAll(() => {
+    jest.doMock('web-vitals', () => ({
+      getCLS: mockGetCLS,
+      getFID: mockGetFID,
+      getFCP: mockGetFCP,
+      getLCP: mockGetLCP,
+      getTTFB: mockGetTTFB,
+    }));
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not call the web vitals functions if onPerfEntry is not a function', async () => {
+    await reportWebVitals(undefined);
+
+    const { getCLS, getFID, getFCP, getLCP, getTTFB } = require('web-vitals');
+    expect(getCLS).not.toHaveBeenCalled();
+    expect(getFID).not.toHaveBeenCalled();
+    expect(getFCP).not.toHaveBeenCalled();
+    expect(getLCP).not.toHaveBeenCalled();
+    expect(getTTFB).not.toHaveBeenCalled();
+  });
+});

package/src/app/components/DeleteNode.jsx

@@ -0,0 +1,79 @@
+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';
+
+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);
+    if (status === 200 || status === 201 || status === 204) {
+      setStatus({
+        success: <>Successfully deleted node {values.nodeName}</>,
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+    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,
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={deleteNode}>
+      {function Render({ isSubmitting, status, setFieldValue }) {
+        return (
+          <Form className="deleteNode">
+            {displayMessageAfterSubmit(status)}
+            {
+              <>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  style={{
+                    marginLeft: 0,
+                    all: 'unset',
+                    color: '#005c72',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <DeleteIcon />
+                </button>
+              </>
+            }
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+}

package/src/app/components/ListGroupItem.jsx

@@ -8,7 +8,14 @@ export default class ListGroupItem extends Component {
         <div className="d-flex gap-2 w-100 justify-content-between py-3">
           <div>
             <h6 className="mb-0 w-100">{label}</h6>
-            <p className="mb-0 opacity-75">{value}</p>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label={label}
+            >
+              {value}
+            </p>
           </div>
         </div>
       </div>

package/src/app/components/QueryInfo.jsx

@@ -43,8 +43,8 @@ export default function QueryInfo({
             <td>{started}</td>
             <td>
               {errors?.length ? (
-                errors.map(e => (
-                  <p>
+                errors.map((e, idx) => (
+                  <p key={`error-${idx}`}>
                     <span className="rounded-pill badge bg-secondary-error">
                       {e}
                     </span>
@@ -56,8 +56,8 @@ export default function QueryInfo({
             </td>
             <td>
               {links?.length ? (
-                links.map(link => (
-                  <p>
+                links.map((link, idx) => (
+                  <p key={idx}>
                     <a href={link} target="_blank" rel="noreferrer">
                       {link}
                     </a>

package/src/app/components/Tab.jsx

@@ -7,7 +7,15 @@ export default class Tab extends Component {
       <div className={selectedTab === id ? 'col active' : 'col'}>
         <div className="header-tabs nav-overflow nav nav-tabs">
           <div className="nav-item">
-            <button id={id} className="nav-link" tabIndex="0" onClick={onClick}>
+            <button
+              id={id}
+              className="nav-link"
+              tabIndex="0"
+              onClick={onClick}
+              role="button"
+              aria-label={this.props.name}
+              aria-hidden="false"
+            >
               {this.props.name}
             </button>
           </div>

package/src/app/components/ToggleSwitch.jsx

@@ -4,6 +4,9 @@ const ToggleSwitch = ({ checked, onChange, toggleName }) => (
   <>
     <input
       id="show-compiled-sql-toggle"
+      role="checkbox"
+      aria-label="ToggleSwitch"
+      aria-hidden="false"
       type="checkbox"
       className="checkbox"
       checked={checked}

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import QueryInfo from '../QueryInfo';
+
+describe('<QueryInfo />', () => {
+  const defaultProps = {
+    id: '123',
+    state: 'Running',
+    engine_name: 'Spark SQL',
+    engine_version: '1.0',
+    errors: ['Error 1', 'Error 2'],
+    links: ['http://example.com', 'http://example2.com'],
+    output_table: 'table1',
+    scheduled: '2023-09-06',
+    started: '2023-09-07',
+    numRows: 1000,
+  };
+
+  it('renders without crashing', () => {
+    render(<QueryInfo {...defaultProps} />);
+  });
+
+  it('displays correct query information', () => {
+    render(<QueryInfo {...defaultProps} />);
+
+    expect(screen.getByText(defaultProps.id)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        `${defaultProps.engine_name} - ${defaultProps.engine_version}`,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.state)).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.scheduled)).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.started)).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.output_table)).toBeInTheDocument();
+    expect(screen.getByText(String(defaultProps.numRows))).toBeInTheDocument();
+    defaultProps.errors.forEach(error => {
+      expect(screen.getByText(error)).toBeInTheDocument();
+    });
+    defaultProps.links.forEach(link => {
+      expect(screen.getByText(link)).toHaveAttribute('href', link);
+    });
+  });
+
+  it('does not render errors and links when they are not provided', () => {
+    render(<QueryInfo {...defaultProps} errors={[]} links={[]} />);
+
+    defaultProps.errors.forEach(error => {
+      expect(screen.queryByText(error)).not.toBeInTheDocument();
+    });
+    defaultProps.links.forEach(link => {
+      expect(screen.queryByText(link)).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import Tab from '../Tab';
+
+describe('<Tab />', () => {
+  it('renders without crashing', () => {
+    render(<Tab />);
+  });
+
+  it('has the active class when selectedTab matches id', () => {
+    const { container } = render(<Tab id="1" selectedTab="1" />);
+    expect(container.querySelector('.col')).toHaveClass('active');
+  });
+
+  it('does not have the active class when selectedTab does not match id', () => {
+    const { container } = render(<Tab id="1" selectedTab="2" />);
+    expect(container.querySelector('.col')).not.toHaveClass('active');
+  });
+
+  it('calls onClick when the button is clicked', () => {
+    const onClickMock = jest.fn();
+    const { getByRole } = render(<Tab id="1" onClick={onClickMock} />);
+    fireEvent.click(getByRole('button'));
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import ToggleSwitch from '../ToggleSwitch';
+
+describe('<ToggleSwitch />', () => {
+  const defaultProps = {
+    checked: false,
+    onChange: jest.fn(),
+    toggleName: 'Toggle Switch',
+  };
+
+  it('renders without crashing', () => {
+    render(<ToggleSwitch {...defaultProps} />);
+  });
+
+  it('displays the correct toggle name', () => {
+    render(<ToggleSwitch {...defaultProps} />);
+    expect(screen.getByText(defaultProps.toggleName)).toBeInTheDocument();
+  });
+
+  it('reflects the checked state correctly', () => {
+    render(<ToggleSwitch {...defaultProps} checked={true} />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('calls onChange with the correct value when toggled', () => {
+    render(<ToggleSwitch {...defaultProps} />);
+    const checkbox = screen.getByRole('checkbox');
+
+    fireEvent.click(checkbox);
+    expect(defaultProps.onChange).toHaveBeenCalledWith(true);
+
+    fireEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('is unchecked by default if no checked prop is provided', () => {
+    render(<ToggleSwitch onChange={jest.fn()} toggleName="Test Toggle" />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+});

package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap

@@ -14,7 +14,10 @@ exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
         Name
       </h6>
       <p
+        aria-hidden="false"
+        aria-label="Name"
         className="mb-0 opacity-75"
+        role="dialog"
       >
         <span>
           Something

package/src/app/components/djgraph/DJNodeColumns.jsx

@@ -32,7 +32,10 @@ export function DJNodeColumns({ data, limit }) {
     };
   };
   return data.column_names.slice(0, limit).map(col => (
-    <div className={'custom-node-subheader node_type__' + data.type}>
+    <div
+      className={'custom-node-subheader node_type__' + data.type}
+      key={`${data.name}.${col.name}`}
+    >
       <div style={handleWrapperStyle}>
         <Handle
           type="target"

package/src/app/components/djgraph/DJNodeDimensions.jsx

@@ -42,10 +42,17 @@ export function DJNodeDimensions(data) {
     Object.entries(grouped).map(([dimKey, dimValue]) => {
       if (Array.isArray(dimValue.columns)) {
         const attributes = dimValue.columns.map(col => {
-          return <span className={'badge white_badge'}>{col}</span>;
+          return (
+            <span className={'badge white_badge'} key={`attr-${col}`}>
+              {col}
+            </span>
+          );
         });
         return (
-          <div className={'custom-node-subheader node_type__' + data.type}>
+          <div
+            className={'custom-node-subheader node_type__' + data.type}
+            key={`dim-${dimValue.path}-${dimValue.dimension}`}
+          >
             <div className="custom-node-port">
               <a href={`/nodes/${dimValue.dimension}`}>{dimValue.dimension}</a>{' '}
               <div className={'badge node_type__metric text-black'}>

package/src/app/components/djgraph/__tests__/Collapse.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import Collapse from '../Collapse';
+import { mocks } from '../../../../mocks/mockNodes';
+import { ReactFlowProvider } from 'reactflow';
+
+jest.mock('../DJNodeDimensions', () => ({
+  DJNodeDimensions: jest.fn(data => <div>DJNodeDimensions content</div>),
+}));
+
+describe('<Collapse />', () => {
+  const defaultProps = {
+    collapsed: true,
+    text: 'Dimensions',
+    data: mocks.mockMetricNode,
+  };
+
+  it('renders without crashing', () => {
+    render(<Collapse {...defaultProps} />);
+  });
+
+  it('renders toggle for metric type', () => {
+    const { getByText } = render(
+      <Collapse {...defaultProps} data={mocks.mockMetricNode} />,
+    );
+    const button = screen.getByText('▶ Show Dimensions');
+    fireEvent.click(button);
+    expect(getByText('▼ Hide Dimensions')).toBeInTheDocument();
+  });
+
+  it('toggles More/Less button text for non-metric type on click', () => {
+    defaultProps.text = 'Columns';
+    const { getByText } = render(
+      <ReactFlowProvider>
+        <Collapse
+          {...defaultProps}
+          data={{
+            type: 'transform',
+            column_names: Array(11).fill(idx => {
+              return `column-${idx}`;
+            }),
+            primary_key: [],
+          }}
+        />
+      </ReactFlowProvider>,
+    );
+    const button = getByText('▶ More Columns');
+    fireEvent.click(button);
+    expect(getByText('▼ Less Columns')).toBeInTheDocument();
+  });
+});

package/src/app/components/djgraph/__tests__/DJNodeColumns.test.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DJNodeColumns } from '../DJNodeColumns';
+import { ReactFlowProvider } from 'reactflow';
+
+describe('<DJNodeColumns />', () => {
+  const defaultProps = {
+    data: {
+      name: 'TestName',
+      type: 'metric',
+      column_names: [
+        { name: 'col1', type: 'int' },
+        { name: 'col2', type: 'string' },
+        { name: 'col3', type: 'float' },
+      ],
+      primary_key: ['col1'],
+    },
+    limit: 10,
+  };
+
+  const domTestingLib = require('@testing-library/dom');
+  const { queryHelpers } = domTestingLib;
+
+  const queryByAttribute = attribute =>
+    queryHelpers.queryAllByAttribute.bind(null, attribute);
+
+  function getByAttribute(container, id, attribute, ...rest) {
+    const result = queryByAttribute(attribute)(container, id, ...rest);
+    return result[0];
+  }
+
+  function DJNodeColumnsWithProvider(props) {
+    return (
+      <ReactFlowProvider>
+        <DJNodeColumns {...props} />
+      </ReactFlowProvider>
+    );
+  }
+
+  it('renders without crashing', () => {
+    render(<DJNodeColumnsWithProvider {...defaultProps} />);
+  });
+
+  it('renders columns correctly', () => {
+    const { container } = render(
+      <DJNodeColumnsWithProvider {...defaultProps} />,
+    );
+
+    // renders column names
+    defaultProps.data.column_names.forEach(col => {
+      expect(screen.getByText(col.name, { exact: false })).toBeInTheDocument();
+    });
+
+    // appends (PK) to primary key column name
+    expect(screen.getByText('col1 (PK)')).toBeInTheDocument();
+
+    // renders column type badge correctly
+    defaultProps.data.column_names.forEach(col => {
+      expect(screen.getByText(col.type)).toBeInTheDocument();
+    });
+
+    // renders handles correctly
+    defaultProps.data.column_names.forEach(col => {
+      expect(
+        getByAttribute(
+          container,
+          defaultProps.data.name + '.' + col.name,
+          'data-handleid',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('renders limited columns based on the limit prop', () => {
+    const limitedProps = {
+      ...defaultProps,
+      limit: 2,
+    };
+
+    render(<DJNodeColumnsWithProvider {...limitedProps} />);
+    expect(screen.queryByText('col3')).not.toBeInTheDocument();
+  });
+});

package/src/app/components/djgraph/__tests__/DJNodeDimensions.test.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { DJNodeDimensions } from '../DJNodeDimensions';
+import DJClientContext from '../../../providers/djclient';
+
+const mockMetric = jest.fn();
+describe('<DJNodeDimensions />', () => {
+  const defaultProps = {
+    type: 'metric',
+    name: 'TestMetric',
+  };
+  const mockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        metric: mockMetric,
+      },
+    };
+  };
+
+  const DJNodeDimensionsWithContext = (djClient, props) => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...props} />
+      </DJClientContext.Provider>
+    );
+  };
+
+  beforeEach(() => {
+    // Reset the mock before each test
+    mockMetric.mockReset();
+  });
+
+  it('fetches dimensions for metric type', async () => {
+    mockMetric.mockResolvedValueOnce({
+      dimensions: [{ name: 'test.dimension' }],
+    });
+    const djClient = mockDJClient();
+
+    render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+    waitFor(() => {
+      expect(mockMetric).toHaveBeenCalledWith(defaultProps.name);
+    });
+  });
+
+  it('renders dimensions correctly after processing', async () => {
+    const testDimensions = [
+      {
+        name: 'default.us_state.state_name',
+        type: 'string',
+        path: [
+          'default.repair_order_details.repair_order_id',
+          'default.repair_order.hard_hat_id',
+          'default.hard_hat.state',
+        ],
+      },
+      {
+        name: 'default.us_state.state_region',
+        type: 'int',
+        path: [
+          'default.repair_order_details.repair_order_id',
+          'default.repair_order.hard_hat_id',
+          'default.hard_hat.state',
+        ],
+      },
+      {
+        name: 'default.us_state.state_region_description',
+        type: 'string',
+        path: [
+          'default.repair_order_details.repair_order_id',
+          'default.repair_order.hard_hat_id',
+          'default.hard_hat.state',
+        ],
+      },
+    ];
+    mockMetric.mockResolvedValueOnce({ dimensions: testDimensions });
+    const djClient = mockDJClient();
+
+    const { findByText } = render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    for (const dim of testDimensions) {
+      const [attribute, ...nodeName] = dim.name.split('.').reverse();
+      const dimension = nodeName.reverse().join('.');
+      expect(await findByText(attribute)).toBeInTheDocument();
+      expect(await findByText(dimension)).toBeInTheDocument();
+    }
+  });
+
+  it('does not fetch dimensions if type is not metric', () => {
+    const djClient = mockDJClient();
+    render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} type="transform" />
+      </DJClientContext.Provider>,
+    );
+    expect(mockMetric).not.toHaveBeenCalled();
+  });
+
+  it('handles errors gracefully', async () => {
+    mockMetric.mockRejectedValueOnce(new Error('API error'));
+
+    const djClient = mockDJClient();
+    render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    expect(await mockMetric).toHaveBeenCalledWith(defaultProps.name);
+  });
+});

package/src/app/index.tsx

@@ -13,6 +13,7 @@ import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { LoginPage } from './pages/LoginPage';
+import { RegisterTablePage } from './pages/RegisterTablePage';
 import { Root } from './pages/Root/Loadable';
 import DJClientContext from './providers/djclient';
 import { DataJunctionAPI } from './services/DJService';
@@ -59,6 +60,11 @@ export function App() {
                           key="namespaces"
                         />
                       </Route>
+                      <Route
+                        path="create/source"
+                        key="register"
+                        element={<RegisterTablePage />}
+                      ></Route>
                       <Route path="create/:nodeType">
                         <Route
                           path=":initialNamespace"