datajunction-ui 0.0.1-a1

package/src/app/components/DeleteNode.jsx

@@ -0,0 +1,55 @@
+import DJClientContext from '../providers/djclient';
+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 }) {
+  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 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

@@ -0,0 +1,24 @@
+import { Component } from 'react';
+
+export default class ListGroupItem extends Component {
+  render() {
+    const { label, value } = this.props;
+    return (
+      <div className="list-group-item d-flex">
+        <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"
+              role="dialog"
+              aria-hidden="false"
+              aria-label={label}
+            >
+              {value}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/app/components/NamespaceHeader.jsx

@@ -0,0 +1,31 @@
+import { Component } from 'react';
+import HorizontalHierarchyIcon from '../icons/HorizontalHierarchyIcon';
+
+export default class NamespaceHeader extends Component {
+  render() {
+    const { namespace } = this.props;
+    const namespaceParts = namespace.split('.');
+    const namespaceList = namespaceParts.map((piece, index) => {
+      return (
+        <li className="breadcrumb-item" key={index}>
+          <a
+            className="link-body-emphasis"
+            href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
+          >
+            {piece}
+          </a>
+        </li>
+      );
+    });
+    return (
+      <ol className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
+        <li className="breadcrumb-item">
+          <a href="/">
+            <HorizontalHierarchyIcon />
+          </a>
+        </li>
+        {namespaceList}
+      </ol>
+    );
+  }
+}

package/src/app/components/QueryInfo.jsx

@@ -0,0 +1,77 @@
+export default function QueryInfo({
+  id,
+  state,
+  engine_name,
+  engine_version,
+  errors,
+  links,
+  output_table,
+  scheduled,
+  started,
+  numRows,
+}) {
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <tr>
+            <th>Query ID</th>
+            <th>Engine</th>
+            <th>State</th>
+            <th>Scheduled</th>
+            <th>Started</th>
+            <th>Errors</th>
+            <th>Links</th>
+            <th>Output Table</th>
+            <th>Number of Rows</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <span className="rounded-pill badge bg-secondary-soft">{id}</span>
+            </td>
+            <td>
+              <span className="rounded-pill badge bg-secondary-soft">
+                {engine_name}
+                {' - '}
+                {engine_version}
+              </span>
+            </td>
+            <td>{state}</td>
+            <td>{scheduled}</td>
+            <td>{started}</td>
+            <td>
+              {errors?.length ? (
+                errors.map((e, idx) => (
+                  <p key={`error-${idx}`}>
+                    <span className="rounded-pill badge bg-secondary-error">
+                      {e}
+                    </span>
+                  </p>
+                ))
+              ) : (
+                <></>
+              )}
+            </td>
+            <td>
+              {links?.length ? (
+                links.map((link, idx) => (
+                  <p key={idx}>
+                    <a href={link} target="_blank" rel="noreferrer">
+                      {link}
+                    </a>
+                  </p>
+                ))
+              ) : (
+                <></>
+              )}
+            </td>
+            <td>{output_table}</td>
+            <td>{numRows}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/app/components/Tab.jsx

@@ -0,0 +1,25 @@
+import { Component } from 'react';
+
+export default class Tab extends Component {
+  render() {
+    const { id, onClick, selectedTab } = this.props;
+    return (
+      <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}
+              aria-label={this.props.name}
+              aria-hidden="false"
+            >
+              {this.props.name}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/app/components/ToggleSwitch.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+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}
+      onChange={e => onChange(e.target.checked)}
+    />
+    <label htmlFor="show-compiled-sql-toggle" className="switch"></label>{' '}
+    {toggleName}
+  </>
+);
+
+export default ToggleSwitch;

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/components/__tests__/ListGroupItem.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import ListGroupItem from '../ListGroupItem';
+
+const renderer = createRenderer();
+
+describe('<ListGroupItem />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(
+      <ListGroupItem label="Name" value={<span>Something</span>} />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import NamespaceHeader from '../NamespaceHeader';
+
+const renderer = createRenderer();
+
+describe('<NamespaceHeader />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(<NamespaceHeader namespace="shared.dimensions.accounts" />);
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
+<div
+  className="list-group-item d-flex"
+>
+  <div
+    className="d-flex gap-2 w-100 justify-content-between py-3"
+  >
+    <div>
+      <h6
+        className="mb-0 w-100"
+      >
+        Name
+      </h6>
+      <p
+        aria-hidden="false"
+        aria-label="Name"
+        className="mb-0 opacity-75"
+        role="dialog"
+      >
+        <span>
+          Something
+        </span>
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/app/components/__tests__/__snapshots__/NamespaceHeader.test.jsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
+<ol
+  className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"
+>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      href="/"
+    >
+      <HorizontalHierarchyIcon />
+    </a>
+  </li>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      className="link-body-emphasis"
+      href="/namespaces/shared"
+    >
+      shared
+    </a>
+  </li>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      className="link-body-emphasis"
+      href="/namespaces/shared.dimensions"
+    >
+      dimensions
+    </a>
+  </li>
+  <li
+    className="breadcrumb-item"
+  >
+    <a
+      className="link-body-emphasis"
+      href="/namespaces/shared.dimensions.accounts"
+    >
+      accounts
+    </a>
+  </li>
+</ol>
+`;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DJNodeDimensions } from './DJNodeDimensions';
+import { DJNodeColumns } from './DJNodeColumns';
+
+export default function Collapse({ collapsed, text, data }) {
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
+
+  return (
+    <>
+      <div className="collapse">
+        {data.type === 'metric' ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 Show' : '\u25BC Hide'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+        <div
+          className={`collapse-content ${
+            isCollapsed && data.type === 'metric' ? 'collapsed' : 'expanded'
+          }`}
+          aria-expanded={isCollapsed}
+        >
+          {data.type !== 'metric'
+            ? isCollapsed
+              ? DJNodeColumns({ data: data, limit: 10 })
+              : DJNodeColumns({ data: data, limit: 100 })
+            : DJNodeDimensions(data)}
+        </div>
+        {data.type !== 'metric' && data.column_names.length > 10 ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 More' : '\u25BC Less'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,89 @@
+import { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import Collapse from './Collapse';
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function DJNode({ id, data }) {
+  const handleWrapperStyle = {
+    display: 'flex',
+    position: 'absolute',
+    height: '100%',
+    flexDirection: 'column',
+    top: '50%',
+    justifyContent: 'space-between',
+  };
+  const handleWrapperStyleRight = { ...handleWrapperStyle, ...{ right: 0 } };
+
+  const handleStyle = {
+    width: '12px',
+    height: '12px',
+    borderRadius: '12px',
+    background: 'transparent',
+    border: '4px solid transparent',
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '0px',
+    left: 0,
+  };
+  const handleStyleLeft = percentage => {
+    return {
+      ...handleStyle,
+      ...{
+        transform: 'translate(-' + percentage + '%, -50%)',
+      },
+    };
+  };
+  const highlightNodeClass =
+    data.is_current === true ? ' dj-node_highlight' : '';
+  return (
+    <>
+      <div
+        className={'dj-node__full node_type__' + data.type + highlightNodeClass}
+        key={data.name}
+        style={{ width: '450px' }}
+      >
+        <div style={handleWrapperStyle}>
+          <Handle
+            type="target"
+            id={data.name}
+            position={Position.Left}
+            style={handleStyleLeft(100)}
+          />
+        </div>
+        <div className="dj-node__header">
+          <div className="serif">
+            {data.name
+              .split('.')
+              .slice(0, data.name.split('.').length - 1)
+              .join(' \u25B6 ')}
+          </div>
+        </div>
+        <div className="dj-node__body">
+          <b>{capitalize(data.type)}</b>
+          <br />{' '}
+          <a href={`/nodes/${data.name}`}>
+            {data.type === 'source' ? data.table : data.display_name}
+          </a>
+          <Collapse
+            collapsed={true}
+            text={data.type !== 'metric' ? 'columns' : 'dimensions'}
+            data={data}
+          />
+        </div>
+        <div style={handleWrapperStyleRight}>
+          <Handle
+            type="source"
+            id={data.name}
+            position={Position.Right}
+            style={handleStyleLeft(90)}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default memo(DJNode);