@opencloning/ui 1.5.6 → 1.7.0

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

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

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

@@ -1,159 +0,0 @@
-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' });
-    });
-  });
-});

package/src/components/eLabFTW/PrimersNotInDatabaseComponent.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { Alert } from '@mui/material';
-import { getSubState } from '@opencloning/utils/network';
-import ELabFTWCategorySelect from './ELabFTWCategorySelect';
-
-function PrimersNotInDatabaseComponent({ id, submissionData, setSubmissionData }) {
-  const primerCategoryId = submissionData?.primerCategoryId;
-  const primers = useSelector((state) => {
-    const subState = getSubState(state, id, true);
-    return subState.primers.filter((p) => !p.database_id);
-  });
-
-  if (primers.length === 0) return null;
-
-  return (
-    <Alert
-      severity={primerCategoryId ? 'success' : 'info'}
-      sx={{
-        marginTop: 2,
-        paddingY: 1,
-        width: '100%',
-        '& .MuiAlert-message': {
-          width: '100%',
-        },
-      }}
-      icon={false}
-    >
-      {!primerCategoryId && (
-        <>
-          <div>Do you want used primers to be saved to the database?</div>
-          <ul>
-            {primers.map((primer) => (
-              <li key={primer.id}>
-                {primer.name}
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-
-      <ELabFTWCategorySelect
-        setCategory={(c) => {
-          setSubmissionData((prev) => ({ ...prev, primerCategoryId: c ? c.id : null }));
-        }}
-        label="Save primers as"
-        fullWidth
-      />
-
-    </Alert>
-  );
-}
-
-export default PrimersNotInDatabaseComponent;

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

@@ -1,185 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
-import { eLabFTWHttpClient } from './common';
-import { mockSequences, mockPrimers, mockSources, mockTeselaJsonCache } from '../../../../../tests/mockNetworkData';
-import { clearAutocompleteValue } from '../../../../../cypress/e2e/common_functions';
-
-const PRIMER_CATEGORY_ID = 3;
-
-// Mock initial state with both primers and sequences
-const defaultState = {
-  sequences: mockSequences,
-  sources: mockSources,
-  primers: mockPrimers,
-  teselaJsonCache: mockTeselaJsonCache,
-};
-
-const createTestStore = (cloningState) => configureStore({
-  reducer: {
-    cloning: (state = cloningState) => state,
-  },
-  preloadedState: { cloning: cloningState },
-});
-
-describe('<SubmitToDatabaseComponent />', () => {
-  it('Primers: initializes with primer name and handles updates', () => {
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
-      .resolves({
-        data: [
-          { id: PRIMER_CATEGORY_ID, title: 'Primers' },
-          { id: 2, title: 'Sequences' },
-        ],
-      }).withArgs('/api/v2/info').resolves({
-        data: {
-          elabftw_version_int: 50200,
-        },
-      });
-    const store = createTestStore(defaultState);
-    const setSubmissionDataSpy = cy.spy().as('setSubmissionDataSpy');
-
-    cy.mount(
-      <Provider store={store}>
-        <SubmitToDatabaseComponent
-          id={mockPrimers[0].id}
-          resourceType="primer"
-          setSubmissionData={setSubmissionDataSpy}
-        />
-      </Provider>,
-    );
-
-    // Should initialize with primer name
-    cy.get('input#resource_title').should('have.value', 'Primer1');
-
-    // Change title
-    cy.get('input#resource_title').clear();
-    cy.get('input#resource_title').type('Modified Primer');
-
-    // Select category
-    cy.get('input').last().click();
-    cy.get('li').contains('Primers').click();
-
-    // Should update submission data with both title and category
-    cy.get('@setSubmissionDataSpy').should((spy) => {
-      const updateFn = spy.lastCall.args[0];
-      const result = updateFn({ existingKey: 'value' });
-      expect(result).to.deep.equal({
-        existingKey: 'value',
-        categoryId: PRIMER_CATEGORY_ID,
-        title: 'Modified Primer',
-      });
-    });
-    // Clearing the field should set submission data to null
-    clearAutocompleteValue('Save primer as', 'div');
-    cy.get('@setSubmissionDataSpy').should((spy) => {
-      const result = spy.lastCall.args[0];
-      expect(result).equal(null);
-    });
-  });
-
-  it('Sequences: initializes with sequence name and handles updates', () => {
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
-      .resolves({
-        data: [
-          { id: PRIMER_CATEGORY_ID, title: 'Primers' },
-          { id: 2, title: 'Sequences' },
-        ],
-      }).withArgs('/api/v2/info').resolves({
-        data: {
-          elabftw_version_int: 50200,
-        },
-      });
-    const store = createTestStore(defaultState);
-    const setSubmissionDataSpy = cy.spy().as('setSubmissionDataSpy');
-
-    cy.mount(
-      <Provider store={store}>
-        <SubmitToDatabaseComponent
-          id={mockSequences[0].id}
-          resourceType="sequence"
-          setSubmissionData={setSubmissionDataSpy}
-        />
-      </Provider>,
-    );
-
-    // Should initialize with primer name
-    cy.get('input#resource_title').should('have.value', 'Seq1');
-
-    // Change title
-    cy.get('input#resource_title').clear();
-    cy.get('input#resource_title').type('Modified Sequence');
-
-    // Select category
-    cy.get('input').last().click();
-    cy.get('li').contains('Sequences').click();
-
-    // Should update submission data with both title and category
-    cy.get('@setSubmissionDataSpy').should((spy) => {
-      const updateFn = spy.lastCall.args[0];
-      const result = updateFn({ existingKey: 'value' });
-      expect(result).to.deep.equal({
-        existingKey: 'value',
-        categoryId: 2,
-        title: 'Modified Sequence',
-      });
-    });
-    // Clearing the field should set submission data to null
-    clearAutocompleteValue('Save sequence as', 'div');
-    cy.get('@setSubmissionDataSpy').should((spy) => {
-      const result = spy.lastCall.args[0];
-      expect(result).equal(null);
-    });
-  });
-
-  it('handles API errors in category loading', () => {
-    const store = createTestStore(defaultState);
-    let firstCall = true;
-
-    // Stub API to fail first time
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
-      .callsFake(() => {
-        if (firstCall) {
-          firstCall = false;
-          const error = new Error('Failed to fetch');
-          error.response = { status: 500 };
-          return Promise.reject(error);
-        }
-        return Promise.resolve({
-          data: [
-            { id: PRIMER_CATEGORY_ID, title: 'Primers' },
-            { id: 2, title: 'Sequences' },
-          ],
-        })
-      }).withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' }}).resolves({
-        data: {
-          elabftw_version_int: 50200,
-        },
-      });
-
-    cy.mount(
-      <Provider store={store}>
-        <SubmitToDatabaseComponent
-          id={mockPrimers[0].id}
-          resourceType="primer"
-          setSubmissionData={cy.spy()}
-        />
-      </Provider>,
-    );
-
-    // Should show error state
-    cy.get('.MuiAlert-colorError').should('exist');
-    cy.contains('Could not retrieve categories').should('exist');
-
-    // Click retry
-    cy.contains('Retry').click();
-
-    // Should show categories after retry
-    cy.get('input').last().click();
-    cy.get('li').contains('Primers').should('exist');
-    cy.get('li').contains('Sequences').should('exist');
-  });
-});