@opencloning/opencloningdb 1.8.3 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @opencloning/opencloningdb
 
+## 1.9.0
+
+### Minor Changes
+
+- [#786](https://github.com/OpenCloning/OpenCloning_frontend/pull/786) [`c8c46d4`](https://github.com/OpenCloning/OpenCloning_frontend/commit/c8c46d4dc36cb8741d1bd89816c7ca82b89996b3) Thanks [@manulera](https://github.com/manulera)! - Assembler: load plasmids from the database and upload the assemblies to it.
+
+  - `@opencloning/ui`:
+    - The Assembler's plasmid buttons are grouped into a "Load Plasmids" menu (from files, from the local server, from the database).
+    - When the database interface provides `GetSequencesInBulkComponent`, plasmids can be loaded by tag or picked, and are used as `DatabaseSource`s. In that case the default plasmids of a syntax are not loaded.
+    - When it provides `SubmitCloningStrategiesInBulkComponent`, a new "Upload to DB" button uploads the assemblies with their history, as in the bulk upload of sequences with history.
+    - Both are new optional entries of the database interface (see `DummyInterface`).
+  - `@opencloning/opencloningdb`:
+    - Implements `GetSequencesInBulkComponent` and `SubmitCloningStrategiesInBulkComponent`.
+    - Exports `TagMultiSelect` (with `allowCreate` and `onCreateError`), `BulkUploadModal`, `BulkUploadPreview` and `CommonTableRow`, moved from the `opencloningdb` app.
+  - `opencloningdb`:
+    - The "Upload sequences with history" button uses `SubmitCloningStrategiesInBulkComponent`. Its validation, submission and conflict messages are now shown in the dialog instead of as alerts.
+    - The tag selects no longer drop excluded tags from the shared tags cache.
+  - `syntax-builder`: the dev server runs on port 3000 and listens on `127.0.0.1`, like the other apps.
+
+### Patch Changes
+
+- Updated dependencies [[`c8c46d4`](https://github.com/OpenCloning/OpenCloning_frontend/commit/c8c46d4dc36cb8741d1bd89816c7ca82b89996b3)]:
+  - @opencloning/ui@2.1.0
+  - @opencloning/utils@2.1.0
+
+## 1.8.8
+
+### Patch Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Only send the auth token to the backend, and rename the http client APIs.
+
+  - `@opencloning/utils`: `@opencloning/utils/httpClients` exports `getBackendHttpClient(backendUrl, { authenticated })`, a client that can only reach the backend (`allowAbsoluteUrls: false`) and is the only one carrying the auth token, and `getExternalHttpClient()` for whitelisted external urls. Replaces `@opencloning/utils/getHttpClient` (`getHttpClient`, `getAuthenticatedHttpClient`). `attachAuthInterceptors` refuses clients that could send the token elsewhere.
+  - `@opencloning/ui` (breaking): `useHttpClient` is renamed `useBackendHttpClient` and takes urls relative to `backendUrl`; `useBackendRoute` is removed; `useBackendAPI` is renamed `useSourceRequest` and `sendPostRequest` is renamed `sendSourceRequest`.
+  - `@opencloning/opencloningdb`, `@opencloning/opencloning-elabftw`: clients can no longer be pointed at other hosts.
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Encode values interpolated into request URL paths to prevent client-side path traversal. A sample UID such as `../workspaces/1/users/5` could make a user's own request hit a different endpoint, e.g. "delete UID" removing a workspace member.
+
+  - `@opencloning/utils`: new `encodePathSegment` (`@opencloning/utils/urlUtils`), which applies `encodeURIComponent` and rejects `.` and `..`.
+  - `@opencloning/opencloningdb`: all path parameters in `endpoints.js` are encoded.
+  - `@opencloning/opencloning-elabftw`: eLabFTW item and upload paths are encoded.
+  - `@opencloning/ui`: the `example`, `key` and `template` URL parameters are encoded when loading examples and templates.
+
+- Updated dependencies [[`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394)]:
+  - @opencloning/utils@2.0.0
+  - @opencloning/ui@2.0.0
+
+## 1.8.7
+
+### Patch Changes
+
+- Updated dependencies [[`f7f376e`](https://github.com/OpenCloning/OpenCloning_frontend/commit/f7f376ee351d9b2da52413700836dc55ba54b5ea)]:
+  - @opencloning/ui@1.10.0
+  - @opencloning/utils@1.10.0
+
+## 1.8.6
+
+### Patch Changes
+
+- [#771](https://github.com/OpenCloning/OpenCloning_frontend/pull/771) [`73363e7`](https://github.com/OpenCloning/OpenCloning_frontend/commit/73363e7a7f7e494e20a54bd87e5dba97f8a9197e) Thanks [@manulera](https://github.com/manulera)! - Keep OIDC sessions signed in by requesting a token on each API call instead of reusing a stored JWT
+
+- Updated dependencies [[`73363e7`](https://github.com/OpenCloning/OpenCloning_frontend/commit/73363e7a7f7e494e20a54bd87e5dba97f8a9197e)]:
+  - @opencloning/utils@1.9.5
+  - @opencloning/ui@1.9.5
+
+## 1.8.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/ui@1.9.4
+  - @opencloning/utils@1.9.4
+
+## 1.8.4
+
+### Patch Changes
+
+- [#741](https://github.com/OpenCloning/OpenCloning_frontend/pull/741) [`c65f24a`](https://github.com/OpenCloning/OpenCloning_frontend/commit/c65f24ae853b45005e9a7f429236b8b8d7ea84fa) Thanks [@manulera](https://github.com/manulera)! - Add workspace functionality to add and remove users by owners
+
+- Updated dependencies [[`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82)]:
+  - @opencloning/utils@1.9.3
+  - @opencloning/ui@1.9.3
+
 ## 1.8.3
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/opencloningdb",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "type": "module",
   "main": "./src/index.js",
   "exports": {
@@ -15,9 +15,9 @@
   "dependencies": {
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
-    "@opencloning/ui": "1.9.2",
-    "@opencloning/utils": "1.9.2",
-    "axios": "^1.16.0"
+    "@opencloning/ui": "2.1.0",
+    "@opencloning/utils": "2.1.0",
+    "axios": "^1.20.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/GetSequencesInBulkComponent.cy.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import GetSequencesInBulkComponent from './GetSequencesInBulkComponent';
+import { clickMultiSelectOption } from '../../../cypress/e2e/common_functions';
+import endpoints from './endpoints';
+import { formatSequenceName } from './common';
+
+const SEQUENCE_NAME = 'ase1_CDS_PCR';
+const TAG_NAME = 'gibson_assembly';
+
+function expectLoadedSequences(spy, stubBody) {
+  expect(spy).to.have.been.calledOnce;
+  const [sequences] = spy.lastCall.args;
+  expect(sequences).to.deep.equal(stubBody.map(({ sequence_ref, sequence }) => ({
+    databaseId: sequence_ref.id,
+    name: formatSequenceName(sequence_ref),
+    textFileSequence: sequence,
+  })));
+}
+
+describe('<GetSequencesInBulkComponent />', () => {
+  beforeEach(() => {
+    cy.setupOpenCloningDBTestAuth();
+  });
+
+  it('loads all sequences with a tag', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
+    cy.interceptOpenCloningDBStub('get_text_file_sequences_by_tag', { alias: 'getSequences' });
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
+
+    cy.contains('button', 'Load sequences').should('be.disabled');
+    cy.wait('@getTags');
+    clickMultiSelectOption('Tags', TAG_NAME, 'div');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getSequences');
+
+    cy.getStub('get_text_file_sequences_by_tag').then((stub) => {
+      expect(stub.response.body).to.have.length.greaterThan(1);
+      cy.get('@onSequencesLoadedSpy').should((spy) => expectLoadedSequences(spy, stub.response.body));
+    });
+  });
+
+  it('loads the picked sequences', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name', { alias: 'searchByName' });
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name_uid_query', { alias: 'searchByUid' });
+    cy.interceptOpenCloningDBStub('get_text_file_sequences_by_ids', { alias: 'getSequences' });
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
+
+    cy.contains('button', 'Pick sequences').click();
+    cy.contains('button', 'Load sequences').should('be.disabled');
+    cy.get('input').type(SEQUENCE_NAME);
+    cy.wait('@searchByName');
+    clickMultiSelectOption('Sequences', RegExp(`^${SEQUENCE_NAME}$`), 'div');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getSequences');
+
+    cy.getStub('get_text_file_sequences_by_ids').then((stub) => {
+      cy.get('@onSequencesLoadedSpy').should((spy) => expectLoadedSequences(spy, stub.response.body));
+    });
+  });
+
+  it('shows the error returned by the server', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
+    cy.intercept('GET', `**${endpoints.sequenceTextFiles}*`, {
+      statusCode: 400,
+      body: { detail: 'Too many sequences (300), the maximum is 200.' },
+    }).as('getSequences');
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
+
+    cy.wait('@getTags');
+    clickMultiSelectOption('Tags', TAG_NAME, 'div');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getSequences');
+    cy.get('.MuiAlert-colorError').contains('Too many sequences (300), the maximum is 200.').should('exist');
+    cy.get('@onSequencesLoadedSpy').should('not.have.been.called');
+  });
+
+  it('shows a message when no sequences have the tag', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
+    cy.intercept('GET', `**${endpoints.sequenceTextFiles}*`, { statusCode: 200, body: [] }).as('getSequences');
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
+
+    cy.wait('@getTags');
+    clickMultiSelectOption('Tags', TAG_NAME, 'div');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getSequences');
+    cy.contains('No sequences found with the selected tags.').should('exist');
+    cy.get('@onSequencesLoadedSpy').should('not.have.been.called');
+  });
+
+  it('shows a message when the picked sequences have no content', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name', { alias: 'searchByName' });
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name_uid_query', { alias: 'searchByUid' });
+    cy.intercept('GET', `**${endpoints.sequenceTextFiles}*`, { statusCode: 200, body: [] }).as('getSequences');
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
+
+    cy.contains('button', 'Pick sequences').click();
+    cy.get('input').type(SEQUENCE_NAME);
+    cy.wait('@searchByName');
+    clickMultiSelectOption('Sequences', RegExp(`^${SEQUENCE_NAME}$`), 'div');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getSequences');
+    cy.contains('The selected sequences have no content (template sequences cannot be loaded).').should('exist');
+    cy.contains('No sequences found with the selected tags.').should('not.exist');
+    cy.get('@onSequencesLoadedSpy').should('not.have.been.called');
+  });
+});

