datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -0,0 +1,232 @@
+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, 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);
+    setHighlight(current);
+    if (current !== undefined && current?.startsWith(item.path)) {
+      setExpand(true);
+    } 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 => {
+      return !prev;
+    });
+  };
+
+  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="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 || isCreatingChild) && (
+        <div>
+          {isCreatingChild && (
+            <div
+              style={{
+                paddingLeft: '1.4rem',
+                marginLeft: '1rem',
+                borderLeft: '1px solid rgb(218 233 255)',
+                marginTop: '5px',
+              }}
+            >
+              <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
+                style={{
+                  paddingLeft: '1.4rem',
+                  marginLeft: '1rem',
+                  borderLeft: '1px solid rgb(218 233 255)',
+                }}
+                key={index}
+              >
+                <div
+                  className={`${expand ? '' : 'inactive'}`}
+                  key={`nested-${index}`}
+                >
+                  <Explorer
+                    item={item}
+                    current={highlight}
+                    isTopLevel={false}
+                  />
+                </div>
+              </div>
+            ))}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Explorer;

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

@@ -0,0 +1,21 @@
+import { components } from 'react-select';
+
+const Control = ({ children, ...props }) => {
+  const { label, onLabelClick } = props.selectProps;
+  const style = {
+    cursor: 'pointer',
+    padding: '10px 5px 10px 12px',
+    color: 'rgb(112, 110, 115)',
+  };
+
+  return (
+    <components.Control {...props}>
+      <span onMouseDown={onLabelClick} style={style}>
+        {label}
+      </span>
+      {children}
+    </components.Control>
+  );
+};
+
+export default Control;

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

@@ -0,0 +1,30 @@
+import Select from 'react-select';
+import Control from './FieldControl';
+
+export default function NodeTypeSelect({ onChange }) {
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-type"
+    >
+      <Select
+        name="node_type"
+        isClearable
+        label="Type"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        styles={{
+          control: styles => ({ ...styles, backgroundColor: 'white' }),
+        }}
+        options={[
+          { value: 'source', label: 'Source' },
+          { value: 'transform', label: 'Transform' },
+          { value: 'dimension', label: 'Dimension' },
+          { value: 'metric', label: 'Metric' },
+          { value: 'cube', label: 'Cube' },
+        ]}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Control from './FieldControl';
+
+import Select from 'react-select';
+
+export default function TagSelect({ onChange }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [retrieved, setRetrieved] = useState(false);
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const tags = await djClient.listTags();
+      setTags(tags);
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '350px' }}
+      data-testid="select-tag"
+    >
+      <Select
+        name="tags"
+        isClearable
+        isMulti
+        label="Tags"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        options={tags?.map(tag => {
+          return {
+            value: tag.name,
+            label: tag.display_name,
+          };
+        })}
+      />
+    </span>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import Control from './FieldControl';
+
+import Select from 'react-select';
+
+export default function UserSelect({ onChange, currentUser }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [retrieved, setRetrieved] = useState(false);
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const users = await djClient.users();
+      setUsers(users);
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '400px' }}
+      data-testid="select-user"
+    >
+      {retrieved ? (
+        <Select
+          name="edited_by"
+          isClearable
+          label="Edited By"
+          components={{ Control }}
+          onChange={e => onChange(e)}
+          defaultValue={{
+            value: currentUser,
+            label: currentUser,
+          }}
+          options={users?.map(user => {
+            return { value: user.username, label: user.username };
+          })}
+        />
+      ) : (
+        ''
+      )}
+    </span>
+  );
+}

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();
+    });
+  });
+});