datajunction-ui 0.0.14 → 0.0.16

package/src/app/components/__tests__/Search.test.jsx

@@ -1,63 +1,307 @@
-import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import Search from '../Search';
 import DJClientContext from '../../providers/djclient';
-import { Root } from '../../pages/Root';
-import { HelmetProvider } from 'react-helmet-async';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    nodeDetails: jest.fn(),
+    listTags: jest.fn(),
+  },
+};
 
 describe('<Search />', () => {
-  const mockDjClient = {
-    logout: jest.fn(),
-    nodeDetails: async () => [
-      {
-        name: 'default.repair_orders',
-        display_name: 'Default: Repair Orders',
-        description: 'Repair orders',
-        version: 'v1.0',
-        type: 'source',
-        status: 'valid',
-        mode: 'published',
-        updated_at: '2023-08-21T16:48:52.880498+00:00',
-      },
-      {
-        name: 'default.repair_order_details',
-        display_name: 'Default: Repair Order Details',
-        description: 'Details on repair orders',
-        version: 'v1.0',
-        type: 'source',
-        status: 'valid',
-        mode: 'published',
-        updated_at: '2023-08-21T16:48:52.981201+00:00',
-      },
-    ],
-    listTags: async () => [
-      {
-        description: 'something',
-        display_name: 'Report A',
-        tag_metadata: {},
-        name: 'report.a',
-        tag_type: 'report',
-      },
-      {
-        description: 'report B',
-        display_name: 'Report B',
-        tag_metadata: {},
-        name: 'report.b',
-        tag_type: 'report',
-      },
-    ],
-  };
-
-  it('displays search results correctly', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockNodes = [
+    {
+      name: 'default.test_node',
+      display_name: 'Test Node',
+      description: 'A test node for testing',
+      type: 'transform',
+    },
+    {
+      name: 'default.another_node',
+      display_name: 'Another Node',
+      description: null, // Test null description
+      type: 'metric',
+    },
+    {
+      name: 'default.long_description_node',
+      display_name: 'Long Description',
+      description:
+        'This is a very long description that exceeds 100 characters and should be truncated to prevent display issues in the search results interface',
+      type: 'dimension',
+    },
+  ];
+
+  const mockTags = [
+    {
+      name: 'test_tag',
+      display_name: 'Test Tag',
+      description: 'A test tag',
+      tag_type: 'business',
+    },
+  ];
+
+  it('renders search input', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    expect(getByPlaceholderText('Search')).toBeInTheDocument();
+  });
+
+  it('fetches and initializes search data on mount', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
     render(
-      <HelmetProvider>
-        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-          <Root />
-        </DJClientContext.Provider>
-      </HelmetProvider>,
-    );
-    const searchInput = screen.queryByPlaceholderText('Search');
-    fireEvent.change(searchInput, { target: { value: 'Repair' } });
-    expect(searchInput.value).toBe('Repair');
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    });
+  });
+
+  it('displays search results when typing', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      expect(getByText(/Test Node/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays nodes with correct URLs', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'node' } });
+
+    await waitFor(() => {
+      const links = container.querySelectorAll('a[href^="/nodes/"]');
+      expect(links.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('displays tags with correct URLs', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'tag' } });
+
+    await waitFor(() => {
+      const links = container.querySelectorAll('a[href^="/tags/"]');
+      expect(links.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('truncates long descriptions', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'long' } });
+
+    await waitFor(() => {
+      expect(getByText(/\.\.\./)).toBeInTheDocument();
+    });
+  });
+
+  it('handles null descriptions', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'another' } });
+
+    await waitFor(() => {
+      expect(getByText(/Another Node/)).toBeInTheDocument();
+    });
+  });
+
+  it('limits search results to 20 items', async () => {
+    const manyNodes = Array.from({ length: 30 }, (_, i) => ({
+      name: `default.node${i}`,
+      display_name: `Node ${i}`,
+      description: `Description ${i}`,
+      type: 'transform',
+    }));
+
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(manyNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'node' } });
+
+    await waitFor(() => {
+      const results = container.querySelectorAll('.search-result-item');
+      expect(results.length).toBeLessThanOrEqual(20);
+    });
+  });
+
+  it('handles error when fetching nodes', async () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+    mockDjClient.DataJunctionAPI.nodeDetails.mockRejectedValue(
+      new Error('Network error'),
+    );
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Error fetching nodes or tags:',
+        expect.any(Error),
+      );
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('prevents form submission', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    const form = container.querySelector('form');
+
+    const submitEvent = new Event('submit', {
+      bubbles: true,
+      cancelable: true,
+    });
+    const preventDefaultSpy = jest.spyOn(submitEvent, 'preventDefault');
+
+    form.dispatchEvent(submitEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it('handles empty tags array', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(null);
+
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    });
+
+    // Should not throw an error
+    const searchInput = getByPlaceholderText('Search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('shows description separator correctly', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      const results = container.querySelector('.search-result-item');
+      expect(results).toBeInTheDocument();
+    });
   });
 });

