@eeacms/volto-eea-website-policy 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [2.2.0](https://github.com/eea/volto-eea-website-policy/compare/2.1.1...2.2.0) - 26 August 2024
+
+#### :rocket: New Features
+
+- feat: context navigation portlet - refs #270999 [ichim-david - [`ca045b4`](https://github.com/eea/volto-eea-website-policy/commit/ca045b464c16aa5f1107204138e2ebfadf8669e3)]
+
+#### :hammer_and_wrench: Others
+
+### [2.1.1](https://github.com/eea/volto-eea-website-policy/compare/2.1.0...2.1.1) - 30 May 2024
+
+#### :house: Internal changes
+
+- chore: Fix @plone-collective/volto-authomatic dependencies [alin - [`3c11765`](https://github.com/eea/volto-eea-website-policy/commit/3c117655f254d68b89a9748216b405c93ec18a0e)]
+
+#### :hammer_and_wrench: Others
+
 ### [2.1.0](https://github.com/eea/volto-eea-website-policy/compare/2.0.0...2.1.0) - 9 May 2024
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,15 +17,14 @@
     "url": "git@github.com:eea/volto-eea-website-policy.git"
   },
   "addons": [
+    "@eeacms/volto-block-toc",
     "@eeacms/volto-widget-dataprovenance",
     "@plone-collective/volto-authomatic"
   ],
   "dependencies": {
+    "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-widget-dataprovenance": "*",
-    "@plone-collective/volto-authomatic": "2.0.1"
-  },
-  "resolutions": {
-    "@plone-collective/volto-authomatic": "2.0.1"
+    "@plone-collective/volto-authomatic": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

package/src/components/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -1,31 +1,45 @@
 import React from 'react';
 import { EditSchema } from './schema';
-import { InlineForm, SidebarPortal } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
 import ContextNavigationView from './ContextNavigationView';
 
-const ContextNavigationFillView = (props) => {
-  const schema = EditSchema();
+const ContextNavigationFillEdit = (props) => {
+  const contentTypes = props.properties?.['@components']?.types;
+  const availableTypes = React.useMemo(
+    () => contentTypes?.map((type) => [type.id, type.title || type.name]),
+    [contentTypes],
+  );
+
+  const schema = React.useMemo(
+    () => EditSchema({ availableTypes }),
+    [availableTypes],
+  );
+
   return (
     <>
       <h3>Context navigation</h3>
       <ContextNavigationView {...props} />{' '}
       <SidebarPortal selected={props.selected}>
-        {props.selected && (
-          <InlineForm
-            title={schema.title}
-            schema={schema}
-            formData={props.data}
-            onChangeField={(id, value) => {
-              props.onChangeBlock(props.block, {
-                ...props.data,
-                [id]: value,
-              });
-            }}
-          />
-        )}
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+          navRoot={props.navRoot}
+          contentType={props.contentType}
+        />
       </SidebarPortal>
     </>
   );
 };
 
-export default ContextNavigationFillView;
+export default ContextNavigationFillEdit;

package/src/components/Blocks/ContextNavigation/ContextNavigationEdit.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ContextNavigationEdit from './ContextNavigationEdit';
 import { Router } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
 import { createMemoryHistory } from 'history';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -12,12 +14,13 @@ jest.mock('@plone/volto/components', () => ({
       <input id="test" onChange={onChangeField} />
     </div>
   ),
-  SidebarPortal: ({ children }) => (
-    <div>
-      <div>SidebarPortal</div>
-      {children}
-    </div>
-  ),
+  SidebarPortal: ({ children, selected }) =>
+    selected ? (
+      <div>
+        <div>SidebarPortal</div>
+        {children}
+      </div>
+    ) : null,
 }));
 
 jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
@@ -29,27 +32,48 @@ jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   };
 });
 
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: () => 'blocks_layout',
+  withVariationSchemaEnhancer: jest.fn((Component) => Component),
+}));
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
 describe('ContextNavigationEdit', () => {
   it('renders corectly', () => {
     const history = createMemoryHistory();
     const { getByText, queryByText } = render(
-      <Router history={history}>
-        <ContextNavigationEdit />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={false} />
+        </Router>
+        ,
+      </Provider>,
     );
 
     expect(getByText('Context navigation')).toBeInTheDocument();
     expect(getByText('ConnectedContextNavigation')).toBeInTheDocument();
     expect(queryByText('InlineForm')).toBeNull();
-    expect(getByText('SidebarPortal')).toBeInTheDocument();
+    expect(queryByText('SidebarPortal')).toBeNull();
   });
 
   it('renders corectly', () => {
     const history = createMemoryHistory();
     const { container, getByText } = render(
-      <Router history={history}>
-        <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
+        </Router>
+        ,
+      </Provider>,
     );
 
     expect(getByText('Context navigation')).toBeInTheDocument();

package/src/components/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -1,17 +1,14 @@
 import React from 'react';
-import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, withBlockExtensions } from '@plone/volto/helpers';
+import DefaultTemplate from './variations/Default';
 
-const ContextNavigationView = ({ data = {} }) => {
+const ContextNavigationView = (props = {}) => {
+  const { variation, data = {} } = props;
   const navProps = { ...data };
   const root_path = data?.root_node?.[0]?.['@id'];
   if (root_path) navProps['root_path'] = flattenToAppURL(root_path);
-
-  return (
-    <>
-      <ConnectedContextNavigation params={navProps} />
-    </>
-  );
+  const Renderer = variation?.view ?? DefaultTemplate;
+  return <Renderer params={navProps} />;
 };
 
-export default ContextNavigationView;
+export default withBlockExtensions(ContextNavigationView);

package/src/components/Blocks/ContextNavigation/ContextNavigationView.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import ContextNavigationView from './ContextNavigationView';
 import { Router } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
 import { createMemoryHistory } from 'history';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -14,6 +16,21 @@ jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   };
 });
 
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: () => 'blocks_layout',
+  flattenToAppURL: () => '',
+}));
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
 describe('ContextNavigationView', () => {
   let history;
   beforeEach(() => {
@@ -22,9 +39,11 @@ describe('ContextNavigationView', () => {
 
   it('renders corectly', () => {
     const { container } = render(
-      <Router history={history}>
-        <ContextNavigationView />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView />
+        </Router>
+      </Provider>,
     );
 
     expect(container.firstChild).toHaveTextContent(
@@ -34,17 +53,19 @@ describe('ContextNavigationView', () => {
 
   it('renders corectly', () => {
     const { container } = render(
-      <Router history={history}>
-        <ContextNavigationView
-          data={{
-            navProps: { root_path: 'https://localhost:3000/test' },
-            root_node: [{ '@id': 'root_node' }],
-          }}
-        />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView
+            data={{
+              navProps: { root_path: 'https://localhost:3000/test' },
+              root_node: [{ '@id': 'root_node' }],
+            }}
+          />
+        </Router>
+      </Provider>,
     );
     expect(container.firstChild).toHaveTextContent(
-      'ConnectedContextNavigation root_node',
+      'ConnectedContextNavigation',
     );
   });
 });

package/src/components/Blocks/ContextNavigation/index.js

@@ -2,6 +2,7 @@ import codeSVG from '@plone/volto/icons/code.svg';
 import ContextNavigationEdit from './ContextNavigationEdit';
 import ContextNavigationView from './ContextNavigationView';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+import variations from './variations';
 
 const applyConfig = (config) => {
   config.blocks.blocksConfig.contextNavigation = {
@@ -13,6 +14,7 @@ const applyConfig = (config) => {
     edit: ContextNavigationEdit,
     schema: BlockSettingsSchema,
     restricted: true,
+    variations,
     mostUsed: true,
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,

package/src/components/Blocks/ContextNavigation/schema.js

@@ -1,4 +1,4 @@
-export const EditSchema = () => {
+export const EditSchema = ({ availableTypes }) => {
   return {
     title: 'Navigation',
     fieldsets: [
@@ -8,6 +8,7 @@ export const EditSchema = () => {
         fields: [
           'name',
           'root_node',
+          'portal_type',
           'includeTop',
           'currentFolderOnly',
           'topLevel',
@@ -33,6 +34,12 @@ export const EditSchema = () => {
         mode: 'link',
         selectedItemAttrs: ['Title', 'Description'],
       },
+      portal_type: {
+        title: 'Filter children',
+        description: 'Only show child items of this content type',
+        choices: availableTypes,
+        isMulti: true,
+      },
       includeTop: {
         title: 'Include top node',
         description:
@@ -61,7 +68,7 @@ export const EditSchema = () => {
         default: 0,
       },
       no_icons: {
-        title: 'Supress icons',
+        title: 'Suppress icons',
         description:
           'If enabled, the portlet will not show document type icons.',
         type: 'boolean',
@@ -72,7 +79,7 @@ export const EditSchema = () => {
           "Enter a valid scale name (see 'Image Handling' control panel) to override (e.g. icon, tile, thumb, mini, preview, ... ). Leave empty to use default (see 'Site' control panel).",
       },
       no_thumbs: {
-        title: 'Supress thumbs',
+        title: 'Suppress thumbs',
         type: 'boolean',
         description: 'If enabled, the portlet will not show thumbs.',
       },

package/src/components/Blocks/ContextNavigation/variations/Accordion.jsx

@@ -0,0 +1,175 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { withRouter } from 'react-router';
+import { compose } from 'redux';
+import { Accordion } from 'semantic-ui-react';
+
+import Slugger from 'github-slugger';
+
+import { Icon, UniversalLink } from '@plone/volto/components';
+import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
+import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import downIcon from '@plone/volto/icons/down-key.svg';
+import upIcon from '@plone/volto/icons/up-key.svg';
+
+const messages = defineMessages({
+  navigation: {
+    id: 'Navigation',
+    defaultMessage: 'Navigation',
+  },
+});
+
+const AccordionNavigation = ({
+  navigation = {},
+  device,
+  isMenuOpenOnOutsideClick,
+}) => {
+  const { items = [], title, has_custom_name } = navigation;
+  const intl = useIntl();
+  const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
+  const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
+  const [activeItems, setActiveItems] = React.useState({});
+
+  const onClickSummary = React.useCallback((e) => {
+    e.preventDefault();
+    setIsNavOpen((prev) => !prev);
+  }, []);
+
+  React.useEffect(() => {
+    if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
+  }, [isMenuOpenOnOutsideClick]);
+
+  const onKeyDownSummary = React.useCallback(
+    (e) => {
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        e.preventDefault();
+        onClickSummary(e);
+      }
+    },
+    [onClickSummary],
+  );
+
+  const renderItems = ({ item, level = 0 }) => {
+    const {
+      title,
+      href,
+      is_current,
+      is_in_path,
+      items: childItems,
+      type,
+    } = item;
+    const hasChildItems = childItems && childItems.length > 0;
+    const normalizedTitle = Slugger.slug(title);
+
+    const checkIfActive = () => {
+      return activeItems[href] !== undefined ? activeItems[href] : is_in_path;
+    };
+
+    const isActive = checkIfActive();
+
+    const handleTitleClick = () => {
+      setActiveItems((prev) => ({ ...prev, [href]: !isActive }));
+    };
+
+    return (
+      <li
+        className={cx({
+          is_in_path,
+          'accordion-list-title': !hasChildItems,
+          'accordion-list-item': hasChildItems,
+        })}
+        key={href}
+      >
+        {hasChildItems ? (
+          <Accordion className="default">
+            <Accordion.Title
+              active={isActive}
+              as={'button'}
+              aria-expanded={isActive}
+              onClick={handleTitleClick}
+              aria-controls={`accordion-content-${normalizedTitle}`}
+              id={`accordion-title-${normalizedTitle}`}
+            >
+              <span className="title-text">{title}</span>
+              <Icon name={isActive ? upIcon : downIcon} size="32px" />
+            </Accordion.Title>
+            <Accordion.Content
+              active={isActive}
+              id={`accordion-content-${normalizedTitle}`}
+              aria-labelledby={`accordion-title-${normalizedTitle}`}
+              role="region"
+            >
+              <ul className="accordion-list">
+                {childItems.map((child) =>
+                  renderItems({ item: child, level: level + 1 }),
+                )}
+              </ul>
+            </Accordion.Content>
+          </Accordion>
+        ) : (
+          <UniversalLink
+            href={flattenToAppURL(href)}
+            className={cx(`title-link contenttype-${type}`, {
+              current: is_current,
+              in_path: is_in_path,
+            })}
+          >
+            {title}
+          </UniversalLink>
+        )}
+      </li>
+    );
+  };
+
+  return items.length ? (
+    <>
+      <nav className="context-navigation">
+        <details open={isNavOpen}>
+          {/* eslint-disable-next-line */}
+          <summary
+            className="context-navigation-header accordion-header"
+            onClick={onClickSummary}
+            onKeyDown={onKeyDownSummary}
+          >
+            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
+            <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+          </summary>
+          <ul className="context-navigation-list accordion-list">
+            {items.map((item) => renderItems({ item }))}
+          </ul>
+        </details>
+      </nav>
+    </>
+  ) : null;
+};
+
+AccordionNavigation.propTypes = {
+  /**
+   * Navigation tree returned from @contextnavigation restapi endpoint
+   */
+  navigation: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+        href: PropTypes.string,
+        is_current: PropTypes.bool,
+        is_in_path: PropTypes.bool,
+        items: PropTypes.array,
+        type: PropTypes.string,
+      }),
+    ),
+    has_custom_name: PropTypes.bool,
+    title: PropTypes.string,
+  }),
+};
+
+export default compose(
+  withRouter,
+  withContentNavigation,
+  withEEASideMenu,
+)(AccordionNavigation);

package/src/components/Blocks/ContextNavigation/variations/Default.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+
+const Default = (props) => {
+  const { params } = props;
+  return <ConnectedContextNavigation params={params} />;
+};
+
+export default Default;

package/src/components/Blocks/ContextNavigation/variations/index.js

@@ -0,0 +1,18 @@
+import Accordion from './Accordion';
+import Default from './Default';
+
+const contextBlockVariations = [
+  {
+    id: 'default',
+    title: 'Listing (default)',
+    view: Default,
+    isDefault: true,
+  },
+  {
+    id: 'accordion',
+    title: 'Accordion',
+    view: Accordion,
+  },
+];
+
+export default contextBlockVariations;

package/src/index.js

@@ -112,7 +112,7 @@ const applyConfig = (config) => {
     ...config.settings.eea,
     rolesWhoCanChangeLayout: ['Manager'],
   };
-  // config.settings.eea.rolesWhoCanChangeLayout = ['Manager'];
+  config.settings.eea.rolesWhoCanChangeLayout = ['Manager'];
 
   // Custom blocks
   // context navigation
@@ -135,6 +135,10 @@ const applyConfig = (config) => {
     }
   });
 
+  if (config.blocks.blocksConfig.contextNavigation) {
+    config.blocks.blocksConfig.contextNavigation.restricted = false;
+  }
+
   // Override blocks config
   Object.keys(overrideBlocks).forEach((block) => {
     if (config.blocks.blocksConfig[block]) {