datajunction-ui 0.0.14 → 0.0.16

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

@@ -0,0 +1,283 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import AddNamespacePopover from '../AddNamespacePopover';
+import DJClientContext from '../../../providers/djclient';
+
+// Mock window.location.reload
+delete window.location;
+window.location = { reload: jest.fn() };
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    addNamespace: jest.fn(),
+  },
+};
+
+describe('<AddNamespacePopover />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const defaultProps = {
+    namespace: 'default',
+  };
+
+  it('renders the toggle button', () => {
+    const { getByLabelText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    expect(getByLabelText('AddNamespaceTogglePopover')).toBeInTheDocument();
+  });
+
+  it('opens popover when toggle button is clicked', async () => {
+    const { getByLabelText, getByRole } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    await waitFor(() => {
+      expect(
+        getByRole('dialog', { name: 'AddNamespacePopover' }),
+      ).toBeVisible();
+    });
+  });
+
+  it('pre-fills namespace field with parent namespace', async () => {
+    const { getByLabelText, getByDisplayValue } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover namespace="parent" />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    await waitFor(() => {
+      expect(getByDisplayValue('parent.')).toBeInTheDocument();
+    });
+  });
+
+  it('displays namespace input field and save button', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    await waitFor(() => {
+      expect(getByLabelText('Namespace')).toBeInTheDocument();
+      expect(getByLabelText('SaveNamespace')).toBeInTheDocument();
+      expect(getByText('Save')).toBeInTheDocument();
+    });
+  });
+
+  it('allows typing in namespace field', async () => {
+    const { getByLabelText, getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    const namespaceInput = getByPlaceholderText('New namespace');
+
+    await act(async () => {
+      fireEvent.change(namespaceInput, {
+        target: { value: 'default.new_namespace' },
+      });
+    });
+
+    expect(namespaceInput.value).toBe('default.new_namespace');
+  });
+
+  it('calls addNamespace with correct value on form submission - success', async () => {
+    mockDjClient.DataJunctionAPI.addNamespace.mockResolvedValue({
+      status: 200,
+      json: { message: 'Namespace created' },
+    });
+
+    const { getByLabelText, getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    const namespaceInput = getByPlaceholderText('New namespace');
+
+    await act(async () => {
+      fireEvent.change(namespaceInput, { target: { value: 'default.child' } });
+    });
+
+    const saveButton = getByLabelText('SaveNamespace');
+
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addNamespace).toHaveBeenCalledWith(
+        'default.child',
+      );
+      expect(getByText('Saved')).toBeInTheDocument();
+    });
+
+    // Should reload page after success
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('calls addNamespace with correct value on form submission - status 201', async () => {
+    mockDjClient.DataJunctionAPI.addNamespace.mockResolvedValue({
+      status: 201,
+      json: { message: 'Namespace created' },
+    });
+
+    const { getByLabelText, getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    const namespaceInput = getByPlaceholderText('New namespace');
+
+    await act(async () => {
+      fireEvent.change(namespaceInput, {
+        target: { value: 'default.another' },
+      });
+    });
+
+    const saveButton = getByLabelText('SaveNamespace');
+
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addNamespace).toHaveBeenCalledWith(
+        'default.another',
+      );
+      expect(getByText('Saved')).toBeInTheDocument();
+    });
+
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('displays error message when addNamespace fails', async () => {
+    mockDjClient.DataJunctionAPI.addNamespace.mockResolvedValue({
+      status: 400,
+      json: { message: 'Namespace already exists' },
+    });
+
+    const { getByLabelText, getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    const namespaceInput = getByPlaceholderText('New namespace');
+
+    await act(async () => {
+      fireEvent.change(namespaceInput, {
+        target: { value: 'default.duplicate' },
+      });
+    });
+
+    const saveButton = getByLabelText('SaveNamespace');
+
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addNamespace).toHaveBeenCalledWith(
+        'default.duplicate',
+      );
+      expect(getByText('Namespace already exists')).toBeInTheDocument();
+    });
+
+    // Should still reload page even on failure
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('closes popover when toggle button is clicked again', async () => {
+    const { getByLabelText, getByRole, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    // Open popover
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    await waitFor(() => {
+      expect(getByRole('dialog')).toBeVisible();
+    });
+
+    // Close popover
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    // Popover should still exist but be hidden
+    const popover = container.querySelector('[role="dialog"]');
+    expect(popover).toHaveStyle({ display: 'none' });
+  });
+
+  it('handles nested namespace creation', async () => {
+    mockDjClient.DataJunctionAPI.addNamespace.mockResolvedValue({
+      status: 200,
+      json: { message: 'Namespace created' },
+    });
+
+    const { getByLabelText, getByDisplayValue } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover namespace="parent.child" />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    await waitFor(() => {
+      expect(getByDisplayValue('parent.child.')).toBeInTheDocument();
+    });
+  });
+
+  it('submits with initial value if not changed', async () => {
+    mockDjClient.DataJunctionAPI.addNamespace.mockResolvedValue({
+      status: 200,
+      json: { message: 'Namespace created' },
+    });
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddNamespacePopover namespace="test" />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('AddNamespaceTogglePopover'));
+
+    const saveButton = getByLabelText('SaveNamespace');
+
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.addNamespace).toHaveBeenCalledWith(
+        'test.',
+      );
+      expect(getByText('Saved')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -201,7 +201,15 @@ describe('NamespacePage', () => {
     fireEvent.click(screen.getByText('common'));
   });
 
-  it('can add new namespace via add namespace popover', async () => {
+  it('can add new namespace via inline creation', async () => {
+    // Mock window.location to track navigation
+    delete window.location;
+    window.location = { href: jest.fn() };
+    Object.defineProperty(window.location, 'href', {
+      set: jest.fn(),
+      get: jest.fn(),
+    });
+
     mockDjClient.addNamespace.mockReturnValue({
       status: 201,
       json: {},
@@ -212,45 +220,53 @@ describe('NamespacePage', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+      <MemoryRouter initialEntries={['/namespaces/default']}>
         <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',
+    // Wait for namespaces to load
+    await waitFor(() => {
+      expect(screen.getByText('default')).toBeInTheDocument();
     });
-    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();
+    // Find the namespace and hover to reveal add button
+    const defaultNamespace = screen
+      .getByText('default')
+      .closest('.select-name');
+    fireEvent.mouseEnter(defaultNamespace);
 
-    // Type in the new namespace
-    await userEvent.type(
-      screen.getByLabelText('Namespace'),
-      'some.random.namespace',
+    // Find the add namespace button (it exists but is hidden, so use getAllByTitle)
+    const addButtons = screen.getAllByTitle('Add child namespace');
+    const defaultAddButton = addButtons.find(btn =>
+      btn
+        .closest('.namespace-item')
+        ?.querySelector('a[href="/namespaces/default"]'),
     );
 
-    // Save
-    const saveNamespace = screen.getByRole('button', {
-      name: 'SaveNamespace',
+    expect(defaultAddButton).toBeInTheDocument();
+    fireEvent.click(defaultAddButton);
+
+    // Type in the new namespace name
+    await waitFor(() => {
+      const input = screen.getByPlaceholderText('New namespace name');
+      expect(input).toBeInTheDocument();
     });
+
+    const input = screen.getByPlaceholderText('New namespace name');
+    await userEvent.type(input, 'new_child');
+
+    // Submit the form
+    const submitButton = screen.getByRole('button', { name: '✓' });
+    fireEvent.click(submitButton);
+
     await waitFor(() => {
-      fireEvent.click(saveNamespace);
+      expect(mockDjClient.addNamespace).toHaveBeenCalledWith(
+        'default.new_child',
+      );
     });
-    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 () => {
@@ -264,34 +280,51 @@ describe('NamespacePage', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+      <MemoryRouter initialEntries={['/namespaces/default']}>
         <Routes>
           <Route path="namespaces/:namespace" element={element} />
         </Routes>
       </MemoryRouter>,
     );
 
-    // Open the add namespace popover
-    const addNamespaceToggle = screen.getByRole('button', {
-      name: 'AddNamespaceTogglePopover',
+    // Wait for namespaces to load
+    await waitFor(() => {
+      expect(screen.getByText('default')).toBeInTheDocument();
     });
-    fireEvent.click(addNamespaceToggle);
 
-    // Type in the new namespace
-    await userEvent.type(
-      screen.getByLabelText('Namespace'),
-      'some.random.namespace',
+    // Find the namespace and hover to reveal add button
+    const defaultNamespace = screen
+      .getByText('default')
+      .closest('.select-name');
+    fireEvent.mouseEnter(defaultNamespace);
+
+    // Find the add namespace button (it exists but is hidden, so use getAllByTitle)
+    const addButtons = screen.getAllByTitle('Add child namespace');
+    const defaultAddButton = addButtons.find(btn =>
+      btn
+        .closest('.namespace-item')
+        ?.querySelector('a[href="/namespaces/default"]'),
     );
 
-    // Save
-    const saveNamespace = screen.getByRole('button', {
-      name: 'SaveNamespace',
-    });
+    expect(defaultAddButton).toBeInTheDocument();
+    fireEvent.click(defaultAddButton);
+
+    // Type in the new namespace name
     await waitFor(() => {
-      fireEvent.click(saveNamespace);
+      const input = screen.getByPlaceholderText('New namespace name');
+      expect(input).toBeInTheDocument();
     });
 
+    const input = screen.getByPlaceholderText('New namespace name');
+    await userEvent.type(input, 'bad_namespace');
+
+    // Submit the form
+    const submitButton = screen.getByRole('button', { name: '✓' });
+    fireEvent.click(submitButton);
+
     // Should display failure alert
-    expect(screen.getByText('you failed')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('you failed')).toBeInTheDocument();
+    });
   });
 });

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

@@ -290,23 +290,29 @@ export function NamespacePage() {
           </div>
           <div className="table-responsive">
             <div className={`sidebar`}>
-              <span
+              <div
                 style={{
-                  textTransform: 'uppercase',
-                  fontSize: '0.8125rem',
-                  fontWeight: '600',
-                  color: '#95aac9',
                   padding: '1rem 1rem 1rem 0',
                 }}
               >
-                Namespaces <AddNamespacePopover namespace={namespace} />
-              </span>
+                <span
+                  style={{
+                    textTransform: 'uppercase',
+                    fontSize: '0.8125rem',
+                    fontWeight: '600',
+                    color: '#95aac9',
+                  }}
+                >
+                  Namespaces
+                </span>
+              </div>
               {namespaceHierarchy
                 ? namespaceHierarchy.map(child => (
                     <Explorer
                       item={child}
                       current={state.namespace}
                       defaultExpand={true}
+                      isTopLevel={true}
                       key={child.namespace}
                     />
                   ))