@eeacms/volto-marine-policy 3.0.1 → 3.0.3

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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
+
+- Release @eeacms/volto-openlayers-map@2.0.1 [EEA Jenkins - [`8c4dbb3`](https://github.com/eea/volto-marine-policy/commit/8c4dbb3f7e95dfa5f1247ad5912ad141a7c3a077)]
+
+#### :bug: Bug Fixes
+
+- fix: custom NIS status widget to not show 'No value' [laszlocseh - [`7823b63`](https://github.com/eea/volto-marine-policy/commit/7823b63f2f8a042368a7dc2156f92e3ebc5722f1)]
+- fix: format assigned to in NisListingView [laszlocseh - [`702d3fd`](https://github.com/eea/volto-marine-policy/commit/702d3fdbeabad42f270499f29c0c2e8f4212e5dd)]
+
+#### :hammer_and_wrench: Others
+
+- test: remove TextAlign.test.jsx [laszlocseh - [`3f8a47f`](https://github.com/eea/volto-marine-policy/commit/3f8a47f035e55313e83b9a686dd635eb30e1c012)]
+- test: fix TextAlign.test.jsx snapshot [laszlocseh - [`94b1431`](https://github.com/eea/volto-marine-policy/commit/94b1431295dda5a4a457398521c862a78fa4f5f0)]
+- fix jest-config [nileshgulia1 - [`866cbb9`](https://github.com/eea/volto-marine-policy/commit/866cbb980d2238f74a164047e4660598b31f793f)]
 ### [3.0.1](https://github.com/eea/volto-marine-policy/compare/3.0.0...3.0.1) - 28 April 2026
 
 #### :house: Internal changes

package/jest-addon.config.js

@@ -66,7 +66,7 @@ module.exports = {
   },
   ...(process.env.JEST_USE_SETUP === 'ON' && {
     setupFilesAfterEnv: [
-      '<rootDir>/node_modules/@eeacms/volto-eea-website-policy/jest.setup.js',
+      '<rootDir>/node_modules/@eeacms/volto-marine-policy/jest.setup.js',
     ],
   }),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -33,14 +33,14 @@
     "@elastic/search-ui": "1.21.2"
   },
   "dependencies": {
+    "@eeacms/volto-block-style": "9.0.1",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-globalsearch": "^2.0.0",
     "@eeacms/volto-metadata-block": "*",
-    "@eeacms/volto-openlayers-map": "2.0.0",
+    "@eeacms/volto-openlayers-map": "2.0.1",
     "@eeacms/volto-workflow-progress": "*",
-    "@eeacms/volto-block-style": "9.0.1",
     "axios": "0.30.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",

package/src/components/Widgets/NISStatusWidget.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
+
+/**
+ * NISStatusWidget — wraps the default SelectWidget and disables the
+ * client-side "No value" option that Volto injects for hardcoded-choice
+ * fields when noValueOption=true (the default) and default is nullish.
+ */
+const NISStatusWidget = (props) => (
+  <SelectWidget {...props} noValueOption={false} />
+);
+
+export default NISStatusWidget;

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

@@ -7,6 +7,7 @@ import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Checkbox } from 'semantic-ui-react';
 import { Button, Select, Dimmer, Loader } from 'semantic-ui-react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 
 function normalizeQueryOperators(query) {
   return query.map((q) => {
@@ -46,23 +47,40 @@ async function getCurrentSearchItems() {
 
   // call Plone
   try {
-    const response = await fetch('/marine/++api++/@querystring-search', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
+    const response = await fetch(
+      `${window.env.apiPath}/++api++/@querystring-search`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
       },
-      body: JSON.stringify(payload),
-    });
+    );
     return response;
   } catch (err) {
     // console.error('Querystring search failed:', err);
   }
 }
 
+function formatAssignedTo(assignedTo) {
+  if (!assignedTo) return '';
+  // Fix Python-style unicode escape sequences (\UXXXXXXXX -> actual char)
+  let result = assignedTo.replace(/\\U([0-9A-Fa-f]{8})/g, (_, hex) =>
+    String.fromCodePoint(parseInt(hex, 16)),
+  );
+  // Strip the "(userid)" suffix to show only the display name
+  result = result.replace(/\s*\([^)]+\)\s*$/, '').trim();
+  return result;
+}
+
 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);
@@ -94,7 +112,7 @@ const NISListingView = ({ items, isEditMode }) => {
   const onBulkAssign = async (ids, assignee) => {
     setIsLoading(true);
     await fetch(
-      `${window.location.origin}/marine/++api++/@bulk-assign${window.location.search}`,
+      `${window.env.apiPath}/++api++/@bulk-assign${window.location.search}`,
       {
         method: 'POST',
         headers: {
@@ -113,10 +131,47 @@ 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(
-        `${window.location.origin}/marine/++api++/@vocabularies/nis_experts_vocabulary`,
+        `${window.env.apiPath}/++api++/@vocabularies/nis_experts_vocabulary`,
         {
           headers: {
             Accept: 'application/json',
@@ -129,7 +184,7 @@ const NISListingView = ({ items, isEditMode }) => {
         setUsers(
           data.items.map((u) => ({
             key: u.token,
-            text: u.title,
+            text: formatAssignedTo(u.title),
             value: u.token,
           })),
         );
@@ -168,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>
@@ -182,24 +273,29 @@ 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>
               <td>{item.nis_scientificname_accepted}</td>
               <td>{item.nis_region}</td>
               <td>{item.nis_subregion}</td>
-              <td>{item.nis_country && item.nis_country.join(', ')}</td>
+              <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>{item.nis_assigned_to}</div>
+                  <div>{formatAssignedTo(item.nis_assigned_to)}</div>
                   {canEditPage && (
                     <Checkbox
                       checked={selectedItems.includes(item['@id'])}
@@ -211,22 +307,30 @@ const NISListingView = ({ items, isEditMode }) => {
               <td>
                 <div className="workflow-actions">
                   <div className="action-buttons">
-                    <a
+                    <UniversalLink
                       className="ui button secondary mini"
                       href={`${item['@id']}`}
                       target="_blank"
-                      rel="noopener"
+                      rel="noopener noreferrer"
                     >
                       View
-                    </a>
-                    <a
+                    </UniversalLink>
+                    <UniversalLink
                       className="ui button primary mini"
                       href={`${item['@id']}/edit`}
                       target="_blank"
-                      rel="noopener"
+                      rel="noopener noreferrer"
                     >
                       Edit
-                    </a>
+                    </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();
+      });
+    });
+  });
+});

package/src/index.js

@@ -16,6 +16,7 @@ import installMsfdDataExplorerBlock from './components/Blocks/MsfdDataExplorerBl
 import { breadcrumb, localnavigation, workflowProgressPath } from './reducers';
 import customBlockTemplates from '@eeacms/volto-marine-policy/components/Blocks/CustomBlockTemplates/customBlockTemplates';
 import TextAlignWidget from './components/Widgets/TextAlign';
+import NISStatusWidget from './components/Widgets/NISStatusWidget';
 import './slate-styles.less';
 import './less/toc-title-sizes.less';
 
@@ -113,6 +114,7 @@ const applyConfig = (config) => {
   }
 
   config.widgets.widget.text_align = TextAlignWidget;
+  config.widgets.id.nis_status = NISStatusWidget;
   // check if it breaks the 'theme' field in volto-tabs-block in the 'horizontal carousel' layout
   // We have a 'theme' field in the wise catalogue metadata (CatalogueMetadata)
   config.widgets.id.indicator_theme = TokenWidget;

package/src/components/Widgets/TextAlign.test.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-
-import TextAlign from './TextAlign';
-
-const mockStore = configureStore();
-
-test('renders a text align component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  });
-
-  const component = renderer.create(
-    <Provider store={store}>
-      <TextAlign
-        id="my-field"
-        title="My field"
-        value="left"
-        fieldSet="default"
-        onChange={() => {}}
-        onBlur={() => {}}
-        onClick={() => {}}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});