package/src/GetSequencesInBulkComponent.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { Alert, Button, CircularProgress, FormControl, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import SequenceSelect from './SequenceSelect';
+import TagMultiSelect from './TagMultiSelect';
+import { formatSequenceName, openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+
+/**
+ * Load several sequences from OpenCloningDB, either all the sequences with any of the selected tags,
+ * or the sequences picked by the user. Template sequences are not included (they have no content).
+ *
+ * onSequencesLoaded receives an array of { databaseId, name, textFileSequence }.
+ */
+function GetSequencesInBulkComponent({ onSequencesLoaded }) {
+  const [mode, setMode] = React.useState('tags');
+  const [selectedTags, setSelectedTags] = React.useState([]);
+  const [selectedSequences, setSelectedSequences] = React.useState([]);
+  const [emptyResult, setEmptyResult] = React.useState(false);
+
+  const { mutate, isPending, error, reset } = useMutation({
+    mutationFn: async (params) => {
+      const { data } = await openCloningDBHttpClient.get(endpoints.sequenceTextFiles, { params });
+      return data.map(({ sequence_ref, sequence }) => ({
+        databaseId: sequence_ref.id,
+        name: formatSequenceName(sequence_ref),
+        textFileSequence: sequence,
+      }));
+    },
+    onSuccess: (sequences) => {
+      setEmptyResult(sequences.length === 0);
+      if (sequences.length > 0) {
+        onSequencesLoaded(sequences);
+      }
+    },
+    retry: false,
+  });
+
+  const onModeChange = (event, newMode) => {
+    if (newMode !== null) {
+      setMode(newMode);
+      setEmptyResult(false);
+      reset();
+    }
+  };
+
+  const selection = mode === 'tags' ? selectedTags : selectedSequences;
+  const onLoad = () => {
+    setEmptyResult(false);
+    // selectedTags are ids, selectedSequences are sequence objects
+    mutate(mode === 'tags' ? { tags: selectedTags } : { ids: selectedSequences.map((item) => item.id) });
+  };
+
+  return (
+    <Stack spacing={2} sx={{ pt: 1 }}>
+      <ToggleButtonGroup value={mode} exclusive onChange={onModeChange} size="small" color="primary">
+        <ToggleButton value="tags">By tag</ToggleButton>
+        <ToggleButton value="sequences">Pick sequences</ToggleButton>
+      </ToggleButtonGroup>
+      <FormControl fullWidth>
+        {mode === 'tags'
+          ? <TagMultiSelect label="Tags" value={selectedTags} onChange={setSelectedTags} allowCreate={false} />
+          : <SequenceSelect label="Sequences" value={selectedSequences} onChange={setSelectedSequences} />}
+      </FormControl>
+      {error && <Alert severity="error">{error.response?.data?.detail || error.message || 'Could not load sequences from OpenCloningDB'}</Alert>}
+      {emptyResult && <Alert severity="info">{mode === 'tags' ? 'No sequences found with the selected tags.' : 'The selected sequences have no content (template sequences cannot be loaded).'}</Alert>}
+      {isPending
+        ? <CircularProgress sx={{ alignSelf: 'center' }} />
+        : <Button variant="contained" disabled={selection.length === 0} onClick={onLoad}>Load sequences</Button>}
+    </Stack>
+  );
+}
+
+export default GetSequencesInBulkComponent;

package/src/OpenCloningDBInterface.js

@@ -1,10 +1,12 @@
 import { Save as SaveIcon, Link as LinkIcon } from '@mui/icons-material';
 import GetPrimerComponent from './GetPrimerComponent';
 import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
+import GetSequencesInBulkComponent from './GetSequencesInBulkComponent';
 import { openCloningDBHttpClient } from './common';
 import endpoints from './endpoints';
 import LoadHistoryComponent from './LoadHistoryComponent';
 import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
+import SubmitCloningStrategiesInBulkComponent from './SubmitCloningStrategiesInBulkComponent';
 import PrimersNotInDatabaseComponent from './PrimersNotInDatabaseComponent';
 
 function isSubmissionDataValid(submissionData) {
@@ -138,4 +140,10 @@ export default {
   locateSequenceInDatabase,
   // Function to submit sequencing files to the database
   submitSequencingFileToDatabase,
+  // Component for loading several sequences at once (e.g. in the assembler), calls
+  // onSequencesLoaded with an array of { databaseId, name, textFileSequence }
+  GetSequencesInBulkComponent,
+  // Dialog for submitting several cloning strategies at once (e.g. the assembler products), receives
+  // { files, onClose, onSuccess }, where files is an array of File (cloning strategy JSON)
+  SubmitCloningStrategiesInBulkComponent,
 };

package/src/OpenCloningDBInterface.multipart.test.js

@@ -25,6 +25,8 @@ vi.mock('./GetSequenceFileAndDatabaseIdComponent', () => ({ default: () => null
 vi.mock('./LoadHistoryComponent', () => ({ default: () => null }));
 vi.mock('./SubmitToDatabaseComponent', () => ({ default: () => null }));
 vi.mock('./PrimersNotInDatabaseComponent', () => ({ default: () => null }));
+vi.mock('./GetSequencesInBulkComponent', () => ({ default: () => null }));
+vi.mock('./SubmitCloningStrategiesInBulkComponent', () => ({ default: () => null }));
 
 import OpenCloningDBInterface from './OpenCloningDBInterface';
 

package/src/OpenCloningDBInterface.test.js

@@ -10,6 +10,8 @@ vi.mock('./GetSequenceFileAndDatabaseIdComponent', () => ({ default: () => null
 vi.mock('./LoadHistoryComponent', () => ({ default: () => null }));
 vi.mock('./SubmitToDatabaseComponent', () => ({ default: () => null }));
 vi.mock('./PrimersNotInDatabaseComponent', () => ({ default: () => null }));
+vi.mock('./GetSequencesInBulkComponent', () => ({ default: () => null }));
+vi.mock('./SubmitCloningStrategiesInBulkComponent', () => ({ default: () => null }));
 
 import OpenCloningDBInterface from './OpenCloningDBInterface';
 

package/src/SubmitCloningStrategiesInBulkComponent.cy.jsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import SubmitCloningStrategiesInBulkComponent from './SubmitCloningStrategiesInBulkComponent';
+import endpoints from './endpoints';
+
+const TAG_NAME = 'cre_lox_recombination';
+const validateUrl = { method: 'POST', pathname: `/db${endpoints.sequencesCloningStrategyBulkValidate}` };
+const submitUrl = { method: 'POST', pathname: `/db${endpoints.sequencesCloningStrategyBulk}` };
+
+const fileContents = ['clear', 'synced', 'warning', 'error'].map((name) => ({
+  name: `${name}.json`,
+  content: JSON.stringify({ sequences: [], sources: [], primers: [], description: name }),
+}));
+const files = fileContents.map(({ name, content }) => new File([content], name, { type: 'application/json' }));
+
+const strategy = (name) => ({ sequences: [], sources: [], primers: [], description: name });
+const clearRow = { file_name: 'clear.json', cloning_strategy: strategy('clear') };
+const syncedRow = { file_name: 'synced.json', cloning_strategy: strategy('synced'), already_synced: true };
+const warningRow = { file_name: 'warning.json', cloning_strategy: strategy('warning'), parsing_warnings: ['Some warning'] };
+const errorRow = { file_name: 'error.json', parsing_errors: ['Cloning strategy is not correct: bad'] };
+const validationRows = [clearRow, syncedRow, warningRow, errorRow];
+
+const createdSequences = [{ id: 100, type: 'Sequence', name: 'product' }];
+
+function bodyToString(body) {
+  return typeof body === 'string' ? body : new TextDecoder().decode(body);
+}
+
+function mountComponent() {
+  const onCloseSpy = cy.spy().as('onCloseSpy');
+  const onSuccessSpy = cy.spy().as('onSuccessSpy');
+  cy.mount(<SubmitCloningStrategiesInBulkComponent files={files} onClose={onCloseSpy} onSuccess={onSuccessSpy} />);
+}
+
+describe('<SubmitCloningStrategiesInBulkComponent />', () => {
+  beforeEach(() => {
+    cy.setupOpenCloningDBTestAuth();
+  });
+
+  it('validates the files as multipart and shows the status of each one', () => {
+    cy.intercept(validateUrl, (req) => {
+      expect(req.headers['content-type']).to.contain('multipart/form-data');
+      const body = bodyToString(req.body);
+      fileContents.forEach(({ name, content }) => {
+        expect(body).to.contain(`filename="${name}"`);
+        expect(body).to.contain(content);
+      });
+      req.reply({ statusCode: 200, body: validationRows });
+    }).as('validate');
+
+    mountComponent();
+    cy.wait('@validate');
+    cy.get('[data-testid="submit-cloning-strategies-in-bulk-dialog"]').within(() => {
+      cy.get('tbody tr').should('have.length', 4);
+      // Errors first, then warnings, informational and clear rows
+      cy.get('tbody tr').eq(0).should('contain', 'error.json').and('contain', 'Invalid').and('contain', 'Cloning strategy is not correct: bad');
+      cy.get('tbody tr').eq(1).should('contain', 'warning.json').and('contain', 'Review warnings').and('contain', 'Some warning');
+      cy.get('tbody tr').eq(2).should('contain', 'synced.json').and('contain', 'Already synced');
+      cy.get('tbody tr').eq(3).should('contain', 'clear.json').and('contain', 'Ready to import');
+      cy.contains('1 clear, 1 warning, 1 error, 1 informational out of 4 uploaded items.').should('exist');
+    });
+  });
+
+  it('submits the importable rows with the selected tags', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: validationRows }).as('validate');
+    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
+    cy.intercept(submitUrl, (req) => {
+      req.reply({ statusCode: 200, body: createdSequences });
+    }).as('submit');
+
+    mountComponent();
+    cy.wait(['@validate', '@getTags']);
+    // Not using clickMultiSelectOption, the click outside fails inside a dialog
+    cy.get('div[role="dialog"]').contains('label', 'Tags to apply (optional)').siblings('div').first().click();
+    cy.get('li[role="option"]').contains(TAG_NAME).click();
+    cy.get('div[role="dialog"]').contains('Upload to OpenCloningDB').click();
+    cy.contains('button', 'Import entries with warnings too').click();
+
+    cy.wait('@submit').then(({ request }) => {
+      expect(request.body).to.deep.equal([
+        { file_name: 'warning.json', cloning_strategy: warningRow.cloning_strategy },
+        { file_name: 'clear.json', cloning_strategy: clearRow.cloning_strategy },
+      ]);
+      cy.getStub('get_tags').then((stub) => {
+        const tag = stub.response.body.find((t) => t.name === TAG_NAME);
+        expect(request.query).to.deep.equal({ tags: String(tag.id) });
+      });
+    });
+    cy.get('@onSuccessSpy').should('have.been.calledOnceWith', createdSequences, [
+      { file_name: 'warning.json', cloning_strategy: warningRow.cloning_strategy },
+      { file_name: 'clear.json', cloning_strategy: clearRow.cloning_strategy },
+    ]);
+    cy.get('@onCloseSpy').should('have.been.calledOnce');
+  });
+
+  it('submits only the clear rows without tags', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: validationRows }).as('validate');
+    cy.intercept(submitUrl, (req) => {
+      expect(req.query).to.deep.equal({});
+      expect(req.body).to.deep.equal([{ file_name: 'clear.json', cloning_strategy: clearRow.cloning_strategy }]);
+      req.reply({ statusCode: 200, body: createdSequences });
+    }).as('submit');
+
+    mountComponent();
+    cy.wait('@validate');
+    cy.contains('button', 'Import entries without warnings').click();
+    cy.wait('@submit');
+    cy.get('@onSuccessSpy').should('have.been.calledOnceWith', createdSequences, [
+      { file_name: 'clear.json', cloning_strategy: clearRow.cloning_strategy },
+    ]);
+  });
+
+  it('does not allow importing when no row is importable', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: [syncedRow, errorRow] }).as('validate');
+    cy.intercept(submitUrl, cy.spy().as('submitSpy'));
+
+    mountComponent();
+    cy.wait('@validate');
+    // Only already synced rows, which are not submitted
+    cy.contains('button', 'Import').should('be.disabled');
+    cy.get('@submitSpy').should('not.have.been.called');
+  });
+
+  it('updates the rows when the submission conflicts with the database', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: [clearRow] }).as('validate');
+    cy.intercept(submitUrl, { statusCode: 409, body: [{ ...clearRow, already_synced: true }] }).as('submit');
+
+    mountComponent();
+    cy.wait('@validate');
+    cy.contains('button', 'Import').click();
+    cy.wait('@submit');
+    cy.contains('Conflicts detected while importing. Review the updated validation results.').should('exist');
+    cy.get('tbody tr').eq(0).should('contain', 'clear.json').and('contain', 'Already synced');
+    cy.get('@onSuccessSpy').should('not.have.been.called');
+    cy.get('@onCloseSpy').should('not.have.been.called');
+  });
+
+  it('shows the error when the submission fails', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: [clearRow] }).as('validate');
+    cy.intercept(submitUrl, { statusCode: 403, body: { detail: 'Insufficient permissions' } }).as('submit');
+
+    mountComponent();
+    cy.wait('@validate');
+    cy.contains('button', 'Import').click();
+    cy.wait('@submit');
+    cy.get('.MuiAlert-colorError').contains('Insufficient permissions').should('exist');
+    cy.get('@onSuccessSpy').should('not.have.been.called');
+  });
+
+  it('shows the error when the validation fails', () => {
+    cy.intercept(validateUrl, { statusCode: 400, body: { detail: 'File too large' } }).as('validate');
+
+    mountComponent();
+    cy.wait('@validate');
+    cy.get('.MuiAlert-colorError').contains('File too large').should('exist');
+    cy.contains('button', 'Close').click();
+    cy.get('@onCloseSpy').should('have.been.calledOnce');
+  });
+
+  it('uses the given title and test id', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: validationRows }).as('validate');
+    cy.mount(<SubmitCloningStrategiesInBulkComponent files={files} onClose={cy.spy()} title="Custom title" dataTestId="custom-test-id" />);
+    cy.wait('@validate');
+    cy.get('[data-testid="custom-test-id"]').should('have.attr', 'role', 'dialog').within(() => {
+      cy.contains('Custom title').should('exist');
+      cy.get('tbody tr').should('have.length', 4);
+    });
+  });
+
+  it('closes without submitting when cancelling', () => {
+    cy.intercept(validateUrl, { statusCode: 200, body: validationRows }).as('validate');
+    cy.intercept(submitUrl, cy.spy().as('submitSpy'));
+
+    mountComponent();
+    cy.wait('@validate');
+    cy.contains('button', 'Cancel').click();
+    cy.get('@onCloseSpy').should('have.been.calledOnce');
+    cy.get('@submitSpy').should('not.have.been.called');
+  });
+});

