@opencloning/opencloningdb 1.8.3 → 1.9.0

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>
+  );
+}