@opencloning/ui 1.0.0

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import ELabFTWCategorySelect from './ELabFTWCategorySelect';
+import { eLabFTWHttpClient } from './common';
+
+describe('<ELabFTWCategorySelect />', () => {
+  it('Allows to retry if the request fails', () => {
+    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).as('eLabFTWHttpClientSpy');
+    cy.mount(<ELabFTWCategorySelect fullWidth />);
+    cy.get('@eLabFTWHttpClientSpy.all').should('have.callCount', 1);
+    cy.get('button').contains('Retry').click();
+    cy.get('@eLabFTWHttpClientSpy.all').should('have.callCount', 2);
+  });
+  it('shows the right options for eLabFTW version 50300', () => {
+    const setCategorySpy = cy.spy().as('setCategorySpy');
+    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
+      data: {
+        elabftw_version_int: 50300,
+      },
+    }).withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
+      data: [
+        { id: 1, title: 'Category 1' },
+        { id: 2, title: 'Category 2' },
+      ],
+    });
+    cy.mount(<ELabFTWCategorySelect fullWidth setCategory={setCategorySpy} />);
+    cy.get('.MuiAutocomplete-root').click();
+    cy.get('li').contains('Category 1').should('exist');
+    cy.get('li').contains('Category 2').should('exist');
+    cy.get('li').contains('Category 1').click();
+    cy.get('@setCategorySpy').should('have.been.calledWith', { id: 1, title: 'Category 1' });
+  });
+  it('shows the right options', () => {
+    const setCategorySpy = cy.spy().as('setCategorySpy');
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
+        data: [
+          { id: 1, title: 'Category 1' },
+          { id: 2, title: 'Category 2' },
+        ],
+      })
+      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
+        data: {
+          elabftw_version_int: 50200,
+        },
+      });
+    cy.mount(<ELabFTWCategorySelect fullWidth setCategory={setCategorySpy} />);
+    cy.get('.MuiAutocomplete-root').click();
+    cy.get('li').contains('Category 1').should('exist');
+    cy.get('li').contains('Category 2').should('exist');
+    cy.get('li').contains('Category 1').click();
+    cy.get('@setCategorySpy').should('have.been.calledWith', { id: 1, title: 'Category 1' });
+  });
+
+  it('shows empty options if no categories are found', () => {
+    cy.mount(<ELabFTWCategorySelect fullWidth />);
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
+        data: [],
+      })
+      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
+        data: {
+          elabftw_version_int: 50200,
+        },
+      });
+    cy.get('.MuiAutocomplete-root').click();
+    cy.get('li').should('not.exist');
+  });
+
+  it('shows an error message if the request fails and can retry', () => {
+    cy.mount(<ELabFTWCategorySelect fullWidth />);
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } })
+      .resolves({
+        data: {
+          elabftw_version_int: 50300,
+        },
+      }).as('eLabFTWHttpClientSpyInfo')
+      .withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .rejects(new Error('Connection error')).as('eLabFTWHttpClientSpy');
+    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve categories');
+    // Clicking the retry button makes the request again
+    cy.get('button').contains('Retry').click();
+    cy.get('@eLabFTWHttpClientSpy').should('have.callCount', 2);
+    cy.get('@eLabFTWHttpClientSpyInfo').should('have.callCount', 1);
+  });
+});

