@opencloning/ui 1.0.0

package/src/components/eLabFTW/GetSequenceFileAndDatabaseIdComponent.cy.jsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
+import { eLabFTWHttpClient } from './common';
+import { clearAutocompleteValue, clickMultiSelectOption, setAutocompleteValue } from '../../../../../cypress/e2e/common_functions';
+
+let uniqueId = 1;
+const newUniqueId = () => uniqueId++;
+const SEQUENCE_CATEGORY_ID = newUniqueId();
+const OTHER_CATEGORY_ID = newUniqueId();
+const SEQUENCE_RESOURCE_ID = newUniqueId();
+const OTHER_RESOURCE_ID = newUniqueId();
+const SEQUENCE_FILE_ID = newUniqueId();
+const OTHER_FILE_ID = newUniqueId();
+const TEST_FILE_CONTENT = 'test content';
+
+const commonStubHandler = (url, config) => {
+  if (url === '/api/v2/items_types') {
+    return Promise.resolve({
+      data: [
+        { id: SEQUENCE_CATEGORY_ID, title: 'Sequences' },
+        { id: OTHER_CATEGORY_ID, title: 'Other Category' },
+      ],
+    });
+  }
+  if (url === '/api/v2/items' && config?.params?.cat === 1) {
+    return Promise.resolve({
+      data: [{
+        id: SEQUENCE_RESOURCE_ID,
+        title: 'Test Sequence',
+      },
+      {
+        id: OTHER_RESOURCE_ID,
+        title: 'Other Resource',
+      },
+      ],
+    });
+  }
+  if (url === `/api/v2/items/${SEQUENCE_RESOURCE_ID}`) {
+    return Promise.resolve({
+      data: {
+        uploads: [
+          { id: SEQUENCE_FILE_ID, real_name: 'sequence.gb' },
+          { id: OTHER_FILE_ID, real_name: 'other.txt' },
+        ],
+      },
+    });
+  }
+  if (url === '/api/v2/info') {
+    return Promise.resolve({
+      data: {
+        elabftw_version_int: 50200,
+      },
+    });
+  }
+  return null;
+};
+
+describe('<GetSequenceFileAndDatabaseIdComponent />', () => {
+  it('normal case', () => {
+    const setFileSpy = cy.spy().as('setFileSpy');
+    const setDatabaseIdSpy = cy.spy().as('setDatabaseIdSpy');
+
+    // Stub API calls
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
+      const commonResponse = commonStubHandler(url, config);
+      if (commonResponse !== null) {
+        return commonResponse;
+      }
+      if (url === `/api/v2/items/${SEQUENCE_RESOURCE_ID}/uploads/${SEQUENCE_FILE_ID}?format=binary`) {
+        return Promise.resolve({ data: new Blob([TEST_FILE_CONTENT], { type: 'application/octet-stream' }) });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(<GetSequenceFileAndDatabaseIdComponent setFile={setFileSpy} setDatabaseId={setDatabaseIdSpy} />);
+
+    // Initially, only category select should be visible
+    cy.get('.MuiAutocomplete-root').should('have.length', 1);
+
+    // Select a category
+    cy.get('.MuiAutocomplete-input').first().click();
+    cy.get('.MuiAutocomplete-input').first().type('Sequences');
+    cy.get('li').contains('Sequences').click();
+
+    // Resource select should appear
+    cy.get('.MuiAutocomplete-root').should('have.length', 2);
+
+    // Select a resource
+    cy.get('.MuiAutocomplete-input').last().type('Test');
+    cy.get('li').contains('Test Sequence').click();
+
+    // File select should appear
+    clickMultiSelectOption('File with sequence', 'sequence.gb', 'div');
+    // We must compare like this, because using have.been.calledWith does not compare files
+    cy.get('@setFileSpy').should((spy) => {
+      const calledFile = spy.lastCall.args[0]; // Get the first argument of the first call
+      expect(calledFile).to.be.instanceOf(File);
+      expect(calledFile.name).to.equal('sequence.gb');
+      // Read the file content and compare
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const actualContent = e.target.result;
+        expect(actualContent).to.equal(TEST_FILE_CONTENT);
+      };
+      reader.readAsText(calledFile);
+    });
+    cy.get('@setDatabaseIdSpy').should('have.been.calledWith', SEQUENCE_RESOURCE_ID);
+  });
+
+  it('handles error when getting file', () => {
+    const setFileSpy = cy.spy().as('setFileSpy');
+    const setDatabaseIdSpy = cy.spy().as('setDatabaseIdSpy');
+
+    let firstCall = true;
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
+      const commonResponse = commonStubHandler(url, config);
+      if (commonResponse !== null) {
+        return commonResponse;
+      }
+      if (url === `/api/v2/items/${SEQUENCE_RESOURCE_ID}/uploads/${SEQUENCE_FILE_ID}?format=binary`) {
+        if (firstCall) {
+          firstCall = false;
+          return Promise.reject(new Error('File not found'));
+        }
+        return Promise.resolve({ data: new Blob([TEST_FILE_CONTENT], { type: 'application/octet-stream' }) });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(<GetSequenceFileAndDatabaseIdComponent setFile={setFileSpy} setDatabaseId={setDatabaseIdSpy} />);
+
+    // Select a category
+    clickMultiSelectOption('Resource category', 'Sequences', 'div');
+    setAutocompleteValue('Resource', 'Test Sequence', '.elabftw-resource-select');
+    clickMultiSelectOption('File with sequence', 'sequence.gb', 'div');
+    cy.get('.MuiAlert-message').should('contain', 'Error loading file');
+    cy.get('button').contains('Retry').click();
+    cy.get('.MuiAlert-message').should('not.exist');
+    cy.get('@setFileSpy').should((spy) => {
+      const calledFile = spy.lastCall.args[0]; // Get the first argument of the first call
+      expect(calledFile).to.be.instanceOf(File);
+      expect(calledFile.name).to.equal('sequence.gb');
+      // Read the file content and compare
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const actualContent = e.target.result;
+        expect(actualContent).to.equal(TEST_FILE_CONTENT);
+      };
+      reader.readAsText(calledFile);
+    });
+    cy.get('@setDatabaseIdSpy').should('have.been.calledWith', SEQUENCE_RESOURCE_ID);
+  });
+
+  it('unsets subsequent fields when an upper one changes', () => {
+    cy.stub(eLabFTWHttpClient, 'get').callsFake(commonStubHandler);
+    cy.mount(<GetSequenceFileAndDatabaseIdComponent setFile={cy.spy()} setDatabaseId={cy.spy()} />);
+    clickMultiSelectOption('Resource category', 'Sequences', 'div');
+    setAutocompleteValue('Resource', 'Test Sequence', '.elabftw-resource-select');
+    clickMultiSelectOption('File with sequence', 'sequence.gb', 'div');
+
+    // Unset category should clear the rest
+    clearAutocompleteValue('Resource category', 'div.elabftw-category-select');
+    cy.get('.elabftw-resource-select').should('not.exist');
+    cy.get('.elabftw-file-select').should('not.exist');
+    cy.get('.elabftw-category-select').click();
+
+    clickMultiSelectOption('Resource category', 'Sequences', 'div');
+
+    // Resource value should be unset
+    cy.get('.elabftw-resource-select input').should('have.value', '');
+    setAutocompleteValue('Resource', 'Test Sequence', '.elabftw-resource-select');
+
+    // File value should be unset
+    cy.get('.elabftw-file-select input').should('have.value', '');
+    clickMultiSelectOption('File with sequence', 'sequence.gb', 'div');
+
+    // Unset resource should clear file
+    clearAutocompleteValue('Resource', '.elabftw-resource-select');
+    cy.get('.elabftw-file-select').should('not.exist');
+    cy.get('.elabftw-resource-select').click();
+    setAutocompleteValue('Resource', 'Test Sequence', '.elabftw-resource-select');
+    cy.get('.elabftw-file-select input').should('have.value', '');
+  });
+});

