datajunction-ui 0.0.1-a70 → 0.0.1-a71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a70",
+  "version": "0.0.1a71",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/icons/AddItemIcon.jsx

@@ -1,6 +1,6 @@
 const AddItemIcon = props => (
   <svg
-    enable-background="new 0 0 512 512"
+    enableBackground="new 0 0 512 512"
     height="20px"
     id="Layer_1"
     version="1.1"

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

@@ -10,7 +10,7 @@ const Explorer = ({ item = [], current }) => {
   useEffect(() => {
     setItems(item);
     setHighlight(current);
-    if (current === undefined || current?.startsWith(item.path)) {
+    if (current !== undefined && current?.startsWith(item.path)) {
       setExpand(true);
     } else setExpand(false);
   }, [current, item]);
@@ -43,8 +43,12 @@ const Explorer = ({ item = [], current }) => {
                 marginLeft: '1rem',
                 borderLeft: '1px solid rgb(218 233 255)',
               }}
+              key={index}
             >
-              <div className={`${expand ? '' : 'inactive'}`}>
+              <div
+                className={`${expand ? '' : 'inactive'}`}
+                key={`nested-${index}`}
+              >
                 <Explorer item={item} current={highlight} />
               </div>
             </div>

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

@@ -3,8 +3,11 @@ import Control from './FieldControl';
 
 export default function NodeTypeSelect({ onChange }) {
   return (
-    <span className="menu-link" style={{ marginLeft: '30px', width: '300px' }}
-                             data-testid="select-node-type">
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-type"
+    >
       <Select
         name="node_type"
         isClearable
@@ -15,11 +18,11 @@ export default function NodeTypeSelect({ onChange }) {
           control: styles => ({ ...styles, backgroundColor: 'white' }),
         }}
         options={[
-          {value: 'source', label: 'Source'},
-          {value: 'transform', label: 'Transform'},
-          {value: 'dimension', label: 'Dimension'},
-          {value: 'metric', label: 'Metric'},
-          {value: 'cube', label: 'Cube'},
+          { value: 'source', label: 'Source' },
+          { value: 'transform', label: 'Transform' },
+          { value: 'dimension', label: 'Dimension' },
+          { value: 'metric', label: 'Metric' },
+          { value: 'cube', label: 'Cube' },
         ]}
       />
     </span>

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

@@ -20,7 +20,11 @@ export default function TagSelect({ onChange }) {
   }, [djClient]);
 
   return (
-    <span className="menu-link" style={{ marginLeft: '30px', width: '350px' }} data-testid="select-tag">
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '350px' }}
+      data-testid="select-tag"
+    >
       <Select
         name="tags"
         isClearable

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

@@ -19,7 +19,11 @@ export default function UserSelect({ onChange, currentUser }) {
   }, [djClient]);
 
   return (
-    <span className="menu-link" style={{ marginLeft: '30px', width: '400px' }} data-testid="select-user">
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '400px' }}
+      data-testid="select-user"
+    >
       {retrieved ? (
         <Select
           name="edited_by"

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

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
 const mockDjClient = {
   namespaces: jest.fn(),
   namespace: jest.fn(),
+  listNodesForLanding: jest.fn(),
   addNamespace: jest.fn(),
   whoami: jest.fn(),
   users: jest.fn(),
@@ -37,9 +38,15 @@ describe('NamespacePage', () => {
 
   beforeEach(() => {
     fetch.resetMocks();
-    mockDjClient.whoami.mockResolvedValue({username: 'dj'});
-    mockDjClient.users.mockResolvedValue([{username: 'dj'}, {username: 'user1'}]);
-    mockDjClient.listTags.mockResolvedValue([{name: 'tag1'}, {name: 'tag2'}]);
+    mockDjClient.whoami.mockResolvedValue({ username: 'dj' });
+    mockDjClient.users.mockResolvedValue([
+      { username: 'dj' },
+      { username: 'user1' },
+    ]);
+    mockDjClient.listTags.mockResolvedValue([
+      { name: 'tag1' },
+      { name: 'tag2' },
+    ]);
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -81,10 +88,43 @@ describe('NamespacePage', () => {
         type: 'transform',
         mode: 'active',
         updated_at: new Date(),
-        tags: [{name: 'tag1'}],
+        tags: [{ name: 'tag1' }],
         edited_by: ['dj'],
       },
     ]);
+    mockDjClient.listNodesForLanding.mockResolvedValue({
+      data: {
+        findNodesPaginated: {
+          pageInfo: {
+            hasNextPage: true,
+            endCursor:
+              'eyJjcmVhdGVkX2F0IjogIjIwMjQtMDQtMTZUMjM6MjI6MjIuNDQxNjg2KzAwOjAwIiwgImlkIjogNjE0fQ==',
+            hasPrevPage: true,
+            startCursor:
+              'eyJjcmVhdGVkX2F0IjogIjIwMjQtMTAtMTZUMTY6MDM6MTcuMDgzMjY3KzAwOjAwIiwgImlkIjogMjQwOX0=',
+          },
+          edges: [
+            {
+              node: {
+                name: 'default.test_node',
+                type: 'DIMENSION',
+                currentVersion: 'v4.0',
+                tags: [],
+                editedBy: ['dj'],
+                current: {
+                  displayName: 'Test Node',
+                  status: 'VALID',
+                  updatedAt: '2024-10-18T15:15:33.532949+00:00',
+                },
+                createdBy: {
+                  username: 'dj',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
   });
 
   afterEach(() => {
@@ -106,52 +146,59 @@ describe('NamespacePage', () => {
       </MemoryRouter>,
     );
 
-    await waitFor(() => {
-      expect(mockDjClient.namespaces).toHaveBeenCalledTimes(1);
-      expect(screen.getByText('Namespaces')).toBeInTheDocument();
-
-      // check that it displays namespaces
-      expect(screen.getByText('common')).toBeInTheDocument();
-      expect(screen.getByText('one')).toBeInTheDocument();
-      expect(screen.getByText('fruits')).toBeInTheDocument();
-      expect(screen.getByText('vegetables')).toBeInTheDocument();
-
-      // check that it renders nodes
-      expect(screen.getByText('Test Node')).toBeInTheDocument();
-
-      // check that it sorts nodes
-      fireEvent.click(screen.getByText('name'));
-      fireEvent.click(screen.getByText('display name'));
-
-      // check that we can filter by node type
-      const selectNodeType = screen.getAllByTestId('select-node-type')[0];
-      expect(selectNodeType).toBeDefined();
-      expect(selectNodeType).not.toBeNull();
-      fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
-      fireEvent.click(screen.getByText('Source'));
-
-      // check that we can filter by tag
-      const selectTag = screen.getAllByTestId('select-tag')[0];
-      expect(selectTag).toBeDefined();
-      expect(selectTag).not.toBeNull();
-      fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
-
-      // check that we can filter by user
-      const selectUser = screen.getAllByTestId('select-user')[0];
-      expect(selectUser).toBeDefined();
-      expect(selectUser).not.toBeNull();
-      fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
-      // fireEvent.click(screen.getByText('dj'));
-
-      // click to open and close tab
-      fireEvent.click(screen.getByText('common'));
-      fireEvent.click(screen.getByText('common'));
-    });
-  });
+    await waitFor(
+      () => {
+        expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+        expect(screen.getByText('Namespaces')).toBeInTheDocument();
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+        // check that it displays namespaces
+        expect(screen.getByText('common')).toBeInTheDocument();
+        expect(screen.getByText('one')).toBeInTheDocument();
+        expect(screen.getByText('fruits')).toBeInTheDocument();
+        expect(screen.getByText('vegetables')).toBeInTheDocument();
+
+        // check that it renders nodes
+        expect(screen.getByText('Test Node')).toBeInTheDocument();
+
+        // check that it sorts nodes
+        fireEvent.click(screen.getByText('name'));
+        fireEvent.click(screen.getByText('name'));
+        fireEvent.click(screen.getByText('display Name'));
+
+        // paginate
+        const previousButton = screen.getByText('← Previous');
+        expect(previousButton).toBeDefined();
+        fireEvent.click(previousButton);
+        const nextButton = screen.getByText('Next →');
+        expect(nextButton).toBeDefined();
+        fireEvent.click(nextButton);
+
+        // check that we can filter by node type
+        const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+        expect(selectNodeType).toBeDefined();
+        expect(selectNodeType).not.toBeNull();
+        fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+        fireEvent.click(screen.getByText('Source'));
+
+        // check that we can filter by tag
+        const selectTag = screen.getAllByTestId('select-tag')[0];
+        expect(selectTag).toBeDefined();
+        expect(selectTag).not.toBeNull();
+        fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+
+        // check that we can filter by user
+        const selectUser = screen.getAllByTestId('select-user')[0];
+        expect(selectUser).toBeDefined();
+        expect(selectUser).not.toBeNull();
+        fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+
+        // click to open and close tab
+        fireEvent.click(screen.getByText('common'));
+        fireEvent.click(screen.getByText('common'));
+      },
+      { timeout: 3000 },
+    );
+  }, 60000);
 
   it('can add new namespace via add namespace popover', async () => {
     mockDjClient.addNamespace.mockReturnValue({

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

@@ -20,13 +20,13 @@ export function NamespacePage() {
   const ASC = 'ascending';
   const DESC = 'descending';
 
-  const fields = ['name', 'display_name', 'type', 'status', 'updated_at'];
+  const fields = ['name', 'displayName', 'type', 'status', 'updatedAt'];
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   var { namespace } = useParams();
 
   const [state, setState] = useState({
-    namespace: namespace,
+    namespace: namespace ? namespace : '',
     nodes: [],
   });
   const [retrieved, setRetrieved] = useState(false);
@@ -35,39 +35,38 @@ export function NamespacePage() {
   const [filters, setFilters] = useState({
     tags: [],
     node_type: '',
-    edited_by: currentUser?.username,
+    edited_by: '',
   });
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
 
   const [sortConfig, setSortConfig] = useState({
-    key: 'updated_at',
+    key: 'updatedAt',
     direction: DESC,
   });
+
+  const [before, setBefore] = useState(null);
+  const [after, setAfter] = useState(null);
+  const [prevCursor, setPrevCursor] = useState(true);
+  const [nextCursor, setNextCursor] = useState(true);
+
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [hasPrevPage, setHasPrevPage] = useState(true);
+
   const sortedNodes = React.useMemo(() => {
     let sortableData = [...Object.values(state.nodes)];
-    if (filters.node_type !== '' && filters.node_type !== null) {
-      sortableData = sortableData.filter(
-        node => node.type === filters.node_type,
-      );
-    }
-    if (filters.tags) {
-      sortableData = sortableData.filter(node => {
-        const nodeTags = node.tags.map(tag => tag.name);
-        return filters.tags.every(item => nodeTags.includes(item));
-      });
-    }
-    if (filters.edited_by) {
-      sortableData = sortableData.filter(node => {
-        return node.edited_by.includes(filters.edited_by);
-      });
-    }
     if (sortConfig !== null) {
       sortableData.sort((a, b) => {
-        if (a[sortConfig.key] < b[sortConfig.key]) {
+        if (
+          a[sortConfig.key] < b[sortConfig.key] ||
+          a.current[sortConfig.key] < b.current[sortConfig.key]
+        ) {
           return sortConfig.direction === ASC ? -1 : 1;
         }
-        if (a[sortConfig.key] > b[sortConfig.key]) {
+        if (
+          a[sortConfig.key] > b[sortConfig.key] ||
+          a.current[sortConfig.key] > b.current[sortConfig.key]
+        ) {
           return sortConfig.direction === ASC ? 1 : -1;
         }
         return 0;
@@ -125,6 +124,7 @@ export function NamespacePage() {
       const hierarchy = createNamespaceHierarchy(namespaces);
       setNamespaceHierarchy(hierarchy);
       const currentUser = await djClient.whoami();
+      // setFilters({...filters, edited_by: currentUser?.username});
       setCurrentUser(currentUser);
     };
     fetchData().catch(console.error);
@@ -132,61 +132,132 @@ export function NamespacePage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      if (namespace === undefined && namespaceHierarchy !== undefined) {
-        namespace = namespaceHierarchy[0].namespace;
-      }
-      const nodes = await djClient.namespace(namespace);
-      const foundNodes = await Promise.all(nodes);
+      setRetrieved(false);
+      console.log('cursor', before, filters.edited_by);
+      const nodes = await djClient.listNodesForLanding(
+        namespace,
+        filters.node_type ? [filters.node_type.toUpperCase()] : [],
+        filters.tags,
+        filters.edited_by,
+        before,
+        after,
+        50,
+      );
+      console.log('nodes', nodes);
+
       setState({
         namespace: namespace,
-        nodes: foundNodes,
+        nodes: nodes.data
+          ? nodes.data.findNodesPaginated.edges.map(n => n.node)
+          : [],
       });
+      if (nodes.data) {
+        setPrevCursor(
+          nodes.data ? nodes.data.findNodesPaginated.pageInfo.startCursor : '',
+        );
+        setNextCursor(
+          nodes.data ? nodes.data.findNodesPaginated.pageInfo.endCursor : '',
+        );
+        console.log(
+          'setting hasPrevPage, ',
+          nodes.data.findNodesPaginated.pageInfo.hasPrevPage,
+        );
+        setHasPrevPage(
+          nodes.data
+            ? nodes.data.findNodesPaginated.pageInfo.hasPrevPage
+            : false,
+        );
+        setHasNextPage(
+          nodes.data
+            ? nodes.data.findNodesPaginated.pageInfo.hasNextPage
+            : false,
+        );
+      }
       setRetrieved(true);
     };
     fetchData().catch(console.error);
-  }, [djClient, namespace, namespaceHierarchy]);
+  }, [djClient, filters, before, after]);
+  const loadNext = () => {
+    if (nextCursor) {
+      setAfter(nextCursor);
+      setBefore(null);
+    }
+  };
+  const loadPrev = () => {
+    if (prevCursor) {
+      setAfter(null);
+      setBefore(prevCursor);
+    }
+  };
 
   const nodesList = retrieved ? (
-    sortedNodes.map(node => (
+    sortedNodes.length > 0 ? (
+      sortedNodes.map(node => (
+        <tr key={node.name}>
+          <td>
+            <a href={'/nodes/' + node.name} className="link-table">
+              {node.name}
+            </a>
+            <span
+              className="rounded-pill badge bg-secondary-soft"
+              style={{ marginLeft: '0.5rem' }}
+            >
+              {node.currentVersion}
+            </span>
+          </td>
+          <td>
+            <a href={'/nodes/' + node.name} className="link-table">
+              {node.type !== 'source' ? node.current.displayName : ''}
+            </a>
+          </td>
+          <td>
+            <span
+              className={
+                'node_type__' + node.type.toLowerCase() + ' badge node_type'
+              }
+            >
+              {node.type}
+            </span>
+          </td>
+          <td>
+            <NodeStatus node={node} revalidate={false} />
+          </td>
+          <td>
+            <span className="status">
+              {new Date(node.current.updatedAt).toLocaleString('en-us')}
+            </span>
+          </td>
+          <td>
+            <NodeListActions nodeName={node?.name} />
+          </td>
+        </tr>
+      ))
+    ) : (
       <tr>
         <td>
-          <a href={'/nodes/' + node.name} className="link-table">
-            {node.name}
-          </a>
           <span
-            className="rounded-pill badge bg-secondary-soft"
-            style={{ marginLeft: '0.5rem' }}
+            style={{
+              display: 'block',
+              marginTop: '2rem',
+              marginLeft: '2rem',
+              fontSize: '16px',
+            }}
           >
-            {node.version}
+            There are no nodes in{' '}
+            <a href={`/namespaces/${namespace}`}>{namespace}</a> with the above
+            filters!
           </span>
         </td>
-        <td>
-          <a href={'/nodes/' + node.name} className="link-table">
-            {node.type !== 'source' ? node.display_name : ''}
-          </a>
-        </td>
-        <td>
-          <span className={'node_type__' + node.type + ' badge node_type'}>
-            {node.type}
-          </span>
-        </td>
-        <td>
-          <NodeStatus node={node} revalidate={false} />
-        </td>
-        <td>
-          <span className="status">
-            {new Date(node.updated_at).toLocaleString('en-us')}
-          </span>
-        </td>
-        <td>
-          <NodeListActions nodeName={node?.name} />
-        </td>
       </tr>
-    ))
+    )
   ) : (
-    <span style={{ display: 'block', marginTop: '2rem' }}>
-      <LoadingIcon />
-    </span>
+    <tr>
+      <td>
+        <span style={{ display: 'block', marginTop: '2rem' }}>
+          <LoadingIcon />
+        </span>
+      </td>
+    </tr>
   );
 
   return (
@@ -194,7 +265,7 @@ export function NamespacePage() {
       <div className="card">
         <div className="card-header">
           <h2>Explore</h2>
-          <div class="menu" style={{ margin: '0 0 20px 0' }}>
+          <div className="menu" style={{ margin: '0 0 20px 0' }}>
             <div
               className="menu-link"
               style={{
@@ -260,6 +331,7 @@ export function NamespacePage() {
                       item={child}
                       current={state.namespace}
                       defaultExpand={true}
+                      key={child.namespace}
                     />
                   ))
                 : null}
@@ -269,13 +341,13 @@ export function NamespacePage() {
                 <tr>
                   {fields.map(field => {
                     return (
-                      <th>
+                      <th key={field}>
                         <button
                           type="button"
                           onClick={() => requestSort(field)}
                           className={'sortable ' + getClassNamesFor(field)}
                         >
-                          {field.replace('_', ' ')}
+                          {field.replace(/([a-z](?=[A-Z]))/g, '$1 ')}
                         </button>
                       </th>
                     );
@@ -284,6 +356,29 @@ export function NamespacePage() {
                 </tr>
               </thead>
               <tbody>{nodesList}</tbody>
+              <tfoot>
+                <tr>
+                  <td>
+                    {retrieved && hasPrevPage ? (
+                      <a
+                        onClick={loadPrev}
+                        className="previous round pagination"
+                      >
+                        ← Previous
+                      </a>
+                    ) : (
+                      ''
+                    )}
+                    {retrieved && hasNextPage ? (
+                      <a onClick={loadNext} className="next round pagination">
+                        Next →
+                      </a>
+                    ) : (
+                      ''
+                    )}
+                  </td>
+                </tr>
+              </tfoot>
             </table>
           </div>
         </div>

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

@@ -256,6 +256,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
                   <th className="text-start">Output Dataset</th>
                   <th>Valid Through</th>
                   <th>Partitions</th>
+                  <th>Links</th>
                 </tr>
               </thead>
               <tbody>
@@ -299,6 +300,21 @@ export default function NodeMaterializationTab({ node, djClient }) {
                       </span>
                     </span>
                   </td>
+                  <td>
+                    {node.availability.links !== null ? (
+                      Object.entries(node.availability.links).map(
+                        ([key, value]) => (
+                          <div key={key}>
+                            <a href={value} target="_blank" rel="noreferrer">
+                              {key}
+                            </a>
+                          </div>
+                        ),
+                      )
+                    ) : (
+                      <></>
+                    )}
+                  </td>
                 </tr>
               </tbody>
             </table>

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

@@ -81,7 +81,9 @@ export default function NodeStatus({ node, revalidate = true }) {
     <>
       {revalidate && validation?.errors?.length > 0 ? (
         displayValidation
-      ) : validation?.status === 'valid' || node?.status === 'valid' ? (
+      ) : validation?.status === 'valid' ||
+        node?.status === 'valid' ||
+        node?.current?.status === 'VALID' ? (
         <span
           className="status__valid status"
           style={{ alignContent: 'center' }}

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

@@ -25,7 +25,7 @@ export default function NotebookDownload({ node }) {
     <>
       <div
         className="badge download_notebook"
-        style={{cursor: 'pointer', backgroundColor: '#ffefd0'}}
+        style={{ cursor: 'pointer', backgroundColor: '#ffefd0' }}
         tabIndex="0"
         height="45px"
         onClick={downloadFile}

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeMaterializationTab from '../NodeMaterializationTab';
+
+describe('<NodeMaterializationTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    materializations: jest.fn(),
+  };
+
+  const mockMaterializations = [
+    {
+      name: 'mat_one',
+      config: {},
+      schedule: '@daily',
+      job: 'SparkSqlMaterializationJob',
+      backfills: [
+        {
+          spec: [
+            {
+              column_name: 'date',
+              values: ['20200101'],
+              range: ['20201010'],
+            },
+          ],
+          urls: ['https://example.com/'],
+        },
+      ],
+      strategy: 'full',
+      output_tables: ['table1'],
+      urls: ['https://example.com/'],
+    },
+  ];
+
+  const mockNode = {
+    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: {
+      catalog: 'default',
+      categorical_partitions: [],
+      max_temporal_partition: ['2023', '01', '25'],
+      min_temporal_partition: ['2022', '01', '01'],
+      partitions: [],
+      schema_: 'foo',
+      table: 'bar',
+      temporal_partitions: [],
+      valid_through_ts: 1729667463,
+      url: 'https://www.table.com',
+      links: { dashboard: 'https://www.foobar.com/dashboard' },
+    },
+    columns: [
+      {
+        name: 'repair_order_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: {
+          type_: 'temporal',
+          format: 'YYYYMMDD',
+          granularity: 'day',
+        },
+      },
+      {
+        name: 'municipality_id',
+        type: 'string',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+      {
+        name: 'hard_hat_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+    ],
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [
+      {
+        name: 'mat1',
+        config: {},
+        schedule: 'string',
+        job: 'string',
+        backfills: [
+          {
+            spec: [
+              {
+                column_name: 'string',
+                values: ['string'],
+                range: ['string'],
+              },
+            ],
+            urls: ['string'],
+          },
+        ],
+        strategy: 'string',
+        output_tables: ['string'],
+        urls: ['https://example.com/'],
+      },
+    ],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    mockDjClient.materializations.mockReset();
+  });
+
+  it('renders NodeMaterializationTab tab correctly', async () => {
+    mockDjClient.materializations.mockReturnValue(mockMaterializations);
+
+    render(<NodeMaterializationTab node={mockNode} djClient={mockDjClient} />);
+    await waitFor(() => {
+      const link = screen.getByText('dashboard').closest('a');
+      expect(link).toHaveAttribute('href', `https://www.foobar.com/dashboard`);
+    });
+  });
+});

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

@@ -12,12 +12,12 @@ type DocsSites = {
 
 // Default docs sites if REACT_APP_DOCS_SITES is not defined
 const defaultDocsSites: DocsSites = {
-  "Open-Source": "https://www.datajunction.io/"
+  'Open-Source': 'https://www.datajunction.io/',
 };
 
 // Parse the JSON map from the environment variable or use the default
 const docsSites: DocsSites = process.env.REACT_APP_DOCS_SITES
-  ? JSON.parse(process.env.REACT_APP_DOCS_SITES as string) as DocsSites
+  ? (JSON.parse(process.env.REACT_APP_DOCS_SITES as string) as DocsSites)
   : defaultDocsSites;
 
 export function Root() {
@@ -32,7 +32,10 @@ export function Root() {
     <>
       <Helmet>
         <title>DataJunction</title>
-        <meta name="description" content="DataJunction Metrics Platform Webapp" />
+        <meta
+          name="description"
+          content="DataJunction Metrics Platform Webapp"
+        />
       </Helmet>
       <div className="container d-flex align-items-center justify-content-between">
         <div className="header">
@@ -69,17 +72,25 @@ export function Root() {
                   <div className="dropdown">
                     <a
                       className="btn btn-link dropdown-toggle"
-                      href="#"
+                      href="/"
                       id="docsDropdown"
                       role="button"
                       aria-expanded="false"
                     >
                       Docs
                     </a>
-                    <ul className="dropdown-menu" aria-labelledby="docsDropdown">
+                    <ul
+                      className="dropdown-menu"
+                      aria-labelledby="docsDropdown"
+                    >
                       {Object.entries(docsSites).map(([key, value]) => (
                         <li key={key}>
-                          <a className="dropdown-item" href={value} target="_blank" rel="noreferrer">
+                          <a
+                            className="dropdown-item"
+                            href={value}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
                             {key}
                           </a>
                         </li>
@@ -106,4 +117,4 @@ export function Root() {
       <Outlet />
     </>
   );
-}
+}

package/src/app/services/DJService.js

@@ -4,7 +4,84 @@ const DJ_URL = process.env.REACT_APP_DJ_URL
   ? process.env.REACT_APP_DJ_URL
   : 'http://localhost:8000';
 
+const DJ_GQL = process.env.REACT_APP_DJ_GQL
+  ? process.env.REACT_APP_DJ_GQL
+  : process.env.REACT_APP_DJ_URL + '/graphql';
+
 export const DataJunctionAPI = {
+  listNodesForLanding: async function (
+    namespace,
+    nodeTypes,
+    tags,
+    editedBy,
+    before,
+    after,
+    limit,
+  ) {
+    const query = `
+      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $before: String, $after: String, $limit: Int) {
+        findNodesPaginated(
+          namespace: $namespace
+          nodeTypes: $nodeTypes
+          tags: $tags
+          editedBy: $editedBy
+          limit: $limit
+          before: $before
+          after: $after
+        ) {
+          pageInfo {
+            hasNextPage
+            endCursor
+            hasPrevPage
+            startCursor
+          }
+          edges {
+            node {
+              name
+              type
+              currentVersion
+              tags {
+                name
+                tagType
+              }
+              editedBy
+              current {
+                displayName
+                status
+                updatedAt
+              }
+              createdBy {
+                username
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    return await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          query,
+          variables: {
+            namespace: namespace,
+            nodeTypes: nodeTypes,
+            tags: tags,
+            editedBy: editedBy,
+            before: before,
+            after: after,
+            limit: limit,
+          },
+        }),
+      })
+    ).json();
+  },
+
   whoami: async function () {
     return await (
       await fetch(`${DJ_URL}/whoami/`, { credentials: 'include' })
@@ -346,11 +423,14 @@ export const DataJunctionAPI = {
     ).json();
   },
 
-  namespace: async function (nmspce) {
+  namespace: async function (nmspce, editedBy) {
     return await (
-      await fetch(`${DJ_URL}/namespaces/${nmspce}/?with_edited_by=true`, {
-        credentials: 'include',
-      })
+      await fetch(
+        `${DJ_URL}/namespaces/${nmspce}?edited_by=${editedBy}&with_edited_by=true`,
+        {
+          credentials: 'include',
+        },
+      )
     ).json();
   },
 

package/src/app/services/__tests__/DJService.test.jsx

@@ -426,9 +426,12 @@ describe('DataJunctionAPI', () => {
     const nmspce = 'sampleNamespace';
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.namespace(nmspce);
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/${nmspce}/?with_edited_by=true`, {
-      credentials: 'include',
-    });
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/namespaces/${nmspce}?edited_by=undefined&with_edited_by=true`,
+      {
+        credentials: 'include',
+      },
+    );
   });
 
   it('calls sql correctly', async () => {
@@ -489,9 +492,9 @@ describe('DataJunctionAPI', () => {
     const sampleNode = {
       name: 'sampleNode',
       columns: [
-        { name: 'column1', dimension: { name: 'dimension1' }, },
+        { name: 'column1', dimension: { name: 'dimension1' } },
         { name: 'column2', dimension: null },
-        { name: 'column3', dimension: { name: 'dimension2' }, },
+        { name: 'column3', dimension: { name: 'dimension2' } },
       ],
     };
 
@@ -1069,4 +1072,28 @@ describe('DataJunctionAPI', () => {
       },
     );
   });
+
+  it('calls listNodesForLanding correctly', () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+
+    DataJunctionAPI.listNodesForLanding(
+      '',
+      ['source'],
+      [],
+      '',
+      null,
+      null,
+      100,
+    );
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/graphql`,
+      expect.objectContaining({
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }),
+    );
+  });
 });

package/src/styles/index.css

@@ -1050,6 +1050,32 @@ pre {
   white-space: break-spaces;
 }
 
+.pagination {
+  background-color: #fff !important;
+  color: #74b7c3;
+  border: 1px solid #74b7c3;
+  text-transform: none;
+  vertical-align: middle;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-left: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+  font-size: 1rem;
+  border-radius: 0.2rem;
+  word-wrap: break-word;
+  white-space: break-spaces;
+  text-decoration: none;
+}
+.pagination:hover {
+  background-color: #b6dae0 !important;
+  color: #436e76;
+  text-transform: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
 .edit_button {
   background: none;
   color: inherit;
@@ -1258,67 +1284,67 @@ pre {
 
 .backfills {
   margin-left: -4rem;
-  --spacing : 1.5rem;
-  --radius  : 10px;
+  --spacing: 1.5rem;
+  --radius: 10px;
 }
 
-.backfills li{
-  display      : block;
-  position     : relative;
-  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+.backfills li {
+  display: block;
+  position: relative;
+  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
 }
 
-.backfills ul{
-  margin-left  : calc(var(--radius) - var(--spacing));
-  padding-left : 2rem;
+.backfills ul {
+  margin-left: calc(var(--radius) - var(--spacing));
+  padding-left: 2rem;
 }
 
-.backfills ul li{
-  border-left : 2px solid #ddd;
+.backfills ul li {
+  border-left: 2px solid #ddd;
 }
 
-.backfills ul li:last-child{
-  border-color : transparent;
+.backfills ul li:last-child {
+  border-color: transparent;
 }
 
-.backfills ul li::before{
-  content      : '';
-  display      : block;
-  position     : absolute;
-  top          : calc(var(--spacing) / -2);
-  left         : -2px;
-  width        : calc(var(--spacing) + 2px);
-  height       : calc(var(--spacing) + 1px);
-  border       : solid #ddd;
-  border-width : 0 0 2px 2px;
+.backfills ul li::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(var(--spacing) / -2);
+  left: -2px;
+  width: calc(var(--spacing) + 2px);
+  height: calc(var(--spacing) + 1px);
+  border: solid #ddd;
+  border-width: 0 0 2px 2px;
 }
 
-.backfills summary{
-  display : block;
-  cursor  : pointer;
+.backfills summary {
+  display: block;
+  cursor: pointer;
   margin-bottom: 10px;
 }
 
 .backfills summary::marker,
-.backfills summary::-webkit-details-marker{
-  display : none;
+.backfills summary::-webkit-details-marker {
+  display: none;
 }
 
-.backfills summary:focus{
-  outline : none;
+.backfills summary:focus {
+  outline: none;
 }
 
-.backfills summary:focus-visible{
-  outline : 1px dotted #000;
+.backfills summary:focus-visible {
+  outline: 1px dotted #000;
 }
 
-.backfills summary::before{
-  z-index    : 1;
+.backfills summary::before {
+  z-index: 1;
   /*background : #696 url('expand-collapse.svg') 0 0;*/
 }
 
-.backfills details[open] > summary::before{
-  background-position : calc(-2 * var(--radius)) 0;
+.backfills details[open] > summary::before {
+  background-position: calc(-2 * var(--radius)) 0;
 }
 
 .backfills_header {
@@ -1345,32 +1371,32 @@ pre {
   border-radius: 2px;
   border-style: none;
   padding: 0.4rem;
-  font-family: Lato, "sans-serif";
+  font-family: Lato, 'sans-serif';
   font-size: 110%;
   border-right: 16px solid transparent;
   margin-left: 0.4rem;
 }
 
 .backfills summary::marker,
-.backfills summary::-webkit-details-marker{
-  display : none;
+.backfills summary::-webkit-details-marker {
+  display: none;
 }
 
-.backfills summary:focus{
-  outline : none;
+.backfills summary:focus {
+  outline: none;
 }
 
-.backfills summary:focus-visible{
-  outline : 1px dotted #000;
+.backfills summary:focus-visible {
+  outline: 1px dotted #000;
 }
 
-.backfills summary::before{
-  z-index    : 1;
+.backfills summary::before {
+  z-index: 1;
   /*background : #696 url('expand-collapse.svg') 0 0;*/
 }
 
-.backfills details[open] > summary::before{
-  background-position : calc(-2 * var(--radius)) 0;
+.backfills details[open] > summary::before {
+  background-position: calc(-2 * var(--radius)) 0;
 }
 
 .backfills_header {
@@ -1419,8 +1445,8 @@ table {
   position: absolute;
   z-index: 1;
 
-    top: -5px;
-    left: 125%;
+  top: -5px;
+  left: 125%;
   /*bottom: 125%;*/
   /*left: 50%;*/
   margin-left: -60px;
@@ -1429,7 +1455,7 @@ table {
 }
 
 .tooltip .tooltiptext::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 100%;
   left: 50%;
@@ -1450,13 +1476,19 @@ table {
   grid-template-rows: 250px 1fr;
   gap: 20px;
   grid-template-areas:
-    "left righttop"
-    "left rightbottom";
+    'left righttop'
+    'left rightbottom';
   margin-top: 1rem;
 }
-.left { grid-area: left; }
-.righttop { grid-area: righttop; }
-.rightbottom { grid-area: rightbottom; }
+.left {
+  grid-area: left;
+}
+.righttop {
+  grid-area: righttop;
+}
+.rightbottom {
+  grid-area: rightbottom;
+}
 
 .queryrunner-query pre {
   border-radius: 0;
@@ -1512,4 +1544,4 @@ table {
 }
 .dropdown:hover .dropdown-menu {
   display: block;
-}
+}

package/src/styles/node-list.css

@@ -1,4 +1,4 @@
 table {
   width: 100%;
   height: min-content;
-}
+}