package/src/components/eLabFTW/ELabFTWCategorySelect.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import GetRequestMultiSelect from '../form/GetRequestMultiSelect';
+import { eLabFTWHttpClient, getELabFTWVersion, readHeaders } from './common';
+import RequestStatusWrapper from '../form/RequestStatusWrapper';
+
+function ELabFTWCategorySelect({ setCategory, label = 'Resource category', ...rest }) {
+  const [eLabFTWVersion, setELabFTWVersion] = React.useState(null);
+  const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
+  const [retry, setRetry] = React.useState(0);
+  React.useEffect(() => {
+    setRequestStatus({ status: 'loading' });
+    getELabFTWVersion().then(
+      (version) => {
+        setELabFTWVersion(version);
+        setRequestStatus({ status: 'success' });
+      }
+    ).catch(() => setRequestStatus({ status: 'error', message: 'Could not retrieve eLabFTW version' }));
+  }, [retry]);
+  const url = eLabFTWVersion && eLabFTWVersion >= 50300 ? '/api/v2/teams/current/resources_categories' : '/api/v2/items_types';
+  const getOptionsFromResponse = (data) => data;
+  const messages = { loadingMessage: 'retrieving categories', errorMessage: 'Could not retrieve categories from eLab' };
+  const onChange = (value) => setCategory(value);
+
+  return (
+    <RequestStatusWrapper requestStatus={requestStatus} retry={() => { setRetry(retry + 1); }}>
+      <GetRequestMultiSelect
+        getOptionsFromResponse={getOptionsFromResponse}
+        httpClient={eLabFTWHttpClient}
+        requestHeaders={readHeaders}
+        url={url}
+        requestParams={{ limit: 9999 }}
+        label={label}
+        messages={messages}
+        onChange={onChange}
+        getOptionLabel={(option) => (option === '' ? '' : option.title)}
+        multiple={false}
+        {...rest}
+      />
+    </RequestStatusWrapper>
+  );
+}
+
+export default ELabFTWCategorySelect;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import ELabFTWFileSelect from './ELabFTWFileSelect';
+import { eLabFTWHttpClient } from './common';
+
+describe('<ELabFTWFileSelect />', () => {
+  it('shows the right options', () => {
+    const setFileInfoSpy = cy.spy().as('setFileInfoSpy');
+    // Stub the eLabFTWHttpClient similar to the pattern in eLabFTWInterface.test.js
+    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/items/1', { headers: { Authorization: 'test-read-key' }, params: {}  }).resolves({
+      data: {
+        uploads: [
+          { id: 1, real_name: 'file1.txt' },
+          { id: 2, real_name: 'file2.txt' },
+        ],
+      },
+    });
+    cy.mount(<ELabFTWFileSelect fullWidth itemId={1} setFileInfo={setFileInfoSpy} />);
+    cy.get('div.MuiSelect-select').click();
+    cy.get('li').contains('file1.txt').should('exist');
+    cy.get('li').contains('file2.txt').should('exist');
+    cy.get('li').contains('file1.txt').click();
+    cy.get('@setFileInfoSpy').should('have.been.calledWith', { id: 1, real_name: 'file1.txt' });
+  });
+  it('shows empty options if no files are found', () => {
+    cy.mount(<ELabFTWFileSelect fullWidth itemId={1} />);
+    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/items/1', { headers: { Authorization: 'test-read-key' }, params: {} }).resolves({
+      data: {
+        uploads: [],
+      },
+    });
+    cy.get('div.MuiSelect-select').click();
+    cy.get('li').should('not.exist');
+  });
+
+  it('shows an error message if the request fails and can retry', () => {
+    cy.mount(<ELabFTWFileSelect fullWidth itemId={1} />);
+    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve attachment');
+    // Clicking the retry button makes the request again
+    cy.spy(eLabFTWHttpClient, 'get').as('eLabFTWHttpClientSpy');
+    cy.get('button').contains('Retry').click();
+    cy.get('@eLabFTWHttpClientSpy').should('have.been.calledWith', '/api/v2/items/1', { headers: { Authorization: 'test-read-key' }, params: {} });
+  });
+});

