datajunction-ui 0.0.1-a1 → 0.0.1-a100

package/Makefile

@@ -1,3 +1,9 @@
 dev-release:
 	yarn version --prerelease --preid dev --no-git-tag-version
-	npm publish
+	npm publish
+
+test:
+	yarn test --coverage --watchAll --runInBand
+
+lint:
+	npm run lint

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a1",
+  "version": "0.0.1a100",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -28,7 +28,7 @@
     "@testing-library/jest-dom": "6.1.2",
     "@testing-library/react": "14.0.0",
     "@types/fontfaceobserver": "^2.1.0",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "29.5.14",
     "@types/node": "^14.18.27",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
@@ -54,6 +54,7 @@
     "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
     "formik": "2.4.3",
+    "fuse.js": "6.6.2",
     "husky": "8.0.1",
     "i18next": "21.9.2",
     "i18next-browser-languagedetector": "6.1.5",
@@ -68,10 +69,12 @@
     "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
     "react-cookie": "4.1.1",
+    "react-diff-view": "3.2.1",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "11.18.6",
     "react-is": "18.2.0",
+    "react-markdown": "9.0.1",
     "react-querybuilder": "6.5.1",
     "react-redux": "7.2.8",
     "react-router-dom": "6.3.0",
@@ -80,7 +83,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-test-renderer": "18.2.0",
     "reactflow": "^11.7.0",
-    "redux-injectors": "1.3.0",
+    "redux-injectors": "2.1.0",
     "redux-saga": "1.2.1",
     "rimraf": "3.0.2",
     "sanitize.css": "13.0.0",
@@ -95,6 +98,7 @@
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
     "typescript": "4.6.4",
+    "unidiff": "1.0.4",
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",
     "webpack-cli": "5.0.2",
@@ -161,11 +165,17 @@
     ],
     "coverageThreshold": {
       "global": {
-        "statements": 90,
-        "branches": 75,
-        "lines": 90,
-        "functions": 85
+        "statements": 80,
+        "branches": 70,
+        "lines": 80,
+        "functions": 80
       }
+    },
+    "moduleNameMapper": {
+      "unist-util-visit-parents/do-not-use-color": "<rootDir>/node_modules/unist-util-visit-parents/lib/color.js",
+      "^#minpath$": "<rootDir>/node_modules/vfile/lib/minpath.browser.js",
+      "^#minproc$": "<rootDir>/node_modules/vfile/lib/minproc.browser.js",
+      "^#minurl$": "<rootDir>/node_modules/vfile/lib/minurl.browser.js"
     }
   },
   "resolutions": {
@@ -183,6 +193,7 @@
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
     "jest-fetch-mock": "3.0.3",
+    "jest-watch-typeahead": "2.2.2",
     "mini-css-extract-plugin": "2.7.6",
     "resize-observer-polyfill": "1.5.1"
   }

package/public/index.html

@@ -6,7 +6,7 @@
     <link rel="icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="public/manifest.json" />
+    <link rel="manifest" href="manifest.json" />
     <link rel="manifest" href="src/styles/index.css" />
     <meta property="og:title" content="DataJunction UI" />
     <meta property="og:description" content="" />

package/src/app/components/AddNodeDropdown.jsx

@@ -0,0 +1,44 @@
+export default function AddNodeDropdown({ namespace }) {
+  return (
+    <span
+      className="menu-link"
+      style={{ margin: '0.5em 0 0 1em', width: '130px' }}
+    >
+      <span className="menu-title">
+        <div className="dropdown">
+          <span className="add_node">+ Add Node</span>
+          <div className="dropdown-content">
+            <a href={`/create/source`}>
+              <div className="node_type__source node_type_creation_heading">
+                Register Table
+              </div>
+            </a>
+            <a href={`/create/transform/${namespace}`}>
+              <div className="node_type__transform node_type_creation_heading">
+                Transform
+              </div>
+            </a>
+            <a href={`/create/metric/${namespace}`}>
+              <div className="node_type__metric node_type_creation_heading">
+                Metric
+              </div>
+            </a>
+            <a href={`/create/dimension/${namespace}`}>
+              <div className="node_type__dimension node_type_creation_heading">
+                Dimension
+              </div>
+            </a>
+            <a href={`/create/tag`}>
+              <div className="entity__tag node_type_creation_heading">Tag</div>
+            </a>
+            <a href={`/create/cube/${namespace}`}>
+              <div className="node_type__cube node_type_creation_heading">
+                Cube
+              </div>
+            </a>
+          </div>
+        </div>
+      </span>
+    </span>
+  );
+}

