datajunction-ui 0.0.1-a70 → 0.0.1-a70.dev1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a70",
+  "version": "0.0.1-a70.dev1",
   "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,9 @@ 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/__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(),
@@ -85,6 +86,41 @@ describe('NamespacePage', () => {
         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(() => {
@@ -107,7 +143,7 @@ describe('NamespacePage', () => {
     );
 
     await waitFor(() => {
-      expect(mockDjClient.namespaces).toHaveBeenCalledTimes(1);
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
       expect(screen.getByText('Namespaces')).toBeInTheDocument();
 
       // check that it displays namespaces
@@ -121,7 +157,16 @@ describe('NamespacePage', () => {
 
       // check that it sorts nodes
       fireEvent.click(screen.getByText('name'));
-      fireEvent.click(screen.getByText('display 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];
@@ -141,17 +186,13 @@ describe('NamespacePage', () => {
       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'));
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+    },
+    { 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,32 @@ 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 +118,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,23 +126,46 @@ 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.length > 0 ? (
     sortedNodes.map(node => (
-      <tr>
+      <tr key={node.name}>
         <td>
           <a href={'/nodes/' + node.name} className="link-table">
             {node.name}
@@ -157,16 +174,16 @@ export function NamespacePage() {
             className="rounded-pill badge bg-secondary-soft"
             style={{ marginLeft: '0.5rem' }}
           >
-            {node.version}
+            {node.currentVersion}
           </span>
         </td>
         <td>
           <a href={'/nodes/' + node.name} className="link-table">
-            {node.type !== 'source' ? node.display_name : ''}
+            {node.type !== 'source' ? node.current.displayName : ''}
           </a>
         </td>
         <td>
-          <span className={'node_type__' + node.type + ' badge node_type'}>
+          <span className={'node_type__' + node.type.toLowerCase() + ' badge node_type'}>
             {node.type}
           </span>
         </td>
@@ -175,7 +192,7 @@ export function NamespacePage() {
         </td>
         <td>
           <span className="status">
-            {new Date(node.updated_at).toLocaleString('en-us')}
+            {new Date(node.current.updatedAt).toLocaleString('en-us')}
           </span>
         </td>
         <td>
@@ -184,9 +201,22 @@ export function NamespacePage() {
       </tr>
     ))
   ) : (
-    <span style={{ display: 'block', marginTop: '2rem' }}>
-      <LoadingIcon />
-    </span>
+    <tr>
+      <td>
+        <span style={{ display: 'block', marginTop: '2rem', marginLeft: '2rem', fontSize: '16px' }}>
+          There are no nodes in <a href={`/namespaces/${namespace}`}>{namespace}</a> with the above filters!
+        </span>
+      </td>
+    </tr>
+  )
+  ) : (
+    <tr>
+      <td>
+        <span style={{ display: 'block', marginTop: '2rem' }}>
+          <LoadingIcon />
+        </span>
+      </td>
+    </tr>
   );
 
   return (
@@ -194,7 +224,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 +290,7 @@ export function NamespacePage() {
                       item={child}
                       current={state.namespace}
                       defaultExpand={true}
+                      key={child.namespace}
                     />
                   ))
                 : null}
@@ -269,13 +300,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 +315,14 @@ 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/NodeStatus.jsx

@@ -81,7 +81,7 @@ 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/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">
@@ -76,10 +79,18 @@ export function Root() {
                     >
                       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
+  : 'http://localhost:8000/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,7 +426,7 @@ describe('DataJunctionAPI', () => {
     const nmspce = 'sampleNamespace';
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.namespace(nmspce);
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/${nmspce}/?with_edited_by=true`, {
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/${nmspce}?edited_by=undefined&with_edited_by=true`, {
       credentials: 'include',
     });
   });
@@ -1069,4 +1069,20 @@ 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;