package/src/components/eLabFTW/ELabFTWFileSelect.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import GetRequestMultiSelect from '../form/GetRequestMultiSelect';
+import { eLabFTWHttpClient, readHeaders } from './common';
+
+function ELabFTWFileSelect({ itemId, setFileInfo, ...rest }) {
+  const url = `/api/v2/items/${itemId}`;
+  const getOptionsFromResponse = ({ uploads }) => uploads;
+  const label = 'File with sequence';
+  const messages = { loadingMessage: 'retrieving attachments', errorMessage: 'Could not retrieve attachment from eLab' };
+  const onChange = (realName, options) => setFileInfo(options.find((option) => option.real_name === realName));
+
+  return (
+    <GetRequestMultiSelect
+      getOptionsFromResponse={getOptionsFromResponse}
+      httpClient={eLabFTWHttpClient}
+      requestHeaders={readHeaders}
+      url={url}
+      label={label}
+      messages={messages}
+      onChange={onChange}
+      getOptionLabel={(option) => (option === '' ? '' : option.real_name)}
+      multiple={false}
+      autoComplete={false}
+      {...rest}
+    />
+  );
+}
+
+export default ELabFTWFileSelect;

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import ELabFTWResourceSelect from './ELabFTWResourceSelect';
+import { eLabFTWHttpClient } from './common';
+
+describe('<ELabFTWResourceSelect />', () => {
+  it('shows the right options when searching', () => {
+    const setResourceSpy = cy.spy().as('setResourceSpy');
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items', {
+        headers: { Authorization: 'test-read-key' },
+        params: { cat: 1, extended: 'title:test', limit: 9999 },
+      })
+      .resolves({
+        data: [
+          { id: 1, title: 'Test Resource 1' },
+          { id: 2, title: 'Test Resource 2' },
+        ],
+      });
+
+    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} setResource={setResourceSpy} />);
+
+    // Type in the search field
+    cy.get('.MuiAutocomplete-input').type('test');
+
+    // Check if options are displayed
+    cy.get('li').contains('Test Resource 1').should('exist');
+    cy.get('li').contains('Test Resource 2').should('exist');
+
+    // Select an option
+    cy.get('li').contains('Test Resource 1').click();
+    cy.get('@setResourceSpy').should('have.been.calledWith', { id: 1, title: 'Test Resource 1' });
+  });
+
+  it('shows empty options if no resources are found', () => {
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items', {
+        headers: { Authorization: 'test-read-key' },
+        params: { cat: 1, extended: 'title:nonexistent', limit: 9999 },
+      })
+      .resolves({
+        data: [],
+      });
+
+    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} />);
+    cy.get('.MuiAutocomplete-input').type('nonexistent');
+    cy.get('li').should('not.exist');
+  });
+
+  it('handles API errors gracefully', () => {
+    let firstCall = true;
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items', {
+        headers: { Authorization: 'test-read-key' },
+        params: { cat: 1, extended: 'title:test', limit: 9999 },
+      })
+      .callsFake(() => {
+        if (firstCall) {
+          firstCall = false;
+          return Promise.reject(new Error('API Error'));
+        }
+        return Promise.resolve({ data: [
+          { id: 1, title: 'Test Resource 1' },
+          { id: 2, title: 'Test Resource 2' },
+        ] });
+      });
+
+    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} />);
+    cy.get('.MuiAutocomplete-input').type('test');
+    // The component should handle the error gracefully
+    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve data');
+    // Clicking the retry button makes the request again
+    cy.get('button').contains('Retry').click();
+    // Verify the second call was made
+    cy.get('div.MuiInputBase-root').click();
+    cy.get('li').contains('Test Resource 1').should('exist');
+    cy.get('li').contains('Test Resource 2').should('exist');
+  });
+
+  it('updates search results when categoryId changes', () => {
+    const getStub = cy.stub(eLabFTWHttpClient, 'get');
+
+    // First category results
+    getStub.withArgs('/api/v2/items', {
+      headers: { Authorization: 'test-read-key' },
+      params: { cat: 1, extended: 'title:test', limit: 9999 },
+    }).resolves({
+      data: [{ id: 1, title: 'Category 1 Resource' }],
+    });
+
+    // Second category results
+    getStub.withArgs('/api/v2/items', {
+      headers: { Authorization: 'test-read-key' },
+      params: { cat: 2, extended: 'title:test', limit: 9999 },
+    }).resolves({
+      data: [{ id: 2, title: 'Category 2 Resource' }],
+    });
+
+    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} />);
+    cy.get('.MuiAutocomplete-input').type('test');
+    cy.get('li').contains('Category 1 Resource').should('exist');
+
+    // Change category and verify new results
+    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={2} />);
+    cy.get('.MuiAutocomplete-input').type('test');
+    cy.get('li').contains('Category 2 Resource').should('exist');
+  });
+});

package/src/components/eLabFTW/ELabFTWResourceSelect.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PostRequestSelect from '../form/PostRequestSelect';
+import { eLabFTWHttpClient, readHeaders } from './common';
+
+function ELabFTWResourceSelect({ setResource, categoryId, ...rest }) {
+  const url = '/api/v2/items';
+
+  const resourcePostRequestSettings = React.useMemo(() => ({
+    setValue: setResource,
+    getOptions: async (userInput) => {
+      const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders, params: { cat: categoryId, extended: `title:${userInput}`, limit: 9999 } });
+      return resp.data;
+    },
+    getOptionLabel: (option) => (option ? option.title : ''),
+    isOptionEqualToValue: (option, value) => option?.id === value?.id,
+    textLabel: 'Resource',
+  }), [setResource, categoryId]);
+  return (
+    <PostRequestSelect {...resourcePostRequestSettings} {...rest} />
+  );
+}
+
+export default ELabFTWResourceSelect;

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

