@eeacms/volto-cca-policy 0.3.124 → 0.3.126

package/src/components/theme/Views/ArchivedVersionListing.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import ArchivedVersionListing from './ArchivedVersionListing';
@@ -21,16 +22,21 @@ jest.mock('@eeacms/volto-cca-policy/components', () => ({
   ),
 }));
 
+const renderWithIntl = (ui) =>
+  render(
+    <IntlProvider locale="en">
+      <MemoryRouter>{ui}</MemoryRouter>
+    </IntlProvider>,
+  );
+
 describe('ArchivedVersionListing', () => {
   it('returns null when there are no archived versions', () => {
     const content = {
       archived_versions: [],
     };
 
-    const { container } = render(
-      <MemoryRouter>
-        <ArchivedVersionListing content={content} />
-      </MemoryRouter>,
+    const { container } = renderWithIntl(
+      <ArchivedVersionListing content={content} />,
     );
 
     expect(container.innerHTML).toBe('');
@@ -39,10 +45,8 @@ describe('ArchivedVersionListing', () => {
   it('returns null when archived_versions is missing', () => {
     const content = {};
 
-    const { container } = render(
-      <MemoryRouter>
-        <ArchivedVersionListing content={content} />
-      </MemoryRouter>,
+    const { container } = renderWithIntl(
+      <ArchivedVersionListing content={content} />,
     );
 
     expect(container.innerHTML).toBe('');
@@ -62,11 +66,7 @@ describe('ArchivedVersionListing', () => {
       ],
     };
 
-    render(
-      <MemoryRouter>
-        <ArchivedVersionListing content={content} />
-      </MemoryRouter>,
-    );
+    renderWithIntl(<ArchivedVersionListing content={content} />);
 
     expect(
       screen.getByText('Previous versions of this indicator'),
@@ -92,11 +92,7 @@ describe('ArchivedVersionListing', () => {
       ],
     };
 
-    render(
-      <MemoryRouter>
-        <ArchivedVersionListing content={content} />
-      </MemoryRouter>,
-    );
+    renderWithIntl(<ArchivedVersionListing content={content} />);
 
     expect(screen.getByText('/indicator-v1')).toHaveAttribute(
       'href',

package/src/components/theme/Views/CcaEventView.test.jsx

@@ -64,7 +64,10 @@ test('renders an event view component with all props', () => {
           subjects: ['Guillotina', 'Volto'],
           whole_day: false,
           agenda_files: {},
-          background_documents: {},
+          background_documents: {
+            download: 'http://localhost:8080/Plone/my-page/background.pdf',
+            filename: 'background.pdf',
+          },
         }}
       />
     </Provider>,
@@ -85,7 +88,10 @@ test('renders an event view component with only required props', () => {
           start: '2019-06-23T15:20:00+00:00',
           subjects: [],
           agenda_files: {},
-          background_documents: {},
+          background_documents: {
+            download: 'http://localhost:8080/Plone/my-page/background.pdf',
+            filename: 'background.pdf',
+          },
         }}
       />
     </Provider>,
@@ -106,7 +112,10 @@ test('renders an event view component without links to api in the text', () => {
           start: '2019-06-23T15:20:00+00:00',
           subjects: [],
           agenda_files: {},
-          background_documents: {},
+          background_documents: {
+            download: 'http://localhost:8080/Plone/my-page/background.pdf',
+            filename: 'background.pdf',
+          },
           text: {
             data: `<p>Hello World!</p><p>This is an <a href="${settings.apiPath}/foo/bar">internal link</a> and a <a href="${settings.apiPath}/foo/baz">second link</a></p>`,
           },

package/src/components/theme/Views/DatabaseItemView.test.jsx

@@ -44,11 +44,11 @@ describe('DatabaseItemView', () => {
       contributions: [
         {
           title: 'Contributor 1',
-          url: '/',
+          url: '/contributor-1',
         },
         {
           title: 'Contributor 2',
-          url: '/',
+          url: '/contributor-2',
         },
       ],
     };

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

@@ -5,7 +5,7 @@ import config from '@plone/volto/registry';
 
 import { injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
-import MapContainer from './GeolocationWidgetMapContainer';
+import MapContainer from '@eeacms/volto-cca-policy/components/theme/Widgets/GeolocationWidgetMapContainer';
 
 const defaultValue = {
   latitude: 55.6761,

package/src/customizations/volto/components/manage/Workflow/README.md

@@ -0,0 +1,23 @@
+# Workflow Component Customization
+
+This component shadows the core Volto `Workflow` component located at `@plone/volto/components/manage/Workflow/Workflow.jsx`.
+
+## Why this is needed
+
+In Climate-ADAPT, we want to prevent users from unintentionally breaking internal links when making content private. Volto's core workflow transition dropdown does not perform any link integrity checks before executing a state change.
+
+By shadowing this component, we can intercept transitions that might hide content from public users and warn the editor if other pages are linking to the current item.
+
+## Modifications
+
+1.  **Interception Logic**: The `transition` function was modified to check for "private-like" transitions (`private`, `reject`, `retract`).
+2.  **Link Integrity Check**: When a sensitive transition is selected, the `linkIntegrityCheck` action is dispatched to the backend.
+3.  **State Management**: Added local state (`showWarningModal`, `pendingOption`) to handle the asynchronous check and the confirmation flow.
+4.  **Confirmation Modal**: Integrated `WorkflowLinkIntegrityModal` which displays the list of pages that would have broken links.
+5.  **Auto-proceed**: Added an `useEffect` that automatically executes the transition if the link integrity check returns zero breaches.
+6.  **Activity Indicators**: Added `Dimmer` and `Loader` components from `semantic-ui-react` to provide visual feedback while the link integrity check is loading and during the workflow transition execution.
+
+## Reference
+
+See implementation details in:
+`artifacts/link-integrity-workflow/understanding-link-integrity.md`

package/src/customizations/volto/components/manage/Workflow/Workflow.jsx

@@ -0,0 +1,359 @@
+import { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { uniqBy } from 'lodash';
+import { toast } from 'react-toastify';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+import { Dimmer, Loader } from 'semantic-ui-react';
+import {
+  flattenToAppURL,
+  getWorkflowOptions,
+  getCurrentStateMapping,
+} from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import {
+  getContent,
+  getWorkflow,
+  transitionWorkflow,
+  linkIntegrityCheck,
+} from '@plone/volto/actions';
+import WorkflowLinkIntegrityModal from '@eeacms/volto-cca-policy/components/manage/Workflow/WorkflowLinkIntegrityModal';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const messages = defineMessages({
+  messageUpdated: {
+    id: 'Workflow updated.',
+    defaultMessage: 'Workflow updated.',
+  },
+  messageNoWorkflow: {
+    id: 'No workflow',
+    defaultMessage: 'No workflow',
+  },
+  state: {
+    id: 'State',
+    defaultMessage: 'State',
+  },
+});
+
+const SingleValue = injectLazyLibs('reactSelect')(({ children, ...props }) => {
+  const stateDecorator = {
+    marginRight: '10px',
+    display: 'inline-block',
+    backgroundColor: props.selectProps.value.color || null,
+    content: ' ',
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%',
+  };
+  const { SingleValue } = props.reactSelect.components;
+  return (
+    <SingleValue {...props}>
+      <span style={stateDecorator} />
+      {children}
+    </SingleValue>
+  );
+});
+
+const Option = injectLazyLibs('reactSelect')((props) => {
+  const stateDecorator = {
+    marginRight: '10px',
+    display: 'inline-block',
+    backgroundColor:
+      props.selectProps.value.value === props.data.value
+        ? props.selectProps.value.color
+        : null,
+    content: ' ',
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%',
+    border:
+      props.selectProps.value.value !== props.data.value
+        ? `1px solid ${props.data.color}`
+        : null,
+  };
+
+  const { Option } = props['reactSelect'].components;
+  return (
+    <Option {...props}>
+      <span style={stateDecorator} />
+      <div style={{ marginRight: 'auto' }}>{props.label}</div>
+      {props.isFocused && !props.isSelected && (
+        <Icon name={checkSVG} size="18px" color="#b8c6c8" />
+      )}
+      {props.isSelected && <Icon name={checkSVG} size="18px" color="#007bc1" />}
+    </Option>
+  );
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const { DropdownIndicator } = props.reactSelect.components;
+  return (
+    <DropdownIndicator {...props} data-testid="workflow-select-dropdown">
+      {props.selectProps.menuIsOpen ? (
+        <Icon name={upSVG} size="24px" color="#007bc1" />
+      ) : (
+        <Icon name={downSVG} size="24px" color="#007bc1" />
+      )}
+    </DropdownIndicator>
+  );
+});
+
+const selectTheme = (theme) => ({
+  ...theme,
+  borderRadius: 0,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    border: 'none',
+    borderBottom: '2px solid #b8c6c8',
+    boxShadow: 'none',
+    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    boxShadow: 'none',
+    borderBottom: '2px solid #b8c6c8',
+  }),
+  menuList: (styles, state) => ({
+    ...styles,
+    maxHeight: '400px',
+  }),
+  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: '12px 12px',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    span: {
+      flex: '0 0 auto',
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};
+
+function useWorkflow() {
+  const history = useSelector((state) => state.workflow.history, shallowEqual);
+  const transitions = useSelector(
+    (state) => state.workflow.transitions,
+    shallowEqual,
+  );
+  const loaded = useSelector((state) => state.workflow.transition.loaded);
+  const transitionLoading = useSelector(
+    (state) => state.workflow.transition.loading,
+  );
+  const currentStateValue = useSelector(
+    (state) => getCurrentStateMapping(state.workflow.currentState),
+    shallowEqual,
+  );
+  const linkintegrityInfo = useSelector((state) => state.linkIntegrity?.result);
+  const linkintegrityLoaded = useSelector(
+    (state) => state.linkIntegrity?.loaded,
+  );
+  const linkintegrityLoading = useSelector(
+    (state) => state.linkIntegrity?.loading,
+  );
+  const linkintegrityError = useSelector((state) => state.linkIntegrity?.error);
+
+  return {
+    loaded,
+    transitionLoading,
+    history,
+    transitions,
+    currentStateValue,
+    linkintegrityInfo,
+    linkintegrityLoaded,
+    linkintegrityLoading,
+    linkintegrityError,
+  };
+}
+
+const Workflow = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const {
+    loaded,
+    transitionLoading,
+    transitions,
+    currentStateValue,
+    linkintegrityInfo,
+    linkintegrityLoaded,
+    linkintegrityLoading,
+    linkintegrityError,
+  } = useWorkflow();
+  const content = useSelector((state) => state.content?.data, shallowEqual);
+  const { pathname } = props;
+
+  const [showWarningModal, setShowWarningModal] = useState(false);
+  const [pendingOption, setPendingOption] = useState(null);
+
+  useEffect(() => {
+    dispatch(getWorkflow(pathname));
+    dispatch(getContent(pathname));
+  }, [dispatch, pathname, loaded]);
+
+  const executeTransition = useCallback(
+    (selectedOption) => {
+      if (selectedOption?.url) {
+        dispatch(transitionWorkflow(flattenToAppURL(selectedOption.url)));
+        toast.success(
+          <Toast
+            success
+            title={intl.formatMessage(messages.messageUpdated)}
+            content=""
+          />,
+        );
+      }
+    },
+    [dispatch, intl],
+  );
+
+  useEffect(() => {
+    if (showWarningModal) {
+      if (linkintegrityError) {
+        // If the check fails, we shouldn't block the user forever. Proceed with transition.
+        executeTransition(pendingOption);
+        setShowWarningModal(false);
+        setPendingOption(null);
+      } else if (
+        linkintegrityLoaded &&
+        linkintegrityInfo &&
+        flattenToAppURL(linkintegrityInfo[0]?.['@id']) ===
+          flattenToAppURL(content?.['@id'])
+      ) {
+        const breaches = linkintegrityInfo.flatMap((result) => result.breaches);
+        if (breaches.length === 0) {
+          executeTransition(pendingOption);
+          setShowWarningModal(false);
+          setPendingOption(null);
+        }
+      }
+    }
+  }, [
+    linkintegrityLoaded,
+    linkintegrityInfo,
+    linkintegrityError,
+    showWarningModal,
+    pendingOption,
+    content,
+    executeTransition,
+  ]);
+
+  const transition = (selectedOption) => {
+    const isPrivateTransition =
+      ['private', 'reject', 'retract'].includes(selectedOption.value) ||
+      selectedOption.url.endsWith('/reject') ||
+      selectedOption.url.endsWith('/retract');
+
+    if (isPrivateTransition) {
+      setPendingOption(selectedOption);
+      dispatch(linkIntegrityCheck([content.UID]));
+      setShowWarningModal(true);
+    } else {
+      executeTransition(selectedOption);
+    }
+  };
+
+  const { Placeholder } = props.reactSelect.components;
+  const Select = props.reactSelect.default;
+
+  return (
+    <>
+      <FormFieldWrapper
+        id="state-select"
+        title={intl.formatMessage(messages.state)}
+        intl={intl}
+        {...props}
+      >
+        <Dimmer active={transitionLoading} inverted>
+          <Loader size="small" />
+        </Dimmer>
+        <Select
+          name="state-select"
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isDisabled={
+            !content.review_state ||
+            transitions.length === 0 ||
+            transitionLoading ||
+            (showWarningModal && linkintegrityLoading)
+          }
+          options={uniqBy(
+            transitions.map((transition) => getWorkflowOptions(transition)),
+            'label',
+          ).concat(currentStateValue)}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            DropdownIndicator,
+            Placeholder,
+            Option,
+            SingleValue,
+          }}
+          onChange={transition}
+          value={
+            content.review_state
+              ? currentStateValue
+              : {
+                  label: intl.formatMessage(messages.messageNoWorkflow),
+                  value: 'noworkflow',
+                }
+          }
+          isSearchable={false}
+        />
+      </FormFieldWrapper>
+      <WorkflowLinkIntegrityModal
+        open={showWarningModal}
+        onCancel={() => {
+          setShowWarningModal(false);
+          setPendingOption(null);
+        }}
+        onOk={() => {
+          executeTransition(pendingOption);
+          setShowWarningModal(false);
+          setPendingOption(null);
+        }}
+      />
+    </>
+  );
+};
+
+Workflow.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
+
+export default compose(injectLazyLibs(['reactSelect']))(Workflow);