package/src/components/eLabFTW/GetSequenceFileAndDatabaseIdComponent.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import ELabFTWCategorySelect from './ELabFTWCategorySelect';
+import ELabFTWResourceSelect from './ELabFTWResourceSelect';
+import ELabFTWFileSelect from './ELabFTWFileSelect';
+import { getFileFromELabFTW } from './utils';
+import RetryAlert from '../form/RetryAlert';
+
+function GetSequenceFileAndDatabaseIdComponent({ setFile, setDatabaseId }) {
+  const [category, setCategory] = React.useState(null);
+  const [resource, setResource] = React.useState(null);
+  const [fileInfo, setFileInfo] = React.useState(null);
+  const [fileLoadError, setFileLoadError] = React.useState('');
+  const [retry, setRetry] = React.useState(0);
+
+  // Reset if category changes
+  React.useEffect(() => {
+    setResource(null);
+    setFileInfo(null);
+    setFile(null);
+    setDatabaseId(null);
+  }, [category]);
+
+  // Reset if resource changes
+  React.useEffect(() => {
+    setFileInfo(null);
+    setFile(null);
+    setDatabaseId(null);
+  }, [resource]);
+
+  React.useEffect(() => {
+    setFile(null);
+    setDatabaseId(null);
+  }, [fileInfo]);
+
+  React.useEffect(() => {
+    const loadFile = async () => {
+      if (!resource || !fileInfo) return;
+      try {
+        const file = await getFileFromELabFTW(resource.id, fileInfo);
+        setFile(file);
+        setDatabaseId(resource.id);
+        setFileLoadError('');
+      } catch (error) {
+        setFileLoadError('Error loading file');
+        console.error('Error loading file', error);
+      }
+    };
+
+    loadFile();
+  }, [resource, fileInfo, retry]);
+
+  return (
+    <>
+      <ELabFTWCategorySelect fullWidth setCategory={setCategory} className="elabftw-category-select" />
+      {category && <ELabFTWResourceSelect fullWidth setResource={setResource} categoryId={category.id} className="elabftw-resource-select" />}
+      {resource && <ELabFTWFileSelect fullWidth setFileInfo={setFileInfo} itemId={resource.id} className="elabftw-file-select" />}
+      {fileLoadError && <RetryAlert severity="error" onRetry={() => setRetry((prev) => prev + 1)}>{fileLoadError}</RetryAlert>}
+    </>
+  );
+}
+
+export default GetSequenceFileAndDatabaseIdComponent;

