@eeacms/volto-marine-policy 1.0.0 → 1.1.1

package/.eslintrc.js

@@ -54,7 +54,7 @@ const defaultConfig = {
         allowReferrer: true,
       },
     ],
-  }
+  },
 };
 
 const config = addonExtenders.reduce(

package/CHANGELOG.md

@@ -1,5 +1,41 @@
-# Changelog
+### Changelog
 
-## 1.0.0
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-- Initial release
+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)]
+- 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
+
+### 0.1.20 - 15 April 2024
+
+#### :hammer_and_wrench: Others
+
+- 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)]
+- initialized volto-marine-policy [nileshgulia1 - [`9e6cf2f`](https://github.com/eea/volto-marine-policy/commit/9e6cf2f41e7c4c95571f5368d4da1411b73a3f90)]
+- Initialize develop [Nilesh - [`d4cfba5`](https://github.com/eea/volto-marine-policy/commit/d4cfba54fc713b546fc68b8e253bfdb9c92e64cc)]
+- Initial commit [Nilesh - [`ba76f13`](https://github.com/eea/volto-marine-policy/commit/ba76f134700e64d583e4c7d31857a2f715b64edf)]

package/jest-addon.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config({ path: __dirname + '/.env' });
+
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
@@ -5,19 +7,27 @@ module.exports = {
     '!src/**/*.d.ts',
   ],
   moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
-    '@package/(.*)$': '<rootDir>/src/$1',
+    '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
-    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    '@plone/volto-slate':
+    '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
+    '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
+    '@plone/volto-slate$':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
+    '@plone/volto-slate/(.*)$':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@plone|@root|@package|@eeacms)/).*/',
+  ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
@@ -26,10 +36,15 @@ 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' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-marine-policy/jest.setup.js',
+    ],
+  }),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -48,7 +48,8 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@cypress/code-coverage": "^3.9.5",
     "@plone/scripts": "2.1.1",
-    "babel-plugin-transform-class-properties": "^6.24.1"
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "dotenv": "^16.3.2"
   },
   "scripts": {
     "release": "release-it",

package/razzle.extend.js

@@ -26,4 +26,4 @@ const modify = (config, { target, dev }, webpack) => {
 module.exports = {
   plugins,
   modify,
-};
+};

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: [],
+  };
+};