datajunction-ui 0.0.1-rc.2 → 0.0.1-rc.22

package/src/app/pages/NodePage/index.jsx

@@ -1,14 +1,23 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
+import { useContext, useEffect, useState } from 'react';
 import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
+import NodeHistory from './NodeHistory';
+import DJClientContext from '../../providers/djclient';
+import NodeSQLTab from './NodeSQLTab';
+import NodeMaterializationTab from './NodeMaterializationTab';
+import ClientCodePopover from './ClientCodePopover';
+import NodesWithDimension from './NodesWithDimension';
+import NodeColumnLineage from './NodeLineageTab';
+import EditIcon from '../../icons/EditIcon';
+import AlertIcon from '../../icons/AlertIcon';
 
 export function NodePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [state, setState] = useState({
     selectedTab: 0,
   });
@@ -20,7 +29,7 @@ export function NodePage() {
   };
 
   const buildTabs = tab => {
-    return (
+    return tab.display ? (
       <Tab
         key={tab.id}
         id={tab.id}
@@ -28,72 +37,173 @@ export function NodePage() {
         onClick={onClickTab(tab.id)}
         selectedTab={state.selectedTab}
       />
-    );
+    ) : null;
   };
 
   const { name } = useParams();
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await DataJunctionAPI.node(name);
+      const data = await djClient.node(name);
+      data.createNodeClientCode = await djClient.clientCode(name);
       setNode(data);
+      if (data.type === 'metric') {
+        const metric = await djClient.metric(name);
+        data.dimensions = metric.dimensions;
+        setNode(data);
+      }
+      if (data.type === 'cube') {
+        const cube = await djClient.cube(name);
+        data.cube_elements = cube.cube_elements;
+        setNode(data);
+      }
     };
     fetchData().catch(console.error);
-  }, [name]);
+  }, [djClient, name]);
+
+  const tabsList = node => {
+    return [
+      {
+        id: 0,
+        name: 'Info',
+        display: true,
+      },
+      {
+        id: 1,
+        name: 'Columns',
+        display: true,
+      },
+      {
+        id: 2,
+        name: 'Graph',
+        display: true,
+      },
+      {
+        id: 3,
+        name: 'History',
+        display: true,
+      },
+      {
+        id: 4,
+        name: 'SQL',
+        display: node?.type !== 'dimension' && node?.type !== 'source',
+      },
+      {
+        id: 5,
+        name: 'Materializations',
+        display: node?.type !== 'source',
+      },
+      {
+        id: 6,
+        name: 'Linked Nodes',
+        display: node?.type === 'dimension',
+      },
+      {
+        id: 7,
+        name: 'Lineage',
+        display: node?.type === 'metric',
+      },
+    ];
+  };
 
-  const TabsJson = [
-    {
-      id: 0,
-      name: 'Info',
-    },
-    {
-      id: 1,
-      name: 'Columns',
-    },
-    {
-      id: 2,
-      name: 'Graph',
-    },
-  ];
   //
   //
   let tabToDisplay = null;
   switch (state.selectedTab) {
     case 0:
-      tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
+      tabToDisplay =
+        node && node.message === undefined ? <NodeInfoTab node={node} /> : '';
       break;
     case 1:
-      tabToDisplay = <NodeColumnTab node={node} />;
+      tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
       break;
     case 2:
-      tabToDisplay = <NodeLineage djNode={node} />;
+      tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
+      break;
+    case 3:
+      tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
+      break;
+    case 4:
+      tabToDisplay =
+        node?.type === 'metric' ? <NodeSQLTab djNode={node} /> : <br />;
+      break;
+    case 5:
+      tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
       break;
-    default:
+    case 6:
+      tabToDisplay = <NodesWithDimension node={node} djClient={djClient} />;
+      break;
+    case 7:
+      tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
+      break;
+    default: /* istanbul ignore next */
       tabToDisplay = <NodeInfoTab node={node} />;
   }
