datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

package/src/app/pages/NodePage/__tests__/NodeWithDimension.test.jsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodesWithDimension from '../NodesWithDimension';
+
+describe('<NodesWithDimension />', () => {
+  const mockDjClient = {
+    nodesWithDimension: jest.fn(),
+  };
+
+  const mockNodesWithDimension = [
+    {
+      node_revision_id: 2,
+      node_id: 2,
+      type: 'source',
+      name: 'default.repair_order_details',
+      display_name: 'Default: Repair Order Details',
+      version: 'v1.0',
+      status: 'valid',
+      mode: 'published',
+      catalog: {
+        id: 1,
+        uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+        created_at: '2023-08-21T16:48:51.146121+00:00',
+        updated_at: '2023-08-21T16:48:51.146122+00:00',
+        extra_params: {},
+        name: 'warehouse',
+      },
+      schema_: 'roads',
+      table: 'repair_order_details',
+      description: 'Details on repair orders',
+      query: null,
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'repair_type_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'price',
+          type: 'float',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'quantity',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'discount',
+          type: 'float',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.981201+00:00',
+      materializations: [],
+      parents: [],
+    },
+    {
+      node_revision_id: 1,
+      node_id: 1,
+      type: 'source',
+      name: 'default.repair_orders',
+      display_name: 'Default: Repair Orders',
+      version: 'v1.0',
+      status: 'valid',
+      mode: 'published',
+      catalog: {
+        id: 1,
+        uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+        created_at: '2023-08-21T16:48:51.146121+00:00',
+        updated_at: '2023-08-21T16:48:51.146122+00:00',
+        extra_params: {},
+        name: 'warehouse',
+      },
+      schema_: 'roads',
+      table: 'repair_orders',
+      description: 'Repair orders',
+      query: null,
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'municipality_id',
+          type: 'string',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'hard_hat_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'order_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'required_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatched_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatcher_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.880498+00:00',
+      materializations: [],
+      parents: [],
+    },
+  ];
+
+  const defaultProps = {
+    node: {
+      name: 'TestNode',
+    },
+    djClient: mockDjClient,
+  };
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.nodesWithDimension.mockReset();
+  });
+
+  it('renders nodes with dimensions', async () => {
+    mockDjClient.nodesWithDimension.mockReturnValue(mockNodesWithDimension);
+    render(<NodesWithDimension {...defaultProps} />);
+    await waitFor(() => {
+      // calls nodesWithDimension with the correct node name
+      expect(mockDjClient.nodesWithDimension).toHaveBeenCalledWith(
+        defaultProps.node.name,
+      );
+      for (const node of mockNodesWithDimension) {
+        // renders nodes based on nodesWithDimension data
+        expect(screen.getByText(node.display_name)).toBeInTheDocument();
+
+        // renders links to the correct URLs
+        const link = screen.getByText(node.display_name).closest('a');
+        expect(link).toHaveAttribute('href', `/nodes/${node.name}`);
+      }
+    });
+  });
+});

