datajunction-ui 0.0.17 → 0.0.19

package/src/app/components/__tests__/UserMenu.test.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import UserMenu from '../UserMenu';
+import DJClientContext from '../../providers/djclient';
+
+describe('<UserMenu />', () => {
+  const createMockDjClient = (overrides = {}) => ({
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      email: 'test@example.com',
+    }),
+    logout: jest.fn().mockResolvedValue({}),
+    ...overrides,
+  });
+
+  const renderWithContext = (mockDjClient: any, props = {}) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <UserMenu {...props} />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  // Mock window.location.reload
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    delete (window as any).location;
+    (window as any).location = { ...originalLocation, reload: jest.fn() };
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+  });
+
+  it('renders the avatar button', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('avatar-button');
+  });
+
+  it('shows "?" before user is loaded', () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockImplementation(
+        () => new Promise(() => {}), // Never resolves
+      ),
+    });
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('?');
+  });
+
+  it('displays initials from username (first two letters uppercase)', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JO');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('displays initials from name when available', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+        name: 'John Doe',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JD');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('opens dropdown when avatar is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('shows Settings and Logout links in dropdown', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const settingsLink = screen.getByText('Settings');
+    expect(settingsLink).toHaveAttribute('href', '/settings');
+
+    const logoutLink = screen.getByText('Logout');
+    expect(logoutLink).toHaveAttribute('href', '/');
+  });
+
+  it('calls logout and reloads page when Logout is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const logoutLink = screen.getByText('Logout');
+    fireEvent.click(logoutLink);
+
+    expect(mockDjClient.logout).toHaveBeenCalled();
+  });
+
+  it('calls onDropdownToggle when dropdown is opened', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('closes dropdown when forceClose becomes true', async () => {
+    const mockDjClient = createMockDjClient();
+
+    const { rerender } = render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <UserMenu forceClose={false} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Rerender with forceClose=true
+    rerender(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <UserMenu forceClose={true} />
+      </DJClientContext.Provider>,
+    );
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Click outside
+    fireEvent.click(document.body);
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+
+    // onDropdownToggle should be called with false
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('toggles dropdown closed when clicking avatar again', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+
+    // Open
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Close by clicking again
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+});

package/src/app/icons/NotificationIcon.jsx

@@ -0,0 +1,27 @@
+const NotificationIcon = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 16.1 19"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_27_">
+      <path
+        id="XMLID_5_"
+        className="st0"
+        d="M8.1,19c1,0,1.9-0.9,1.9-1.9H6.2C6.2,18.1,7,19,8.1,19z"
+      />
+      <path
+        id="XMLID_46_"
+        className="st0"
+        d="M14.2,13.3V8.1c0-2.9-2-5.3-4.8-6V1.4C9.5,0.7,8.8,0,8.1,0S6.7,0.7,6.7,1.4v0.7
+            c-2.8,0.7-4.8,3-4.8,6v5.2L0,15.2v0.9h16.1v-0.9L14.2,13.3z"
+      />
+    </g>
+  </svg>
+);
+export default NotificationIcon;

package/src/app/icons/SettingsIcon.jsx

@@ -0,0 +1,28 @@
+const SettingsIcon = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 19 19"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_196_">
+      <path
+        id="settings_2_"
+        className="st0"
+        d="M18.3,8.1l-1.9-0.3c-0.1-0.6-0.3-1.1-0.6-1.6L17,4.7c0.3-0.3,0.2-0.8,0-1.1l-0.7-0.8
+		c-0.3-0.3-0.7-0.4-1.1-0.2l-1.6,1c-0.7-0.5-1.5-0.9-2.4-1.1l-0.3-1.9C10.8,0.3,10.5,0,10.1,0H8.9C8.5,0,8.2,0.3,8.1,0.7L7.8,2.6
+		C7.1,2.8,6.4,3,5.8,3.4L4.3,2.3C4,2.1,3.5,2.1,3.2,2.4L2.4,3.2C2.1,3.5,2.1,4,2.3,4.3l1.1,1.5c-0.4,0.6-0.6,1.3-0.8,2L0.7,8.1
+		C0.3,8.2,0,8.5,0,8.9v1.1c0,0.4,0.3,0.8,0.7,0.8l1.9,0.3c0.1,0.6,0.4,1.1,0.6,1.7L2,14.3c-0.3,0.3-0.2,0.8,0,1.1l0.7,0.8
+		c0.3,0.3,0.7,0.4,1.1,0.2l1.6-1c0.7,0.5,1.5,0.8,2.3,1l0.3,1.9C8.2,18.7,8.5,19,8.9,19h1.1c0.4,0,0.8-0.3,0.8-0.7l0.3-1.9
+		c0.7-0.2,1.4-0.5,2-0.8l1.6,1.1c0.3,0.2,0.8,0.2,1.1-0.1l0.8-0.8c0.3-0.3,0.3-0.7,0.1-1.1l-1.1-1.6c0.4-0.6,0.7-1.3,0.8-2l1.9-0.3
+		c0.4-0.1,0.7-0.4,0.7-0.8V8.9C19,8.5,18.7,8.2,18.3,8.1z M9.5,13.1c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6
+		C13.1,11.5,11.5,13.1,9.5,13.1z"
+      />
+    </g>
+  </svg>
+);
+export default SettingsIcon;

