@eeacms/volto-marine-policy 3.0.2 → 3.0.3

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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).
 
+### [3.0.3](https://github.com/eea/volto-marine-policy/compare/3.0.2...3.0.3) - 11 June 2026
+
+#### :rocket: New Features
+
+- feat: added button to show NIS duplicates [laszlocseh - [`591927c`](https://github.com/eea/volto-marine-policy/commit/591927ca76c693d8d33d7b9ab8bdedc10368c0f2)]
+- feat: added button to copy a NIS listing item [laszlocseh - [`588a5fe`](https://github.com/eea/volto-marine-policy/commit/588a5fe1409292a5df742590d615e230dc09ebd9)]
+
+#### :hammer_and_wrench: Others
+
+- test: fix NISListingView.test.jsx [laszlocseh - [`0ba486d`](https://github.com/eea/volto-marine-policy/commit/0ba486d1058bc71fe73ef53e628fd7c5423688ae)]
+- test: added NISListingView.test.jsx [laszlocseh - [`4c54331`](https://github.com/eea/volto-marine-policy/commit/4c54331dd40f178dfd88dcc0d73d1eb96d2834e6)]
 ### [3.0.2](https://github.com/eea/volto-marine-policy/compare/3.0.1...3.0.2) - 10 June 2026
 
 #### :rocket: Dependency updates

package/package.json

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

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

@@ -78,6 +78,9 @@ const NISListingView = ({ items, isEditMode }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   const [itemsTotal, setItemsTotal] = useState(0);
+  const [duplicateIds, setDuplicateIds] = useState(null);
+  const [duplicateGroups, setDuplicateGroups] = useState([]);
+
   const [users, setUsers] = useState([]);
   const [assignee, setAssignee] = useState(null);
   const actions = useSelector((state) => state.actions.actions);
@@ -128,6 +131,43 @@ const NISListingView = ({ items, isEditMode }) => {
     window.location.reload();
   };
 
+  const handleCopy = async (item) => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(
+        `${window.env.apiPath}${item['@id']}/@copy-nis-record`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+          credentials: 'include',
+        },
+      );
+      if (res.ok) {
+        window.location.reload();
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Copy failed:', err);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const parsed = qs.parse(window.location.search);
+    if (parsed['check-duplicates']) {
+      const containerPath = window.location.pathname.replace('/marine', '');
+      fetch(`${window.env.apiPath}${containerPath}/@check-nis-duplicates`)
+        .then((res) => res.json())
+        .then((data) => {
+          setDuplicateIds(new Set(data.duplicate_ids));
+          setDuplicateGroups(data.groups || []);
+        });
+    }
+  }, []);
+
   useEffect(() => {
     const fetchUsers = async () => {
       const res = await fetch(
@@ -183,9 +223,45 @@ const NISListingView = ({ items, isEditMode }) => {
               <i className="ri-file-download-line"></i>
               Download search results
             </a>
+            <Button
+              className="primary"
+              size="small"
+              onClick={() => {
+                const parsed = qs.parse(window.location.search);
+                parsed['check-duplicates'] = '1';
+                window.location.search = qs.stringify(parsed);
+              }}
+            >
+              Check duplicates
+            </Button>
           </div>
         </div>
       )}
+      {duplicateIds && (
+        <div
+          style={{
+            background: '#fff3cd',
+            border: '1px solid #ffc107',
+            padding: '10px 15px',
+            marginBottom: '15px',
+            borderRadius: '4px',
+          }}
+        >
+          Showing {items.filter((i) => duplicateIds.has(i['@id'])).length}{' '}
+          duplicate records across {duplicateGroups.length} groups
+          <a
+            href={(() => {
+              const p = qs.parse(window.location.search);
+              delete p['check-duplicates'];
+              const q = qs.stringify(p);
+              return `${window.location.pathname}${q ? '?' + q : ''}`;
+            })()}
+            style={{ marginLeft: '10px', fontSize: '0.9em' }}
+          >
+            Clear
+          </a>
+        </div>
+      )}
       <table className="ui table">
         <thead>
           <tr>
@@ -197,12 +273,16 @@ const NISListingView = ({ items, isEditMode }) => {
             <th>Country</th>
             <th>Status</th>
             <th>Group</th>
+            <th>Year</th>
             <th>Assigned to</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
-          {items.map((item, index) => (
+          {(duplicateIds
+            ? items.filter((item) => duplicateIds.has(item['@id']))
+            : items
+          ).map((item, index) => (
             <tr key={item['@id']}>
               <td>{item.nis_species_name_original}</td>
               <td>{item.nis_species_name_accepted}</td>
@@ -212,6 +292,7 @@ const NISListingView = ({ items, isEditMode }) => {
               <td>{item.nis_country}</td>
               <td>{item.nis_status}</td>
               <td>{item.nis_group}</td>
+              <td>{item.nis_year}</td>
               <td>
                 <div className="assigned-to-container">
                   <div>{formatAssignedTo(item.nis_assigned_to)}</div>
@@ -229,15 +310,27 @@ const NISListingView = ({ items, isEditMode }) => {
                     <UniversalLink
                       className="ui button secondary mini"
                       href={`${item['@id']}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
                     >
                       View
                     </UniversalLink>
                     <UniversalLink
                       className="ui button primary mini"
                       href={`${item['@id']}/edit`}
+                      target="_blank"
+                      rel="noopener noreferrer"
                     >
                       Edit
                     </UniversalLink>
+                    {canEditPage && (
+                      <Button
+                        className="tertiary mini"
+                        onClick={() => handleCopy(item)}
+                      >
+                        Copy
+                      </Button>
+                    )}
                   </div>
                   <div className="workflow-progress">
                     <ProgressWorkflow

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

@@ -0,0 +1,444 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import NISListingView from './NISListingView';
+
+const mockUseSelector = jest.fn();
+
+jest.mock('react-redux', () => ({
+  __esModule: true,
+  ...jest.requireActual('react-redux'),
+  useSelector: (selector) => mockUseSelector(selector),
+}));
+
+jest.mock(
+  '@plone/volto/components/manage/UniversalLink/UniversalLink',
+  () =>
+    function MockUniversalLink({ href, children, className }) {
+      return (
+        <a href={href} className={className}>
+          {children}
+        </a>
+      );
+    },
+);
+
+jest.mock(
+  '@eeacms/volto-marine-policy/components/theme/ProgressWorkflow/ProgressWorkflow',
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="progress-workflow" />,
+  }),
+);
+
+const mockStore = configureStore();
+
+function buildItems(count = 3) {
+  return Array.from({ length: count }, (_, i) => ({
+    '@id': `/marine/item-${i + 1}`,
+    nis_species_name_original: `Species ${i + 1}`,
+    nis_species_name_accepted: `Species ${i + 1} accepted`,
+    nis_scientificname_accepted: `Scientificus acceptus ${i + 1}`,
+    nis_region: 'Europe',
+    nis_subregion: 'Western Europe',
+    nis_country: 'France',
+    nis_status: 'Established',
+    nis_group: 'Fish',
+    nis_year: 2020 + i,
+    nis_assigned_to: `User ${i + 1} (user${i + 1})`,
+  }));
+}
+
+function renderComponent(props = {}) {
+  const { items = buildItems(), ...rest } = props;
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+  });
+  return render(
+    <Provider store={store}>
+      <NISListingView items={items} {...rest} />
+    </Provider>,
+  );
+}
+
+describe('NISListingView', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({ items: [] }),
+        ok: true,
+      }),
+    );
+
+    delete window.location;
+    window.location = {
+      href: 'http://localhost:3000/marine/test-path',
+      pathname: '/marine/test-path',
+      search: '',
+      reload: jest.fn(),
+    };
+
+    window.env = { apiPath: 'http://localhost:8080/Plone' };
+
+    global.fetch.mockImplementation((url) => {
+      if (typeof url === 'string' && url.includes('nis_experts_vocabulary')) {
+        return Promise.resolve({
+          json: () =>
+            Promise.resolve({
+              items: [
+                { token: 'jdoe', title: 'John Doe (jdoe)' },
+                { token: 'asmith', title: 'Alice Smith (asmith)' },
+              ],
+            }),
+        });
+      }
+      if (typeof url === 'string' && url.includes('check-nis-duplicates')) {
+        return Promise.resolve({
+          json: () =>
+            Promise.resolve({
+              duplicate_ids: [],
+              groups: [],
+            }),
+        });
+      }
+      return Promise.resolve({
+        json: () => Promise.resolve({}),
+        ok: true,
+      });
+    });
+
+    mockUseSelector.mockReturnValue({
+      object: [{ id: 'edit' }],
+    });
+  });
+
+  describe('table rendering', () => {
+    it('renders all column headers', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species name original')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Species name accepted')).toBeInTheDocument();
+      expect(screen.getByText('Scientific name accepted')).toBeInTheDocument();
+      expect(screen.getByText('Region')).toBeInTheDocument();
+      expect(screen.getByText('Subregion')).toBeInTheDocument();
+      expect(screen.getByText('Country')).toBeInTheDocument();
+      expect(screen.getByText('Status')).toBeInTheDocument();
+      expect(screen.getByText('Group')).toBeInTheDocument();
+      expect(screen.getByText('Year')).toBeInTheDocument();
+      expect(screen.getByText('Assigned to')).toBeInTheDocument();
+    });
+
+    it('renders one row per item', async () => {
+      renderComponent({ items: buildItems(3) });
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(4);
+    });
+
+    it('renders item data in correct columns', async () => {
+      const items = [
+        {
+          '@id': '/marine/item-x',
+          nis_species_name_original: 'Alienus maximus original',
+          nis_species_name_accepted: 'Alienus maximus (Linnaeus)',
+          nis_scientificname_accepted: 'Alienus maximus scientific',
+          nis_region: 'Asia',
+          nis_subregion: 'South Asia',
+          nis_country: 'India',
+          nis_status: 'Invasive',
+          nis_group: 'Plant',
+          nis_year: 2023,
+          nis_assigned_to: 'Jane Expert (jexpert)',
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(
+          screen.getByText('Alienus maximus original'),
+        ).toBeInTheDocument();
+      });
+      expect(
+        screen.getByText('Alienus maximus (Linnaeus)'),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('Alienus maximus scientific'),
+      ).toBeInTheDocument();
+      expect(screen.getByText('Asia')).toBeInTheDocument();
+      expect(screen.getByText('South Asia')).toBeInTheDocument();
+      expect(screen.getByText('India')).toBeInTheDocument();
+      expect(screen.getByText('Invasive')).toBeInTheDocument();
+      expect(screen.getByText('Plant')).toBeInTheDocument();
+      expect(screen.getByText('2023')).toBeInTheDocument();
+    });
+
+    it('renders an empty table body when items is empty', async () => {
+      renderComponent({ items: [] });
+      await waitFor(() => {
+        expect(screen.getByText('Species name original')).toBeInTheDocument();
+      });
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(1);
+    });
+  });
+
+  describe('formatAssignedTo — rendered output', () => {
+    it('strips the (userid) suffix from assigned_to', async () => {
+      const items = [
+        {
+          ...buildItems(1)[0],
+          nis_assigned_to: 'Jane Expert (jexpert)',
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText('Jane Expert')).toBeInTheDocument();
+      });
+      expect(screen.queryByText('Jane Expert (jexpert)')).toBeNull();
+    });
+
+    it('decodes Python \\U escape sequences in assigned_to', async () => {
+      const items = [
+        {
+          ...buildItems(1)[0],
+          nis_assigned_to:
+            '\\U000000d6sterreich User (\\U000000d6sterreichUser)',
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText('Österreich User')).toBeInTheDocument();
+      });
+    });
+
+    it('shows empty string when assigned_to is null', async () => {
+      const items = [
+        {
+          ...buildItems(1)[0],
+          nis_assigned_to: null,
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const containers = document.querySelectorAll('.assigned-to-container');
+      expect(containers.length).toBeGreaterThan(0);
+      expect(containers[0].firstChild.textContent).toBe('');
+    });
+  });
+
+  describe('admin controls — canEditPage', () => {
+    it('shows assign, download, and check-duplicates buttons when user can edit', async () => {
+      mockUseSelector.mockReturnValue({
+        object: [{ id: 'edit' }],
+      });
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Assign search results')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Download search results')).toBeInTheDocument();
+      expect(screen.getByText('Check duplicates')).toBeInTheDocument();
+    });
+
+    it('hides admin controls when user cannot edit', async () => {
+      mockUseSelector.mockReturnValue({
+        object: [],
+      });
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species name original')).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByText('Assign search results'),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('Download search results'),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByText('Check duplicates')).not.toBeInTheDocument();
+    });
+
+    it('hides checkboxes and Copy button when user cannot edit', async () => {
+      mockUseSelector.mockReturnValue({
+        object: [],
+      });
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      expect(document.querySelector('.ui.checkbox')).toBeNull();
+      expect(screen.queryByText('Copy')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('duplicate checking', () => {
+    beforeEach(() => {
+      window.location.search = '?check-duplicates=1';
+    });
+
+    function mockDuplicateFetch(duplicateIds, groups) {
+      global.fetch.mockImplementation((url) => {
+        if (typeof url === 'string' && url.includes('nis_experts_vocabulary')) {
+          return Promise.resolve({
+            json: () =>
+              Promise.resolve({
+                items: [{ token: 'jdoe', title: 'John Doe (jdoe)' }],
+              }),
+          });
+        }
+        if (typeof url === 'string' && url.includes('check-nis-duplicates')) {
+          return Promise.resolve({
+            json: () =>
+              Promise.resolve({
+                duplicate_ids: duplicateIds,
+                groups: groups,
+              }),
+          });
+        }
+        return Promise.resolve({
+          json: () => Promise.resolve({}),
+          ok: true,
+        });
+      });
+    }
+
+    it('shows the duplicate info banner when check-duplicates param is set', async () => {
+      mockDuplicateFetch(
+        ['/marine/item-1', '/marine/item-3'],
+        [{ id: 1 }, { id: 2 }],
+      );
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText(/duplicate records/)).toBeInTheDocument();
+      });
+      expect(screen.getByText(/2 duplicate records/)).toBeInTheDocument();
+      expect(screen.getByText(/2 groups/)).toBeInTheDocument();
+    });
+
+    it('filters table to show only duplicate items', async () => {
+      mockDuplicateFetch(
+        ['/marine/item-1', '/marine/item-3'],
+        [{ id: 1 }, { id: 2 }],
+      );
+      const items = buildItems(5);
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText(/duplicate records/)).toBeInTheDocument();
+      });
+      expect(screen.getByText('Species 1')).toBeInTheDocument();
+      expect(screen.getByText('Species 3')).toBeInTheDocument();
+      expect(screen.queryByText('Species 2')).toBeNull();
+      expect(screen.queryByText('Species 4')).toBeNull();
+      expect(screen.queryByText('Species 5')).toBeNull();
+    });
+
+    it('renders a Clear link that removes check-duplicates from URL', async () => {
+      mockDuplicateFetch([], []);
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Clear')).toBeInTheDocument();
+      });
+      const clearLink = screen.getByText('Clear');
+      expect(clearLink.tagName).toBe('A');
+      expect(clearLink.getAttribute('href')).not.toContain('check-duplicates');
+    });
+  });
+
+  describe('item selection', () => {
+    it('toggles checkbox selection', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      expect(checkboxes.length).toBeGreaterThan(0);
+      fireEvent.click(checkboxes[0]);
+      // Selection panel should appear after clicking a checkbox
+      await waitFor(() => {
+        expect(screen.getByText(/Assign 1 selected item/)).toBeInTheDocument();
+      });
+    });
+
+    it('removes selection when checkbox is unchecked', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText(/Assign 1 selected item/)).toBeInTheDocument();
+      });
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(
+          screen.queryByText(/Assign 1 selected item/),
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    it('updates count when selecting multiple items', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      fireEvent.click(checkboxes[1]);
+      await waitFor(() => {
+        expect(screen.getByText(/Assign 2 selected items/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('bulk assign panel', () => {
+    it('shows Cancel and Assign buttons after selection', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Assign')).toBeInTheDocument();
+    });
+
+    it('Assign button is disabled when no assignee is selected', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText('Assign')).toBeInTheDocument();
+      });
+      const assignButton = screen.getByText('Assign').closest('button');
+      expect(assignButton).toBeDisabled();
+    });
+
+    it('Cancel button clears selection', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByText('Cancel'));
+      await waitFor(() => {
+        expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+      });
+    });
+  });
+});