@opencloning/opencloningdb 1.8.8 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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

package/package.json

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

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;

package/src/TagMultiSelect.cy.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import TagMultiSelect from './TagMultiSelect';
+import endpoints from './endpoints';
+
+const tagsUrl = { method: 'GET', pathname: `/db${endpoints.tags}` };
+const postTagUrl = { method: 'POST', pathname: `/db${endpoints.tagPost}` };
+
+const tags = [{ id: 1, name: 'tag_one' }, { id: 2, name: 'tag_two' }];
+
+// TagMultiSelect is controlled, this keeps the selected ids in state
+function Harness({ onChangeSpy, ...props }) {
+  const [value, setValue] = React.useState([]);
+  return (
+    <TagMultiSelect
+      label="Tags"
+      value={value}
+      onChange={(ids) => { onChangeSpy(ids); setValue(ids); }}
+      {...props}
+    />
+  );
+}
+
+function openOptions() {
+  cy.get('label').contains('Tags').siblings('div').first().click();
+}
+
+describe('<TagMultiSelect />', () => {
+  beforeEach(() => {
+    cy.setupOpenCloningDBTestAuth();
+    cy.intercept(tagsUrl, { statusCode: 200, body: tags }).as('getTags');
+  });
+
+  it('selects tags by id', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    cy.mount(<Harness onChangeSpy={onChangeSpy} />);
+    cy.wait('@getTags');
+    openOptions();
+    cy.get('li[role="option"]').contains('tag_two').click();
+    cy.get('@onChangeSpy').should('have.been.calledWith', [2]);
+  });
+
+  it('does not show excluded tags', () => {
+    cy.mount(<Harness onChangeSpy={cy.spy()} excludeTagIds={[1]} />);
+    cy.wait('@getTags');
+    openOptions();
+    cy.get('li[role="option"]').should('have.length', 1);
+    cy.get('li[role="option"]').contains('tag_two').should('exist');
+  });
+
+  it('creates a tag and selects it', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    cy.intercept(postTagUrl, (req) => {
+      expect(req.body).to.deep.equal({ name: 'new_tag' });
+      req.reply({ statusCode: 201, body: { id: 3, name: 'new_tag' } });
+    }).as('postTag');
+    cy.mount(<Harness onChangeSpy={onChangeSpy} />);
+    cy.wait('@getTags');
+    cy.intercept(tagsUrl, { statusCode: 200, body: [...tags, { id: 3, name: 'new_tag' }] }).as('getTagsAfterCreate');
+    cy.get('input').type('new_tag');
+    cy.contains('Create tag').click();
+    cy.wait('@postTag');
+    cy.wait('@getTagsAfterCreate');
+    cy.get('@onChangeSpy').should('have.been.calledWith', [3]);
+    cy.get('.MuiChip-root').contains('new_tag').should('exist');
+  });
+
+  it('calls onCreateError when creating a tag fails', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onCreateErrorSpy = cy.spy().as('onCreateErrorSpy');
+    cy.intercept(postTagUrl, { statusCode: 409, body: { detail: 'Tag already exists' } }).as('postTag');
+    cy.mount(<Harness onChangeSpy={onChangeSpy} onCreateError={onCreateErrorSpy} />);
+    cy.wait('@getTags');
+    cy.get('input').type('tag_three');
+    cy.contains('Create tag').click();
+    cy.wait('@postTag');
+    cy.get('@onCreateErrorSpy').should('have.been.calledOnce');
+    cy.get('@onCreateErrorSpy').its('lastCall.args.0.response.data.detail').should('equal', 'Tag already exists');
+    cy.get('@onChangeSpy').should('not.have.been.called');
+  });
+
+  it('does not offer to create tags if allowCreate is false', () => {
+    cy.mount(<Harness onChangeSpy={cy.spy()} allowCreate={false} />);
+    cy.wait('@getTags');
+    cy.get('input').type('tag_three');
+    cy.contains('No options').should('exist');
+    cy.contains('Create tag').should('not.exist');
+  });
+});

