datajunction-ui 0.0.1-rc.8 → 0.0.2

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

@@ -0,0 +1,297 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { NamespacePage } from '../index';
+import React from 'react';
+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(),
+  listTags: jest.fn(),
+};
+
+describe('NamespacePage', () => {
+  const original = window.location;
+
+  const reloadFn = () => {
+    window.location.reload();
+  };
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    });
+  });
+
+  beforeEach(() => {
+    fetch.resetMocks();
+    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',
+        num_nodes: 3,
+      },
+      {
+        namespace: 'common.one.a',
+        num_nodes: 6,
+      },
+      {
+        namespace: 'common.one.b',
+        num_nodes: 17,
+      },
+      {
+        namespace: 'common.one.c',
+        num_nodes: 64,
+      },
+      {
+        namespace: 'default',
+        num_nodes: 41,
+      },
+      {
+        namespace: 'default.fruits',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.fruits.citrus.lemons',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.vegetables',
+        num_nodes: 2,
+      },
+    ]);
+    mockDjClient.namespace.mockResolvedValue([
+      {
+        name: 'testNode',
+        display_name: 'Test Node',
+        type: 'transform',
+        mode: 'active',
+        updated_at: new Date(),
+        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(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays namespaces and renders nodes', async () => {
+    reloadFn();
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    // Wait for initial nodes to load
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+      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();
+
+    // --- Sorting ---
+
+    // sort by 'name'
+    fireEvent.click(screen.getByText('name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(2);
+    });
+
+    // flip direction
+    fireEvent.click(screen.getByText('name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(3);
+    });
+
+    // sort by 'displayName'
+    fireEvent.click(screen.getByText('display Name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(4);
+    });
+
+    // --- Filters ---
+
+    // Node type
+    const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+    fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Source'));
+
+    // Tag filter
+    const selectTag = screen.getAllByTestId('select-tag')[0];
+    fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+
+    // User filter
+    const selectUser = screen.getAllByTestId('select-user')[0];
+    fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+
+    // --- Expand/Collapse Namespace ---
+    fireEvent.click(screen.getByText('common'));
+    fireEvent.click(screen.getByText('common'));
+  });
+
+  it('can add new namespace via add namespace popover', async () => {
+    mockDjClient.addNamespace.mockReturnValue({
+      status: 201,
+      json: {},
+    });
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    // Find the button to toggle the add namespace popover
+    const addNamespaceToggle = screen.getByRole('button', {
+      name: 'AddNamespaceTogglePopover',
+    });
+    expect(addNamespaceToggle).toBeInTheDocument();
+
+    // Click the toggle and verify that the popover displays
+    fireEvent.click(addNamespaceToggle);
+    const addNamespacePopover = screen.getByRole('dialog', {
+      name: 'AddNamespacePopover',
+    });
+    expect(addNamespacePopover).toBeInTheDocument();
+
+    // Type in the new namespace
+    await userEvent.type(
+      screen.getByLabelText('Namespace'),
+      'some.random.namespace',
+    );
+
+    // Save
+    const saveNamespace = screen.getByRole('button', {
+      name: 'SaveNamespace',
+    });
+    await waitFor(() => {
+      fireEvent.click(saveNamespace);
+    });
+    expect(mockDjClient.addNamespace).toHaveBeenCalled();
+    expect(mockDjClient.addNamespace).toHaveBeenCalledWith(
+      'test.namespace.some.random.namespace',
+    );
+    expect(screen.getByText('Saved')).toBeInTheDocument();
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('can fail to add namespace', async () => {
+    mockDjClient.addNamespace.mockReturnValue({
+      status: 500,
+      json: { message: 'you failed' },
+    });
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    // Open the add namespace popover
+    const addNamespaceToggle = screen.getByRole('button', {
+      name: 'AddNamespaceTogglePopover',
+    });
+    fireEvent.click(addNamespaceToggle);
+
+    // Type in the new namespace
+    await userEvent.type(
+      screen.getByLabelText('Namespace'),
+      'some.random.namespace',
+    );
+
+    // Save
+    const saveNamespace = screen.getByRole('button', {
+      name: 'SaveNamespace',
+    });
+    await waitFor(() => {
+      fireEvent.click(saveNamespace);
+    });
+
+    // Should display failure alert
+    expect(screen.getByText('you failed')).toBeInTheDocument();
+  });
+});

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

@@ -1,83 +1,360 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { useContext, useEffect, useState } from 'react';
-import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
+import Explorer from '../NamespacePage/Explorer';
+import AddNodeDropdown from '../../components/AddNodeDropdown';
+import NodeListActions from '../../components/NodeListActions';
+import AddNamespacePopover from './AddNamespacePopover';
+import FilterIcon from '../../icons/FilterIcon';
+import LoadingIcon from '../../icons/LoadingIcon';
+import UserSelect from './UserSelect';
+import NodeTypeSelect from './NodeTypeSelect';
+import TagSelect from './TagSelect';
+
+import 'styles/node-list.css';
+import 'styles/sorted-table.css';
 
 export function NamespacePage() {
+  const ASC = 'ascending';
+  const DESC = 'descending';
+
+  const fields = ['name', 'displayName', 'type', 'status', 'updatedAt'];
+
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const { namespace } = useParams();
+  var { namespace } = useParams();
 
   const [state, setState] = useState({
-    namespace: namespace,
+    namespace: namespace ? namespace : '',
     nodes: [],
   });
+  const [retrieved, setRetrieved] = useState(false);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const [filters, setFilters] = useState({
+    tags: [],
+    node_type: '',
+    edited_by: '',
+  });
+
+  const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+
+  const [sortConfig, setSortConfig] = useState({
+    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 requestSort = key => {
+    let direction = ASC;
+    if (sortConfig.key === key && sortConfig.direction === ASC) {
+      direction = DESC;
+    }
+    if (sortConfig.key !== key || sortConfig.direction !== direction) {
+      setSortConfig({ key, direction });
+    }
+  };
+
+  const getClassNamesFor = name => {
+    if (sortConfig.key === name) {
+      return sortConfig.direction;
+    }
+    return undefined;
+  };
+
+  const createNamespaceHierarchy = namespaceList => {
+    const hierarchy = [];
+
+    for (const item of namespaceList) {
+      const namespaces = item.namespace.split('.');
+      let currentLevel = hierarchy;
+
+      let path = '';
+      for (const ns of namespaces) {
+        path += ns;
+
+        let existingNamespace = currentLevel.find(el => el.namespace === ns);
+        if (!existingNamespace) {
+          existingNamespace = {
+            namespace: ns,
+            children: [],
+            path: path,
+          };
+          currentLevel.push(existingNamespace);
+        }
+
+        currentLevel = existingNamespace.children;
+        path += '.';
+      }
+    }
+    return hierarchy;
+  };
 
   useEffect(() => {
     const fetchData = async () => {
-      const djNodes = await djClient.namespace(namespace);
-      const nodes = djNodes.map(node => {
-        return djClient.node(node);
-      });
-      const foundNodes = await Promise.all(nodes);
+      const namespaces = await djClient.namespaces();
+      const hierarchy = createNamespaceHierarchy(namespaces);
+      setNamespaceHierarchy(hierarchy);
+      const currentUser = await djClient.whoami();
+      // setFilters({...filters, edited_by: currentUser?.username});
+      setCurrentUser(currentUser);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setRetrieved(false);
+      const nodes = await djClient.listNodesForLanding(
+        namespace,
+        filters.node_type ? [filters.node_type.toUpperCase()] : [],
+        filters.tags,
+        filters.edited_by,
+        before,
+        after,
+        50,
+        sortConfig,
+      );
+
       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 : '',
+        );
+        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]);
+  }, [djClient, filters, before, after, sortConfig.key, sortConfig.direction]);
 
-  const nodesList = state.nodes.map(node => (
+  const loadNext = () => {
+    if (nextCursor) {
+      setAfter(nextCursor);
+      setBefore(null);
+    }
+  };
+  const loadPrev = () => {
+    if (prevCursor) {
+      setAfter(null);
+      setBefore(prevCursor);
+    }
+  };
+
+  const nodesList = retrieved ? (
+    state.nodes.length > 0 ? (
+      state.nodes.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>
+          <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>
-        <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
-      </td>
-      <td>
-        <a href={'/nodes/' + node.name} className="link-table">
-          {node.display_name}
-        </a>
-        <span
-          className="rounded-pill badge bg-secondary-soft"
-          style={{ marginLeft: '0.5rem' }}
-        >
-          {node.version}
+        <span style={{ display: 'block', marginTop: '2rem' }}>
+          <LoadingIcon />
         </span>
       </td>
-      <td>
-        <span className={'node_type__' + node.type + ' badge node_type'}>
-          {node.type}
-        </span>
-      </td>
-      <td>
-        <NodeStatus node={node} />
-      </td>
-      <td>
-        <span className="status">{node.mode}</span>
-      </td>
     </tr>
-  ));
+  );
 
-  // @ts-ignore
   return (
     <div className="mid">
-      <NamespaceHeader namespace={namespace} />
       <div className="card">
         <div className="card-header">
-          <h2>Nodes</h2>
+          <h2>Explore</h2>
+          <div className="menu" style={{ margin: '0 0 20px 0' }}>
+            <div
+              className="menu-link"
+              style={{
+                marginTop: '0.7em',
+                color: '#777',
+                fontFamily: "'Jost'",
+                fontSize: '18px',
+                marginRight: '10px',
+                marginLeft: '15px',
+              }}
+            >
+              <FilterIcon />
+            </div>
+            <div
+              className="menu-link"
+              style={{
+                marginTop: '0.6em',
+                color: '#777',
+                fontFamily: "'Jost'",
+                fontSize: '18px',
+                marginRight: '10px',
+              }}
+            >
+              Filter By
+            </div>
+            <NodeTypeSelect
+              onChange={entry =>
+                setFilters({ ...filters, node_type: entry ? entry.value : '' })
+              }
+            />
+            <TagSelect
+              onChange={entry =>
+                setFilters({
+                  ...filters,
+                  tags: entry ? entry.map(tag => tag.value) : [],
+                })
+              }
+            />
+            <UserSelect
+              onChange={entry =>
+                setFilters({ ...filters, edited_by: entry ? entry.value : '' })
+              }
+              currentUser={currentUser?.username}
+            />
+            <AddNodeDropdown namespace={namespace} />
+          </div>
           <div className="table-responsive">
+            <div className={`sidebar`}>
+              <span
+                style={{
+                  textTransform: 'uppercase',
+                  fontSize: '0.8125rem',
+                  fontWeight: '600',
+                  color: '#95aac9',
+                  padding: '1rem 1rem 1rem 0',
+                }}
+              >
+                Namespaces <AddNamespacePopover namespace={namespace} />
+              </span>
+              {namespaceHierarchy
+                ? namespaceHierarchy.map(child => (
+                    <Explorer
+                      item={child}
+                      current={state.namespace}
+                      defaultExpand={true}
+                      key={child.namespace}
+                    />
+                  ))
+                : null}
+            </div>
             <table className="card-table table">
               <thead>
                 <tr>
-                  <th>Namespace</th>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Status</th>
-                  <th>Mode</th>
+                  {fields.map(field => {
+                    return (
+                      <th key={field}>
+                        <button
+                          type="button"
+                          onClick={() => requestSort(field)}
+                          className={'sortable ' + getClassNamesFor(field)}
+                        >
+                          {field.replace(/([a-z](?=[A-Z]))/g, '$1 ')}
+                        </button>
+                      </th>
+                    );
+                  })}
+                  <th>Actions</th>
                 </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>