datajunction-ui 0.0.1-rc.9 → 0.0.2

package/.env

@@ -1 +1,3 @@
 REACT_APP_DJ_URL=http://localhost:8000
+REACT_USE_SSE=true
+REACT_ENABLE_GOOGLE_OAUTH=true

package/.prettierignore

@@ -1,4 +1,6 @@
 build/
 node_modules/
 package-lock.json
-yarn.lock
+yarn.lock
+dist/
+coverage/

package/Makefile

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

package/dj-logo.svg

@@ -0,0 +1,10 @@
+<svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="83" height="83" fill="url(#pattern0)"/>
+<rect width="83" height="83" stroke="black"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1_2" transform="scale(0.00364964)"/>
+</pattern>
+<image id="image0_1_2" width="274" height="274" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.9",
+  "version": "0.0.2",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -23,68 +23,88 @@
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "7.18.6",
+    "@codemirror/lang-sql": "^6.4.0",
     "@reduxjs/toolkit": "1.8.5",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@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",
     "@types/react-redux": "^7.1.24",
+    "@types/react-select": "5.0.1",
     "@types/react-test-renderer": "^18.0.0",
     "@types/rimraf": "^3.0.2",
     "@types/shelljs": "^0.8.11",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.18.0",
+    "@uiw/codemirror-extensions-basic-setup": "4.21.12",
+    "@uiw/codemirror-extensions-langs": "4.21.12",
+    "@uiw/react-codemirror": "4.21.12",
     "babel-loader": "9.1.2",
     "chalk": "4.1.2",
+    "codemirror": "^6.0.0",
+    "cronstrue": "2.27.0",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.3",
+    "css-loader": "6.8.1",
     "dagre": "^0.8.5",
     "datajunction": "0.0.1-rc.0",
     "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",
     "i18next-scanner": "4.0.0",
     "inquirer": "7.3.3",
     "inquirer-directory": "2.2.0",
+    "js-cookie": "3.0.5",
     "lint-staged": "13.0.3",
     "node-plop": "0.26.3",
     "plop": "2.7.6",
     "prettier": "2.7.1",
     "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",
     "react-scripts": "5.0.1",
+    "react-select": "5.7.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-test-renderer": "18.2.0",
     "reactflow": "^11.7.0",
-    "redux-injectors": "1.3.0",
+    "recharts": "3.0.2",
+    "redux-injectors": "2.1.0",
     "redux-saga": "1.2.1",
     "rimraf": "3.0.2",
     "sanitize.css": "13.0.0",
+    "sass": "1.66.1",
+    "sass-loader": "13.3.2",
     "serve": "14.0.1",
     "shelljs": "0.8.5",
     "sql-formatter": "^12.2.0",
-    "style-loader": "3.3.2",
+    "style-loader": "3.3.3",
     "stylelint": "14.12.0",
     "stylelint-config-recommended": "9.0.0",
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
-    "typescript": "4.6.4",
+    "typescript": "5.8.3",
+    "unidiff": "1.0.4",
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",
     "webpack-cli": "5.0.2",