@@ -0,0 +1,261 @@
+import React from 'react';
+import GetPrimerComponent from './GetPrimerComponent';
+import { eLabFTWHttpClient } from './common';
+
+const PRIMER_CATEGORY_ID = 3;
+
+describe('<GetPrimerComponent />', () => {
+  it('shows category select and then resource select after category is chosen', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+
+    // Stub both endpoints in a single stub
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url) => {
+      if (url === '/api/v2/items_types') {
+        return Promise.resolve({
+          data: [
+            { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+            { id: 2, title: 'Other Category' },
+          ],
+        });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    // 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('Primers');
+    cy.get('li').contains('Primers').click();
+
+    // Now resource select should appear
+    cy.get('.MuiAutocomplete-root').should('have.length', 2);
+  });
+
+  it('successfully selects a primer with valid metadata', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+
+    // Stub both endpoints in a single stub
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
+      if (url === '/api/v2/items_types') {
+        return Promise.resolve({
+          data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
+        });
+      }
+      if (url === '/api/v2/items' && config?.params?.cat === PRIMER_CATEGORY_ID) {
+        return Promise.resolve({
+          data: [{
+            id: 1,
+            title: 'Test Primer',
+            metadata: JSON.stringify({
+              extra_fields: {
+                sequence: { value: 'ATCG' },
+              },
+            }),
+          }],
+        });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    // Select category
+    cy.get('.MuiAutocomplete-input').first().click();
+    cy.get('.MuiAutocomplete-input').first().type('Primers');
+    cy.get('li').contains('Primers').click();
+
+    // Select primer
+    cy.get('.MuiAutocomplete-input').last().type('test');
+    cy.get('li').contains('Test Primer').click();
+
+    // Check if setPrimer was called with correct data
+    cy.get('@setPrimerSpy').should('have.been.calledWith', {
+      name: 'Test Primer',
+      sequence: 'ATCG',
+      database_id: 1,
+    });
+    cy.get('@setErrorSpy').should('not.have.been.called');
+  });
+
+  it('handles primer with invalid metadata', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+
+    // Stub both endpoints in a single stub
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
+      if (url === '/api/v2/items_types') {
+        return Promise.resolve({
+          data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
+        });
+      }
+      if (url === '/api/v2/items' && config?.params?.cat === PRIMER_CATEGORY_ID) {
+        return Promise.resolve({
+          data: [{
+            id: 1,
+            title: 'Invalid Primer',
+            metadata: JSON.stringify({
+              extra_fields: {
+                // Missing sequence field
+              },
+            }),
+          }],
+        });
+      }
+      if (url === '/api/v2/info') {
+        return Promise.resolve({
+          data: {
+            elabftw_version_int: 50200,
+          },
+        });
+      }
+    });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    // Select category
+    cy.get('.MuiAutocomplete-input').first().click();
+    cy.get('.MuiAutocomplete-input').first().type('Primers');
+    cy.get('li').contains('Primers').click();
+
+    // Select primer
+    cy.get('.MuiAutocomplete-input').last().type('test');
+    cy.get('li').contains('Invalid Primer').click();
+
+    // Check if error was set and primer was cleared
+    cy.get('@setErrorSpy').should('have.been.calledWith', 'No sequence found in metadata');
+    cy.get('@setPrimerSpy').should('have.been.calledWith', null);
+  });
+
+  it('clears primer when category is cleared', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url) => {
+      if (url === '/api/v2/items_types') {
+        return Promise.resolve({
+          data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
+        });
+      }
+      if (url === '/api/v2/info') {
+        return Promise.resolve({
+          data: {
+            elabftw_version_int: 50200,
+          },
+        });
+      }
+    });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    // Select category
+    cy.get('.MuiAutocomplete-input').first().click();
+    cy.get('.MuiAutocomplete-input').first().type('Primers');
+    cy.get('li').contains('Primers').click();
+
+    // Clear category
+    cy.get('.MuiAutocomplete-clearIndicator').first().click();
+
+    // Check if primer was cleared
+    cy.get('@setPrimerSpy').should('have.been.calledWith', null);
+    cy.get('.MuiAutocomplete-root').should('have.length', 1);
+  });
+
+  it('clears error when resource is cleared', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+
+    // Stub both endpoints in a single stub
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
+      if (url === '/api/v2/items_types') {
+        return Promise.resolve({
+          data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
+        });
+      }
+      if (url === '/api/v2/items' && config?.params?.cat === PRIMER_CATEGORY_ID) {
+        return Promise.resolve({
+          data: [{
+            id: 1,
+            title: 'Invalid Primer',
+            metadata: '{invalid json}',
+          }],
+        });
+      }
+      if (url === '/api/v2/info') {
+        return Promise.resolve({
+          data: {
+            elabftw_version_int: 50200,
+          },
+        });
+      }
+    });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    // Select category
+    cy.get('.MuiAutocomplete-input').first().click();
+    cy.get('.MuiAutocomplete-input').first().type('Primers');
+    cy.get('li').contains('Primers').click();
+
+    // Select and then clear resource
+    cy.get('.MuiAutocomplete-input').last().type('test');
+    cy.get('li').contains('Invalid Primer').click();
+    cy.get('.MuiAutocomplete-clearIndicator').last().click();
+
+    // Check if error was cleared
+    cy.get('@setErrorSpy').should('have.been.calledWith', '');
+    cy.get('@setPrimerSpy').should('have.been.calledWith', null);
+  });
+  it('handles network errors', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+
+    let firstCallCategory = true;
+    let firstCallPrimer = true;
+    cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
+      if (url === '/api/v2/items_types') {
+        if (firstCallCategory) {
+          firstCallCategory = false;
+          return Promise.reject(new Error('Network error'));
+        }
+        return Promise.resolve({
+          data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
+        });
+      }
+      if (url === '/api/v2/items' && config?.params?.cat === PRIMER_CATEGORY_ID) {
+        if (firstCallPrimer) {
+          firstCallPrimer = false;
+          return Promise.reject(new Error('Network error'));
+        }
+        return Promise.resolve({
+          data: [{ id: 1, title: 'Test Primer' }],
+        });
+      }
+      if (url === '/api/v2/info') {
+        return Promise.resolve({
+          data: {
+            elabftw_version_int: 50200,
+          },
+        });
+      }
+    });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve categories');
+    cy.get('button').contains('Retry').click();
+    cy.get('.MuiAutocomplete-input').first().click();
+    cy.get('.MuiAutocomplete-input').first().type('Primers');
+    cy.get('li').contains('Primers').click();
+    cy.get('.MuiAutocomplete-input').last().type('test');
+    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve');
+    cy.get('button').contains('Retry').click();
+    cy.get('.MuiAutocomplete-root').eq(1).click();
+    cy.get('li').contains('Test Primer').click();
+  });
+});