package/src/components/eLabFTW/LoadHistoryComponent.cy.jsx

@@ -0,0 +1,235 @@
+import React from 'react';
+import LoadHistoryComponent from './LoadHistoryComponent';
+import { eLabFTWHttpClient } from './common';
+
+let uniqueId = 1;
+const newUniqueId = () => uniqueId++;
+const DATABASE_ID = newUniqueId();
+const HISTORY_FILE_ID = newUniqueId();
+const OTHER_FILE_ID = newUniqueId();
+const TEST_FILE_CONTENT = JSON.stringify({ test: 'content' });
+
+describe('<LoadHistoryComponent />', () => {
+  it('loads history file successfully when one file exists', () => {
+    const handleCloseSpy = cy.spy().as('handleCloseSpy');
+    const loadDatabaseFileSpy = cy.spy().as('loadDatabaseFileSpy');
+
+    // Stub API calls
+    cy.stub(eLabFTWHttpClient, 'get').callsFake(async (url) => {
+      if (url === `/api/v2/items/${DATABASE_ID}`) {
+        return new Promise((resolve) => {
+          // Timeout to catch the loading state
+          setTimeout(() => {
+            resolve({
+              data: {
+                uploads: [
+                  {
+                    id: HISTORY_FILE_ID,
+                    real_name: 'history.json',
+                    comment: 'OpenCloning history',
+                  },
+                ],
+              },
+            });
+          }, 500);
+        });
+      }
+      if (url === `/api/v2/items/${DATABASE_ID}/uploads/${HISTORY_FILE_ID}?format=binary`) {
+        return Promise.resolve({ data: new Blob([TEST_FILE_CONTENT], { type: 'application/json' }) });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(
+      <LoadHistoryComponent
+        handleClose={handleCloseSpy}
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={loadDatabaseFileSpy}
+      />,
+    );
+
+    // Should show loading initially
+    cy.get('.MuiCircularProgress-root').should('exist');
+
+    // Should call loadDatabaseFile with the correct arguments
+    cy.get('@loadDatabaseFileSpy').should((spy) => {
+      const [file, id, isHistory] = spy.lastCall.args;
+      expect(file).to.be.instanceOf(File);
+      expect(file.name).to.equal('history.json');
+      expect(id).to.equal(DATABASE_ID);
+      expect(isHistory).to.equal(true);
+
+      // Verify file content
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const actualContent = e.target.result;
+        expect(actualContent).to.equal(TEST_FILE_CONTENT);
+      };
+      reader.readAsText(file);
+      return undefined; // Satisfy linter
+    });
+
+    // Loading indicator should be gone
+    cy.get('.MuiCircularProgress-root').should('not.exist');
+  });
+
+  it('shows error when multiple history files found', () => {
+    const handleCloseSpy = cy.spy().as('handleCloseSpy');
+    const loadDatabaseFileSpy = cy.spy().as('loadDatabaseFileSpy');
+
+    cy.stub(eLabFTWHttpClient, 'get').callsFake(async (url) => {
+      if (url === `/api/v2/items/${DATABASE_ID}`) {
+        return Promise.resolve({
+          data: {
+            uploads: [
+              {
+                id: HISTORY_FILE_ID,
+                real_name: 'history1.json',
+                comment: 'OpenCloning history',
+              },
+              {
+                id: OTHER_FILE_ID,
+                real_name: 'history2.json',
+                comment: 'OpenCloning history',
+              },
+            ],
+          },
+        });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(
+      <LoadHistoryComponent
+        handleClose={handleCloseSpy}
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={loadDatabaseFileSpy}
+      />,
+    );
+
+    // Should show error message
+    cy.get('.MuiAlert-message').should('contain', 'Multiple history files found for this ancestor sequence');
+    cy.get('@loadDatabaseFileSpy').should('not.have.been.called');
+  });
+
+  it('shows error when no history files found', () => {
+    const handleCloseSpy = cy.spy().as('handleCloseSpy');
+    const loadDatabaseFileSpy = cy.spy().as('loadDatabaseFileSpy');
+
+    cy.stub(eLabFTWHttpClient, 'get').callsFake(async (url) => {
+      if (url === `/api/v2/items/${DATABASE_ID}`) {
+        return Promise.resolve({
+          data: {
+            uploads: [
+              {
+                id: OTHER_FILE_ID,
+                real_name: 'other.txt',
+                comment: 'Not a history file',
+              },
+            ],
+          },
+        });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(
+      <LoadHistoryComponent
+        handleClose={handleCloseSpy}
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={loadDatabaseFileSpy}
+      />,
+    );
+
+    // Should show error message
+    cy.get('.MuiAlert-message').should('contain', 'No history files found for this ancestor sequence');
+    cy.get('@loadDatabaseFileSpy').should('not.have.been.called');
+  });
+
+  it('handles API error and allows retry', () => {
+    const handleCloseSpy = cy.spy().as('handleCloseSpy');
+    const loadDatabaseFileSpy = cy.spy().as('loadDatabaseFileSpy');
+
+    let callNumber = 0;
+    cy.stub(eLabFTWHttpClient, 'get').callsFake(async (url) => {
+      if (url === `/api/v2/items/${DATABASE_ID}`) {
+        callNumber += 1;
+        // Network error
+        if (callNumber === 1) {
+          throw new Error('Access denied');
+        }
+        // Forbidden / deleted
+        else if (callNumber === 2) {
+          const error = new Error('Forbidden');
+          error.response = { status: 403 };
+          return Promise.reject(error);
+        }
+        return Promise.resolve({
+          data: {
+            uploads: [
+              {
+                id: HISTORY_FILE_ID,
+                real_name: 'history.json',
+                comment: 'OpenCloning history',
+              },
+            ],
+          },
+        });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(
+      <LoadHistoryComponent
+        handleClose={handleCloseSpy}
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={loadDatabaseFileSpy}
+      />,
+    );
+
+    // Should show error message
+    cy.get('.MuiAlert-message').should('contain', 'Failed to load history file.');
+    // Click retry
+    cy.get('button').contains('Retry').click();
+
+    // Should show error message
+    cy.get('.MuiAlert-message').should('contain', 'Ancestor sequence might have been deleted or you can no longer access it');
+    // Click retry
+    cy.get('button').contains('Retry').click();
+
+    // Should load successfully after retry
+    cy.get('@loadDatabaseFileSpy').should((spy) => {
+      const [file, id, isHistory] = spy.lastCall.args;
+      expect(file).to.be.instanceOf(File);
+      expect(file.name).to.equal('history.json');
+      expect(id).to.equal(DATABASE_ID);
+      expect(isHistory).to.equal(true);
+      return undefined; // Satisfy linter
+    });
+  });
+
+  it('close button works', () => {
+    const handleCloseSpy = cy.spy().as('handleCloseSpy');
+    const loadDatabaseFileSpy = cy.spy().as('loadDatabaseFileSpy');
+
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs(`/api/v2/items/${DATABASE_ID}`, { headers: { Authorization: 'test-read-key' } })
+      .resolves({
+        data: {
+          uploads: [],
+        },
+      });
+
+    cy.mount(
+      <LoadHistoryComponent
+        handleClose={handleCloseSpy}
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={loadDatabaseFileSpy}
+      />,
+    );
+
+    cy.get('button').contains('Close').click();
+    cy.get('@handleCloseSpy').should('have.been.called');
+    cy.get('@loadDatabaseFileSpy').should('not.have.been.called');
+  });
+});

package/src/components/eLabFTW/LoadHistoryComponent.jsx

@@ -0,0 +1,51 @@
+import { Button, CircularProgress } from '@mui/material';
+import React from 'react';
+import { eLabFTWHttpClient, readHeaders } from './common';
+import RetryAlert from '../form/RetryAlert';
+import { getFileFromELabFTW } from './utils';
+
+function LoadHistoryComponent({ handleClose, databaseId, loadDatabaseFile }) {
+  const url = `/api/v2/items/${databaseId}`;
+  const [error, setError] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [retry, setRetry] = React.useState(0);
+  React.useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await eLabFTWHttpClient.get(url, { headers: readHeaders });
+        const { uploads } = response.data;
+        const historyFiles = uploads.filter((upload) => upload.real_name.endsWith('.json') && upload.comment.includes('OpenCloning'));
+        if (historyFiles.length === 1) {
+          const file = await getFileFromELabFTW(databaseId, historyFiles[0]);
+          loadDatabaseFile(file, databaseId, true);
+        } else if (historyFiles.length > 1) {
+          setError('Multiple history files found for this ancestor sequence.');
+        } else {
+          setError('No history files found for this ancestor sequence.');
+        }
+        setLoading(false);
+      } catch (e) {
+        console.error(e);
+        if (e.response?.status === 403) {
+          setError('Ancestor sequence might have been deleted or you can no longer access it');
+        } else {
+          setError('Failed to load history file.');
+        }
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [url, retry]);
+  return (
+    <div>
+      {loading && <CircularProgress />}
+      {error && <RetryAlert onRetry={() => setRetry((prev) => prev + 1)}>{error}</RetryAlert>}
+      <Button onClick={handleClose}>Close</Button>
+
+    </div>
+  );
+}
+
+export default LoadHistoryComponent;

package/src/components/eLabFTW/PrimersNotInDatabaseComponent.cy.jsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import PrimersNotInDatabaseComponent from './PrimersNotInDatabaseComponent';
+import { eLabFTWHttpClient } from './common';
+import { mockSequences, mockSources, mockPrimers } from '../../../../../tests/mockNetworkData';
+
+const PRIMER_CATEGORY_ID = 3;
+
+const defaultState = {
+  sequences: mockSequences,
+  sources: mockSources,
+  primers: mockPrimers,
+};
+
+const createTestStore = (cloningState) => configureStore({
+  reducer: {
+    cloning: (state = cloningState) => state,
+  },
+  preloadedState: { cloning: cloningState },
+});
+
+describe('<PrimersNotInDatabaseComponent />', () => {
+  it('renders nothing when no primers need saving', () => {
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types')
+      .resolves({
+        data: [
+          { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+          { id: 2, title: 'Other' },
+        ],
+      });
+    const store = createTestStore(defaultState);
+    cy.mount(
+      <Provider store={store}>
+        <PrimersNotInDatabaseComponent
+          id={4}
+          submissionData={{}}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+        />
+      </Provider>,
+    );
+
+    // Component should not render anything
+    cy.get('.MuiAlert-root').should('not.exist');
+  });
+
+  it('shows primers that need saving', () => {
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types')
+      .resolves({
+        data: [
+          { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+          { id: 2, title: 'Other' },
+        ],
+      }).withArgs('/api/v2/info').resolves({
+        data: {
+          elabftw_version_int: 50200,
+        },
+      });
+    // In this case, it should show only 1, because substate goes only up to
+    // the sequence with database_id, and one of the primers already has a database_id
+    const store = createTestStore(defaultState);
+
+    cy.mount(
+      <Provider store={store}>
+        <PrimersNotInDatabaseComponent
+          id={1}
+          submissionData={{}}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+        />
+      </Provider>,
+    );
+
+    // Component should not render anything
+    cy.get('.MuiAlert-root').contains('Do you want used primers to be saved to the database?').should('exist');
+    cy.get('.MuiAlert-root li').should('have.length', 1);
+    cy.get('.MuiAlert-root li').contains('Primer1').should('exist');
+
+    // Shows the categories to choose from
+    cy.get('input').click();
+    cy.get('li').contains('Other').should('exist');
+    cy.get('li').contains('Primers').click();
+
+    // Should update submission data
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const updateFn = spy.lastCall.args[0];
+      const result = updateFn({ hello: 'world' });
+      expect(result).to.deep.equal({ primerCategoryId: PRIMER_CATEGORY_ID, hello: 'world' });
+    });
+
+    // Mount with new data (simulating a successful update)
+    cy.mount(
+      <Provider store={store}>
+        <PrimersNotInDatabaseComponent
+          id={1}
+          submissionData={{ primerCategoryId: PRIMER_CATEGORY_ID }}
+        />
+      </Provider>,
+    );
+
+    // Should show success state
+    cy.get('.MuiAlert-colorSuccess').should('exist');
+    cy.contains('Do you want used primers to be saved to the database?').should('not.exist');
+  });
+
+  it('shows error when update fails', () => {
+    let firstCall = true;
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .callsFake((url, config) => {
+        if (url !== '/api/v2/items_types' || config.headers?.Authorization !== 'test-read-key') {
+          throw new Error('Unexpected call to get method with these parameters');
+        }
+        if (firstCall) {
+          firstCall = false;
+          const err = new Error('Failed to fetch items types');
+          err.response = {
+            status: 500,
+          };
+          return Promise.reject(err);
+        }
+        return Promise.resolve({
+          data: [
+            { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+            { id: 2, title: 'Other' },
+          ],
+        });
+      }).withArgs('/api/v2/info').resolves({
+        data: {
+          elabftw_version_int: 50200,
+        }
+      });
+    // Mount with new data (simulating a failed update)
+    const store = createTestStore(defaultState);
+    cy.mount(
+      <Provider store={store}>
+        <PrimersNotInDatabaseComponent
+          id={1}
+          submissionData={{}}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+        />
+      </Provider>,
+    );
+
+    // Should show error state
+    cy.get('.MuiAlert-colorError').should('exist');
+    cy.contains('Could not retrieve categories from eLab').should('exist');
+    cy.contains('Retry').click();
+    // Should be normal again
+    cy.get('input').click();
+    cy.get('li').contains('Other').click();
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const updateFn = spy.lastCall.args[0];
+      const result = updateFn({ hello: 'world' });
+      expect(result).to.deep.equal({ primerCategoryId: 2, hello: 'world' });
+    });
+  });
+});