package/src/app/pages/NodePage/__tests__/RevisionDiff.test.jsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import RevisionDiff from '../RevisionDiff';
+import DJClientContext from '../../../providers/djclient';
+import { NodePage } from '../Loadable';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+describe('<RevisionDiff />', () => {
+  const mockDjClient = {
+    DataJunctionAPI: {
+      revisions: jest.fn(),
+    },
+  };
+
+  const mockNodesWithDimension = [
+    {
+      node_revision_id: 1,
+      node_id: 1,
+      type: 'dimension',
+      name: 'default.repair_order',
+      display_name: 'Repair Orders',
+      version: 'v1.0',
+      status: 'valid',
+      mode: 'published',
+      catalog: {
+        id: 1,
+        uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+        created_at: '2023-08-21T16:48:51.146121+00:00',
+        updated_at: '2023-08-21T16:48:51.146122+00:00',
+        extra_params: {},
+        name: 'warehouse',
+      },
+      description: 'Repair order dimension',
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, order_date, ' +
+        'dispatcher_id FROM default.repair_orders',
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'municipality_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'hard_hat_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'order_date',
+          type: 'date',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatcher_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.981201+00:00',
+      materializations: [],
+      parents: [],
+    },
+    {
+      node_revision_id: 2,
+      node_id: 2,
+      type: 'dimension',
+      name: 'default.repair_order',
+      display_name: 'Repair Orders',
+      version: 'v2.0',
+      status: 'valid',
+      mode: 'published',
+      catalog: {
+        id: 1,
+        uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+        created_at: '2023-08-21T16:48:51.146121+00:00',
+        updated_at: '2023-08-21T16:48:51.146122+00:00',
+        extra_params: {},
+        name: 'warehouse',
+      },
+      description: 'Repair order dimension',
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, ' +
+        'dispatcher_id FROM default.repair_orders',
+      availability: null,
+      columns: [
+        {
+          name: 'repair_order_id',
+          type: 'int',
+          attributes: [],
+          dimension: {
+            name: 'default.repair_order',
+          },
+        },
+        {
+          name: 'municipality_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'hard_hat_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+        {
+          name: 'dispatcher_id',
+          type: 'int',
+          attributes: [],
+          dimension: null,
+        },
+      ],
+      updated_at: '2023-08-21T16:48:52.981201+00:00',
+      materializations: [],
+      parents: [],
+    },
+  ];
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.DataJunctionAPI.revisions.mockReset();
+  });
+
+  it('renders revision diff', async () => {
+    mockDjClient.DataJunctionAPI.revisions.mockReturnValue(
+      mockNodesWithDimension,
+    );
+    const element = (
+      <DJClientContext.Provider value={mockDjClient}>
+        <RevisionDiff />
+      </DJClientContext.Provider>
+    );
+    const { container } = render(
+      <MemoryRouter
+        initialEntries={['/nodes/default.repair_orders_cube/revisions/v2.0']}
+      >
+        <Routes>
+          <Route path="nodes/:name/revisions/:revision" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
+        'default.repair_orders_cube',
+      );
+
+      const diffViews = screen.getAllByRole('gridcell', 'DiffView');
+      diffViews.map(diffView => expect(diffView).toBeInTheDocument());
+    });
+  });
+});