-    "webpack-dev-server": "4.13.3"
+    "webpack-dev-server": "4.13.3",
+    "yup": "1.3.2"
   },
   "scripts": {
     "webpack-start": "webpack-dev-server --open",
@@ -133,6 +153,9 @@
     ]
   },
   "jest": {
+    "transformIgnorePatterns": [
+      "!node_modules/"
+    ],
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
       "!src/**/*/*.d.ts",
@@ -143,20 +166,36 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 90,
-        "functions": 90,
-        "lines": 90,
-        "statements": 90
+        "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": {
+    "@codemirror/state": "6.2.0",
+    "@codemirror/view": "6.2.0",
+    "@lezer/common": "^1.0.0"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@testing-library/user-event": "14.4.3",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
-    "mini-css-extract-plugin": "2.7.5"
+    "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/__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/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,113 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should render and match the snapshot 1`] = `
-<BrowserRouter>
-  <Helmet
-    defaultTitle="DataJunction: A Metrics Platform"
-    defer={true}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    titleTemplate="DataJunction: %s"
-  >
-    <meta
-      content="DataJunction serves as a semantic layer to help manage metrics"
-      name="description"
-    />
-  </Helmet>
-  <Context.Provider
-    value={
-      Object {
-        "DataJunctionAPI": Object {
-          "dag": [Function],
-          "downstreams": [Function],
-          "lineage": [Function],
-          "metric": [Function],
-          "namespace": [Function],
-          "namespaces": [Function],
-          "node": [Function],
-          "upstreams": [Function],
-        },
-      }
-    }
-  >
-    <Routes>
-      <Route
-        element={<Unknown />}
-        path="/"
-      >
-        <React.Fragment>
-          <Route
-            path="nodes"
-          >
-            <Route
-              element={
-                <NodePage
-                  djClient={
-                    Object {
-                      "dag": [Function],
-                      "downstreams": [Function],
-                      "lineage": [Function],
-                      "metric": [Function],
-                      "namespace": [Function],
-                      "namespaces": [Function],
-                      "node": [Function],
-                      "upstreams": [Function],
-                    }
-                  }
-                />
-              }
-              path=":name"
-            />
-          </Route>
-          <Route
-            element={
-              <ListNamespacesPage
-                djClient={
-                  Object {
-                    "dag": [Function],
-                    "downstreams": [Function],
-                    "lineage": [Function],
-                    "metric": [Function],
-                    "namespace": [Function],
-                    "namespaces": [Function],
-                    "node": [Function],
-                    "upstreams": [Function],
-                  }
-                }
-              />
-            }
-            path="/"
-          />
-          <Route
-            path="namespaces"
-          >
-            <Route
-              element={
-                <NamespacePage
-                  djClient={
-                    Object {
-                      "dag": [Function],
-                      "downstreams": [Function],
-                      "lineage": [Function],
-                      "metric": [Function],
-                      "namespace": [Function],
-                      "namespaces": [Function],
-                      "node": [Function],
-                      "upstreams": [Function],
-                    }
-                  }
-                />
-              }
-              path=":namespace"
-            />
-          </Route>
-        </React.Fragment>
-      </Route>
-      <Route
-        element={<Unknown />}
-        path="*"
-      />
-    </Routes>
-  </Context.Provider>
-</BrowserRouter>
+<CookiesProvider>
+  <BrowserRouter>
+    <LoginPage />
+  </BrowserRouter>
+</CookiesProvider>
 `;

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() {
@@ -8,7 +9,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}
+            >
+              <Markdown>{value}</Markdown>
+            </p>
           </div>
         </div>
       </div>

package/src/app/components/NamespaceHeader.jsx

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import HorizontalHierarchyIcon from '../icons/HorizontalHierarchyIcon';
 
 export default class NamespaceHeader extends Component {
   render() {
@@ -6,7 +7,7 @@ export default class NamespaceHeader extends Component {
     const namespaceParts = namespace.split('.');
     const namespaceList = namespaceParts.map((piece, index) => {
       return (
-        <li className="breadcrumb-item">
+        <li className="breadcrumb-item" key={index}>
           <a
             className="link-body-emphasis"
             href={'/namespaces/' + namespaceParts.slice(0, index + 1).join('.')}
@@ -19,18 +20,8 @@ export default class NamespaceHeader extends Component {
     return (
       <ol className="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
         <li className="breadcrumb-item">
-          <a href="/namespaces/">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              className="bi bi-house-door-fill"
-              viewBox="0 0 16 16"
-              style={{ paddingBottom: '0.2rem' }}
-            >
-              <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>
+          <a href="/">
+            <HorizontalHierarchyIcon />
           </a>
         </li>
         {namespaceList}

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,90 @@
+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,
+  nodeVersion = null,
+}) {
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm(
+        'Deleting materialization job ' +
+          values.materializationName +
+          ' for node version ' +
+          values.nodeVersion +
+          '. Are you sure?',
+      )
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deleteMaterialization(
+      values.nodeName,
+      values.materializationName,
+      values.nodeVersion,
+    );
+    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,
+    nodeVersion: nodeVersion,
+  };
+
+  return (
+    <div>
+      <Formik
+        key={`${nodeName}-${materializationName}-${nodeVersion}`}
+        initialValues={initialValues}
+        enableReinitialize={true}
+        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>
+  );
+}