datajunction-ui 0.0.1-rc.18 → 0.0.1-rc.19

package/src/app/pages/NamespacePage/__tests__/__snapshots__/index.test.tsx.snap

@@ -13,6 +13,54 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
       <h2>
         Explore
       </h2>
+      <span
+        className="menu-link"
+      >
+        <span
+          className="menu-title"
+        >
+          <div
+            className="dropdown"
+          >
+            <span
+              className="add_node"
+            >
+              + Add Node
+            </span>
+            <div
+              className="dropdown-content"
+            >
+              <a
+                href="/create/transform/undefined"
+              >
+                <div
+                  className="node_type__transform node_type_creation_heading"
+                >
+                  Transform
+                </div>
+              </a>
+              <a
+                href="/create/metric/undefined"
+              >
+                <div
+                  className="node_type__metric node_type_creation_heading"
+                >
+                  Metric
+                </div>
+              </a>
+              <a
+                href="/create/dimension/undefined"
+              >
+                <div
+                  className="node_type__dimension node_type_creation_heading"
+                >
+                  Dimension
+                </div>
+              </a>
+            </div>
+          </div>
+        </span>
+      </span>
       <div
         className="table-responsive"
       >
@@ -56,6 +104,9 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
               <th>
                 Last Updated
               </th>
+              <th>
+                Actions
+              </th>
             </tr>
           </thead>
           <tbody />

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

@@ -4,6 +4,8 @@ import { useContext, useEffect, useState } from 'react';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
+import EditIcon from '../../icons/EditIcon';
+import DeleteIcon from '../../icons/DeleteIcon';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -102,6 +104,14 @@ export function NamespacePage() {
           {new Date(node.updated_at).toLocaleString('en-us')}
         </span>
       </td>
+      <td>
+        <a href={`/nodes/${node?.name}/edit`} style={{ marginLeft: '0.5rem' }}>
+          <EditIcon />
+        </a>
+        <a href="#" style={{ marginLeft: '0.5rem' }}>
+          <DeleteIcon />
+        </a>
+      </td>
     </tr>
   ));
 