-
   // @ts-ignore
   return (
     <div className="node__header">
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
-        <div className="card-header">
-          <h3 className="card-title align-items-start flex-column">
-            <span className="card-label fw-bold text-gray-800">
-              {node?.display_name}
-            </span>
-          </h3>
-          <span
-            className="fs-6 fw-semibold text-gray-400"
-            style={{ marginTop: '-4rem' }}
-          >
-            Updated {new Date(node?.updated_at).toDateString()}
-          </span>
-          <div className="align-items-center row">
-            {TabsJson.map(buildTabs)}
+        {node?.message === undefined ? (
+          <div className="card-header">
+            <h3
+              className="card-title align-items-start flex-column"
+              style={{ display: 'inline-block' }}
+            >
+              <span
+                className="card-label fw-bold text-gray-800"
+                role="dialog"
+                aria-hidden="false"
+                aria-label="DisplayName"
+              >
+                {node?.display_name}{' '}
+                <span
+                  className={'node_type__' + node?.type + ' badge node_type'}
+                  role="dialog"
+                  aria-hidden="false"
+                  aria-label="NodeType"
+                >
+                  {node?.type}
+                </span>
+              </span>
+            </h3>
+            <a
+              href={`/nodes/${node?.name}/edit`}
+              style={{ marginLeft: '0.5rem' }}
+            >
+              <EditIcon />
+            </a>
+            <ClientCodePopover code={node?.createNodeClientCode} />
+            <div>
+              <a
+                href={'/nodes/' + node?.name}
+                className="link-table"
+                role="dialog"
+                aria-hidden="false"
+                aria-label="NodeName"
+              >
+                {node?.name}
+              </a>
+              <span
+                className="rounded-pill badge bg-secondary-soft"
+                style={{ marginLeft: '0.5rem' }}
+              >
+                {node?.version}
+              </span>
+            </div>
+            <div className="align-items-center row">
+              {tabsList(node).map(buildTabs)}
+            </div>
+            {tabToDisplay}
+          </div>
+        ) : node?.message !== undefined ? (
+          <div className="message alert" style={{ margin: '20px' }}>
+            <AlertIcon />
+            Node `{name}` does not exist!
           </div>
-          {tabToDisplay}
-        </div>
+        ) : (
+          ''
+        )}
       </div>
     </div>
   );

package/src/app/pages/NotFoundPage/__tests__/index.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { NotFoundPage } from '../index';
+import { HelmetProvider } from 'react-helmet-async';
+
+describe('<NotFoundPage />', () => {
+  it('displays the correct 404 message ', () => {
+    const { getByText } = render(
+      <HelmetProvider>
+        <NotFoundPage />
+      </HelmetProvider>,
+    );
+
+    expect(getByText('Page not found.')).toBeInTheDocument();
+  });
+});

package/src/app/pages/RegisterTablePage/Loadable.jsx

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const RegisterTablePage = () => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.RegisterTablePage,
+    {
+      fallback: <div></div>,
+    },
+  )();
+};

package/src/app/pages/RegisterTablePage/index.jsx

