datajunction-ui 0.0.1-rc.9 → 0.0.3

package/src/app/components/QueryInfo.jsx

@@ -0,0 +1,172 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { solarizedDark } from 'react-syntax-highlighter/src/styles/hljs';
+import React from 'react';
+
+export default function QueryInfo({
+  id,
+  state,
+  engine_name,
+  engine_version,
+  errors,
+  links,
+  output_table,
+  scheduled,
+  started,
+  finished,
+  numRows,
+  isList = false,
+}) {
+  return isList === false ? (
+    <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>
+  ) : (
+    <div className="rightbottom">
+      <ul style={{ padding: '20px' }}>
+        <li className={'query-info'}>
+          <label>Query ID</label>{' '}
+          <span className="tag_value rounded-pill badge">
+            {links?.length ? (
+              <a
+                href={links[links.length - 1]}
+                target={'_blank'}
+                rel="noreferrer"
+              >
+                {id}
+              </a>
+            ) : (
+              id
+            )}
+          </span>
+        </li>
+        <li className={'query-info'}>
+          <label>State</label>
+          <span className="tag_value rounded-pill badge">{state}</span>
+        </li>
+        <li className={'query-info'}>
+          <label>Engine</label>{' '}
+          <span className="tag_value rounded-pill badge">
+            {engine_name}
+            {' - '}
+            {engine_version}
+          </span>
+        </li>
+        <li className={'query-info'}>
+          <label>Scheduled</label> {scheduled}
+        </li>
+        <li className={'query-info'}>
+          <label>Started</label> {started}
+        </li>
+        <li className={'query-info'}>
+          <label>Finished</label> {finished}
+        </li>
+        <li className={'query-info'}>
+          <label>Logs</label>{' '}
+          {errors?.length ? (
+            errors.map(error => (
+              <div
+                style={{
+                  height: '800px',
+                  width: '80%',
+                  overflow: 'scroll',
+                  borderRadius: '0',
+                  border: '1px solid #ccc',
+                }}
+                className="queryrunner-query"
+              >
+                <SyntaxHighlighter
+                  language="javascript"
+                  style={solarizedDark}
+                  wrapLines={true}
+                >
+                  {error}
+                </SyntaxHighlighter>
+              </div>
+            ))
+          ) : (
+            <></>
+          )}
+        </li>
+        <li className={'query-info'}>
+          <label>Links:</label>{' '}
+          {links?.length ? (
+            links.map((link, idx) => (
+              <p key={idx}>
+                <a href={link} target="_blank" rel="noreferrer">
+                  {link}
+                </a>
+              </p>
+            ))
+          ) : (
+            <></>
+          )}
+        </li>
+        <li className={'query-info'}>
+          <label>Output Table:</label> {output_table}
+        </li>
+        <li className={'query-info'}>
+          <label>Rows:</label> {numRows}
+        </li>
+      </ul>
+    </div>
+  );
+}