@@ -110,6 +120,31 @@ export function NamespacePage() {
       <div className="card">
         <div className="card-header">
           <h2>Explore</h2>
+
+          <span className="menu-link">
+            <span className="menu-title">
+              <div className="dropdown">
+                <span className="add_node">+ Add Node</span>
+                <div className="dropdown-content">
+                  <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>
+                </div>
+              </div>
+            </span>
+          </span>
           <div className="table-responsive">
             <div className={`sidebar`}>
               <span
@@ -142,6 +177,7 @@ export function NamespacePage() {
                   <th>Status</th>
                   <th>Mode</th>
                   <th>Last Updated</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
               <tbody>{nodesList}</tbody>

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

@@ -15,7 +15,6 @@ export default function NodeHistory({ node, djClient }) {
   }, [djClient, node]);
 
   const eventData = event => {
-    console.log('event', event);
     if (
       event.activity_type === 'set_attribute' &&
       event.entity_type === 'column_attribute'

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

@@ -13,6 +13,8 @@ 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;
@@ -109,7 +111,8 @@ export function NodePage() {
   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} djClient={djClient} />;
@@ -136,41 +139,55 @@ export function NodePage() {
     default:
       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"
-            style={{ display: 'inline-block' }}
-          >
-            <span className="card-label fw-bold text-gray-800">
-              {node?.display_name}{' '}
-              <span className={'node_type__' + node?.type + ' badge node_type'}>
-                {node?.type}
+        {node !== undefined && 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">
+                {node?.display_name}{' '}
+                <span
+                  className={'node_type__' + node?.type + ' badge node_type'}
+                >
+                  {node?.type}
+                </span>
               </span>
-            </span>
-          </h3>
-          <ClientCodePopover code={node?.createNodeClientCode} />
-          <div>
-            <a href={'/nodes/' + node?.name} className="link-table">
-              {node?.name}
-            </a>
-            <span
-              className="rounded-pill badge bg-secondary-soft"
+            </h3>
+            <a
+              href={`/nodes/${node?.name}/edit`}
               style={{ marginLeft: '0.5rem' }}
             >
-              {node?.version}
-            </span>
+              <EditIcon />
+            </a>
+            <ClientCodePopover code={node?.createNodeClientCode} />
+            <div>
+              <a href={'/nodes/' + node?.name} className="link-table">
+                {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>
-          <div className="align-items-center row">
-            {tabsList(node).map(buildTabs)}
+        ) : (
+          <div className="message alert" style={{ margin: '20px' }}>
+            <AlertIcon />
+            Node `{name}` does not exist!
           </div>
-          {tabToDisplay}
-        </div>
+        )}
       </div>
     </div>
   );

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

@@ -1,6 +1,6 @@
 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';
 
@@ -24,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">

package/src/app/services/DJService.js

@@ -25,6 +25,9 @@ export const DataJunctionAPI = {
         credentials: 'include',
       })
     ).json();
+    if (data.message !== undefined) {
+      return data;
+    }
     data.primary_key = data.columns
       .filter(col =>
         col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
@@ -33,6 +36,72 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  nodes: async function (prefix) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/?prefix=${prefix}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
+  createNode: async function (
+    nodeType,
+    name,
+    display_name,
+    description,
+    query,
+    mode,
+    namespace,
+    primary_key,
+  ) {
+    const response = await fetch(`${DJ_URL}/nodes/${nodeType}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: name,
+        display_name: display_name,
+        description: description,
+        query: query,
+        mode: mode,
+        namespace: namespace,
+        primary_key: primary_key,
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
+  patchNode: async function (
+    name,
+    display_name,
+    description,
+    query,
+    mode,
+    primary_key,
+  ) {
+    try {
+      const response = await fetch(`${DJ_URL}/nodes/${name}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          display_name: display_name,
+          description: description,
+          query: query,
+          mode: mode,
+          primary_key: primary_key,
+        }),
+        credentials: 'include',
+      });
+      return { status: response.status, json: await response.json() };
+    } catch (error) {
+      return { status: 500, json: { message: 'Update failed' } };
+    }
+  },
+
   upstreams: async function (name) {
     const data = await (
       await fetch(`${DJ_URL}/nodes/${name}/upstream/`, {
@@ -131,7 +200,9 @@ export const DataJunctionAPI = {
 
   revisions: async function (name) {
     const data = await (
-      await fetch(`${DJ_URL}/nodes/` + name + '/revisions/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/revisions/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },

package/src/setupTests.ts

@@ -1,6 +1,6 @@
 // react-testing-library renders your components to document.body,
 // this adds jest-dom's custom assertions
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';

package/src/styles/index.css

@@ -1,8 +1,12 @@
+@import url('https://fonts.googleapis.com/css?family=Jost');
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Lato');
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
-    'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+    Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -14,6 +18,13 @@ body {
 div {
   display: block;
 }
+h2 {
+  font-family: 'Raleway', system-ui;
+  font-weight: 300;
+}
+h2 b {
+  font-weight: 600;
+}
 p {
   display: block;
   margin-block-start: 1em;
@@ -26,7 +37,7 @@ a,
 a:hover {
   text-decoration: none;
   color: #005c72;
-  font-family: 'Cerebri Sans', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 a:hover {
   text-decoration: underline;
@@ -153,6 +164,7 @@ ul {
 .h6,
 h6 {
   margin: 0;
+  font-family: 'Jost';
   text-transform: uppercase;
   font-size: 0.8125rem;
   font-weight: 600;
@@ -251,6 +263,7 @@ tr {
   background-clip: border-box;
   border-radius: 1rem;
   margin: 2rem;
+  padding-bottom: 2rem;
 }
 
 .card-light-shadow {
@@ -313,6 +326,7 @@ tr {
   font-weight: 600;
   letter-spacing: 0.08em;
   color: #95aac9;
+  font-family: 'Jost';
 }
 
 .card-table thead th {
@@ -325,7 +339,7 @@ tr {
 td,
 tbody th {
   vertical-align: middle;
-  text-align: center;
+  text-align: left;
 }
 .table [data-sort],
 .table-nowrap td,
@@ -369,6 +383,10 @@ tbody th {
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px transparent;
 }
+.node_type_creation_heading {
+  text-transform: capitalize;
+  padding: 5px;
+}
 
 /* Nodes */
 .node_type {
@@ -384,6 +402,7 @@ tbody th {
 
 /* Nodes */
 .node_type__source {
+  font-family: 'Jost';
   background-color: #ccf7e5 !important;
   color: #00b368;
 }
@@ -393,15 +412,21 @@ tbody th {
 }
 
 .node_type__transform {
+  font-family: 'Jost';
   background-color: #ccefff !important;
   color: #0063b4;
 }
+
+.node_type__transform:hover {
+  background-color: #ccefff !important;
+}
 .react-flow__node .node_type__transform {
   background-color: #6daaa750 !important;
   color: #6daaa7;
 }
 
 .node_type__metric {
+  font-family: 'Jost';
   background-color: #fad7dd !important;
   color: #a2283e;
 }
@@ -411,6 +436,7 @@ tbody th {
 }
 
 .node_type__dimension {
+  font-family: 'Jost';
   background-color: #ffefd0 !important;
   color: #a96621;
 }
@@ -420,6 +446,7 @@ tbody th {
 }
 
 .node_type__cube {
+  font-family: 'Jost';
   background-color: #dbafff !important;
   color: #580076;
 }
@@ -710,6 +737,10 @@ pre {
   padding: 0 2.25rem 0 2.25rem;
 }
 
+.card-header h2 {
+  font-family: 'Jost';
+}
+
 .text-gray-400 {
   color: #b5b5c3 !important;
 }
@@ -873,3 +904,49 @@ pre {
 .inactive {
   display: none;
 }
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  float: right;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  margin-top: 6px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  min-width: 115px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-content a:hover {
+  text-decoration: none;
+}
+
+.dropdown-content a div {
+  padding: 12px 16px;
+  background-color: #ffffff !important;
+}
+
+.dropdown-content a div:hover {
+  background-color: #f3eeff !important;
+}
+
+.add_node {
+  background-color: #5d2f86 !important;
+  color: #fff;
+  text-transform: none;
+  vertical-align: middle;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  word-wrap: break-word;
+  white-space: break-spaces;
+}