@eeacms/volto-marine-policy 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -4,12 +4,28 @@ 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).
 
+### [1.1.1](https://github.com/eea/volto-marine-policy/compare/1.1.0...1.1.1) - 18 April 2024
+
+#### :rocket: New Features
+
+- feat:install contextNavigation block,fix toc block [nileshgulia1 - [`46bf29c`](https://github.com/eea/volto-marine-policy/commit/46bf29cee029a343e87d8b2a3e0adeba61ec04d9)]
+
+#### :bug: Bug Fixes
+
+- fix: add tests [nileshgulia1 - [`6ea02e3`](https://github.com/eea/volto-marine-policy/commit/6ea02e300fdc45b9921aeccf34ce746b11390005)]
+
+#### :hammer_and_wrench: Others
+
+- update [nileshgulia1 - [`33ee2a0`](https://github.com/eea/volto-marine-policy/commit/33ee2a00edaf2dadc088e5cc16f5d565484ce357)]
+- eslint . [nileshgulia1 - [`dba2fc6`](https://github.com/eea/volto-marine-policy/commit/dba2fc6697b36506d3b86b9647cd7fd5d9d0d17d)]
+- update tests [nileshgulia1 - [`b668e15`](https://github.com/eea/volto-marine-policy/commit/b668e15bd5aa2b0b9a419fcfa8a9ab6bfe6a5fb6)]
+- remove comment [nileshgulia1 - [`6deadba`](https://github.com/eea/volto-marine-policy/commit/6deadbabbe99cf5a1f7e1b480076bdcaad333921)]
+- fix tests [nileshgulia1 - [`2db4819`](https://github.com/eea/volto-marine-policy/commit/2db4819596c8a1727cdb37f0fc33ba53ea757aef)]
 ### [1.1.0](https://github.com/eea/volto-marine-policy/compare/1.0.0...1.1.0) - 15 April 2024
 
 #### :hammer_and_wrench: Others
 
 - fix cypress [nileshgulia1 - [`9d588e7`](https://github.com/eea/volto-marine-policy/commit/9d588e7e9ba1cf258c4356a3d25bcc6f1ae98356)]
-- bump version [nileshgulia1 - [`55f8b71`](https://github.com/eea/volto-marine-policy/commit/55f8b7144a8c41fcd6ee327660dfd0eb512fb0ea)]
 - add policy customizations [nileshgulia1 - [`8355128`](https://github.com/eea/volto-marine-policy/commit/8355128ef8c713d86261ce57d709250a38213ef6)]
 - delete tpl files [nileshgulia1 - [`d21afd0`](https://github.com/eea/volto-marine-policy/commit/d21afd0ae83ad54240bea00e68656c1b87630d8e)]
 ## [1.0.0](https://github.com/eea/volto-marine-policy/compare/0.1.20...1.0.0) - 14 April 2024

package/jest-addon.config.js

@@ -36,10 +36,10 @@ module.exports = {
   },
   coverageThreshold: {
     global: {
-      branches: 5,
-      functions: 5,
-      lines: 5,
-      statements: 5,
+      branches: 1,
+      functions: 1,
+      lines: 1,
+      statements: 1,
     },
   },
   ...(process.env.JEST_USE_SETUP === 'ON' && {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Accordion as SemanticAccordion, Icon } from 'semantic-ui-react';
+
+import AccordionContent from './AccordionContent';
+import { useHistory } from 'react-router-dom';
+
+const Accordion = (props) => {
+  const { items = {}, curent_location, activeMenu, data = {} } = props;
+  const [currentIndex, setIndex] = React.useState(activeMenu ?? 0);
+  const history = useHistory();
+
+  const handleClick = (e, item) => {
+    let itemUrl = '/' + item['@id'].split('/').slice(3).join('/');
+    history.push(itemUrl);
+  };
+
+  const handleIconClick = (e, index) => {
+    e.stopPropagation();
+    const newIndex = currentIndex === index ? -1 : index;
+    setIndex(newIndex);
+  };
+  return (
+    <>
+      <div className="context-navigation-header">{data?.title}</div>
+      {items.map((item, index) => {
+        const { id } = item;
+        const active = currentIndex === index;
+
+        return (
+          <SemanticAccordion id={id} key={index} className="secondary">
+            <SemanticAccordion.Title
+              role="button"
+              tabIndex={0}
+              active={activeMenu === index}
+              aria-expanded={activeMenu === index}
+              index={index}
+              onClick={(e) => {
+                handleClick(e, item);
+              }}
+              onKeyDown={(e) => {
+                if (e.keyCode === 13 || e.keyCode === 32) {
+                  e.preventDefault();
+                  handleClick(e, item);
+                }
+              }}
+            >
+              <span className="item-title">{item.title}</span>
+              {active ? (
+                <Icon
+                  className="ri-arrow-up-s-line"
+                  onClick={(e) => {
+                    handleIconClick(e, index);
+                  }}
+                />
+              ) : (
+                <Icon
+                  className="ri-arrow-down-s-line"
+                  onClick={(e) => {
+                    handleIconClick(e, index);
+                  }}
+                />
+              )}
+            </SemanticAccordion.Title>
+            <SemanticAccordion.Content active={active}>
+              <AccordionContent
+                curent_location={curent_location}
+                key={index}
+                main={{
+                  title: item.title,
+                  href: item['@id'],
+                  url: item.url,
+                }}
+                data={data}
+              />
+            </SemanticAccordion.Content>
+          </SemanticAccordion>
+        );
+      })}
+    </>
+  );
+};
+
+export default Accordion;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import Accordion from './Accordion';
+
+const mockStore = configureStore();
+
+describe('RASTAccordion', () => {
+  it('should render the component', () => {
+    const data = {
+      items: [
+        {
+          id: 'my-item',
+          title: 'Hello',
+          '@id': '/my-item',
+          '@type': 'Folder',
+          href: '/my-item-href',
+        },
+      ],
+      activeMenu: 1,
+      curent_location: '/my-item-href',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        subrequests: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Accordion {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.querySelector('.accordion')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { List } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { compose } from 'redux';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+import { useChildren } from './View';
+
+const AccordionContent = (props) => {
+  const {
+    main,
+    curent_location,
+    data: { types = [] },
+  } = props;
+  const location = main.url;
+
+  // React.useEffect(() => {
+  //   const action = getContent(location, null, location);
+  //   dispatch(action);
+  // }, [location, dispatch]);
+
+  // items = useSelector(
+  //   (state) => state.content?.subrequests?.[location]?.data?.items || [],
+  // );
+  const items = useChildren(location);
+  return (
+    <div className="dataset-content">
+      <div>
+        {items.length
+          ? items
+              .filter((item) =>
+                types.length ? types.includes(item['@type']) : item,
+              )
+              .map((item) => (
+                <List.Item
+                  key={item.id}
+                  className={`${
+                    item['@id'].endsWith(curent_location.pathname)
+                      ? 'active'
+                      : ''
+                  }`}
+                >
+                  <List.Content>
+                    <div className="dataset-item">
+                      <Link to={flattenToAppURL(getBaseUrl(item['@id']))}>
+                        {item.title}
+                      </Link>
+                    </div>
+                  </List.Content>
+                </List.Item>
+              ))
+          : null}
+      </div>
+    </div>
+  );
+};
+
+export default compose()(AccordionContent);

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { compose } from 'redux';
+
+import Accordion from './Accordion';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * A navigation slot implementation, similar to the classic Plone navigation
+ * portlet. It uses the same API, so the options are similar to
+ * INavigationPortlet
+ */
+export function ContextNavigationComponent(props) {
+  const { items, data } = props;
+  let activeMenu = null;
+
+  const curent_location = useLocation();
+  for (let i = 0; i < items.length; i++) {
+    let itemUrl = '/' + items[i]['@id'].split('/').slice(3).join('/');
+    items[i].is_active = false;
+    if (curent_location.pathname.includes(itemUrl)) {
+      activeMenu = i;
+      items[i].is_active = true;
+    }
+  }
+
+  return (
+    <>
+      {items.length ? (
+        <Accordion
+          items={items}
+          curent_location={curent_location}
+          activeMenu={activeMenu}
+          data={data}
+        />
+      ) : null}
+    </>
+  );
+}
+
+// withContentNavigation
+export default compose()(ContextNavigationComponent);

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import View from './View';
+import schema from './schema';
+
+export default function Edit(props) {
+  const {
+    block,
+    data = {},
+    onChangeBlock,
+    selected,
+    id,
+    formData = {},
+  } = props;
+  const contentTypes = useSelector((state) => state?.types.types);
+  const blockSchema = schema({ formData, data, contentTypes });
+
+  return (
+    <div>
+      <View data={data} id={id} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={blockSchema.title}
+          schema={blockSchema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import ContextNavigationEdit from './Edit';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  SidebarPortal: ({ children }) => (
+    <div>
+      <div>SidebarPortal</div>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('@plone/volto/components/manage/Form/BlockDataForm', () => {
+  return {
+    __esModule: true,
+    default: ({ params }) => {
+      return <div>BlockDataForm {params}</div>;
+    },
+  };
+});
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    subrequests: {},
+  },
+  types: {
+    types: [],
+  },
+});
+
+describe('ContextNavigationEdit', () => {
+  it('renders corectly', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit />
+        </Router>
+      </Provider>,
+    );
+
+    expect(getByText('SidebarPortal')).toBeInTheDocument();
+  });
+
+  it('renders corectly', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
+        </Router>
+      </Provider>,
+    );
+
+    // expect(getByText('InlineForm')).toBeInTheDocument();
+    expect(getByText('SidebarPortal')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import './styles.less';
+import ContextNavigation from './ContextNavigation';
+import { useDispatch, useSelector } from 'react-redux';
+import { getContent } from '@plone/volto/actions';
+
+export function useChildren(location) {
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    const action = getContent(location, null, location);
+    dispatch(action);
+  }, [location, dispatch]);
+
+  const items = useSelector(
+    (state) => state.content.subrequests?.[location]?.data?.items || [],
+  );
+  return items;
+}
+
+export default function View(props) {
+  const { data } = props;
+  let root_path = data?.root_path;
+  if (typeof root_path === 'undefined') {
+    root_path = '/';
+  }
+  let items = useChildren(root_path);
+  if (root_path === '/') {
+    items = [];
+  }
+
+  return (
+    <div className="block rast-block">
+      <ContextNavigation
+        items={items}
+        location={{
+          pathname: root_path,
+        }}
+        data={data}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ContextNavigationView from './View';
+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';
+
+const mockStore = configureStore();
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    subrequests: {},
+  },
+  types: {
+    types: {},
+  },
+});
+
+jest.mock(
+  '@eeacms/volto-marine-policy/components/Blocks/ContextNavigation/ContextNavigation',
+  () => {
+    return {
+      __esModule: true,
+      default: ({ params }) => {
+        return <div>ContextNavigation {params}</div>;
+      },
+    };
+  },
+);
+
+describe('ContextNavigationView', () => {
+  let history;
+  beforeEach(() => {
+    history = createMemoryHistory();
+  });
+
+  it('renders corectly', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container.firstChild).toHaveTextContent('ContextNavigation');
+  });
+
+  it('renders corectly', () => {
+    const { container } = render(
+      <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('ContextNavigation');
+  });
+});

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

@@ -0,0 +1,25 @@
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+import Edit from './Edit';
+import View from './View';
+
+export default function installBlock(config) {
+  const blocksConfig = config.blocks.blocksConfig;
+
+  blocksConfig.contextNavigation = {
+    id: 'contextNavigation',
+    title: 'Context Navigation',
+    icon: zoomSVG,
+    group: 'site',
+    view: View,
+    edit: Edit,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+    restricted: false,
+  };
+
+  return config;
+}

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

@@ -0,0 +1,41 @@
+const fields = ['root_path', 'title', 'types'];
+
+export default ({ contentTypes }) => {
+  const availableTypes = contentTypes.map((type) => [
+    type.id,
+    type.title || type.name,
+  ]);
+  return {
+    title: 'RAST',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields,
+      },
+    ],
+
+    properties: {
+      root_path: {
+        title: 'Rooth path',
+        type: 'string',
+        description:
+          'Ex: /en/knowledge-and-data/regional-adaptation-support-tool',
+        required: true,
+        noValueOption: false,
+      },
+      title: {
+        title: 'Title',
+      },
+      types: {
+        title: 'Display content types',
+        description: 'Choose content types displayed as children',
+        choices: availableTypes,
+        isMulti: true,
+      },
+    },
+
+    required: [],
+  };
+};

package/src/components/Blocks/ContextNavigation/styles.less

@@ -0,0 +1,65 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.rast-block {
+  a rect.circle:hover {
+    fill: #183 !important;
+  }
+
+  .ui.accordion[class*='ary'] > .active.title,
+  .ui.accordion[class*='ary'].inverted > .title,
+  .ui.accordion[class*='ary'].inverted > .icon,
+  .ui.accordion[class*='ary'] > .filter {
+    --text-color-secondary: #ffffff;
+    --text-color-hover: #0079cf;
+    --text-color: #0079cf;
+    border-bottom: 0.0625rem solid #e6e7e8;
+    font-weight: bold;
+  }
+
+  .ui.accordion[class*='ary'] > .title,
+  .ui.accordion[class*='ary'].inverted > .title,
+  .ui.accordion[class*='ary'].inverted > .icon,
+  .ui.accordion[class*='ary'] > .filter {
+    color: var(--text-color);
+    font-weight: bold;
+
+    .icon {
+      color: var(--text-color);
+    }
+  }
+
+  .ui.accordion .content.active {
+    --bg-color: #ffffff;
+    border-bottom: 0.0625rem solid #e6e7e8;
+
+    .item > .content {
+      &:hover {
+        background: #f9f9f9;
+
+        a {
+          color: var(--text-color-hover, #0079cf);
+        }
+      }
+    }
+
+    a {
+      color: var(--text-color);
+    }
+  }
+
+  a rect.circle {
+    pointer-events: all !important;
+  }
+
+  svg,
+  svg * {
+    pointer-events: none;
+  }
+
+  .item.active a {
+    font-weight: bold;
+  }
+}

package/src/index.js

@@ -14,6 +14,7 @@ import installMsfdDataExplorerBlock from './components/Blocks/MsfdDataExplorerBl
 import { breadcrumb, localnavigation } from './reducers';
 import customBlockTemplates from '@eeacms/volto-marine-policy/components/Blocks/CustomBlockTemplates/customBlockTemplates';
 import TextAlignWidget from './components/Widgets/TextAlign';
+import installContextNavigation from './components/Blocks/ContextNavigation';
 import './slate-styles.less';
 
 import installSearchEngine from './search';
@@ -26,7 +27,7 @@ import { LinkElement } from '@plone/volto-slate/editor/plugins/AdvancedLink/rend
 import { withLink } from '@plone/volto-slate/editor/plugins/AdvancedLink/extensions';
 import { linkDeserializer } from '@plone/volto-slate/editor/plugins/AdvancedLink/deserialize';
 import LinkEditSchema from '@plone/volto-slate/editor/plugins/AdvancedLink/schema';
-
+import { getBlocks } from '@plone/volto/helpers';
 import { defineMessages } from 'react-intl'; // , defineMessages
 
 import marineLogo from '@eeacms/volto-marine-policy/../theme/assets/images/Header/wise-marine-logo.svg';
@@ -263,6 +264,11 @@ const applyConfig = (config) => {
     },
   ];
 
+  config.settings.openExternalLinkInNewTab = true;
+
+  if (config.blocks.blocksConfig.contextNavigation)
+    config.blocks.blocksConfig.contextNavigation.restricted = false;
+
   config.settings.pluggableStyles = [
     ...(config.settings.pluggableStyles || []),
     {
@@ -426,6 +432,29 @@ const applyConfig = (config) => {
     organisationName: 'Marine Water Information System for Europe',
   };
 
+  if (config.blocks.blocksConfig.columnsBlock) {
+    config.blocks.blocksConfig.columnsBlock.tocEntries = (
+      block = {},
+      tocData,
+    ) => {
+      // integration with volto-block-toc
+      const headlines = tocData.levels || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+      let entries = [];
+      const sorted_column_blocks = getBlocks(block?.data || {});
+      sorted_column_blocks.forEach((column_block) => {
+        const sorted_blocks = getBlocks(column_block[1]);
+        sorted_blocks.forEach((block) => {
+          const { value, plaintext } = block[1];
+          const type = value?.[0]?.type;
+          if (headlines.includes(type)) {
+            entries.push([parseInt(type.slice(1)), plaintext, block[0]]);
+          }
+        });
+      });
+      return entries;
+    };
+  }
+
   // SPMeasure View widget
   config.views.contentTypesViews.spmeasure = MeasureView;
 
@@ -456,10 +485,11 @@ const applyConfig = (config) => {
   const [installLinkEditor] = makeInlineElementPlugin(opts);
   config = installLinkEditor(config);
 
-  const final = [installMsfdDataExplorerBlock, installSearchEngine].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  const final = [
+    installMsfdDataExplorerBlock,
+    installSearchEngine,
+    installContextNavigation,
+  ].reduce((acc, apply) => apply(acc), config);
 
   return final;
 };