@eeacms/volto-eea-website-theme 3.7.0 → 3.9.0

package/src/components/theme/Widgets/NavigationBehaviorWidget.test.jsx

@@ -0,0 +1,507 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+// Add jest-dom matchers
+import '@testing-library/jest-dom';
+
+const mockStore = configureStore([thunk]);
+
+// Mock the getNavigation action
+const mockGetNavigation = jest.fn(() => ({ type: 'GET_NAVIGATION' }));
+jest.mock('@plone/volto/actions', () => ({
+  getNavigation: mockGetNavigation,
+}));
+
+// Mock the config
+jest.mock('@plone/volto/registry', () => ({
+  default: {
+    settings: {
+      menuItemsLayouts: {
+        '/test-route-1': {
+          hideChildrenFromNavigation: false,
+          menuItemChildrenListColumns: [2, 3],
+          menuItemColumns: ['two wide column', 'three wide column'],
+        },
+        '/test-route-2': {
+          hideChildrenFromNavigation: true,
+          menuItemColumns: ['four wide column'],
+        },
+        '*': {
+          hideChildrenFromNavigation: true,
+        },
+      },
+    },
+  },
+}));
+
+// Mock uuid
+jest.mock('uuid', () => ({
+  v4: () => 'test-uuid-123',
+}));
+
+// Mock Volto components
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ name, size }) => (
+    <div data-testid="icon" data-name={name} data-size={size} />
+  ),
+  FormFieldWrapper: ({ children, ...props }) => (
+    <div data-testid="form-field-wrapper" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock ObjectWidget
+jest.mock('@plone/volto/components/manage/Widgets/ObjectWidget', () => {
+  return function MockObjectWidget({ id, schema, value, onChange }) {
+    return (
+      <div data-testid="object-widget" data-id={id}>
+        {schema.properties.hideChildrenFromNavigation && (
+          <div>
+            <label>Hide Children From Navigation</label>
+            <input
+              type="checkbox"
+              checked={value.hideChildrenFromNavigation || false}
+              onChange={(e) =>
+                onChange(id, {
+                  ...value,
+                  hideChildrenFromNavigation: e.target.checked,
+                })
+              }
+            />
+          </div>
+        )}
+        {schema.properties.menuItemColumns && (
+          <div>
+            <label>Menu Item Columns</label>
+            <div data-testid="menu-item-columns">
+              {(value.menuItemColumns || []).map((col, index) => (
+                <span key={index}>{col}</span>
+              ))}
+            </div>
+          </div>
+        )}
+        {schema.properties.menuItemChildrenListColumns && (
+          <div>
+            <label>Menu Item Children List Columns</label>
+            <div data-testid="menu-item-children-columns">
+              {(value.menuItemChildrenListColumns || []).map((col, index) => (
+                <span key={index}>{col}</span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+});
+
+// Mock semantic-ui-react components
+jest.mock('semantic-ui-react', () => {
+  const MockAccordion = ({ children, ...props }) => (
+    <div className="ui accordion" data-testid="accordion" {...props}>
+      {children}
+    </div>
+  );
+
+  MockAccordion.Title = ({ children, onClick, active, index }) => (
+    <button
+      type="button"
+      className={`title ${active ? 'active' : ''}`}
+      onClick={(e) => onClick(e, { index })}
+      data-testid="accordion-title"
+    >
+      {children}
+    </button>
+  );
+
+  MockAccordion.Content = ({ children, active }) => (
+    <div
+      className={`content ${active ? 'active' : ''}`}
+      data-testid="accordion-content"
+    >
+      {active && children}
+    </div>
+  );
+
+  return {
+    Accordion: MockAccordion,
+    Button: ({ children, ...props }) => <button {...props}>{children}</button>,
+    Segment: ({ children }) => <div data-testid="segment">{children}</div>,
+    Form: {
+      Field: ({ children }) => <div data-testid="form-field">{children}</div>,
+    },
+    Dropdown: ({ children }) => <div data-testid="dropdown">{children}</div>,
+  };
+});
+
+// Mock SVG imports
+jest.mock('@plone/volto/icons/up-key.svg', () => 'up-icon');
+jest.mock('@plone/volto/icons/down-key.svg', () => 'down-icon');
+
+describe('NavigationBehaviorWidget', () => {
+  let store;
+  let NavigationBehaviorWidget;
+
+  const mockOnChange = jest.fn();
+
+  const defaultNavigationItems = [
+    {
+      '@id': 'http://localhost:3000/test-route-1',
+      title: 'Test Route 1',
+      url: '/test-route-1',
+      id: 'test-route-1',
+      portal_type: 'Document',
+      items: [
+        {
+          '@id': 'http://localhost:3000/test-route-1/child',
+          title: 'Child Route',
+          url: '/test-route-1/child',
+          id: 'child',
+          portal_type: 'Document',
+          items: [],
+        },
+      ],
+    },
+    {
+      '@id': 'http://localhost:3000/test-route-2',
+      title: 'Test Route 2',
+      url: '/test-route-2',
+      id: 'test-route-2',
+      portal_type: 'Folder',
+      items: [],
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {
+          'Load Main Navigation Routes': 'Load Main Navigation Routes',
+          'Hide Children From Navigation': 'Hide Children From Navigation',
+          'Menu Item Children List Columns': 'Menu Item Children List Columns',
+          'Menu Item Columns': 'Menu Item Columns',
+        },
+      },
+      navigation: {
+        items: defaultNavigationItems,
+        loaded: true,
+      },
+      vocabularies: {},
+    });
+
+    NavigationBehaviorWidget = require('./NavigationBehaviorWidget').default;
+  });
+
+  it('renders with navigation data', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Route 2')).toBeInTheDocument();
+  });
+
+  it('dispatches getNavigation when not loaded', () => {
+    const storeNotLoaded = mockStore({
+      ...store.getState(),
+      navigation: { items: [], loaded: false },
+    });
+
+    render(
+      <Provider store={storeNotLoaded}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(mockGetNavigation).toHaveBeenCalledWith('', 1);
+  });
+
+  it('handles accordion expansion', async () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('handles JSON parsing correctly', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value='{"test": {"hideChildrenFromNavigation": false}}'
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+  });
+
+  it('handles invalid JSON gracefully', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="invalid json"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+  });
+
+  it('handles object values correctly', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={{ '/test': { hideChildrenFromNavigation: false } }}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+  });
+
+  it('handles null values correctly', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={null}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+  });
+
+  it('auto-populates settings from config when no settings exist', async () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+  });
+
+  it('handles empty navigation data', () => {
+    const emptyStore = mockStore({
+      ...store.getState(),
+      navigation: { items: [], loaded: true },
+    });
+
+    const { container } = render(
+      <Provider store={emptyStore}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(
+      container.querySelector('.navigation-behavior-widget'),
+    ).toBeInTheDocument();
+  });
+
+  it('toggles accordion active state correctly', async () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+
+    // Click to expand
+    fireEvent.click(accordionTitles[0]);
+    await waitFor(() => {
+      expect(accordionTitles[0]).toHaveClass('active');
+    });
+
+    // Click again to collapse
+    fireEvent.click(accordionTitles[0]);
+    await waitFor(() => {
+      expect(accordionTitles[0]).not.toHaveClass('active');
+    });
+  });
+
+  it('processes routes with config settings correctly', () => {
+    const storeWithConfig = mockStore({
+      ...store.getState(),
+      navigation: {
+        items: [
+          {
+            '@id': 'http://localhost:3000/test-route-1',
+            title: 'Test Route 1',
+            url: '/test-route-1',
+            items: [],
+          },
+        ],
+        loaded: true,
+      },
+    });
+
+    render(
+      <Provider store={storeWithConfig}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+  });
+
+  it('filters to show only level 0 routes', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    // Should only show main routes, not child routes
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Route 2')).toBeInTheDocument();
+    expect(screen.queryByText('Child Route')).not.toBeInTheDocument();
+  });
+
+  it('handles routes without @id using fallback uuid', () => {
+    const storeWithoutIds = mockStore({
+      ...store.getState(),
+      navigation: {
+        items: [
+          {
+            title: 'Route Without ID',
+            url: '/no-id-route',
+            items: [],
+          },
+        ],
+        loaded: true,
+      },
+    });
+
+    render(
+      <Provider store={storeWithoutIds}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Route Without ID')).toBeInTheDocument();
+  });
+
+  it('merges config and saved settings correctly', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: true,
+        menuItemColumns: [1, 2],
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('handles routes with hasChildren property', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    // Test Route 1 has children, Test Route 2 doesn't
+    expect(screen.getByText('Test Route 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Route 2')).toBeInTheDocument();
+  });
+
+  it('displays route paths in accordion titles', () => {
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value="{}"
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('(/test-route-1)')).toBeInTheDocument();
+    expect(screen.getByText('(/test-route-2)')).toBeInTheDocument();
+  });
+});

package/src/components/theme/Widgets/SimpleArrayWidget.jsx

@@ -0,0 +1,183 @@
+/**
+ * Simple Array Widget that allows duplicates and direct typing
+ * @module components/manage/Widgets/SimpleArrayWidget
+ */
+
+import React, { useState } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Button, Input, Label } from 'semantic-ui-react';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+const messages = defineMessages({
+  add: {
+    id: 'Add',
+    defaultMessage: 'Add',
+  },
+  remove: {
+    id: 'Remove',
+    defaultMessage: 'Remove',
+  },
+});
+
+const SimpleArrayWidget = (props) => {
+  const { id, value: rawValue, onChange, items, intl } = props;
+  const [newValue, setNewValue] = useState('');
+  const [showInput, setShowInput] = useState(false);
+
+  // Get min/max from schema
+  const minValue = items?.minimum || 1;
+  const maxValue = items?.maximum || 10;
+
+  // Ensure value is always an array
+  const value = Array.isArray(rawValue) ? rawValue : [];
+
+  const handleAdd = () => {
+    if (newValue.trim() !== '') {
+      const numValue = parseInt(newValue.trim());
+      if (!isNaN(numValue) && numValue >= minValue && numValue <= maxValue) {
+        const newArray = [...value, numValue];
+        onChange(id, newArray);
+        setNewValue('');
+        setShowInput(false); // Hide input after adding
+      }
+    }
+  };
+
+  const handleShowInput = () => {
+    setShowInput(true);
+    // Focus input after it appears
+    setTimeout(() => {
+      const input = document.querySelector(`#${id}-input`);
+      if (input) input.focus();
+    }, 100);
+  };
+
+  const handleCancel = () => {
+    setNewValue('');
+    setShowInput(false);
+  };
+
+  const handleRemove = (index) => {
+    const newArray = value.filter((_, i) => i !== index);
+    // If array becomes empty, pass null to remove the field from data completely
+    onChange(id, newArray.length === 0 ? null : newArray);
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAdd();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: '0.5rem',
+          paddingTop: '0.5rem',
+        }}
+      >
+        {/* Display current values as compact labels */}
+        {value.map((item, index) => {
+          // Force conversion to number for display (in case it comes as string)
+          const displayValue =
+            typeof item === 'string' ? parseInt(item) || item : item;
+          return (
+            <Label key={index} size="small" color="blue">
+              {displayValue}
+              <Label.Detail
+                as="a"
+                onClick={() => handleRemove(index)}
+                style={{ cursor: 'pointer' }}
+                title={intl.formatMessage(messages.remove)}
+              >
+                ×
+              </Label.Detail>
+            </Label>
+          );
+        })}
+
+        {/* Input field (conditionally shown) */}
+        {showInput && (
+          <div
+            style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <Input
+              id={`${id}-input`}
+              type="number"
+              min={minValue}
+              max={maxValue}
+              value={newValue}
+              onChange={(e) => setNewValue(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder={`${minValue}-${maxValue}`}
+              size="mini"
+              style={{ width: '80px' }}
+            />
+            <Button
+              type="button"
+              primary
+              size="mini"
+              icon="check"
+              onClick={handleAdd}
+              disabled={!newValue.trim()}
+              title={intl.formatMessage(messages.add)}
+            />
+            <Button
+              type="button"
+              size="mini"
+              icon="close"
+              onClick={handleCancel}
+              title="Cancel"
+            />
+          </div>
+        )}
+
+        {/* Add button (shown when input is hidden) */}
+        {!showInput && (
+          <Button
+            type="button"
+            basic
+            size="mini"
+            icon="plus"
+            content={intl.formatMessage(messages.add)}
+            onClick={handleShowInput}
+          />
+        )}
+      </div>
+
+      {props.description && (
+        <div
+          style={{
+            fontSize: '0.85em',
+            color: '#767676',
+            marginTop: '0.5rem',
+            fontStyle: 'italic',
+          }}
+        >
+          {props.description}
+        </div>
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+SimpleArrayWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.number),
+  onChange: PropTypes.func.isRequired,
+  items: PropTypes.object,
+  intl: PropTypes.object.isRequired,
+};
+
+export default injectIntl(SimpleArrayWidget);