package/src/app/index.tsx

@@ -9,6 +9,8 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { OverviewPage } from './pages/OverviewPage/Loadable';
+import { SettingsPage } from './pages/SettingsPage/Loadable';
+import { NotificationsPage } from './pages/NotificationsPage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
 import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
@@ -122,6 +124,16 @@ export function App() {
                         key="overview"
                         element={<OverviewPage />}
                       />
+                      <Route
+                        path="settings"
+                        key="settings"
+                        element={<SettingsPage />}
+                      />
+                      <Route
+                        path="notifications"
+                        key="notifications"
+                        element={<NotificationsPage />}
+                      />
                     </>
                   }
                 />

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

@@ -0,0 +1,27 @@
+import Select from 'react-select';
+import Control from './FieldControl';
+
+export default function NodeModeSelect({ onChange }) {
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-mode"
+    >
+      <Select
+        name="node_mode"
+        isClearable
+        label="Mode"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        styles={{
+          control: styles => ({ ...styles, backgroundColor: 'white' }),
+        }}
+        options={[
+          { value: 'published', label: 'Published' },
+          { value: 'draft', label: 'Draft' },
+        ]}
+      />
+    </span>
+  );
+}

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

@@ -11,7 +11,7 @@ export default function NodeTypeSelect({ onChange }) {
       <Select
         name="node_type"
         isClearable
-        label="Node Type"
+        label="Type"
         components={{ Control }}
         onChange={e => onChange(e)}
         styles={{

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

@@ -114,6 +114,7 @@ describe('NamespacePage', () => {
                 current: {
                   displayName: 'Test Node',
                   status: 'VALID',
+                  mode: 'PUBLISHED',
                   updatedAt: '2024-10-18T15:15:33.532949+00:00',
                 },
                 createdBy: {

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

@@ -11,6 +11,7 @@ import FilterIcon from '../../icons/FilterIcon';
 import LoadingIcon from '../../icons/LoadingIcon';
 import UserSelect from './UserSelect';
 import NodeTypeSelect from './NodeTypeSelect';
+import NodeModeSelect from './NodeModeSelect';
 import TagSelect from './TagSelect';
 
 import 'styles/node-list.css';
@@ -20,7 +21,7 @@ export function NamespacePage() {
   const ASC = 'ascending';
   const DESC = 'descending';
 
-  const fields = ['name', 'displayName', 'type', 'status', 'updatedAt'];
+  const fields = ['name', 'displayName', 'type', 'status', 'mode', 'updatedAt'];
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   var { namespace } = useParams();
@@ -36,6 +37,7 @@ export function NamespacePage() {
     tags: [],
     node_type: '',
     edited_by: '',
+    mode: '',
   });
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
@@ -122,6 +124,7 @@ export function NamespacePage() {
         after,
         50,
         sortConfig,
+        filters.mode ? filters.mode.toUpperCase() : null,
       );
 
       setState({
@@ -198,6 +201,29 @@ export function NamespacePage() {
           <td>
             <NodeStatus node={node} revalidate={false} />
           </td>
+          <td>
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                border: `2px solid ${
+                  node.current.mode === 'PUBLISHED' ? '#28a745' : '#ffc107'
+                }`,
+                backgroundColor: 'transparent',
+                color:
+                  node.current.mode === 'PUBLISHED' ? '#28a745' : '#d39e00',
+                fontWeight: '600',
+                fontSize: '12px',
+              }}
+              title={node.current.mode === 'PUBLISHED' ? 'Published' : 'Draft'}
+            >
+              {node.current.mode === 'PUBLISHED' ? 'P' : 'D'}
+            </span>
+          </td>
           <td>
             <span className="status">
               {new Date(node.current.updatedAt).toLocaleString('en-us')}
@@ -265,7 +291,7 @@ export function NamespacePage() {
                 marginRight: '10px',
               }}
             >
-              Filter By
+              Filter
             </div>
             <NodeTypeSelect
               onChange={entry =>
@@ -286,6 +312,11 @@ export function NamespacePage() {
               }
               currentUser={currentUser?.username}
             />
+            <NodeModeSelect
+              onChange={entry =>
+                setFilters({ ...filters, mode: entry ? entry.value : '' })
+              }
+            />
             <AddNodeDropdown namespace={namespace} />
           </div>
           <div className="table-responsive">

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,
+);