@opencloning/ui 1.5.6 → 1.6.0

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

@@ -1,261 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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;

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

@@ -1,184 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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;