package/src/app/components/Search.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useContext } from 'react';
+import DJClientContext from '../providers/djclient';
+import Fuse from 'fuse.js';
+
+import './search.css';
+
+export default function Search() {
+  const [fuse, setFuse] = useState();
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const truncate = str => {
+    if (str === null) {
+      return '';
+    }
+    return str.length > 100 ? str.substring(0, 90) + '...' : str;
+  };
+
+  useEffect(() => {
+    const fetchNodes = async () => {
+      try {
+        const [data, tags] = await Promise.all([
+          djClient.nodeDetails(),
+          djClient.listTags(),
+        ]);
+        const allEntities = data.concat(
+          (tags || []).map(tag => {
+            tag.type = 'tag';
+            return tag;
+          }),
+        );
+        const fuse = new Fuse(allEntities || [], {
+          keys: [
+            'name', // will be assigned a `weight` of 1
+            { name: 'description', weight: 2 },
+            { name: 'display_name', weight: 3 },
+            { name: 'type', weight: 4 },
+            { name: 'tag_type', weight: 5 },
+          ],
+        });
+        setFuse(fuse);
+      } catch (error) {
+        console.error('Error fetching nodes or tags:', error);
+      }
+    };
+    fetchNodes();
+  }, []);
+
+  const handleChange = e => {
+    setSearchValue(e.target.value);
+    if (fuse) {
+      setSearchResults(fuse.search(e.target.value).map(result => result.item));
+    }
+  };
+
+  return (
+    <div>
+      <form
+        className="search-box"
+        onSubmit={e => {
+          e.preventDefault();
+        }}
+      >
+        <input
+          type="text"
+          placeholder="Search"
+          name="search"
+          value={searchValue}
+          onChange={handleChange}
+        />
+      </form>
+      <div className="search-results">
+        {searchResults.slice(0, 20).map(item => {
+          const itemUrl =
+            item.type !== 'tag' ? `/nodes/${item.name}` : `/tags/${item.name}`;
+          return (
+            <a href={itemUrl}>
+              <div key={item.name} className="search-result-item">
+                <span className={`node_type__${item.type} badge node_type`}>
+                  {item.type}
+                </span>
+                {item.display_name} (<b>{item.name}</b>){' '}
+                {item.description ? '- ' : ' '}
+                {truncate(item.description || '')}
+              </div>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/app/components/Tab.jsx

@@ -7,7 +7,14 @@ 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}
+              aria-label={this.props.name}
+              aria-hidden="false"
+            >
               {this.props.name}
             </button>
           </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__/NodeListActions.test.jsx

@@ -0,0 +1,94 @@
+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 NodeListActions from '../NodeListActions';
+
+describe('<NodeListActions />', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderElement = djClient => {
+    return render(
+      <DJClientContext.Provider value={djClient}>
+        <NodeListActions nodeName="default.hard_hat" />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        deactivate: jest.fn(),
+      },
+    };
+  };
+
+  it('deletes a node when clicked', async () => {
+    global.confirm = () => true;
+    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);
+
+  it('skips a node deletion during confirm', async () => {
+    global.confirm = () => false;
+    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).not.toBeCalled();
+    });
+  }, 60000);
+
+  it('fail deleting a node when clicked', async () => {
+    global.confirm = () => true;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 777,
+      json: { message: '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('source.warehouse.schema.some_table'),
+    ).toBeInTheDocument();
+  }, 60000);
+});

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__/Search.test.jsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Search from '../Search';
+import DJClientContext from '../../providers/djclient';
+import { Root } from '../../pages/Root';
+import { HelmetProvider } from 'react-helmet-async';
+
+describe('<Search />', () => {
+  const mockDjClient = {
+    logout: jest.fn(),
+    nodeDetails: async () => [
+      {
+        name: 'default.repair_orders',
+        display_name: 'Default: Repair Orders',
+        description: 'Repair orders',
+        version: 'v1.0',
+        type: 'source',
+        status: 'valid',
+        mode: 'published',
+        updated_at: '2023-08-21T16:48:52.880498+00:00',
+      },
+      {
+        name: 'default.repair_order_details',
+        display_name: 'Default: Repair Order Details',
+        description: 'Details on repair orders',
+        version: 'v1.0',
+        type: 'source',
+        status: 'valid',
+        mode: 'published',
+        updated_at: '2023-08-21T16:48:52.981201+00:00',
+      },
+    ],
+    listTags: async () => [
+      {
+        description: 'something',
+        display_name: 'Report A',
+        tag_metadata: {},
+        name: 'report.a',
+        tag_type: 'report',
+      },
+      {
+        description: 'report B',
+        display_name: 'Report B',
+        tag_metadata: {},
+        name: 'report.b',
+        tag_type: 'report',
+      },
+    ],
+  };
+
+  it('displays search results correctly', () => {
+    render(
+      <HelmetProvider>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <Root />
+        </DJClientContext.Provider>
+      </HelmetProvider>,
+    );
+    const searchInput = screen.queryByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'Repair' } });
+    expect(searchInput.value).toBe('Repair');
+  });
+});

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,11 +14,16 @@ 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
-        </span>
+        <Markdown>
+          <span>
+            Something
+          </span>
+        </Markdown>
       </p>
     </div>
   </div>

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

@@ -8,25 +8,9 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
     className="breadcrumb-item"
   >
     <a
-      href="/namespaces/"
+      href="/"
     >
-      <svg
-        className="bi bi-house-door-fill"
-        fill="currentColor"
-        height="16"
-        style={
-          Object {
-            "paddingBottom": "0.2rem",
-          }
-        }
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
-        />
-      </svg>
+      <HorizontalHierarchyIcon />
     </a>
   </li>
   <li

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

@@ -0,0 +1,47 @@
+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);
+
+  const limit = 5;
+  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: limit })
+              : DJNodeColumns({ data: data, limit: 100 })
+            : DJNodeDimensions(data)}
+        </div>
+        {data.type !== 'metric' && data.column_names.length > limit ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 More' : '\u25BC Less'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+      </div>
+    </>
+  );
+}