@eeacms/volto-marine-policy 2.0.16 → 2.0.17

package/CHANGELOG.md

@@ -4,6 +4,36 @@ 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.0.17](https://github.com/eea/volto-marine-policy/compare/2.0.16...2.0.17) - 8 August 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.1.8 [EEA Jenkins - [`1b2e062`](https://github.com/eea/volto-marine-policy/commit/1b2e0626e3611781312ca277b5957ea8972f08f1)]
+- Release @eeacms/volto-searchlib@2.1.7 [EEA Jenkins - [`3eede38`](https://github.com/eea/volto-marine-policy/commit/3eede38464192fee6b4345abed30f88f71833d14)]
+- Release @eeacms/volto-searchlib@2.1.6 [EEA Jenkins - [`01fcc56`](https://github.com/eea/volto-marine-policy/commit/01fcc56fb139709fe8acb93b578457d2081501a9)]
+- Release @eeacms/volto-searchlib@2.1.5 [EEA Jenkins - [`49c7e7f`](https://github.com/eea/volto-marine-policy/commit/49c7e7fa2fdd94ad1f7d79a0a85ccf61cb1524ab)]
+- Release @eeacms/volto-searchlib@2.1.4 [EEA Jenkins - [`3ae9f4a`](https://github.com/eea/volto-marine-policy/commit/3ae9f4aefe347140dc5131c9067e4dc7a9fc5767)]
+- Release @eeacms/volto-searchlib@2.1.3 [EEA Jenkins - [`eb97433`](https://github.com/eea/volto-marine-policy/commit/eb97433cb35e4f581280b39cc2b75653433f49cc)]
+- Release @eeacms/volto-searchlib@2.1.2 [EEA Jenkins - [`b5ded14`](https://github.com/eea/volto-marine-policy/commit/b5ded1460e823f94c4fea46efdb91d36e81d9ee9)]
+- Release @eeacms/volto-searchlib@2.1.1 [EEA Jenkins - [`f7ab409`](https://github.com/eea/volto-marine-policy/commit/f7ab409191128f41205b1ef276320b49cef92d6b)]
+- Release @eeacms/volto-searchlib@2.1.0 [EEA Jenkins - [`a048b09`](https://github.com/eea/volto-marine-policy/commit/a048b090cff0ceb103cafdaa6fbd3db842e032b2)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`55e51fa`](https://github.com/eea/volto-marine-policy/commit/55e51fa06d4991cb3ac9949b431371a57e67e59e)]
+- style: Automated code fix [eea-jenkins - [`fe2a258`](https://github.com/eea/volto-marine-policy/commit/fe2a258459e72935b0df977ba2002d09db598bc6)]
+- style: Automated code fix [eea-jenkins - [`287b77c`](https://github.com/eea/volto-marine-policy/commit/287b77cd87ebbb1c21f710ca0837a6d743961f24)]
+- style: Automated code fix [eea-jenkins - [`b4bdb34`](https://github.com/eea/volto-marine-policy/commit/b4bdb3434ae0413dbe5e7fbbe8c9547050a33113)]
+
+#### :hammer_and_wrench: Others
+
+- fix NIS workflow progress endpoint [laszlocseh - [`947cc35`](https://github.com/eea/volto-marine-policy/commit/947cc35cb6b5f678f655d18e53a42932b85e1b79)]
+- fix eslint [laszlocseh - [`7123c4b`](https://github.com/eea/volto-marine-policy/commit/7123c4bb126f60ee5b45acb62ca5a3d4b8480ae9)]
+- fix eslint [laszlocseh - [`bc216d1`](https://github.com/eea/volto-marine-policy/commit/bc216d14a1b2d0057b8db0185dbee58df114f22e)]
+- WiP NIS workflow progress [laszlocseh - [`56669f0`](https://github.com/eea/volto-marine-policy/commit/56669f0736952381c5b52db88bde42dc8e309a3d)]
+- NIS workflow progress [laszlocseh - [`57d82c5`](https://github.com/eea/volto-marine-policy/commit/57d82c5a3fd7b3fe278e1fca8b5de85796587e5c)]
+- NIS edit page [laszlocseh - [`eabce65`](https://github.com/eea/volto-marine-policy/commit/eabce6569fe8d08b1761d0305a8eb49e971df8bb)]
+- WiP NIS table listing [laszlocseh - [`d489f00`](https://github.com/eea/volto-marine-policy/commit/d489f0097cd3e644de04f2c8a978761fce5b0e58)]
 ### [2.0.16](https://github.com/eea/volto-marine-policy/compare/2.0.15...2.0.16) - 15 July 2025
 
 #### :rocket: Dependency updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,7 +22,9 @@
     "@eeacms/volto-embed",
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme",
-    "@eeacms/volto-globalsearch"
+    "@eeacms/volto-globalsearch",
+    "@eeacms/volto-metadata-block",
+    "@eeacms/volto-workflow-progress"
   ],
   "resolutions": {
     "react-countup/countup.js": "2.5.0",
@@ -36,8 +38,10 @@
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-globalsearch": "2.1.2",
     "@eeacms/volto-openlayers-map": "1.0.1",
-    "@eeacms/volto-searchlib": "2.0.16",
+    "@eeacms/volto-searchlib": "2.1.8",
     "@eeacms/volto-tabs-block": "*",
+    "@eeacms/volto-metadata-block": "*",
+    "@eeacms/volto-workflow-progress": "*",
     "axios": "0.30.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",

package/src/components/index.js

@@ -3,7 +3,6 @@ export StickyHeader from './theme/Header/StickyHeader';
 export HeroSectionView from './theme/View/HeroSectionView';
 export FullwidthView from './theme/View/FullwidthView';
 export MetadataListingView from './theme/MetadataListingView/MetadataListingView';
-export NISListingView from './theme/NISListingView/NISListingView';
 export ItemMetadata from './theme/ItemMetadata/ItemMetadata';
 export ItemTitle from './theme/ItemMetadata/ItemTitle';
 export MetadataHeader from './theme/MetadataListingView/MetadataHeader';
@@ -15,3 +14,5 @@ export TableauFullscreen from './theme/Tableau/TableauFullscreen';
 export ItemMetadataSnippet from './theme/ItemMetadata/ItemMetadataSnippet';
 export MapPreview from './theme/MetadataListingView/MapPreview';
 export DemoSitesExplorer from './Blocks/DemoSitesExplorer/DemoSitesExplorerView';
+export NISListingView from './theme/NISListingView/NISListingView';
+export NISMetadataSectionTableView from './theme/NISMetadataSectionTableView/NISMetadataSectionTableView';

package/src/components/theme/NISListingView/NISListingView.jsx

@@ -1,37 +1,102 @@
-import { Link } from 'react-router-dom';
+// import ProgressWorkflow from '@eeacms/volto-workflow-progress/ProgressWorkflow';
+import ProgressWorkflow from '@eeacms/volto-marine-policy/components/theme/ProgressWorkflow/ProgressWorkflow';
+
+// import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import './style.less';
 
+// const NISListingView = ({ items, isEditMode }) => {
+//   console.log(items);
+//   return (
+//     <div className="items">
+//       {items.map((item, index) => (
+//         <div className="listing-item" key={item['@id']}>
+//           <div className="listing-body">
+//             <h3>
+//               <Link to={item['@id']}>{item.title}</Link>
+//             </h3>
+//             <div className="listing-metadata">
+//               {item.nis_species_name_accepted && (
+//                 <div className="metadata-item">
+//                   <b>Species name accepted:</b> {item.nis_species_name_accepted}
+//                 </div>
+//               )}
+//               {item.nis_region && (
+//                 <div className="metadata-item">
+//                   <b>Region:</b> {item.nis_region}
+//                 </div>
+//               )}
+//               {item.nis_subregion && (
+//                 <div className="metadata-item">
+//                   <b>Subregion:</b> {item.nis_subregion}
+//                 </div>
+//               )}
+//             </div>
+//           </div>
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };
+
 const NISListingView = ({ items, isEditMode }) => {
+  // console.log(items);
+
   return (
-    <div className="items">
-      {items.map((item, index) => (
-        <div className="listing-item" key={item['@id']}>
-          <div className="listing-body">
-            <h3>
-              <Link to={item['@id']}>{item.title}</Link>
-            </h3>
-            <div className="listing-metadata">
-              {item.nis_species_name_accepted && (
-                <div className="metadata-item">
-                  <b>Species name accepted:</b> {item.nis_species_name_accepted}
-                </div>
-              )}
-              {item.nis_region && (
-                <div className="metadata-item">
-                  <b>Region:</b> {item.nis_region}
-                </div>
-              )}
-              {item.nis_subregion && (
-                <div className="metadata-item">
-                  <b>Subregion:</b> {item.nis_subregion}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
+    <table className="ui table">
+      <thead>
+        <tr>
+          <th>Species name original</th>
+          <th>Species name accepted</th>
+          <th>Scientific name accepted</th>
+          <th>Region</th>
+          <th>Subregion</th>
+          <th>Status</th>
+          <th>Group</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item, index) => (
+          <tr key={item['@id']}>
+            <td>{item.nis_species_name_original}</td>
+            <td>{item.nis_species_name_accepted}</td>
+            <td>{item.nis_scientificname_accepted}</td>
+            <td>{item.nis_region}</td>
+            <td>{item.nis_subregion}</td>
+            <td>{item.nis_status}</td>
+            <td>{item.nis_group}</td>
+            <td className="workflow-actions">
+              <div className="action-buttons">
+                <a
+                  className="ui button secondary mini"
+                  href={`${item['@id']}`}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  View
+                </a>
+                <a
+                  className="ui button primary mini"
+                  href={`${item['@id']}/edit`}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  Edit
+                </a>
+              </div>
+              <div className="workflow-progress">
+                <ProgressWorkflow
+                  content={item}
+                  pathname={item['@id']}
+                  token={123}
+                />
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
   );
 };
 

package/src/components/theme/NISListingView/style.less

@@ -6,6 +6,116 @@
 
 .metadata-item {
   align-items: baseline;
-  padding: 8px 15px;
+  padding: 5px 10px;
   background-color: #ebebeb;
+  font-size: 0.9em;
+}
+
+.ui.table tr {
+  td,
+  th {
+    border-left: 1px solid #bcbec0 !important;
+
+    &:first-of-type {
+      border-left: none !important;
+    }
+  }
+}
+
+.ui.button.mini {
+  padding: 0.5em 0.8em;
+  vertical-align: middle;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.workflow-select {
+  // min-width: 10em;
+  width: 80%;
+  margin: auto;
+
+  .react-select__control {
+    min-height: unset;
+
+    .react-select__value-container {
+      // padding: 0 !important;
+    }
+
+    .react-select__indicator {
+      padding: 0;
+    }
+  }
+
+  .react-select__option {
+    text-align: left;
+  }
+
+  .react-select__menu {
+    border: 1px solid #b8c6c8;
+    border-top: none;
+    border-top-left-radius: 0.25em !important;
+    border-top-right-radius: 0.25em !important;
+  }
+}
+
+.workflow-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .workflow-progress {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+
+    .sidenav-ol {
+      position: fixed;
+      top: 40%;
+      right: 0;
+      left: unset;
+      overflow: visible;
+      border: 1px solid #eef2f3;
+    }
+  }
+
+  .toolbar-workflow-progress {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 !important;
+    gap: 0.25em;
+  }
+
+  .circle-right-btn {
+    height: auto !important;
+    padding: 0.5em 0.8em;
+    border-width: 1px !important;
+    border-radius: 0 !important;
+    border-radius: 0.25em !important;
+    margin: 0 !important;
+  }
+
+  .review-state-text {
+    line-height: normal;
+    // text-align: left;
+  }
+}
+
+.review-state-draft {
+  border-color: #ed4033 !important;
+  color: #ed4033 !important;
+}
+
+.review-state-submitted {
+  border-color: #f6a808 !important;
+  color: #f6a808 !important;
+}
+
+.review-state-approved {
+  border-color: #3ca34a !important;
+  color: #3ca34a !important;
 }

package/src/components/theme/NISMetadataSectionTableView/NISMetadataSectionTableView.jsx

@@ -0,0 +1,122 @@
+// import config from '@plone/volto/registry';
+// import { useSelector } from 'react-redux';
+// import { Table } from 'semantic-ui-react';
+// import { ErrorBoundary } from '@eeacms/volto-metadata-block/widgets';
+// import { isEmpty } from 'lodash';
+// import { useIntl } from 'react-intl';
+// import './style.less';
+
+// function isEmptyWithNumberCheck(value) {
+//   // Check if the value is a number and is not NaN
+//   if (typeof value === 'number' && !isNaN(value)) {
+//     return false; // Numbers, including 0, are considered non-empty
+//   }
+
+//   // Fallback to Lodash's isEmpty for other types
+//   return isEmpty(value);
+// }
+
+// const Field = (props) => {
+//   const { data, properties = {}, metadata = {}, showLabel } = props;
+//   const { views } = config.widgets;
+//   const intl = useIntl();
+
+//   const initialFormData = useSelector((state) => state?.content?.data || {});
+//   const dataTitle = data?.title;
+//   const label = intl.formatMessage({ id: dataTitle, message: dataTitle });
+
+//   let metadata_element = {
+//     ...initialFormData,
+//     ...(properties || {}),
+//     ...(metadata || {}),
+//   };
+
+//   if (!data?.id) {
+//     return '';
+//   }
+
+//   let output = metadata_element[data.id];
+
+//   let Widget = views?.getWidget(data);
+//   if (!output && props.data.placeholder) {
+//     Widget = views?.default;
+//     output = props.data.placeholder;
+//   }
+
+//   const hasValue = !isEmptyWithNumberCheck(output);
+
+//   if (!Widget || !hasValue) {
+//     return '';
+//   }
+
+//   let className = 'block metadata ' + data.id;
+//   return (
+//     <ErrorBoundary name={data.id}>
+//       {showLabel ? (
+//         <label htmlFor={`metadata-${data.id}`} className={className}>
+//           {label}
+//         </label>
+//       ) : (
+//         ''
+//       )}
+//       <Widget
+//         value={output}
+//         content={metadata_element}
+//         className={className}
+//         id={`metadata-${data.id}`}
+//       />
+//     </ErrorBoundary>
+//   );
+// };
+
+// const NISMetadataSectionTableView = (props) => {
+//   const { data = {}, properties = {}, metadata = {} } = props;
+//   const { table = {}, fields = [] } = data;
+
+//   const initialFormData = useSelector((state) => state?.content?.data || {});
+//   let metadata_element = { ...initialFormData, ...properties, ...metadata };
+//   const showFields = fields.filter(({ hideInView }) => !hideInView);
+
+//   return showFields.length ? (
+//     <Table
+//       fixed={table.fixed}
+//       compact={table.compact}
+//       basic={table.basic ? 'very' : false}
+//       celled={table.celled}
+//       inverted={table.inverted}
+//       striped={table.striped}
+//     >
+//       <Table.Body>
+//         {showFields.map(({ field }, i) => {
+//           const hasValue = !isEmptyWithNumberCheck(metadata_element[field?.id]);
+
+//           return hasValue ? (
+//             <Table.Row key={i}>
+//               <Table.HeaderCell width={1}>{field.title}</Table.HeaderCell>
+//               <Table.Cell>
+//                 <Field key={i} {...props} showLabel={false} data={field} />
+//               </Table.Cell>
+//             </Table.Row>
+//           ) : (
+//             ''
+//           );
+//         })}
+//       </Table.Body>
+//     </Table>
+//   ) : (
+//     ''
+//   );
+// };
+
+import { MetadataSectionTableView } from '@eeacms/volto-metadata-block/components';
+import './style.less';
+
+const NISMetadataSectionTableView = (props) => {
+  return (
+    <div className="nis-metadata-section-table-view">
+      <MetadataSectionTableView {...props} />
+    </div>
+  );
+};
+
+export default NISMetadataSectionTableView;

package/src/components/theme/NISMetadataSectionTableView/style.less

@@ -0,0 +1,18 @@
+.nis-metadata-section-table-view {
+  .ui.table th.one.wide {
+    width: 25%;
+  }
+
+  .ui.table tr th {
+    border-right: 1px solid #0079cf;
+    border-bottom: 1px solid #bcbec0;
+  }
+
+  .ui.table tr:last-child th {
+    border-bottom: none;
+  }
+
+  td .block.metadata {
+    margin: 0;
+  }
+}

package/src/components/theme/ProgressWorkflow/ProgressWorkflow.jsx

@@ -0,0 +1,474 @@
+import config from '@plone/volto/registry';
+import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
+import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import Select from 'react-select';
+import { toast } from 'react-toastify';
+import last from 'lodash/last';
+import split from 'lodash/split';
+import uniqBy from 'lodash/uniqBy';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+// import {
+//   getWorkflowOptions,
+//   getCurrentStateMapping,
+// } from '@plone/volto/helpers/Workflows/Workflows';
+import { transitionWorkflow } from '@plone/volto/actions/workflow/workflow';
+import '@eeacms/volto-workflow-progress/less/editor.less';
+
+const currentStateClass = {
+  draft: 'draft',
+  submitted: 'submitted',
+  approved: 'approved',
+  published: 'published',
+  private: 'private',
+};
+
+const selectTheme = (theme) => ({
+  ...theme,
+  borderRadius: 0,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+const messages = defineMessages({
+  messageUpdated: {
+    id: 'Workflow updated.',
+    defaultMessage: 'Workflow updated.',
+  },
+  messageNoWorkflow: {
+    id: 'No workflow',
+    defaultMessage: 'No workflow',
+  },
+  state: {
+    id: 'State',
+    defaultMessage: 'State',
+  },
+});
+
+const getWorkflowOptions = (transition) => {
+  const mapping = config.settings.workflowMapping;
+  const key = last(split(transition['@id'], '/'));
+
+  if (key in mapping) {
+    return {
+      new_state_id: transition.new_state_id,
+      label: transition.title,
+      ...mapping[key],
+      url: transition['@id'],
+    };
+  }
+
+  // Return an option with a neutral color
+  return {
+    new_state_id: transition.new_state_id,
+    value: key,
+    label: transition.title,
+    color: '#000',
+    url: transition['@id'],
+  };
+};
+
+const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    // border: 'none',
+    border: '1px solid #b8c6c8',
+    borderRadius: '0.25rem',
+    borderBottom: '1px solid #b8c6c8',
+    boxShadow: 'none',
+    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    boxShadow: 'none',
+    borderBottom: '2px solid #b8c6c8',
+  }),
+  indicatorSeparator: (styles) => ({
+    ...styles,
+    width: null,
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: 0,
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: null,
+    minHeight: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '0.5em 0.8em',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    span: {
+      flex: '0 0 auto',
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};
+
+/**
+ * getGeonames function.
+ * @function getGeonames
+ * @param {url} url URL.
+ * @returns {Object} Object.
+ */
+export function getWorkflowProgress(item) {
+  return {
+    type: 'WORKFLOW_PROGRESS_PATH',
+    item,
+    request: {
+      op: 'get',
+      path: `${item}/@workflow.progress.nis`,
+      headers: {
+        Accept: 'application/json',
+      },
+    },
+  };
+}
+
+const itemTracker = (tracker, currentStateKey, currentState) => {
+  const tracker_key_array = tracker[0];
+  const is_active = tracker_key_array.indexOf(currentStateKey) > -1;
+
+  return (
+    <li
+      key={`progress__item ${tracker_key_array}`}
+      className={`progress__item ${
+        is_active
+          ? 'progress__item--active'
+          : tracker[1] < currentState.done
+          ? 'progress__item--completed'
+          : 'progress__item--next'
+      }`}
+    >
+      {tracker[2].map((title, index) => (
+        <div
+          key={`progress__title ${tracker_key_array}${index}`}
+          className={`progress__title ${
+            currentState.title !== title ? 'title-incomplete' : ''
+          }`}
+        >
+          {title}
+          {is_active && <div name="active-workflow-progress" />}
+        </div>
+      ))}
+    </li>
+  );
+};
+
+/**
+ * @summary The React component that shows progress tracking of selected content.
+ */
+const ProgressWorkflow = (props) => {
+  const { content, pathname, token } = props;
+  // const Select = props.reactSelect.default;
+  const intl = useIntl();
+  const isAuth = !!token;
+  // const currentStateKey = content?.review_state;
+  const dispatch = useDispatch();
+  const contentId = content?.['@id'];
+  const basePathname = getBaseUrl(pathname);
+  const contentContainsPathname =
+    contentId &&
+    basePathname &&
+    flattenToAppURL(contentId).endsWith(basePathname);
+  const fetchCondition =
+    pathname.endsWith('/contents') ||
+    pathname.endsWith('/edit') ||
+    pathname === basePathname;
+  // console.log(basePathname);
+  const [workflowProgressSteps, setWorkflowProgressSteps] = useState([]);
+  const [currentState, setCurrentState] = useState(null);
+  const [currentStateKey, setCurrentStateKey] = useState(content?.review_state);
+
+  const transition = (selectedOption) => {
+    // console.log('selectedOption: ', selectedOption);
+    dispatch(transitionWorkflow(flattenToAppURL(selectedOption.url))).then(
+      () => {
+        toast.success(
+          <Toast
+            success
+            title={intl.formatMessage(messages.messageUpdated)}
+            content=""
+          />,
+        );
+        setCurrentStateKey(selectedOption.new_state_id);
+      },
+    );
+  };
+
+  const workflowProgressPath = useSelector((state) => {
+    if (state?.workflowProgressPath?.[basePathname]?.get?.loaded === true) {
+      const progress = state?.workflowProgressPath?.[basePathname]?.result;
+      if (
+        progress &&
+        flattenToAppURL(progress['@id']).endsWith(
+          basePathname + '/@workflow.progress.nis',
+        )
+      ) {
+        return state?.workflowProgressPath?.[basePathname];
+      }
+    }
+    return null;
+  });
+  const pusherRef = useRef(null);
+  const transitions = workflowProgressPath?.result?.transitions || [];
+
+  // set visible by clicking oustisde
+  const hideVisibleSide = () => {
+    pusherRef.current &&
+      pusherRef.current.lastElementChild.classList.add('is-hidden');
+  };
+  // toggle visible by clicking on the button
+  const toggleVisibleSide = (event) => {
+    // pusherRef.current &&
+    //   pusherRef.current.lastElementChild.classList.toggle('is-hidden');
+    const button = event.currentTarget;
+    const dropdown = pusherRef.current?.lastElementChild;
+
+    if (!dropdown) return;
+
+    const rect = button.getBoundingClientRect();
+
+    dropdown.style.position = 'fixed';
+    dropdown.style.top = `${rect.bottom}px`; // or rect.top
+    dropdown.style.left = `${rect.left}px`;
+    dropdown.classList.toggle('is-hidden');
+    // console.log(rect.bottom, rect.left);
+  };
+
+  // apply all computing when the workflowProgress results come from the api
+  useEffect(() => {
+    const findCurrentState = (steps, done) => {
+      const arrayContainingCurrentState = steps.find(
+        (itemElements) => itemElements[1] === done,
+      );
+      const indexOfCurrentStateKey =
+        arrayContainingCurrentState[0].indexOf(currentStateKey);
+      const title = arrayContainingCurrentState[2][indexOfCurrentStateKey];
+      const description =
+        arrayContainingCurrentState[3][indexOfCurrentStateKey];
+
+      setCurrentState({
+        done,
+        title,
+        description,
+      });
+    };
+
+    /**
+     * remove states that are 0% unless if it is current state
+     * @param {Object[]} states - array of arrays
+     * @param {Object[]} states[0][0] - array of state keys (ex: [private, published])
+     * @param {number} states[0][1] - percent
+     * @param {Object[]} states[0][2] - array of state titles (ex: [Private, Published])
+     * @param {Object[]} states[0][3] - array of state descriptions
+     * @returns {Object[]} result - array of arrays, same structure but filtered
+     */
+    const filterOutZeroStatesNotCurrent = (states) => {
+      return states; // do not filter
+      // const [firstState, ...rest] = states;
+      // const result =
+      //   firstState[1] > 0 // there aren't any 0% states
+      //     ? states // return all states
+      //     : (() => {
+      //         // there are 0% states
+      //         const indexOfCurrentStateKey =
+      //           firstState[0].indexOf(currentStateKey);
+      //         if (indexOfCurrentStateKey > -1) {
+      //           const keys = [firstState[0][indexOfCurrentStateKey]];
+      //           const titles = [firstState[2][indexOfCurrentStateKey]];
+      //           const description = [firstState[3][indexOfCurrentStateKey]];
+
+      //           return [[keys, 0, titles, description], ...rest]; // return only the current 0% state and test
+      //         }
+      //         return rest; // if current state in not a 0% return all rest
+      //       })();
+
+      // return result;
+    };
+
+    // filter out paths that don't have workflow (home, login, dexterity even if the content obj stays the same etc)
+    if (
+      contentId &&
+      contentContainsPathname &&
+      basePathname &&
+      basePathname !== '/' && // wihout this there will be a flicker for going back to home ('/' is included in all api paths)
+      workflowProgressPath?.result?.steps &&
+      workflowProgressPath.result.steps.length > 0 &&
+      !workflowProgressPath.get?.error &&
+      Array.isArray(workflowProgressPath?.result?.steps)
+    ) {
+      findCurrentState(
+        workflowProgressPath.result.steps,
+        workflowProgressPath.result.done,
+      );
+      setWorkflowProgressSteps(
+        filterOutZeroStatesNotCurrent(
+          workflowProgressPath.result.steps,
+        ).reverse(),
+      );
+    } else {
+      if (currentState) {
+        setCurrentState(null); // reset current state only if a path without workflow is
+        // chosen to avoid flicker for those that have workflow
+      }
+    }
+  }, [workflowProgressPath?.result, currentStateKey, pathname]); // eslint-disable-line
+
+  // get progress again if path or content changes
+  useEffect(() => {
+    if (token && fetchCondition && contentContainsPathname) {
+      dispatch(getWorkflowProgress(basePathname));
+    } // the are paths that don't have workflow (home, login etc) only if logged in
+  }, [
+    dispatch,
+    pathname,
+    basePathname,
+    token,
+    currentStateKey,
+    contentContainsPathname,
+    fetchCondition,
+  ]);
+
+  // on mount subscribe to mousedown to be able to close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      const parentDiv = pusherRef.current;
+      if (parentDiv) {
+        if (
+          !doesNodeContainClick(parentDiv, e) &&
+          !parentDiv.lastElementChild.classList.contains('is-hidden')
+        ) {
+          hideVisibleSide();
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, false);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  // console.log('currentState: ', currentState);
+  // console.log('currentStateKey:', currentStateKey);
+  // console.log(workflowProgressPath?.result?.transitions);
+  return isAuth && currentState && contentContainsPathname ? (
+    <>
+      <div className="toolbar-workflow-progress">
+        <div ref={pusherRef}>
+          <button
+            className={`circle-right-btn ${
+              currentStateClass[currentStateKey]
+                ? `review-state-${currentStateKey}`
+                : currentState.done === 100
+                ? 'review-state-published'
+                : ''
+            }`}
+            id="toolbar-cut-blocks"
+            onClick={toggleVisibleSide}
+            title="Editing progress"
+          >
+            {`${currentState.done}%`}
+          </button>
+          <div className={`sidenav-ol sidenav-ol--wp is-hidden`}>
+            <div className="workflow-select">
+              <Select
+                // menuIsOpen={true}
+                name="state-select"
+                className="react-select-container"
+                classNamePrefix="react-select"
+                isDisabled={!content.review_state || transitions.length === 0}
+                options={uniqBy(
+                  transitions.map((transition) =>
+                    getWorkflowOptions(transition),
+                  ),
+                  'label',
+                ).concat({ value: currentStateKey, label: currentState.title })}
+                styles={customSelectStyles}
+                theme={selectTheme}
+                // components={{
+                //   DropdownIndicator,
+                //   Placeholder,
+                //   Option,
+                //   SingleValue,
+                // }}
+                onChange={transition}
+                value={{ value: currentStateKey, label: currentState.title }}
+                isSearchable={false}
+              />
+            </div>
+            <ol
+              className="progress-reversed"
+              style={{
+                counterReset: `item ${workflowProgressSteps.length + 1}`,
+              }}
+            >
+              {workflowProgressSteps.map((progressItem) =>
+                itemTracker(progressItem, currentStateKey, currentState),
+              )}
+            </ol>
+          </div>
+        </div>
+        <div
+          className={`review-state-text ${
+            currentStateClass[currentStateKey]
+              ? `review-state-${currentStateKey}`
+              : currentState.done === 100
+              ? 'review-state-published'
+              : ''
+          }`}
+          id="toolbar-cut-blocks"
+          onClick={toggleVisibleSide}
+          onKeyDown={() => {}}
+          title="Editing progress"
+          role="presentation"
+        >
+          {`${currentState.title}`}
+        </div>
+        <div className={`sidenav-ol sidenav-ol--wp is-hidden`}>
+          <ol
+            className="progress-reversed"
+            style={{
+              counterReset: `item ${workflowProgressSteps.length + 1}`,
+            }}
+          >
+            {workflowProgressSteps.map((progressItem) =>
+              itemTracker(progressItem, currentStateKey, currentState),
+            )}
+          </ol>
+        </div>
+      </div>
+    </>
+  ) : (
+    // </Plug>
+    ''
+  );
+};
+
+ProgressWorkflow.propTypes = {
+  pathname: PropTypes.string.isRequired,
+  content: PropTypes.object,
+};
+
+export default ProgressWorkflow;

package/src/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   // HeroSectionView,
   // FullwidthView,
@@ -6,13 +5,14 @@ import {
   MetadataListingView,
   SimpleListingView,
   NISListingView,
+  NISMetadataSectionTableView,
 } from './components';
+import { addTableField } from '@eeacms/volto-metadata-block/components/manage/Blocks/MetadataSection/variations';
 // import installAppExtras from './components/theme/AppExtras';
 // import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
 // import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
-
 import installMsfdDataExplorerBlock from './components/Blocks/MsfdDataExplorerBlock';
-import { breadcrumb, localnavigation } from './reducers';
+import { breadcrumb, localnavigation, workflowProgressPath } from './reducers';
 import customBlockTemplates from '@eeacms/volto-marine-policy/components/Blocks/CustomBlockTemplates/customBlockTemplates';
 import TextAlignWidget from './components/Widgets/TextAlign';
 import './slate-styles.less';
@@ -108,6 +108,7 @@ const applyConfig = (config) => {
     ...(config.addonReducers || {}),
     breadcrumb,
     localnavigation,
+    workflowProgressPath,
   };
 
   if (__SERVER__) {
@@ -156,13 +157,26 @@ const applyConfig = (config) => {
       },
       {
         id: 'nis',
-        title: 'NIS Listing',
+        title: 'NIS Table',
         template: NISListingView,
         isDefault: false,
       },
     ],
   };
 
+  config.blocks.blocksConfig.metadataSection = {
+    ...config.blocks.blocksConfig.metadataSection,
+    variations: [
+      ...config.blocks.blocksConfig.metadataSection.variations,
+      {
+        id: 'nis_table',
+        title: 'NIS Table',
+        view: NISMetadataSectionTableView,
+        schemaEnhancer: addTableField,
+      },
+    ],
+  };
+
   config.settings.useQuantaToolbar = false;
 
   config.settings.apiExpanders = [

package/src/reducers/index.js

@@ -1,2 +1,3 @@
 export breadcrumb from './breadcrumb/breadcrumb';
 export localnavigation from './localnavigation/localnavigation';
+export workflowProgressPath from './workflowprogress/workflow';

package/src/reducers/workflowprogress/workflow.js

@@ -0,0 +1,86 @@
+/**
+ * Data Figure reducer.
+ * @module reducers/workflowProgress
+ */
+
+const initialState = {
+  get: {
+    loaded: false,
+    loading: false,
+    error: null,
+  },
+};
+
+/**
+ * Data figure reducer.
+ * @function workflowProgress
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function workflowProgressPath(
+  state = initialState,
+  action = {},
+) {
+  let { result } = action;
+  switch (action.type) {
+    case 'WORKFLOW_PROGRESS_PATH_PENDING':
+      return {
+        // ...state,
+        // get: {
+        //   loading: true,
+        //   loaded: false,
+        //   error: null,
+        // },
+
+        ...state,
+        [action.item]: {
+          get: {
+            loading: true,
+            loaded: false,
+            error: null,
+          },
+        },
+      };
+    case 'WORKFLOW_PROGRESS_PATH_SUCCESS':
+      return {
+        // ...state,
+        // get: {
+        //   loading: false,
+        //   loaded: true,
+        //   error: null,
+        // },
+        // result,
+
+        ...state,
+        [action.item]: {
+          get: {
+            loading: false,
+            loaded: true,
+            error: null,
+          },
+          result,
+        },
+      };
+    case 'WORKFLOW_PROGRESS_PATH_FAIL':
+      return {
+        // ...state,
+        // get: {
+        //   loading: false,
+        //   loaded: false,
+        //   error: action.error,
+        // },
+
+        ...state,
+        [action.item]: {
+          get: {
+            loading: false,
+            loaded: false,
+            error: action.error,
+          },
+        },
+      };
+    default:
+      return state;
+  }
+}

package/theme/globals/site.overrides

@@ -12,7 +12,7 @@
   }
 }
 
-#page-document > blockquote {
+#page-document>blockquote {
   margin-right: revert !important;
   margin-left: revert !important;
 }
@@ -69,17 +69,18 @@ body {
 
   @media only screen and (min-width: 992px) {
     .eea.header {
-      .ui.grid > .row > [class*='four wide computer'].column,
-      .ui.grid > .column.row > [class*='four wide computer'].column,
-      .ui.grid > [class*='four wide computer'].column,
-      .ui.column.grid > [class*='four wide computer'].column {
+
+      .ui.grid>.row>[class*='four wide computer'].column,
+      .ui.grid>.column.row>[class*='four wide computer'].column,
+      .ui.grid>[class*='four wide computer'].column,
+      .ui.column.grid>[class*='four wide computer'].column {
         width: 33.33333333% !important;
       }
 
-      .ui.grid > .row > [class*='eight wide computer'].column,
-      .ui.grid > .column.row > [class*='eight wide computer'].column,
-      .ui.grid > [class*='eight wide computer'].column,
-      .ui.column.grid > [class*='eight wide computer'].column {
+      .ui.grid>.row>[class*='eight wide computer'].column,
+      .ui.grid>.column.row>[class*='eight wide computer'].column,
+      .ui.grid>[class*='eight wide computer'].column,
+      .ui.column.grid>[class*='eight wide computer'].column {
         width: 66.66666667% !important;
       }
     }
@@ -129,20 +130,16 @@ body {
   }
 
   #search-box {
-    background: linear-gradient(
-      13.69deg,
-      @darkPrimaryColor 1.17%,
-      @primaryColor 80%
-    );
+    background: linear-gradient(13.69deg,
+        @darkPrimaryColor 1.17%,
+        @primaryColor 80%);
   }
 
   footer {
-    background: linear-gradient(
-      212.33deg,
-      @primaryColor 6.78%,
-      @darkPrimaryColor 69.54%,
-      @darkPrimaryColor 98.23%
-    );
+    background: linear-gradient(212.33deg,
+        @primaryColor 6.78%,
+        @darkPrimaryColor 69.54%,
+        @darkPrimaryColor 98.23%);
   }
 }
 
@@ -171,7 +168,7 @@ body.view-viewview .full {
   margin-right: -50vw !important;
   margin-left: -50vw !important;
 
-  > div {
+  >div {
     display: block;
     width: 100% !important;
     margin-right: auto !important;
@@ -188,29 +185,28 @@ body.view-viewview .full {
     width: @largeMonitorWidth !important;
   }
 }
+
 @media screen and (min-width: @largestMobileScreen) {
   body.view-viewview.has-toolbar.has-sidebar {
-    .full > div {
+    .full>div {
       width: calc(100% - (@toolbarWidth + @sidebarWidth)) !important;
     }
   }
 
   body.view-viewview.has-toolbar.has-sidebar-collapsed {
-    .full > div {
+    .full>div {
       width: calc(100% - (@toolbarWidth + @collapsedToolbarWidth)) !important;
     }
   }
 
-  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(
-      .has-sidebar-collapsed
-    ) {
-    .full > div {
+  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
+    .full>div {
       width: calc(100% - @collapsedToolbarWidth) !important;
     }
   }
 
   body.view-viewview.has-toolbar-collapsed.has-sidebar {
-    .full > div {
+    .full>div {
       .full-width-block {
         width: calc(100% - (@collapsedToolbarWidth + @sidebarWidth)) !important;
       }
@@ -218,28 +214,25 @@ body.view-viewview .full {
   }
 
   body.view-viewview.has-toolbar-collapsed.has-sidebar-collapsed {
-    .full > div {
-      width: calc(
-        100% - (@collapsedToolbarWidth + @collapsedToolbarWidth)
-      ) !important;
+    .full>div {
+      width: calc(100% - (@collapsedToolbarWidth + @collapsedToolbarWidth)) !important;
     }
   }
 }
 
 @media only screen and (max-width: 767px) {
-  body.view-viewview.has-toolbar-collapsed.has-sidebar-collapsed
-    .full.full-width-block,
+
+  body.view-viewview.has-toolbar-collapsed.has-sidebar-collapsed .full.full-width-block,
   body.view-viewview.has-toolbar.has-sidebar-collapsed .full.full-width-block {
     width: 100% !important;
   }
 }
 
 @media screen and (max-width: @largestMobileScreen) {
+
   body.view-viewview.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed),
-  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(
-      .has-sidebar-collapsed
-    ) {
-    .full > div {
+  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
+    .full>div {
       width: 100% !important;
     }
   }
@@ -267,32 +260,15 @@ body.searchlib-page .searchlib-block .back-link {
 .search-body-footer .ui.button.pagination-item.active,
 .searchlib-block .dropdown-facets-list .dropdown-facet .facet-title i.icon,
 .searchlib-block .dropdown-facets-list .ui.button.sui-button,
-.searchlib-block
-  .dropdown-facets-list
-  .dropdown-facet
-  .ui.button.basic.facet-btn.active
-  > .facet-title,
-body.searchlib-page
-  .searchlib-block
-  .above-results
-  .sorting
-  .inline.dropdown
-  > span {
+.searchlib-block .dropdown-facets-list .dropdown-facet .ui.button.basic.facet-btn.active>.facet-title,
+body.searchlib-page .searchlib-block .above-results .sorting .inline.dropdown>span {
   color: @secondaryColor !important;
 }
 
 .sui-search-box .search-input .input-controls i.close.icon:before,
 .sui-search-box .search-input .input-controls i.close.icon:after,
-body.searchlib-page
-  .searchlib-block
-  .ui.segment.active-filter-list
-  .ui.label.filter-value
-  i.close.icon:before,
-body.searchlib-page
-  .searchlib-block
-  .ui.segment.active-filter-list
-  .ui.label.filter-value
-  i.close.icon:after {
+body.searchlib-page .searchlib-block .ui.segment.active-filter-list .ui.label.filter-value i.close.icon:before,
+body.searchlib-page .searchlib-block .ui.segment.active-filter-list .ui.label.filter-value i.close.icon:after {
   background-color: @secondaryColor !important;
 }
 
@@ -311,6 +287,7 @@ section .searchlib-block .ui.button.sui-button.basic {
 // Custom page header
 body.custom-page-header {
   #page-header {
+
     .column-blocks-wrapper,
     .content-box {
       margin-bottom: 0;
@@ -364,7 +341,7 @@ body.custom-page-header .breadcrumbs {
     margin: 0;
   }
 
-  .ui.grid > .row > .column-blocks-wrapper,
+  .ui.grid>.row>.column-blocks-wrapper,
   .column-blocks-wrapper {
     margin-bottom: 0;
   }
@@ -383,3 +360,28 @@ body.custom-page-header .breadcrumbs {
     z-index: 5;
   }
 }
+
+// Change the edit of metadataSection for NIS
+.view-editview.contenttype-non_indigenous_species {
+  .metadata-section.block fieldset .inline.field {
+    padding-top: 1.5rem;
+    border-bottom: 1px solid #8dcadd;
+    padding-bottom: 1.5rem;
+    margin: 0;
+  }
+
+  .metadata-section.block .row {
+    flex-direction: row !important;
+    flex-wrap: nowrap;
+
+    .wrapper {
+      display: flex;
+    }
+
+    textarea {
+      width: 100% !important;
+      max-width: 100% !important;
+      padding: 5px;
+    }
+  }
+}