package/src/app/pages/AddEditNodePage/FormikSelect.jsx

@@ -14,6 +14,10 @@ export const FormikSelect = ({
   isMulti = false,
   isClearable = false,
   onFocus = event => {},
+  onChange: customOnChange,
+  menuPortalTarget,
+  styles,
+  ...rest
 }) => {
   // eslint-disable-next-line no-unused-vars
   const [field, _, helpers] = useField(formikFieldName);
@@ -28,6 +32,13 @@ export const FormikSelect = ({
     }
   };
 
+  const handleChange = selected => {
+    setValue(getValue(selected));
+    if (customOnChange) {
+      customOnChange(selected);
+    }
+  };
+
   return (
     <Select
       className={className}
@@ -36,12 +47,14 @@ export const FormikSelect = ({
       name={field.name}
       placeholder={placeholder}
       onBlur={field.onBlur}
-      onChange={selected => setValue(getValue(selected))}
-      styles={style}
+      onChange={handleChange}
+      styles={styles || style}
       isMulti={isMulti}
       isClearable={isClearable}
       onFocus={event => onFocus(event)}
       id={field.name}
+      menuPortalTarget={menuPortalTarget}
+      {...rest}
     />
   );
 };

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

@@ -1,11 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import CollapsedIcon from '../../icons/CollapsedIcon';
 import ExpandedIcon from '../../icons/ExpandedIcon';
+import AddItemIcon from '../../icons/AddItemIcon';
+import DJClientContext from '../../providers/djclient';
 
-const Explorer = ({ item = [], current }) => {
+const Explorer = ({ item = [], current, isTopLevel = false }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [items, setItems] = useState([]);
   const [expand, setExpand] = useState(false);
   const [highlight, setHighlight] = useState(false);
+  const [showAddButton, setShowAddButton] = useState(false);
+  const [isCreatingChild, setIsCreatingChild] = useState(false);
+  const [newNamespace, setNewNamespace] = useState('');
+  const [error, setError] = useState('');
+  const inputRef = useRef(null);
+  const formRef = useRef(null);
 
   useEffect(() => {
     setItems(item);
@@ -15,6 +24,27 @@ const Explorer = ({ item = [], current }) => {
     } else setExpand(false);
   }, [current, item]);
 
+  useEffect(() => {
+    if (isCreatingChild && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isCreatingChild]);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (formRef.current && !formRef.current.contains(event.target)) {
+        handleCancelAdd();
+      }
+    };
+
+    if (isCreatingChild) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isCreatingChild]);
+
   const handleClickOnParent = e => {
     e.stopPropagation();
     setExpand(prev => {
@@ -22,38 +52,179 @@ const Explorer = ({ item = [], current }) => {
     });
   };
 
+  const handleAddNamespace = async e => {
+    e.preventDefault();
+    if (!newNamespace.trim()) {
+      setError('Namespace cannot be empty');
+      return;
+    }
+
+    const fullNamespace = items.path
+      ? `${items.path}.${newNamespace}`
+      : newNamespace;
+
+    const response = await djClient.addNamespace(fullNamespace);
+    if (response.status === 200 || response.status === 201) {
+      setIsCreatingChild(false);
+      setNewNamespace('');
+      setError('');
+      window.location.href = `/namespaces/${fullNamespace}`;
+    } else {
+      setError(response.json?.message || 'Failed to create namespace');
+    }
+  };
+
+  const handleCancelAdd = () => {
+    setIsCreatingChild(false);
+    setNewNamespace('');
+    setError('');
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      handleAddNamespace(e);
+    } else if (e.key === 'Escape') {
+      handleCancelAdd();
+    }
+  };
+
   return (
     <>
-      <div
-        className={`select-name ${
-          highlight === items.path ? 'select-name-highlight' : ''
-        }`}
-        onClick={handleClickOnParent}
-      >
-        {items.children && items.children.length > 0 ? (
-          <span>{!expand ? <CollapsedIcon /> : <ExpandedIcon />} </span>
-        ) : null}
-        <a href={`/namespaces/${items.path}`}>{items.namespace}</a>{' '}
+      <div className="namespace-item" style={{ position: 'relative' }}>
+        <div
+          className={`select-name ${
+            highlight === items.path ? 'select-name-highlight' : ''
+          }`}
+          onClick={handleClickOnParent}
+          onMouseEnter={() => setShowAddButton(true)}
+          onMouseLeave={() => setShowAddButton(false)}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {items.children && items.children.length > 0 ? (
+            <span style={{ marginRight: '4px' }}>
+              {!expand ? <CollapsedIcon /> : <ExpandedIcon />}
+            </span>
+          ) : (
+            <span style={{ left: '-18px' }} />
+          )}
+          <a href={`/namespaces/${items.path}`}>{items.namespace}</a>
+          <button
+            className="namespace-add-button"
+            onClick={e => {
+              e.stopPropagation();
+              setIsCreatingChild(true);
+              setExpand(true);
+            }}
+            title="Add child namespace"
+            style={{
+              position: 'absolute',
+              right: '0',
+              padding: '2px 6px',
+              border: 'none',
+              background: 'transparent',
+              cursor: 'pointer',
+              opacity: showAddButton ? 0.6 : 0,
+              visibility: showAddButton ? 'visible' : 'hidden',
+              display: 'inline-flex',
+              alignItems: 'center',
+              transition: 'opacity 0.15s ease',
+            }}
+          >
+            <AddItemIcon />
+          </button>
+        </div>
       </div>
-      {items.children
-        ? items.children.map((item, index) => (
+      {(items.children || isCreatingChild) && (
+        <div>
+          {isCreatingChild && (
             <div
               style={{
                 paddingLeft: '1.4rem',
                 marginLeft: '1rem',
                 borderLeft: '1px solid rgb(218 233 255)',
+                marginTop: '5px',
               }}
-              key={index}
             >
+              <form
+                ref={formRef}
+                onSubmit={handleAddNamespace}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '4px',
+                }}
+              >
+                <div
+                  style={{ display: 'flex', gap: '4px', alignItems: 'center' }}
+                >
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={newNamespace}
+                    onChange={e => setNewNamespace(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="New namespace name"
+                    style={{
+                      padding: '4px 8px',
+                      fontSize: '0.875rem',
+                      border: '1px solid #ccc',
+                      borderRadius: '4px',
+                      flex: 1,
+                    }}
+                  />
+                  <button
+                    type="submit"
+                    style={{
+                      padding: '4px 8px',
+                      fontSize: '0.75rem',
+                      background: '#007bff',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      margin: '0 1em',
+                    }}
+                  >
+                    ✓
+                  </button>
+                </div>
+                {error && (
+                  <span style={{ color: 'red', fontSize: '0.75rem' }}>
+                    {error}
+                  </span>
+                )}
+              </form>
+            </div>
+          )}
+          {items.children &&
+            items.children.map((item, index) => (
               <div
-                className={`${expand ? '' : 'inactive'}`}
-                key={`nested-${index}`}
+                style={{
+                  paddingLeft: '1.4rem',
+                  marginLeft: '1rem',
+                  borderLeft: '1px solid rgb(218 233 255)',
+                }}
+                key={index}
               >
-                <Explorer item={item} current={highlight} />
+                <div
+                  className={`${expand ? '' : 'inactive'}`}
+                  key={`nested-${index}`}
+                >
+                  <Explorer
+                    item={item}
+                    current={highlight}
+                    isTopLevel={false}
+                  />
+                </div>
               </div>
-            </div>
-          ))
-        : null}
+            ))}
+        </div>
+      )}
     </>
   );
 };