package/src/TagMultiSelect.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { QuerySelect } from '@opencloning/ui';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+import useCreateTagMutation from './useCreateTagMutation';
+
+/**
+ * Multi-select of the workspace tags. value and onChange use arrays of tag ids.
+ * If allowCreate, a tag that does not exist can be created from the options popup,
+ * and it is added to the selection. onCreateError receives the error if the creation fails.
+ */
+function TagMultiSelect({ onChange, label = 'Tags', value, excludeTagIds = [], allowCreate = true, onCreateError, ...rest }) {
+  const query = React.useMemo(() => ({
+    queryKey: ['tags'],
+    queryFn: async () => {
+      const { data } = await openCloningDBHttpClient.get(endpoints.tags);
+      return data;
+    },
+    select: (tags) => tags.filter((tag) => !excludeTagIds.includes(tag.id)),
+  }), [excludeTagIds]);
+
+  const { data: options = [] } = useQuery(query);
+  const valueAsObjects = React.useMemo(
+    () => (value || []).map((id) => options.find((o) => o.id === id)).filter(Boolean),
+    [value, options],
+  );
+
+  const createTagMutation = useCreateTagMutation({ onError: onCreateError });
+
+  const handleCreateTag = React.useCallback(async (inputValue) => {
+    let createdTag;
+    try {
+      createdTag = await createTagMutation.mutateAsync(inputValue);
+    } catch {
+      // Reported by onError
+      return;
+    }
+    const selectedTagIds = value || [];
+    onChange(selectedTagIds.includes(createdTag.id) ? selectedTagIds : [...selectedTagIds, createdTag.id]);
+  }, [createTagMutation, onChange, value]);
+
+  return (
+    <QuerySelect
+      query={query}
+      label={label}
+      loadingMessage="retrieving tags"
+      errorMessage="Could not retrieve tags from OpenCloningDB"
+      getOptionLabel={(tag) => tag.name}
+      getOptionKey={(tag) => tag.id}
+      value={valueAsObjects}
+      onChange={(selectedTags) => onChange(selectedTags?.map((t) => t.id) ?? [])}
+      inputProps={{ size: 'small' }}
+      autoComplete={true}
+      noOptionsAction={allowCreate ? { label: 'Create tag', onClick: handleCreateTag } : null}
+      {...rest}
+    />
+  );
+}
+
+export default TagMultiSelect;

package/src/bulk_upload/BulkUploadModal.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box, Modal, Typography } from '@mui/material';
+
+/** Modal used by the bulk upload previews. Pass onClose undefined to prevent closing it (e.g. while submitting). */
+export default function BulkUploadModal({
+  open,
+  onClose,
+  title,
+  dataTestId,
+  children,
+}) {
+  const titleId = React.useId();
+  return (
+    <Modal open={open} onClose={onClose} aria-labelledby={titleId}>
+      <Box
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        data-testid={dataTestId}
+        sx={{
+          bgcolor: 'background.paper',
+          p: 3,
+          width: 'min(1280px, 98vw)',
+          maxHeight: '90vh',
+          overflow: 'hidden',
+          mx: 'auto',
+          my: '5vh',
+          borderRadius: 1,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography id={titleId} variant="h6" sx={{ mb: 1, textAlign: 'center' }}>
+          {title}
+        </Typography>
+        {children}
+      </Box>
+    </Modal>
+  );
+}

package/src/bulk_upload/BulkUploadPreview.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, CircularProgress } from '@mui/material';
+import { BulkUploadPreviewTableWrapper } from './common';
+
+export default function BulkUploadPreview({
+  rows,
+  getRowsInfo,
+  renderTable,
+  handleSubmit,
+  handleCancel,
+  isSubmitting,
+  isValidating,
+  bulkTags,
+  onBulkTagsChange,
+  onTagCreateError,
+  importMode,
+}) {
+  if (isValidating) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+        <CircularProgress size={24} />
+      </Box>
+    );
+  }
+
+  const rowsInfo = getRowsInfo(rows);
+  return (
+    <BulkUploadPreviewTableWrapper
+      rowsInfo={rowsInfo}
+      handleSubmit={handleSubmit}
+      handleCancel={handleCancel}
+      isSubmitting={isSubmitting}
+      bulkTags={bulkTags}
+      onBulkTagsChange={onBulkTagsChange}
+      onTagCreateError={onTagCreateError}
+      importMode={importMode}
+    >
+      {renderTable(rowsInfo.orderedRows)}
+    </BulkUploadPreviewTableWrapper>
+  );
+}