@@ -0,0 +1,163 @@
+/**
+ * Node add + edit page for transforms, metrics, and dimensions. The creation and edit flow for these
+ * node types is largely the same, with minor differences handled server-side. For the `query`
+ * field, this page will render a CodeMirror SQL editor with autocompletion and syntax highlighting.
+ */
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import 'styles/node-creation.scss';
+import AlertIcon from '../../icons/AlertIcon';
+import ValidIcon from '../../icons/ValidIcon';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+
+export function RegisterTablePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [catalogs, setCatalogs] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const catalogs = await djClient.catalogs();
+      setCatalogs(
+        catalogs.map(catalog => {
+          return { value: catalog.name, label: catalog.name };
+        }),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
+  const initialValues = {
+    catalog: '',
+    schema: '',
+    table: '',
+  };
+
+  const validator = values => {
+    const errors = {};
+    if (!values.table) {
+      errors.table = 'Required';
+    }
+    if (!values.schema) {
+      errors.schema = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    const { status, json } = await djClient.registerTable(
+      values.catalog,
+      values.schema,
+      values.table,
+    );
+    if (status === 200 || status === 201) {
+      setStatus({
+        success: (
+          <>
+            Successfully registered source node{' '}
+            <a href={`/nodes/${json.name}`}>{json.name}</a>, which references
+            table {values.catalog}.{values.schema}.{values.table}.
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+    setSubmitting(false);
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
+
+  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>
+    );
+  };
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h2>
+            Register{' '}
+            <span className={`node_type__source node_type_creation_heading`}>
+              Source
+            </span>
+          </h2>
+          <center>
+            <Formik
+              initialValues={initialValues}
+              validate={validator}
+              onSubmit={handleSubmit}
+            >
+              {function Render({ isSubmitting, status, setFieldValue }) {
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {
+                      <>
+                        <div className="SourceCreationInput">
+                          <ErrorMessage name="catalog" component="span" />
+                          <label htmlFor="catalog">Catalog</label>
+                          <FormikSelect
+                            selectOptions={catalogs}
+                            formikFieldName="catalog"
+                            placeholder="Choose Catalog"
+                            defaultValue={catalogs[0]}
+                          />
+                        </div>
+                        <div className="SourceCreationInput">
+                          <ErrorMessage name="schema" component="span" />
+                          <label htmlFor="schema">Schema</label>
+                          <Field
+                            type="text"
+                            name="schema"
+                            id="schema"
+                            placeholder="Schema"
+                          />
+                        </div>
+                        <div className="SourceCreationInput NodeCreationInput">
+                          <ErrorMessage name="table" component="span" />
+                          <label htmlFor="table">Table</label>
+                          <Field
+                            type="text"
+                            name="table"
+                            id="table"
+                            placeholder="Table"
+                          />
+                        </div>
+                        <button type="submit" disabled={isSubmitting}>
+                          Register
+                        </button>
+                      </>
+                    }
+                  </Form>
+                );
+              }}
+            </Formik>
+          </center>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/pages/Root/__tests__/index.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Root } from '../index';
+import DJClientContext from '../../../providers/djclient';
+import { HelmetProvider } from 'react-helmet-async';
+
+describe('<Root />', () => {
+  const mockDjClient = {
+    logout: jest.fn(),
+  };
+
+  it('renders with the correct title and navigation', async () => {
+    render(
+      <HelmetProvider>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <Root />
+        </DJClientContext.Provider>
+      </HelmetProvider>,
+    );
+
+    waitFor(() => {
+      expect(document.title).toEqual('DataJunction');
+      const metaDescription = document.querySelector(
+        "meta[name='description']",
+      );
+      expect(metaDescription).toBeInTheDocument();
+      expect(metaDescription.content).toBe(
+        'DataJunction Metrics Platform Webapp',
+      );
+
+      expect(screen.getByText(/^DataJunction$/)).toBeInTheDocument();
+      expect(screen.getByText('Explore').closest('a')).toHaveAttribute(
+        'href',
+        '/',
+      );
+      expect(screen.getByText('SQL').closest('a')).toHaveAttribute(
+        'href',
+        '/sql',
+      );
+      expect(screen.getByText('Docs').closest('a')).toHaveAttribute(
+        'href',
+        'https://www.datajunction.io',
+      );
+    });
+  });
+
+  it('renders Logout button unless REACT_DISABLE_AUTH is true', () => {
+    process.env.REACT_DISABLE_AUTH = 'false';
+    render(
+      <HelmetProvider>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <Root />
+        </DJClientContext.Provider>
+      </HelmetProvider>,
+    );
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('calls logout and reloads window on logout button click', () => {
+    process.env.REACT_DISABLE_AUTH = 'false';
+    const originalLocation = window.location;
+    delete window.location;
+    window.location = { ...originalLocation, reload: jest.fn() };
+
+    render(
+      <HelmetProvider>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <Root />
+        </DJClientContext.Provider>
+      </HelmetProvider>,
+    );
+
+    screen.getByText('Logout').click();
+    expect(mockDjClient.logout).toHaveBeenCalled();
+    window.location = originalLocation;
+  });
+});

package/src/app/pages/Root/index.tsx

@@ -1,8 +1,16 @@
+import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
-import logo from './assets/dj-logo.png';
+import DJLogo from '../../icons/DJLogo';
 import { Helmet } from 'react-helmet-async';
+import DJClientContext from '../../providers/djclient';
 
 export function Root() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const handleLogout = async () => {
+    await djClient.logout();
+    window.location.reload();
+  };
   return (
     <>
       <Helmet>
@@ -16,8 +24,8 @@ export function Root() {
         <div className="header">
           <div className="logo">
             <h2>
-              <img src={logo} alt="DJ Logo" width="15%" />
-              DataJunction
+              <DJLogo />
+              Data<b>Junction</b>
             </h2>
           </div>
           <div className="menu">
@@ -29,12 +37,32 @@ export function Root() {
               </span>
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/">Help</a>
+                  <a href="/sql">SQL</a>
+                </span>
+              </span>
+              <span className="menu-link">
+                <span className="menu-title">
+                  <a
+                    href="https://www.datajunction.io"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Docs
+                  </a>
                 </span>
               </span>
             </div>
           </div>
         </div>
+        {process.env.REACT_DISABLE_AUTH === 'true' ? (
+          ''
+        ) : (
+          <span className="menu-link">
+            <span className="menu-title">
+              <button onClick={handleLogout}>Logout</button>
+            </span>
+          </span>
+        )}
       </div>
       <Outlet />
     </>

package/src/app/pages/SQLBuilderPage/Loadable.jsx

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const SQLBuilderPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.SQLBuilderPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};