package/src/SubmitCloningStrategiesInBulkComponent.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Alert, Box, Button } from '@mui/material';
+import error2String from '@opencloning/utils/error2String';
+import BulkUploadModal from './bulk_upload/BulkUploadModal';
+import CloningStrategyBulkUploadPreviewTable from './bulk_upload/CloningStrategyBulkUploadPreviewTable';
+import { validateCloningStrategyFiles, submitCloningStrategies } from './bulk_upload/cloning_strategy_bulk_api';
+import { rowsToCloningStrategySyncResults } from './bulk_upload/bulk_upload_utils';
+
+// Each dialog validates its own files, this gives it a unique key in the query cache
+let validationCounter = 0;
+
+/**
+ * Dialog to submit several cloning strategies at once (the bulk upload of sequences with history):
+ * the files are validated (and synced with the database), the user reviews the result, and the
+ * importable ones are submitted.
+ *
+ * files: array of File (OpenCloning JSON or SnapGene .dna).
+ * onSuccess(sequenceRefs, syncResults): sequenceRefs are returned by the server, all the sequences of the
+ * submitted strategies, both the created ones and those that were already in the database. syncResults
+ * are the submitted strategies ({ file_name, cloning_strategy }).
+ */
+function SubmitCloningStrategiesInBulkComponent({
+  files,
+  onClose,
+  onSuccess,
+  title = 'Upload to OpenCloningDB',
+  dataTestId = 'submit-cloning-strategies-in-bulk-dialog',
+}) {
+  // Files cannot be part of the query key (they are not serializable), and React.useId would be
+  // reused if the dialog is closed and opened again in the same place, so a counter is used.
+  const [validationId] = React.useState(() => ++validationCounter);
+  const queryClient = useQueryClient();
+  const [bulkTags, setBulkTags] = React.useState([]);
+  // Validation rows returned by the server when a submission conflicts with the database
+  const [conflictRows, setConflictRows] = React.useState(null);
+  const [message, setMessage] = React.useState(null);
+
+  // A query (not a mutation) so that it is not sent twice in strict mode, gcTime 0 so that it is never reused
+  const validation = useQuery({
+    queryKey: ['cloningStrategyBulkValidate', validationId],
+    queryFn: () => validateCloningStrategyFiles(files),
+    retry: false,
+    gcTime: 0,
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+  });
+  const rows = conflictRows ?? validation.data ?? [];
+
+  const submission = useMutation({
+    mutationFn: submitCloningStrategies,
+    onSuccess: (sequenceRefs, { syncResults }) => {
+      queryClient.invalidateQueries({ queryKey: ['sequences'] });
+      queryClient.invalidateQueries({ queryKey: ['primers'] });
+      onSuccess?.(sequenceRefs, syncResults);
+      onClose();
+    },
+    onError: (error) => {
+      const updatedRows = error?.response?.status === 409 ? error.response.data : null;
+      if (Array.isArray(updatedRows)) {
+        setConflictRows(updatedRows);
+        setMessage({ severity: 'warning', text: 'Conflicts detected while importing. Review the updated validation results.' });
+        return;
+      }
+      setMessage({ severity: 'error', text: error2String(error) });
+    },
+  });
+
+  const handleSubmit = (submittedRows) => {
+    const syncResults = rowsToCloningStrategySyncResults(submittedRows);
+    if (syncResults.length < 1) {
+      setMessage({ severity: 'warning', text: 'No importable cloning strategies selected' });
+      return;
+    }
+    setMessage(null);
+    submission.mutate({ syncResults, tags: bulkTags });
+  };
+
+  return (
+    <BulkUploadModal open onClose={submission.isPending ? undefined : onClose} title={title} dataTestId={dataTestId}>
+      {message && <Alert severity={message.severity} sx={{ mb: 2 }}>{message.text}</Alert>}
+      {validation.error ? (
+        <>
+          <Alert severity="error" sx={{ mb: 2 }}>{error2String(validation.error)}</Alert>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button variant="outlined" onClick={onClose}>Close</Button>
+          </Box>
+        </>
+      ) : (
+        <CloningStrategyBulkUploadPreviewTable
+          rows={rows}
+          handleSubmit={handleSubmit}
+          handleCancel={onClose}
+          isSubmitting={submission.isPending}
+          isValidating={validation.isPending}
+          bulkTags={bulkTags}
+          onBulkTagsChange={setBulkTags}
+          onTagCreateError={(error) => setMessage({ severity: 'error', text: `Could not create tag: ${error2String(error)}` })}
+        />
+      )}
+    </BulkUploadModal>
+  );
+}
+
+export default SubmitCloningStrategiesInBulkComponent;