@eeacms/volto-cca-policy 0.3.117 → 0.3.119

package/CHANGELOG.md

@@ -4,6 +4,45 @@ 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).
 
+### [0.3.119](https://github.com/eea/volto-cca-policy/compare/0.3.118...0.3.119) - 30 April 2026
+
+#### :rocket: New Features
+
+- feat: add ArchivedVersionListing component and update DatabaseItemView to display archived indicator versions [kreafox - [`858e868`](https://github.com/eea/volto-cca-policy/commit/858e868f124642cd112fea45f079a13dcd27d39e)]
+
+#### :hammer_and_wrench: Others
+
+- test: add unit tests for ArchivedVersionListing component [kreafox - [`010ef2c`](https://github.com/eea/volto-cca-policy/commit/010ef2c127bf851ab602cb1518d1e1012894e2d9)]
+- test: update ArchivedVersionNotice test cases to use archived_versions instead of relatedItems [kreafox - [`09a7619`](https://github.com/eea/volto-cca-policy/commit/09a761987dc28b710798effb62496eb6d6165543)]
+### [0.3.118](https://github.com/eea/volto-cca-policy/compare/0.3.117...0.3.118) - 28 April 2026
+
+#### :rocket: New Features
+
+- feat: Add archived version notice and versions group for indicators [Tiberiu Ichim - [`10a4a52`](https://github.com/eea/volto-cca-policy/commit/10a4a5285cfd352e48300fbc6d8b89652151dda1)]
+
+#### :bug: Bug Fixes
+
+- fix: Import INDICATOR from correct constants module [Tiberiu Ichim - [`b2c3ae4`](https://github.com/eea/volto-cca-policy/commit/b2c3ae4b43ae69ae5a8da92ed6a6461d1ca2fdba)]
+- fix: Add missing INDICATOR import, comment out unused VersionsGroup import [Tiberiu Ichim - [`0578df8`](https://github.com/eea/volto-cca-policy/commit/0578df8636e9ed4f48b0ed7f72114755c6d12dc4)]
+- fix: Use expandToBackendURL for API POST to avoid 404 [Tiberiu Ichim - [`9eb849c`](https://github.com/eea/volto-cca-policy/commit/9eb849cf2291e80610d50cf73d0b693a8feef051)]
+
+#### :nail_care: Enhancements
+
+- change: Stay on page and show toast after creating archived copy [Tiberiu Ichim - [`26665ba`](https://github.com/eea/volto-cca-policy/commit/26665ba17d33a48faf3d2d69a6de3e86c2a43cb6)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`4c4f710`](https://github.com/eea/volto-cca-policy/commit/4c4f7107cff730f022da14506385f96a410a8654)]
+- style: Automated code fix [eea-jenkins - [`b520b39`](https://github.com/eea/volto-cca-policy/commit/b520b3945fccd8075912cac73aa17faf42dbf49f)]
+- style: Automated code fix [eea-jenkins - [`d8224b1`](https://github.com/eea/volto-cca-policy/commit/d8224b1a96182fa1fdeabe0fb4ca95fb20c27cd5)]
+
+#### :hammer_and_wrench: Others
+
+- Add tests for archived indicator components [Tiberiu Ichim - [`bf6209e`](https://github.com/eea/volto-cca-policy/commit/bf6209eb71893d8d501af212d54929afe35e1ddc)]
+- Merge develop into archived_indicators [Tiberiu Ichim - [`b269ff4`](https://github.com/eea/volto-cca-policy/commit/b269ff4f157f52b4d837f3818b1c621a5644de59)]
+- comment out VersionsGroup - relatedItems already shows versions [Tiberiu Ichim - [`a86c9d4`](https://github.com/eea/volto-cca-policy/commit/a86c9d4b6d2fbd94a107f76625f11c9aeb557117)]
+- Merge remote automated code fix [Tiberiu Ichim - [`c52789f`](https://github.com/eea/volto-cca-policy/commit/c52789f4c87683fd10690b7a78cd048663b407fe)]
+- Add button [Tiberiu Ichim - [`1ea8db9`](https://github.com/eea/volto-cca-policy/commit/1ea8db90e7ca741700b87caa315c029235b13684)]
 ### [0.3.117](https://github.com/eea/volto-cca-policy/compare/0.3.116...0.3.117) - 28 April 2026
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/index.js

@@ -11,3 +11,11 @@ export { default as AccordionList } from './theme/AccordionList/AccordionList';
 // Widgets
 export { default as RASTWidgetView } from './theme/Widgets/RASTWidgetView';
 export { default as ImageWidget } from './theme/Widgets/ImageWidget';
+
+// Manage
+export { default as CreateArchivedCopyButton } from './manage/CreateArchivedCopyButton/CreateArchivedCopyButton';
+
+// Views
+export { default as ArchivedVersionListing } from './theme/Views/ArchivedVersionListing';
+export { default as ArchivedVersionNotice } from './theme/Views/ArchivedVersionNotice';
+export { default as VersionsGroup } from './theme/Views/VersionsGroup';

package/src/components/manage/CreateArchivedCopyButton/CreateArchivedCopyButton.jsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import { Modal, Button, Form, Message } from 'semantic-ui-react';
+import superagent from 'superagent';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+import { flattenToAppURL, expandToBackendURL } from '@plone/volto/helpers';
+import { INDICATOR } from '@eeacms/volto-cca-policy/constants';
+
+function CreateArchivedCopyButton(props) {
+  const { content, token } = props;
+  const [open, setOpen] = React.useState(false);
+  const [title, setTitle] = React.useState('');
+  const [id, setId] = React.useState('');
+  const [error, setError] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+
+  const contentId = content?.['@id'] || '';
+  const contentType = content?.['@type'];
+  const reviewState = content?.review_state;
+  const originalId = content?.id;
+
+  const show =
+    !!token && contentType === INDICATOR && reviewState === 'published';
+
+  const handleOpen = () => {
+    setTitle(content?.title ? `${content.title} (Archived)` : '');
+    setId(originalId ? `${originalId}-v2` : '');
+    setError(null);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setError(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!id || id === originalId) {
+      setError('You must change the ID of the archived copy.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const url = expandToBackendURL(contentId);
+      const response = await superagent
+        .post(`${url}/@create-archived-copy`)
+        .set('Accept', 'application/json')
+        .set('Content-Type', 'application/json')
+        .send({ title, id });
+
+      const newUrl = flattenToAppURL(response.body['@id']);
+      setOpen(false);
+      setLoading(false);
+      setTitle('');
+      setId('');
+      toast.success(
+        <Toast
+          success
+          title="Archived copy created"
+          content={`The archived copy has been created. You can view it here: ${newUrl}`}
+        />,
+      );
+    } catch (err) {
+      const message =
+        err.response?.body?.message ||
+        err.response?.text ||
+        err.message ||
+        'An error occurred while creating the archived copy.';
+      setError(message);
+      setLoading(false);
+    }
+  };
+
+  if (!show) return null;
+
+  return (
+    <>
+      <Plug
+        pluggable="main.toolbar.top"
+        id="create-archived-copy"
+        order={5}
+        dependencies={[contentId]}
+      >
+        <button
+          className="circle-right-btn"
+          id="create-archived-copy-btn"
+          onClick={handleOpen}
+          title="Create an archived copy"
+        >
+          AC
+        </button>
+      </Plug>
+
+      <Modal size="small" open={open} onClose={handleClose} closeIcon>
+        <Modal.Header>Create an archived copy</Modal.Header>
+        <Modal.Content>
+          {error && (
+            <Message negative>
+              <Message.Header>Error</Message.Header>
+              <p>{error}</p>
+            </Message>
+          )}
+          <Form>
+            <Form.Field>
+              <label>Title</label>
+              <input
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Title of the archived copy"
+              />
+            </Form.Field>
+            <Form.Field>
+              <label>ID</label>
+              <input
+                value={id}
+                onChange={(e) => setId(e.target.value)}
+                placeholder="ID of the archived copy"
+              />
+              {id === originalId && (
+                <small style={{ color: '#db2828' }}>
+                  The ID must be different from the original indicator.
+                </small>
+              )}
+            </Form.Field>
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={handleClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            primary
+            onClick={handleSubmit}
+            loading={loading}
+            disabled={!id || id === originalId}
+          >
+            Create
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+}
+
+export default connect((state) => ({
+  content: state.content.data,
+  token: state.userSession.token,
+}))(CreateArchivedCopyButton);

package/src/components/manage/CreateArchivedCopyButton/CreateArchivedCopyButton.test.jsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { render, fireEvent } from '@testing-library/react';
+import CreateArchivedCopyButton from './CreateArchivedCopyButton';
+import { INDICATOR } from '@eeacms/volto-cca-policy/constants';
+
+jest.mock('@plone/volto/components/manage/Pluggable', () => ({
+  Plug: ({ children }) => <>{children}</>,
+}));
+
+jest.mock('superagent', () => ({
+  post: jest.fn(() => ({
+    set: jest.fn(() => ({
+      set: jest.fn(() => ({
+        send: jest.fn(() =>
+          Promise.resolve({
+            body: { '@id': 'http://localhost:3000/my-indicator-v2' },
+          }),
+        ),
+      })),
+    })),
+  })),
+}));
+
+jest.mock('react-toastify', () => ({
+  toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  Toast: () => null,
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  flattenToAppURL: (url) => url.replace('http://localhost:3000', ''),
+  expandToBackendURL: (url) =>
+    url.replace('http://localhost:3000', 'http://localhost:8080/Plone'),
+}));
+
+const mockStore = configureStore();
+
+function makeStore(contentOverrides = {}, token = '1234') {
+  return mockStore({
+    content: {
+      data: {
+        '@type': INDICATOR,
+        review_state: 'published',
+        '@id': 'http://localhost:3000/my-indicator',
+        id: 'my-indicator',
+        title: 'My Indicator',
+        ...contentOverrides,
+      },
+    },
+    userSession: { token },
+    intl: { locale: 'en', messages: {} },
+  });
+}
+
+function renderWithProviders(ui, store) {
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </Provider>,
+  );
+}
+
+describe('CreateArchivedCopyButton', () => {
+  it('returns null when user is not logged in', () => {
+    const store = makeStore({}, null);
+    const { container } = renderWithProviders(
+      <CreateArchivedCopyButton />,
+      store,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('returns null for non-indicator content type', () => {
+    const store = makeStore({ '@type': 'Document' });
+    const { container } = renderWithProviders(
+      <CreateArchivedCopyButton />,
+      store,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('returns null for non-published indicator', () => {
+    const store = makeStore({ review_state: 'draft' });
+    const { container } = renderWithProviders(
+      <CreateArchivedCopyButton />,
+      store,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders the button for a published indicator with a logged-in user', () => {
+    const store = makeStore();
+    const { container } = renderWithProviders(
+      <CreateArchivedCopyButton />,
+      store,
+    );
+    expect(
+      container.querySelector('#create-archived-copy-btn'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('#create-archived-copy-btn').title).toBe(
+      'Create an archived copy',
+    );
+  });
+
+  it('opens modal when button is clicked', () => {
+    const store = makeStore();
+    const { container, getByText } = renderWithProviders(
+      <CreateArchivedCopyButton />,
+      store,
+    );
+    fireEvent.click(container.querySelector('#create-archived-copy-btn'));
+    expect(getByText('Create an archived copy')).toBeInTheDocument();
+    expect(getByText('Cancel')).toBeInTheDocument();
+    expect(getByText('Create')).toBeInTheDocument();
+  });
+
+  it('closes modal on cancel', () => {
+    const store = makeStore();
+    const { container, getByText, queryByText } = renderWithProviders(
+      <CreateArchivedCopyButton />,
+      store,
+    );
+    fireEvent.click(container.querySelector('#create-archived-copy-btn'));
+    expect(getByText('Create an archived copy')).toBeInTheDocument();
+    fireEvent.click(getByText('Cancel'));
+    expect(queryByText('Title')).toBeNull();
+  });
+});

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { AccordionList } from '@eeacms/volto-cca-policy/components';
+
+function ArchivedVersionListing({ content }) {
+  const { archived_versions } = content;
+
+  const items = archived_versions?.map((version) => (
+    <div key={version['@id']}>
+      <Link to={flattenToAppURL(version['@id'])}>
+        {version.title || flattenToAppURL(version['@id'])}
+      </Link>
+    </div>
+  ));
+
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <AccordionList
+      variation="secondary"
+      accordions={[
+        {
+          title: (
+            <FormattedMessage
+              id="Previous versions of this indicator"
+              defaultMessage="Previous versions of this indicator"
+            />
+          ),
+          content: items,
+        },
+      ]}
+    />
+  );
+}
+
+export default ArchivedVersionListing;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import ArchivedVersionListing from './ArchivedVersionListing';
+
+jest.mock('@plone/volto/helpers', () => ({
+  flattenToAppURL: (url) => url.replace('http://localhost:3000', ''),
+}));
+
+jest.mock('@eeacms/volto-cca-policy/components', () => ({
+  AccordionList: ({ accordions }) => (
+    <div className="accordion-list">
+      {accordions.map((accordion, index) => (
+        <div key={index}>
+          <div>{accordion.title}</div>
+          <div>{accordion.content}</div>
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe('ArchivedVersionListing', () => {
+  it('returns null when there are no archived versions', () => {
+    const content = {
+      archived_versions: [],
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <ArchivedVersionListing content={content} />
+      </MemoryRouter>,
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('returns null when archived_versions is missing', () => {
+    const content = {};
+
+    const { container } = render(
+      <MemoryRouter>
+        <ArchivedVersionListing content={content} />
+      </MemoryRouter>,
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders archived version links', () => {
+    const content = {
+      archived_versions: [
+        {
+          '@id': 'http://localhost:3000/indicator-v1',
+          title: 'Indicator v1',
+        },
+        {
+          '@id': 'http://localhost:3000/indicator-v2',
+          title: 'Indicator v2',
+        },
+      ],
+    };
+
+    render(
+      <MemoryRouter>
+        <ArchivedVersionListing content={content} />
+      </MemoryRouter>,
+    );
+
+    expect(
+      screen.getByText('Previous versions of this indicator'),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText('Indicator v1')).toHaveAttribute(
+      'href',
+      '/indicator-v1',
+    );
+
+    expect(screen.getByText('Indicator v2')).toHaveAttribute(
+      'href',
+      '/indicator-v2',
+    );
+  });
+
+  it('uses the URL as link text when title is missing', () => {
+    const content = {
+      archived_versions: [
+        {
+          '@id': 'http://localhost:3000/indicator-v1',
+        },
+      ],
+    };
+
+    render(
+      <MemoryRouter>
+        <ArchivedVersionListing content={content} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('/indicator-v1')).toHaveAttribute(
+      'href',
+      '/indicator-v1',
+    );
+  });
+});

package/src/components/theme/Views/ArchivedVersionNotice.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Message } from 'semantic-ui-react';
+import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+function ArchivedVersionNotice({ content }) {
+  if (content?.review_state !== 'archived') return null;
+
+  const archivedVersions = content?.archived_versions || [];
+  const latestVersion = archivedVersions.find(
+    (item) => item.review_state === 'published',
+  );
+
+  if (!latestVersion) return null;
+
+  const latestUrl = flattenToAppURL(latestVersion['@id']);
+
+  return (
+    <Message info className="archived-version-notice">
+      <Message.Content>
+        <FormattedMessage
+          id="You are viewing an archived version."
+          defaultMessage="You are viewing an archived version."
+        />{' '}
+        <Link to={latestUrl}>
+          <FormattedMessage
+            id="View latest version"
+            defaultMessage="View latest version"
+          />
+        </Link>
+      </Message.Content>
+    </Message>
+  );
+}
+
+export default ArchivedVersionNotice;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import ArchivedVersionNotice from './ArchivedVersionNotice';
+
+const mockStore = configureStore();
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('ArchivedVersionNotice', () => {
+  it('returns null when content is not archived', () => {
+    const content = {
+      '@type': 'Document',
+      review_state: 'published',
+      archived_versions: [],
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ArchivedVersionNotice content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('returns null when archived but no published related item', () => {
+    const content = {
+      '@type': 'Document',
+      review_state: 'archived',
+      archived_versions: [
+        {
+          '@id': 'http://localhost:3000/another-archived',
+          review_state: 'archived',
+        },
+      ],
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ArchivedVersionNotice content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders a notice with a link to the published version', () => {
+    const content = {
+      '@id': 'http://localhost:3000/archived-indicator',
+      '@type': 'Indicator',
+      review_state: 'archived',
+      title: 'My Indicator (Archived)',
+      archived_versions: [
+        {
+          '@id': 'http://localhost:3000/my-indicator',
+          review_state: 'published',
+          title: 'My Indicator',
+        },
+      ],
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ArchivedVersionNotice content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      container.querySelector('.archived-version-notice'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('a')).toHaveAttribute(
+      'href',
+      '/my-indicator',
+    );
+  });
+});

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

@@ -12,7 +12,11 @@ import {
   flourishDataprotection,
   getDataSrcFromEmbedCode,
 } from '@eeacms/volto-cca-policy/helpers/flourishUtils';
-import { VIDEO, CONTENT_TYPE_LABELS } from '@eeacms/volto-cca-policy/constants';
+import {
+  VIDEO,
+  INDICATOR,
+  CONTENT_TYPE_LABELS,
+} from '@eeacms/volto-cca-policy/constants';
 import {
   HTMLField,
   ReferenceInfo,
@@ -24,6 +28,11 @@ import {
   ExternalLink,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
+import {
+  ArchivedVersionNotice,
+  ArchivedVersionListing,
+  // VersionsGroup, // commented out - relatedItems already shows versions
+} from '@eeacms/volto-cca-policy/components';
 
 const SHARE_EEA = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
 
@@ -133,6 +142,7 @@ const BottomInfo = (props) => {
 
       <ContentRelatedItems {...props} />
       <PublishedModifiedInfo {...props} />
+      {/* <VersionsGroup {...props} /> */}
       <ShareInfoButton {...props} />
     </>
   );
@@ -176,6 +186,7 @@ const DatabaseItemView = (props) => {
       />
 
       <Container>
+        {type === INDICATOR && <ArchivedVersionNotice content={content} />}
         <PortalMessage content={content} />
         <Grid columns="12">
           <Grid.Row>
@@ -287,6 +298,8 @@ const DatabaseItemView = (props) => {
             </>
           )}
         </Grid>
+
+        {type === INDICATOR && <ArchivedVersionListing content={content} />}
       </Container>
     </div>
   );

package/src/components/theme/Views/VersionsGroup.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+function VersionsGroup({ content }) {
+  const relatedItems = content?.relatedItems || [];
+  const currentId = content?.['@id'];
+  const currentState = content?.review_state;
+
+  // Find the latest (published) version
+  const latestFromRelated = relatedItems.find(
+    (item) => item.review_state === 'published',
+  );
+
+  // The latest version is either the current object (if published)
+  // or the published item found in relatedItems
+  const latestVersion =
+    currentState === 'published'
+      ? { '@id': currentId, title: content?.title, created: content?.created }
+      : latestFromRelated;
+
+  // Collect archived versions:
+  // - If current is published: archived copies are in relatedItems
+  // - If current is archived: include current object + any archived copies in relatedItems
+  let archivedVersions = relatedItems.filter(
+    (item) => item.review_state === 'archived',
+  );
+
+  if (currentState === 'archived') {
+    // Ensure the current archived copy is included in the list
+    const currentInList = archivedVersions.some(
+      (item) => item['@id'] === currentId,
+    );
+    if (!currentInList) {
+      archivedVersions = [
+        ...archivedVersions,
+        {
+          '@id': currentId,
+          title: content?.title,
+          created: content?.created,
+        },
+      ];
+    }
+  }
+
+  // Sort by creation date ascending
+  archivedVersions.sort((a, b) => new Date(a.created) - new Date(b.created));
+
+  // Build the full version list: latest first, then archived copies
+  const versions = [];
+  if (latestVersion) {
+    versions.push({ ...latestVersion, isLatest: true });
+  }
+  versions.push(...archivedVersions.map((v) => ({ ...v, isLatest: false })));
+
+  if (versions.length <= 1) return null;
+
+  return (
+    <div className="versions-group">
+      <h5>
+        <FormattedMessage id="Versions" defaultMessage="Versions" />
+      </h5>
+      <ul>
+        {versions.map((version) => {
+          const url = flattenToAppURL(version['@id']);
+          const isCurrent = version['@id'] === currentId;
+          return (
+            <li key={version['@id']}>
+              {isCurrent ? (
+                <strong>
+                  {version.title}
+                  {version.isLatest && (
+                    <span>
+                      {' '}
+                      (
+                      <FormattedMessage id="latest" defaultMessage="latest" />)
+                    </span>
+                  )}
+                </strong>
+              ) : (
+                <Link to={url}>
+                  {version.title}
+                  {version.isLatest && (
+                    <span>
+                      {' '}
+                      (
+                      <FormattedMessage id="latest" defaultMessage="latest" />)
+                    </span>
+                  )}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default VersionsGroup;

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import VersionsGroup from './VersionsGroup';
+
+const mockStore = configureStore();
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('VersionsGroup', () => {
+  it('returns null when there is only one version', () => {
+    const content = {
+      '@id': 'http://localhost:3000/my-indicator',
+      '@type': 'Indicator',
+      review_state: 'published',
+      title: 'My Indicator',
+      created: '2024-01-01T00:00:00Z',
+      relatedItems: [],
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <VersionsGroup content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders versions list with published as latest', () => {
+    const content = {
+      '@id': 'http://localhost:3000/my-indicator',
+      '@type': 'Indicator',
+      review_state: 'published',
+      title: 'My Indicator',
+      created: '2024-01-01T00:00:00Z',
+      relatedItems: [
+        {
+          '@id': 'http://localhost:3000/my-indicator-v2',
+          review_state: 'archived',
+          title: 'My Indicator (Archived)',
+          created: '2024-06-01T00:00:00Z',
+        },
+      ],
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <VersionsGroup content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.querySelector('.versions-group')).toBeInTheDocument();
+    expect(container.querySelectorAll('li')).toHaveLength(2);
+    expect(container.querySelector('strong')).toBeInTheDocument();
+  });
+
+  it('renders versions when viewing an archived copy', () => {
+    const content = {
+      '@id': 'http://localhost:3000/my-indicator-v2',
+      '@type': 'Indicator',
+      review_state: 'archived',
+      title: 'My Indicator (Archived)',
+      created: '2024-06-01T00:00:00Z',
+      relatedItems: [
+        {
+          '@id': 'http://localhost:3000/my-indicator',
+          review_state: 'published',
+          title: 'My Indicator',
+          created: '2024-01-01T00:00:00Z',
+        },
+      ],
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <VersionsGroup content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.querySelector('.versions-group')).toBeInTheDocument();
+    expect(container.querySelectorAll('li')).toHaveLength(2);
+    const links = container.querySelectorAll('li a');
+    expect(links.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('sorts archived versions by creation date ascending', () => {
+    const content = {
+      '@id': 'http://localhost:3000/my-indicator',
+      '@type': 'Indicator',
+      review_state: 'published',
+      title: 'My Indicator',
+      created: '2024-01-01T00:00:00Z',
+      relatedItems: [
+        {
+          '@id': 'http://localhost:3000/my-indicator-v3',
+          review_state: 'archived',
+          title: 'My Indicator v3',
+          created: '2024-12-01T00:00:00Z',
+        },
+        {
+          '@id': 'http://localhost:3000/my-indicator-v2',
+          review_state: 'archived',
+          title: 'My Indicator v2',
+          created: '2024-06-01T00:00:00Z',
+        },
+      ],
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <VersionsGroup content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const items = container.querySelectorAll('li');
+    expect(items).toHaveLength(3);
+    expect(items[1].textContent).toContain('v2');
+    expect(items[2].textContent).toContain('v3');
+  });
+});

package/src/index.js

@@ -9,6 +9,7 @@ import {
   TranslationDisclaimer,
   RedirectToLogin,
   MissionSignatoryProfileView,
+  CreateArchivedCopyButton,
   ImageWidget,
 } from '@eeacms/volto-cca-policy/components';
 
@@ -509,6 +510,10 @@ const applyConfig = (config) => {
       match: '',
       component: TranslationDisclaimer,
     },
+    {
+      match: '',
+      component: CreateArchivedCopyButton,
+    },
     {
       match: {
         path: /^.*\/add$/,