package/src/app/components/ListGroupItem.jsx

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import Markdown from 'react-markdown';
 
 export default class ListGroupItem extends Component {
   render() {
@@ -14,7 +15,7 @@ export default class ListGroupItem extends Component {
               aria-hidden="false"
               aria-label={label}
             >
-              {value}
+              <Markdown>{value}</Markdown>
             </p>
           </div>
         </div>

package/src/app/components/NodeListActions.jsx

@@ -0,0 +1,69 @@
+import DJClientContext from '../providers/djclient';
+import * as React from 'react';
+import DeleteIcon from '../icons/DeleteIcon';
+import EditIcon from '../icons/EditIcon';
+import { Form, Formik } from 'formik';
+import { useContext } from 'react';
+import { displayMessageAfterSubmit } from '../../utils/form';
+
+export default function NodeListActions({ nodeName }) {
+  const [editButton, setEditButton] = React.useState(<EditIcon />);
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm('Deleting node ' + values.nodeName + '. Are you sure?')
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deactivate(values.nodeName);
+    if (status === 200 || status === 201 || status === 204) {
+      setStatus({
+        success: <>Successfully deleted node {values.nodeName}</>,
+      });
+      setEditButton(''); // hide the Edit button
+      setDeleteButton(''); // hide the Delete button
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const initialValues = {
+    nodeName: nodeName,
+  };
+
+  return (
+    <div>
+      <a href={`/nodes/${nodeName}/edit`} style={{ marginLeft: '0.5rem' }}>
+        {editButton}
+      </a>
+      <Formik initialValues={initialValues} onSubmit={deleteNode}>
+        {function Render({ status, setFieldValue }) {
+          return (
+            <Form className="deleteNode">
+              {displayMessageAfterSubmit(status)}
+              {
+                <>
+                  <button
+                    type="submit"
+                    style={{
+                      marginLeft: 0,
+                      all: 'unset',
+                      color: '#005c72',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {deleteButton}
+                  </button>
+                </>
+              }
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}

package/src/app/components/NodeMaterializationDelete.jsx

@@ -0,0 +1,80 @@
+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 NodeMaterializationDelete({
+  nodeName,
+  materializationName,
+}) {
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm(
+        'Deleting materialization job ' +
+          values.materializationName +
+          '. Are you sure?',
+      )
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deleteMaterialization(
+      values.nodeName,
+      values.materializationName,
+    );
+    if (status === 200 || status === 201 || status === 204) {
+      window.location.reload();
+      setStatus({
+        success: (
+          <>
+            Successfully deleted materialization job:{' '}
+            {values.materializationName}
+          </>
+        ),
+      });
+      setDeleteButton(''); // hide the Delete button
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const initialValues = {
+    nodeName: nodeName,
+    materializationName: materializationName,
+  };
+
+  return (
+    <div>
+      <Formik initialValues={initialValues} onSubmit={deleteNode}>
+        {function Render({ status, setFieldValue }) {
+          return (
+            <Form className="deleteNode">
+              {displayMessageAfterSubmit(status)}
+              {
+                <>
+                  <button
+                    type="submit"
+                    style={{
+                      marginLeft: 0,
+                      all: 'unset',
+                      color: '#005c72',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {deleteButton}
+                  </button>
+                </>
+              }
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}

package/src/app/components/QueryInfo.jsx

@@ -1,3 +1,7 @@
+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,
@@ -8,9 +12,11 @@ export default function QueryInfo({
   output_table,
   scheduled,
   started,
+  finished,
   numRows,
+  isList = false,
 }) {
-  return (
+  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">
@@ -73,5 +79,94 @@ export default function QueryInfo({
         </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.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/__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__/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');
+  });
+});