package/src/components/eLabFTW/GetPrimerComponent.jsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import ELabFTWCategorySelect from './ELabFTWCategorySelect';
+import ELabFTWResourceSelect from './ELabFTWResourceSelect';
+
+function GetPrimerComponent({ primer, setPrimer, setError }) {
+  const [category, setCategory] = React.useState(null);
+
+  React.useEffect(() => {
+    if (category === null) {
+      setPrimer(null);
+    }
+  }, [category]);
+
+  const handleResourceSelect = useCallback(async (resource) => {
+    if (resource === null) {
+      setPrimer(null);
+      setError('');
+      return;
+    }
+    let sequence;
+    try {
+      sequence = JSON.parse(resource.metadata).extra_fields?.sequence?.value;
+      if (!sequence) {
+        setError('No sequence found in metadata');
+        setPrimer(null);
+        return;
+      }
+    } catch (e) {
+      setError('No sequence found in metadata');
+      setPrimer(null);
+      return;
+    }
+
+    setPrimer({ name: resource.title, sequence, database_id: resource.id });
+  }, [setPrimer, setError]);
+
+  return (
+    <>
+      <ELabFTWCategorySelect
+        setCategory={setCategory}
+        fullWidth
+      />
+
+      {category && (
+      <ELabFTWResourceSelect
+        setResource={handleResourceSelect}
+        categoryId={category.id}
+        fullWidth
+      />
+      )}
+    </>
+  );
+}
+
+export default GetPrimerComponent;