package/src/bulk_upload/CloningStrategyBulkUploadPreviewTable.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import {
+  cloningStrategyRowIssues,
+  cloningStrategyRowStatus,
+  getCloningStrategyRowsInfo,
+} from './bulk_upload_utils';
+import { CommonTableRow } from './common';
+import BulkUploadPreview from './BulkUploadPreview';
+
+function statusLabel(status) {
+  if (status === 'error') {
+    return 'Invalid';
+  }
+  if (status === 'warning') {
+    return 'Review warnings';
+  }
+  if (status === 'info') {
+    return 'Already synced';
+  }
+  return 'Ready to import';
+}
+
+function strategyCounts(row) {
+  return {
+    sequenceCount: row.cloning_strategy?.sequences?.length ?? 0,
+    primerCount: row.cloning_strategy?.primers?.length ?? 0,
+  };
+}
+
+function CloningStrategyBulkUploadPreviewTableRow({ row }) {
+  const issues = cloningStrategyRowIssues(row);
+  const status = cloningStrategyRowStatus(row);
+  const { sequenceCount, primerCount } = strategyCounts(row);
+
+  return (
+    <CommonTableRow status={status} issues={issues}>
+      <TableCell>{row.file_name || '—'}</TableCell>
+      <TableCell>{statusLabel(status)}</TableCell>
+      <TableCell>{sequenceCount}</TableCell>
+      <TableCell>{primerCount}</TableCell>
+    </CommonTableRow>
+  );
+}
+
+function TableComponent({ rows }) {
+  return (
+    <Table stickyHeader size="small" sx={{ tableLayout: 'fixed', width: '100%' }}>
+      <colgroup>
+        <col style={{ width: '48px' }} />
+        <col style={{ width: '25%' }} />
+        <col style={{ width: '17%' }} />
+        <col style={{ width: '10%' }} />
+        <col style={{ width: '10%' }} />
+        <col style={{ width: '38%' }} />
+      </colgroup>
+      <TableHead sx={{ textAlign: 'center' }}>
+        <TableRow sx={{ textAlign: 'center' }}>
+          <TableCell padding="checkbox"></TableCell>
+          <TableCell>File Name</TableCell>
+          <TableCell>Sync State</TableCell>
+          <TableCell>Sequences</TableCell>
+          <TableCell>Primers</TableCell>
+          <TableCell>Issues</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row, index) => (
+          <CloningStrategyBulkUploadPreviewTableRow
+            key={`${row.file_name || 'cloning-strategy'}-${index}`}
+            row={row}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default function CloningStrategyBulkUploadPreviewTable({
+  rows,
+  handleSubmit,
+  handleCancel,
+  isSubmitting,
+  isValidating,
+  bulkTags,
+  onBulkTagsChange,
+  onTagCreateError,
+}) {
+  return (
+    <BulkUploadPreview
+      rows={rows}
+      getRowsInfo={getCloningStrategyRowsInfo}
+      renderTable={(orderedRows) => <TableComponent rows={orderedRows} />}
+      handleSubmit={handleSubmit}
+      handleCancel={handleCancel}
+      isSubmitting={isSubmitting}
+      isValidating={isValidating}
+      bulkTags={bulkTags}
+      onBulkTagsChange={onBulkTagsChange}
+      onTagCreateError={onTagCreateError}
+    />
+  );
+}

package/src/bulk_upload/bulk_upload_utils.js

@@ -0,0 +1,76 @@
+/** Helpers to display the validation rows returned by the cloning strategy bulk validate endpoint. */
+
+function formatMismatchKind(kind) {
+  return String(kind ?? '').replaceAll('_', ' ');
+}
+
+export function cloningStrategyRowIssues(row) {
+  const issues = [];
+  (row.parsing_errors ?? []).forEach((error) => issues.push(error));
+  (row.parsing_warnings ?? []).forEach((warning) => issues.push(warning));
+  (row.primer_database_id_mismatches ?? []).forEach((mismatch) => {
+    issues.push(
+      `Primer ${mismatch.primer_id} database_id mismatch: ${formatMismatchKind(mismatch.kind)} (provided ${mismatch.provided_database_id})`,
+    );
+  });
+  (row.sequence_database_id_mismatches ?? []).forEach((mismatch) => {
+    issues.push(
+      `Sequence ${mismatch.sequence_id} database_id mismatch: ${formatMismatchKind(mismatch.kind)} (provided ${mismatch.provided_database_id})`,
+    );
+  });
+  if (row.already_synced) {
+    issues.push('Already synced to this workspace');
+  }
+  return issues;
+}
+
+export function cloningStrategyRowStatus(row) {
+  if ((row.parsing_errors ?? []).length > 0) {
+    return 'error';
+  }
+  if (row.already_synced) {
+    return 'info';
+  }
+  if ((row.parsing_warnings ?? []).length > 0) {
+    return 'warning';
+  }
+  if ((row.primer_database_id_mismatches ?? []).length > 0) {
+    return 'warning';
+  }
+  if ((row.sequence_database_id_mismatches ?? []).length > 0) {
+    return 'warning';
+  }
+  return 'clear';
+}
+
+export function getCloningStrategyRowsInfo(rows) {
+  const errorRows = rows.filter((row) => cloningStrategyRowStatus(row) === 'error');
+  const warningRows = rows.filter((row) => cloningStrategyRowStatus(row) === 'warning');
+  const infoRows = rows.filter((row) => cloningStrategyRowStatus(row) === 'info');
+  const clearRows = rows.filter((row) => cloningStrategyRowStatus(row) === 'clear');
+  const orderedRows = [...errorRows, ...warningRows, ...infoRows, ...clearRows];
+  const clearAndWarningRows = [...warningRows, ...clearRows];
+  return {
+    errorRows,
+    warningRows,
+    infoRows,
+    clearRows,
+    orderedRows,
+    clearAndWarningRows,
+    clearRowsCount: clearRows.length,
+    warningRowsCount: warningRows.length,
+    infoRowsCount: infoRows.length,
+    errorRowsCount: errorRows.length,
+    totalRowsCount: rows.length,
+  };
+}
+
+/** The rows that can be submitted (not already synced, with a cloning strategy), in the format of the submit endpoint. */
+export function rowsToCloningStrategySyncResults(rows) {
+  return rows
+    .filter((row) => !row.already_synced && row.cloning_strategy)
+    .map(({ file_name: fileName, cloning_strategy: cloningStrategy }) => ({
+      ['file_name']: fileName,
+      ['cloning_strategy']: cloningStrategy,
+    }));
+}

package/src/bulk_upload/bulk_upload_utils.test.js

@@ -0,0 +1,85 @@
+import { cloningStrategyRowIssues, cloningStrategyRowStatus, getCloningStrategyRowsInfo, rowsToCloningStrategySyncResults } from './bulk_upload_utils';
+
+const clearRow = { file_name: 'clear.json', cloning_strategy: {} };
+const errorRow = { file_name: 'error.json', parsing_errors: ['Cloning strategy is not valid JSON'] };
+const syncedRow = { file_name: 'synced.json', cloning_strategy: {}, already_synced: true };
+const parsingWarningRow = { file_name: 'warning.json', cloning_strategy: {}, parsing_warnings: ['old schema'] };
+const primerMismatchRow = {
+  file_name: 'primer.json',
+  cloning_strategy: {},
+  primer_database_id_mismatches: [{ primer_id: 3, kind: 'not_in_database', provided_database_id: 7 }],
+};
+const sequenceMismatchRow = {
+  file_name: 'sequence.json',
+  cloning_strategy: {},
+  sequence_database_id_mismatches: [{ sequence_id: 2, kind: 'different_sequence', provided_database_id: 10 }],
+};
+
+describe('cloningStrategyRowStatus', () => {
+  it('returns the status of each kind of row', () => {
+    expect(cloningStrategyRowStatus(clearRow)).toBe('clear');
+    expect(cloningStrategyRowStatus(errorRow)).toBe('error');
+    expect(cloningStrategyRowStatus(syncedRow)).toBe('info');
+    expect(cloningStrategyRowStatus(parsingWarningRow)).toBe('warning');
+    expect(cloningStrategyRowStatus(primerMismatchRow)).toBe('warning');
+    expect(cloningStrategyRowStatus(sequenceMismatchRow)).toBe('warning');
+  });
+
+  it('gives precedence to errors, then already synced, then warnings', () => {
+    expect(cloningStrategyRowStatus({ ...syncedRow, ...parsingWarningRow, parsing_errors: ['bad'] })).toBe('error');
+    expect(cloningStrategyRowStatus({ ...parsingWarningRow, ...primerMismatchRow, already_synced: true })).toBe('info');
+  });
+});
+
+describe('cloningStrategyRowIssues', () => {
+  it('returns no issues for a clear row', () => {
+    expect(cloningStrategyRowIssues(clearRow)).toEqual([]);
+  });
+
+  it('lists errors, warnings, mismatches and sync state', () => {
+    const row = {
+      ...primerMismatchRow,
+      ...sequenceMismatchRow,
+      parsing_errors: ['error 1'],
+      parsing_warnings: ['warning 1'],
+      already_synced: true,
+    };
+    expect(cloningStrategyRowIssues(row)).toEqual([
+      'error 1',
+      'warning 1',
+      'Primer 3 database_id mismatch: not in database (provided 7)',
+      'Sequence 2 database_id mismatch: different sequence (provided 10)',
+      'Already synced to this workspace',
+    ]);
+  });
+});
+
+describe('getCloningStrategyRowsInfo', () => {
+  it('orders rows (errors, warnings, info, clear) and counts them', () => {
+    const rows = [clearRow, syncedRow, parsingWarningRow, errorRow, sequenceMismatchRow];
+    const info = getCloningStrategyRowsInfo(rows);
+    expect(info.orderedRows).toEqual([errorRow, parsingWarningRow, sequenceMismatchRow, syncedRow, clearRow]);
+    expect(info.clearRows).toEqual([clearRow]);
+    expect(info.clearAndWarningRows).toEqual([parsingWarningRow, sequenceMismatchRow, clearRow]);
+    expect(info.errorRowsCount).toBe(1);
+    expect(info.warningRowsCount).toBe(2);
+    expect(info.infoRowsCount).toBe(1);
+    expect(info.clearRowsCount).toBe(1);
+    expect(info.totalRowsCount).toBe(5);
+  });
+});
+
+describe('rowsToCloningStrategySyncResults', () => {
+  it('keeps the rows with a strategy that are not synced, with only file_name and cloning_strategy', () => {
+    const rows = [clearRow, syncedRow, parsingWarningRow, errorRow, sequenceMismatchRow];
+    expect(rowsToCloningStrategySyncResults(rows)).toEqual([
+      { file_name: 'clear.json', cloning_strategy: {} },
+      { file_name: 'warning.json', cloning_strategy: {} },
+      { file_name: 'sequence.json', cloning_strategy: {} },
+    ]);
+  });
+
+  it('returns an empty array if nothing can be submitted', () => {
+    expect(rowsToCloningStrategySyncResults([syncedRow, errorRow])).toEqual([]);
+  });
+});

package/src/bulk_upload/cloning_strategy_bulk_api.js

@@ -0,0 +1,28 @@
+import { openCloningDBHttpClient } from '../common';
+import endpoints from '../endpoints';
+
+/**
+ * Validate cloning strategy files (OpenCloning JSON or SnapGene .dna) against the database.
+ * files: array of File. Resolves to the validation rows, one per file.
+ */
+export async function validateCloningStrategyFiles(files) {
+  const formData = new FormData();
+  files.forEach((file) => {
+    formData.append('files', file);
+  });
+  const { data } = await openCloningDBHttpClient.post(endpoints.sequencesCloningStrategyBulkValidate, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  return data;
+}
+
+/**
+ * Submit validated cloning strategies. syncResults as returned by rowsToCloningStrategySyncResults,
+ * tags: tag ids to apply to the new sequences and primers. Resolves to the sequence refs of the strategies.
+ */
+export async function submitCloningStrategies({ syncResults, tags }) {
+  const { data } = await openCloningDBHttpClient.post(endpoints.sequencesCloningStrategyBulk, syncResults, {
+    params: tags?.length ? { tags } : {},
+  });
+  return data;
+}

package/src/bulk_upload/common.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Typography, TableContainer, Paper, Button, CircularProgress, Box, TableRow, TableCell, FormControl } from '@mui/material';
+import TagMultiSelect from '../TagMultiSelect';
+import { Cancel as CancelIcon, CheckCircle as CheckCircleIcon, Info as InfoIcon, Warning as WarningIcon } from '@mui/icons-material';
+
+
+/**
+ * Wraps a bulk upload preview table with the summary and the import / cancel buttons.
+ * The tag field is shown if onBulkTagsChange is passed, onTagCreateError receives the error if creating a tag fails.
+ */
+export function BulkUploadPreviewTableWrapper({
+  rowsInfo,
+  handleSubmit,
+  handleCancel,
+  isSubmitting,
+  children,
+  bulkTags = [],
+  onBulkTagsChange,
+  onTagCreateError,
+  importMode = 'clearAndWarnings',
+}) {
+  const { clearRows, clearAndWarningRows, warningRowsCount, errorRowsCount, infoRowsCount = 0, orderedRows } = rowsInfo;
+  const allClearRequired = importMode === 'allClearRequired';
+  const canImportAll = clearRows.length === orderedRows.length && orderedRows.length > 0;
+  const summaryText = allClearRequired
+    ? `${clearRows.length} clear, ${errorRowsCount} error${infoRowsCount ? `, ${infoRowsCount} informational` : ''} out of ${orderedRows.length} uploaded items.`
+    : `${clearRows.length} clear, ${warningRowsCount} warning, ${errorRowsCount} error${infoRowsCount ? `, ${infoRowsCount} informational` : ''} out of ${orderedRows.length} uploaded items.`;
+  const orderingText = allClearRequired
+    ? 'All rows must be clear to import. Errors are shown first.'
+    : infoRowsCount > 0
+      ? 'Errors are shown first, then warnings, informational rows, and clear rows.'
+      : 'Errors are shown first, then warnings, then clear rows.';
+
+  const clearButtonText = warningRowsCount === 0 ? 'Import' : 'Import entries without warnings';
+  return (
+    <>
+      {onBulkTagsChange && (
+        <FormControl fullWidth sx={{ mb: 2 }}>
+          <TagMultiSelect
+            label="Tags to apply (optional)"
+            value={bulkTags}
+            onChange={onBulkTagsChange}
+            onCreateError={onTagCreateError}
+            data-testid="bulk-upload-tags"
+          />
+        </FormControl>
+      )}
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        {orderingText}
+      </Typography>
+
+      <TableContainer
+        component={Paper}
+        variant="outlined"
+        sx={{ mb: 2, maxHeight: '55vh', overflowY: 'auto', flex: 1, minHeight: 0 }}
+      >
+        {children}
+      </TableContainer>
+
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        {summaryText}
+      </Typography>
+
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+        <Button
+          variant="outlined"
+          color="error"
+          onClick={handleCancel}
+          disabled={isSubmitting}
+        >
+          Cancel
+        </Button>
+        {allClearRequired ? (
+          <Button
+            variant="contained"
+            onClick={() => handleSubmit(orderedRows)}
+            disabled={!canImportAll || isSubmitting}
+            data-testid="bulk-upload-import-button"
+          >
+            {isSubmitting ? <CircularProgress size={24} /> : 'Import'}
+          </Button>
+        ) : (
+          <>
+            <Button
+              variant="contained"
+              onClick={() => handleSubmit(clearRows, 'clear')}
+              disabled={clearRows.length < 1 || isSubmitting}
+            >
+              {isSubmitting ? <CircularProgress size={24} /> : clearButtonText}
+            </Button>
+            {warningRowsCount > 0 && (
+              <Button
+                variant="contained"
+                color="warning"
+                onClick={() => handleSubmit(clearAndWarningRows, 'with warnings')}
+                disabled={clearAndWarningRows.length < 1 || isSubmitting}
+              >
+                {isSubmitting ? <CircularProgress size={24} /> : 'Import entries with warnings too'}
+              </Button>
+            )}
+          </>
+        )}
+      </Box>
+    </>
+  );
+}
+  
+export function StatusIcon({ status }) {
+  const isClear = status === 'clear';
+  const isError = status === 'error';
+  const isInfo = status === 'info';
+
+  return isClear ? (
+    <CheckCircleIcon color="success" />
+  ) : isError ? (
+    <CancelIcon color="error" />
+  ) : isInfo ? (
+    <InfoIcon color="info" />
+  ) : (
+    <WarningIcon color="warning" />
+  );
+}
+
+
+export function CommonTableRow({ status, issues, children }) {
+
+  return (
+    <TableRow>
+      <TableCell align="center" padding="checkbox">
+        <StatusIcon status={status} />
+      </TableCell>
+      {children}
+      <TableCell>
+        {status !== 'clear' && (
+          issues.map((issue) => (
+            <div key={issue}>{issue}</div>
+          ))
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/endpoints.js

@@ -6,6 +6,7 @@ const endpoints = {
   sequences: '/sequences',
   sequence: (id) => `/sequences/${e(id)}`,
   sequenceTextFile: (id) => `/sequences/${e(id)}/text_file_sequence`,
+  sequenceTextFiles: '/sequences/text_file_sequences',
   sequenceChangeAnnotation: (id) => `/sequences/${e(id)}/change_annotation`,
   sequenceCloningStrategy: (id) => `/sequences/${e(id)}/cloning_strategy`,
   sequenceChildren: (id) => `/sequences/${e(id)}/children`,

package/src/index.js

@@ -2,3 +2,8 @@ export { default as OpenCloningDBInterface } from './OpenCloningDBInterface.js';
 export { openCloningDBHttpClient, setUnauthorizedHandler, setHttpClientTokenGetter, setWorkspaceHeader, clearWorkspaceHeader, baseUrl, formatSequenceName } from './common.js';
 export { default as endpoints } from './endpoints.js';
 export { default as SequenceSelect } from './SequenceSelect.jsx';
+export { default as TagMultiSelect } from './TagMultiSelect.jsx';
+export { default as SubmitCloningStrategiesInBulkComponent } from './SubmitCloningStrategiesInBulkComponent.jsx';
+export { default as BulkUploadPreview } from './bulk_upload/BulkUploadPreview.jsx';
+export { default as BulkUploadModal } from './bulk_upload/BulkUploadModal.jsx';
+export { CommonTableRow } from './bulk_upload/common.jsx';

package/src/useCreateTagMutation.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+
+/**
+ * Mutation to create a tag, called with the tag name, resolves to the created tag.
+ * onError receives the error if the creation fails.
+ */
+export default function useCreateTagMutation({ onError } = {}) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (tagName) => {
+      const { data } = await openCloningDBHttpClient.post(endpoints.tagPost, { name: tagName });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['tags'] });
+    },
+    onError,
+  });
+}