package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NodePage /> renders the NodeInfo tab correctly for a metric node 1`] = `
+HTMLCollection [
+  <code
+    class="language-sql"
+    style="white-space: pre;"
+  >
+    <span
+      class="hljs-built_in"
+    >
+      count
+    </span>
+    <span>
+      (repair_order_id)
+    </span>
+  </code>,
+]
+`;

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

@@ -5,23 +5,40 @@ import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
-import NodeLineage from './NodeGraphTab';
+import NodeGraphTab from './NodeGraphTab';
+import NodeHistory from './NodeHistory';
+import NotebookDownload from './NotebookDownload';
 import DJClientContext from '../../providers/djclient';
+import NodeValidateTab from './NodeValidateTab';
+import NodeMaterializationTab from './NodeMaterializationTab';
+import ClientCodePopover from './ClientCodePopover';
+import WatchButton from './WatchNodeButton';
+import NodesWithDimension from './NodesWithDimension';
+import NodeColumnLineage from './NodeLineageTab';
+import EditIcon from '../../icons/EditIcon';
+import AlertIcon from '../../icons/AlertIcon';
+import NodeDependenciesTab from './NodeDependenciesTab';
+import { useNavigate } from 'react-router-dom';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const navigate = useNavigate();
+
+  const { name, tab } = useParams();
+
   const [state, setState] = useState({
-    selectedTab: 0,
+    selectedTab: tab || 'info',
   });
 
   const [node, setNode] = useState();
 
   const onClickTab = id => () => {
+    navigate(`/nodes/${name}/${id}`);
     setState({ selectedTab: id });
   };
 
   const buildTabs = tab => {
-    return (
+    return tab.display ? (
       <Tab
         key={tab.id}
         id={tab.id}
@@ -29,72 +46,201 @@ export function NodePage() {
         onClick={onClickTab(tab.id)}
         selectedTab={state.selectedTab}
       />
-    );
+    ) : null;
   };
 
-  const { name } = useParams();
-
   useEffect(() => {
     const fetchData = async () => {
       const data = await djClient.node(name);
+      data.createNodeClientCode = await djClient.clientCode(name);
+      if (data.type === 'metric') {
+        const metric = await djClient.getMetric(name);
+        data.metric_metadata = metric.current.metricMetadata;
+        data.required_dimensions = metric.current.requiredDimensions;
+        data.upstream_node = metric.current.parents[0].name;
+        data.expression = metric.current.metricMetadata.expression;
+        data.incompatible_druid_functions =
+          metric.current.metricMetadata.incompatibleDruidFunctions;
+      }
+      if (data.type === 'cube') {
+        const cube = await djClient.cube(name);
+        data.cube_elements = cube.cube_elements;
+      }
       setNode(data);
     };
     fetchData().catch(console.error);
   }, [djClient, name]);
 
-  const TabsJson = [
-    {
-      id: 0,
-      name: 'Info',
-    },
-    {
-      id: 1,
-      name: 'Columns',
-    },
-    {
-      id: 2,
-      name: 'Graph',
-    },
-  ];
-  //
-  //
+  const tabsList = node => {
+    return [
+      {
+        id: 'info',
+        name: 'Info',
+        display: true,
+      },
+      {
+        id: 'columns',
+        name: 'Columns',
+        display: true,
+      },
+      {
+        id: 'graph',
+        name: 'Graph',
+        display: true,
+      },
+      {
+        id: 'history',
+        name: 'History',
+        display: true,
+      },
+      {
+        id: 'validate',
+        name: '► Validate',
+        display: node?.type !== 'source',
+      },
+      {
+        id: 'materializations',
+        name: 'Materializations',
+        display: node?.type !== 'source',
+      },
+      {
+        id: 'linked',
+        name: 'Linked Nodes',
+        display: node?.type === 'dimension',
+      },
+      {
+        id: 'lineage',
+        name: 'Lineage',
+        display: node?.type === 'metric',
+      },
+      {
+        id: 'dependencies',
+        name: 'Dependencies',
+        display: node?.type !== 'cube',
+      },
+    ];
+  };
   let tabToDisplay = null;
+
   switch (state.selectedTab) {
-    case 0:
-      tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
+    case 'info':
+      tabToDisplay =
+        node && node.message === undefined ? <NodeInfoTab node={node} /> : '';
+      break;
+    case 'columns':
+      tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
+      break;
+    case 'graph':
+      tabToDisplay = <NodeGraphTab djNode={node} djClient={djClient} />;
+      break;
+    case 'history':
+      tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
+      break;
+    case 'validate':
+      tabToDisplay = <NodeValidateTab node={node} djClient={djClient} />;
       break;
-    case 1:
-      tabToDisplay = <NodeColumnTab node={node} />;
+    case 'materializations':
+      tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
       break;
-    case 2:
-      tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
+    case 'linked':
+      tabToDisplay = <NodesWithDimension node={node} djClient={djClient} />;
+      break;
+    case 'lineage':
+      tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
+      break;
+    case 'dependencies':
+      tabToDisplay = <NodeDependenciesTab node={node} djClient={djClient} />;
       break;
     default:
+      /* istanbul ignore next */
       tabToDisplay = <NodeInfoTab node={node} />;
   }
 
+  const NodeButtons = () => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <button
+          className="button-3"
+          onClick={() => navigate(`/nodes/${node?.name}/edit`)}
+        >
+          <EditIcon /> Edit
+        </button>
+
+        <WatchButton node={node} />
+
+        <ClientCodePopover code={node?.createNodeClientCode} />
+        {node?.type === 'cube' && <NotebookDownload node={node} />}
+      </div>
+    );
+  };
+
   // @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" style={{}}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}
+            >
+              <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>
+              <NodeButtons />
+            </div>
+            <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/NotificationsPage/Loadable.jsx

@@ -0,0 +1,6 @@
+import { lazyLoad } from '../../../utils/loadable';
+
+export const NotificationsPage = lazyLoad(
+  () => import('./index'),
+  module => module.NotificationsPage,
+);