@opencloning/ui 1.0.0

package/src/components/eLabFTW/envValues.js

@@ -0,0 +1,7 @@
+/* v8 ignore start */
+
+export const writeApiKey = import.meta.env.VITE_ELABFTW_API_WRITE_KEY || '';
+export const readApiKey = import.meta.env.VITE_ELABFTW_API_READ_KEY || '';
+export const baseUrl = import.meta.env.VITE_ELABFTW_BASE_URL || '';
+
+/* v8 ignore end */

package/src/components/eLabFTW/utils.js

@@ -0,0 +1,39 @@
+// These functions are here because they are used across files,
+// so including them in eLabFTWInterface.js would make circular dependencies.
+// They are not included in common.js to be able to mock eLabFTWHttpClient in tests.
+import { eLabFTWHttpClient, readHeaders } from './common';
+
+export function error2String(error) {
+  if (error.code === 'ERR_NETWORK') { return 'Network error: Cannot connect to eLabFTW'; }
+  if (!error.code) {
+    return error.message || 'Internal error, please contact the developers.';
+  }
+
+  if (error.response.status === 500) return 'Internal server error';
+  const { description } = error.response.data;
+  if (typeof description === 'string') {
+    return description;
+  }
+  return 'Request error, please contact the developers.';
+}
+
+export const getFileFromELabFTW = async (itemId, fileInfo) => {
+  const url = `/api/v2/items/${itemId}/uploads/${fileInfo.id}?format=binary`;
+  try {
+    const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders, responseType: 'blob' });
+    // Convert blob to file
+    return new File([resp.data], fileInfo.real_name);
+  } catch (e) {
+    console.error(e);
+    throw new Error(`${error2String(e)}`);
+  }
+};
+
+export function arrayCombinations(sets) {
+  if (sets.length === 1) {
+    return sets[0].map((el) => [el]);
+  } else
+    return sets[0].flatMap((val) =>
+      arrayCombinations(sets.slice(1)).map((c) => [val].concat(c))
+    );
+};

package/src/components/form/CustomFormHelperText.jsx

@@ -0,0 +1,10 @@
+import { FormHelperText } from '@mui/material';
+import React from 'react';
+
+function CustomFormHelperText({ children }) {
+  return (
+    <FormHelperText component="div" style={{ fontSize: 'x-small', marginLeft: 0, marginRight: 0, position: 'absolute', botom: '0px' }}>{children}</FormHelperText>
+  );
+}
+
+export default CustomFormHelperText;

package/src/components/form/EnzymeMultiSelect.cy.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import EnzymeMultiSelect from './EnzymeMultiSelect';
+import store from '@opencloning/store';
+import { cloningActions } from '@opencloning/store/cloning';
+
+const { setConfig } = cloningActions;
+describe('<EnzymeMultiSelect />', () => {
+  beforeEach(() => {
+    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
+  });
+  it('can add and remove enzymes, sets enzymes', () => {
+    // see: https://on.cypress.io/mounting-react
+    const setEnzymesSpy = cy.spy().as('setEnzymesSpy');
+    cy.mount(<EnzymeMultiSelect setEnzymes={setEnzymesSpy} />);
+    cy.get('.MuiInputBase-root').click();
+    // All enzymes shown
+    cy.get('div[role="presentation"]', { timeout: 20000 }).contains('AanI');
+    // Type EcoRI
+    cy.get('label').contains('Enzymes used').siblings('div').children('input')
+      .type('EcoRI');
+    cy.get('div[role="presentation"]').contains('AanI').should('not.exist');
+    cy.get('div[role="presentation"]').contains('EcoRI');
+    // Select the option
+    cy.get('div[role="presentation"]').contains('EcoRI').click();
+    cy.get('@setEnzymesSpy').should('have.been.calledWith', ['EcoRI']);
+    // Select SalI
+    cy.get('label').contains('Enzymes used').siblings('div').children('input')
+      .clear('');
+    cy.get('label').contains('Enzymes used').siblings('div').children('input')
+      .type('SalI');
+    cy.get('div[role="presentation"]').contains('SalI').click();
+    cy.get('@setEnzymesSpy').should('have.been.calledWith', ['EcoRI', 'SalI']);
+    // There should be two chips
+    cy.get('.MuiChip-root').contains('EcoRI');
+    cy.get('.MuiChip-root').contains('SalI');
+    // We can remove SalI
+    cy.get('.MuiChip-root').contains('SalI').siblings('svg').click();
+    cy.get('.MuiChip-root').contains('SalI').should('not.exist');
+    cy.get('.MuiChip-root').contains('EcoRI');
+    // We can remove EcoRI
+    cy.get('.MuiChip-root').contains('EcoRI').siblings('svg').click();
+    cy.get('.MuiChip-root').should('not.exist');
+  });
+  it('shows error message when server is down', () => {
+    cy.intercept('GET', '/restriction_enzyme_list', {
+      statusCode: 500,
+      body: 'Server down',
+    });
+    cy.mount(<EnzymeMultiSelect setEnzymes={() => {}} />);
+    cy.get('.MuiAlert-message').contains('Could not retrieve enzymes from server');
+  });
+  it('shows loading message', () => {
+    cy.intercept('GET', '/restriction_enzyme_list', {
+      delayMs: 1000,
+      body: { enzyme_names: ['EcoRI', 'SalI'] },
+    });
+    cy.mount(<EnzymeMultiSelect setEnzymes={() => {}} />);
+    cy.get('.MuiCircularProgress-svg');
+    cy.contains('retrieving enzymes...').should('exist');
+  });
+});

package/src/components/form/EnzymeMultiSelect.jsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import GetRequestMultiSelect from './GetRequestMultiSelect';
+import useBackendRoute from '../../hooks/useBackendRoute';
+import useHttpClient from '../../hooks/useHttpClient';
+
+function EnzymeMultiSelect({ setEnzymes, label = 'Enzymes used', multiple = true }) {
+  const backendRoute = useBackendRoute();
+  const url = backendRoute('restriction_enzyme_list');
+  const getOptionsFromResponse = React.useCallback((data) => data.enzyme_names, []);
+  const messages = React.useMemo(() => ({
+    loadingMessage: 'retrieving enzymes...',
+    errorMessage: 'Could not retrieve enzymes from server',
+  }), []);
+  const onChange = React.useCallback((value) => setEnzymes(value), [setEnzymes]);
+  const httpClient = useHttpClient();
+
+  return (
+
+    <GetRequestMultiSelect
+      fullWidth
+      className="enzyme-multi-select"
+      getOptionsFromResponse={getOptionsFromResponse}
+      url={url}
+      label={label}
+      httpClient={httpClient}
+      messages={messages}
+      onChange={onChange}
+      multiple={multiple}
+      getOptionLabel={(option) => option}
+    />
+  );
+}
+
+export default React.memo(EnzymeMultiSelect);

package/src/components/form/GetRequestMultiSelect.jsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { Alert, Button, CircularProgress, FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material';
+
+export default function GetRequestMultiSelect({ 
+  getOptionsFromResponse,
+  url,
+  label,
+  messages,
+  onChange,
+  httpClient,
+  multiple = true,
+  autoComplete = true,
+  getOptionLabel,
+  requestHeaders = {},
+  noOptionsMessage = 'No options found',
+  requestParams = {},
+  ...rest
+}) {
+  const { loadingMessage, errorMessage } = messages;
+  const [options, setOptions] = React.useState([]);
+  const [connectAttempt, setConnectAttemp] = React.useState(0);
+  const [error, setError] = React.useState(false);
+  const [waitingMessage, setWaitingMessage] = React.useState(loadingMessage);
+
+  React.useEffect(() => {
+    httpClient.get(url, { headers: requestHeaders, params: requestParams }).then(({ data }) => {
+      setWaitingMessage(null);
+      const respOptions = getOptionsFromResponse(data);
+      if (!Array.isArray(respOptions)) {
+        throw new Error('Expected array of options from getOptionsFromResponse');
+      }
+      setOptions(respOptions);
+      setError(false);
+    }).catch((e) => { setWaitingMessage(errorMessage); setError(true); setOptions([]); });
+  }, [connectAttempt]);
+
+  if (error) {
+    return (
+      <Alert
+        sx={{ alignItems: 'center' }}
+        severity="error"
+        action={(
+          <Button color="inherit" size="small" onClick={() => { setWaitingMessage('Retrying...'); setConnectAttemp(connectAttempt + 1); }}>
+            Retry
+          </Button>
+        )}
+      >
+        {waitingMessage}
+      </Alert>
+    );
+  }
+
+  if (waitingMessage) {
+    return (
+
+      <Alert severity="info" icon={<CircularProgress color="inherit" size="1em" />}>
+        {waitingMessage}
+      </Alert>
+
+    );
+  }
+
+  return (
+    <FormControl {...rest}>
+      {autoComplete ? (
+        <Autocomplete
+          multiple={multiple}
+          onChange={(event, value) => { onChange(value); }}
+          id="tags-standard"
+          options={options}
+          getOptionLabel={getOptionLabel}
+          defaultValue={multiple ? [] : ''}
+          freeSolo
+          forcePopupIcon
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={label}
+              error={error}
+              helperText={options.length === 0 ? noOptionsMessage : ''}
+            />
+          )}
+        />
+      ) : (
+        <>
+          <InputLabel id={`select-${label.replaceAll(' ', '-')}`}>{label}</InputLabel>
+          <Select
+            multiple={multiple}
+            onChange={(event) => { onChange(event.target.value, options); }}
+            label={label}
+            defaultValue={multiple ? [] : ''}
+            error={options.length === 0}
+          >
+            {options.map((option) => (
+              <MenuItem key={getOptionLabel(option)} value={getOptionLabel(option)}>
+                {getOptionLabel(option)}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText>{options.length === 0 ? noOptionsMessage : ''}</FormHelperText>
+        </>
+      )}
+    </FormControl>
+  );
+}

package/src/components/form/LabelWithTooltip.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Tooltip } from '@mui/material';
+import InfoIcon from '@mui/icons-material/Info';
+
+function LabelWithTooltip({ label, tooltip }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <span>{label}</span>
+      <Tooltip title={<span style={{ fontSize: '1.4em' }}>{tooltip}</span>} arrow placement="right">
+        <InfoIcon fontSize="small" color="primary" sx={{ marginLeft: '0.25em' }} />
+      </Tooltip>
+    </div>
+  );
+}
+
+export default React.memo(LabelWithTooltip);

package/src/components/form/PostRequestSelect.cy.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import PostRequestSelect from './PostRequestSelect';
+
+describe('<PostRequestSelect />', () => {
+  it('works normally', () => {
+    // see: https://on.cypress.io/mounting-react
+    const setValueSpy = cy.spy().as('setValueSpy');
+    // Return a normal promise with a list of dummy objects with a delay of 2 seconds
+    const getOptions = (query) => new Promise((resolve) => setTimeout(() => resolve([{ name: `${query}-1` }, { name: `${query}-2` }]), 2000));
+    const getOptionLabel = (option) => option.name;
+    const isOptionEqualToValue = (option, value) => option.name === value.name;
+
+    cy.mount(<PostRequestSelect setValue={setValueSpy} getOptions={getOptions} getOptionLabel={getOptionLabel} isOptionEqualToValue={isOptionEqualToValue} textLabel="Test label" />);
+    cy.get('input').type('dummy');
+    // waiting message is shown
+    cy.contains('Loading options...').should('exist');
+    // wait for the options to appear
+    cy.contains('dummy-1').should('exist');
+    cy.contains('dummy-2').should('exist');
+    // Click on the first option
+    cy.contains('dummy-1').click();
+    // The spy should have been called with the first option
+    cy.get('@setValueSpy').should('have.been.calledWith', { name: 'dummy-1' });
+  });
+  it('shows an error message when the request fails', () => {
+    const setValueSpy = cy.spy().as('setValueSpy');
+    // Same, but 1 second delay
+    const getOptions = () => new Promise((_, reject) => setTimeout(() => reject(new Error('Network error')), 1000));
+
+    const getOptionLabel = (option) => option.name;
+    const isOptionEqualToValue = (option, value) => option.name === value.name;
+
+    cy.mount(<PostRequestSelect setValue={setValueSpy} getOptions={getOptions} getOptionLabel={getOptionLabel} isOptionEqualToValue={isOptionEqualToValue} textLabel="Test label" />);
+    cy.get('input').type('dummy');
+    // waiting message is shown
+    cy.contains('Loading options...').should('exist');
+    // wait for the error message to appear
+    cy.contains('Could not retrieve data').should('exist');
+    // Click on the retry button
+    cy.contains('Retry').click();
+    // waiting message is shown
+    cy.contains('Retrying...').should('exist');
+    // wait for the error message to appear
+    cy.contains('Could not retrieve data').should('exist');
+  });
+  it('does not filter options when disableFiltering is true', () => {
+    const setValueSpy = cy.spy().as('setValueSpy');
+    const getOptions = (query) => new Promise((resolve) => resolve([{ name: 'AAA-1' }, { name: 'AAA-2' }]));
+    const getOptionLabel = (option) => option.name;
+    const isOptionEqualToValue = (option, value) => option.name === value.name;
+    cy.mount(<PostRequestSelect setValue={setValueSpy} getOptions={getOptions} getOptionLabel={getOptionLabel} isOptionEqualToValue={isOptionEqualToValue} textLabel="Test label" disableFiltering />);
+    cy.get('input').type('BBB');
+    cy.contains('AAA-1').should('exist');
+    cy.contains('AAA-2').should('exist');
+    cy.get('input').clear();
+    cy.get('input').type('AAA');
+    cy.contains('AAA-1').should('exist');
+    cy.contains('AAA-2').should('exist');
+
+    cy.mount(<PostRequestSelect setValue={setValueSpy} getOptions={getOptions} getOptionLabel={getOptionLabel} isOptionEqualToValue={isOptionEqualToValue} textLabel="Test label" disableFiltering={false} />);
+    cy.get('input').clear();
+    cy.get('input').type('BBB');
+    cy.contains('AAA-1').should('not.exist');
+    cy.contains('AAA-2').should('not.exist');
+    cy.get('input').clear();
+    cy.get('input').type('AAA');
+    cy.contains('AAA-1').should('exist');
+    cy.contains('AAA-2').should('exist');
+  });
+});

package/src/components/form/PostRequestSelect.jsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { Alert, Button, FormControl } from '@mui/material';
+
+export default function PostRequestSelect({ setValue, getOptions, getOptionLabel, isOptionEqualToValue, textLabel, disableFiltering = true, ...rest }) {
+  // The reason for disableFiltering is that we allow the server to filter the options,
+  // and whatever matches may not end up in the option label. For instance, when querying
+  // for species, we show the species name + id, but it may be that something else matches
+  // .e.g. "yeast" for "Saccharomyces cerevisiae - 4932"
+  const [options, setOptions] = React.useState([]);
+  const [connectAttempt, setConnectAttemp] = React.useState(0);
+  const [error, setError] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
+  // user input state
+  const [userInput, setUserInput] = React.useState('');
+  const [noOptionsText, setNoOptionsText] = React.useState('');
+
+  React.useEffect(() => {
+    async function fetchData() {
+      if (userInput.length >= 3) {
+        try {
+          setNoOptionsText('Loading options...');
+          const receivedOptions = await getOptions(userInput);
+          setOptions(receivedOptions);
+          setErrorMessage(null);
+          setError(false);
+          if (receivedOptions.length === 0) { setNoOptionsText('No results found'); }
+        } catch (e) {
+          setErrorMessage('Could not retrieve data');
+          setError(true);
+        }
+      } else { setNoOptionsText(''); setOptions([]); }
+    }
+    // Delay the fetch to avoid too many requests
+    const timeOutId = setTimeout(() => fetchData(), 500);
+    return () => clearTimeout(timeOutId);
+  }, [connectAttempt]);
+
+  React.useEffect(() => {
+    // Reset the value when the component is re-rendered at the same position
+    // with different functions
+    setUserInput('');
+    setOptions([]);
+    setNoOptionsText('');
+  }, [setValue, getOptions, getOptionLabel, isOptionEqualToValue, textLabel]);
+
+  if (error) {
+    return (
+      <Alert
+        sx={{ alignItems: 'center' }}
+        severity="error"
+        action={(
+          <Button color="inherit" size="small" onClick={() => { setErrorMessage('Retrying...'); setConnectAttemp(connectAttempt + 1); }}>
+            Retry
+          </Button>
+        )}
+      >
+        {errorMessage}
+      </Alert>
+    );
+  }
+
+  return (
+    <FormControl {...rest}>
+      <Autocomplete
+        onChange={(event, value) => { setValue(value); setUserInput(getOptionLabel(value)); }}
+        // Change options only when input changes (not when an option is picked)
+        onInputChange={(event, newInputValue, reason) => { if (reason === 'input') { setUserInput(newInputValue); setConnectAttemp(connectAttempt + 1); } }}
+        id="tags-standard"
+        options={options}
+        noOptionsText={noOptionsText || 'Type at least 3 characters to search'}
+        getOptionLabel={getOptionLabel}
+        isOptionEqualToValue={isOptionEqualToValue}
+        inputValue={userInput}
+        filterOptions={disableFiltering ? (x) => x : undefined}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label={textLabel}
+          />
+        )}
+      />
+    </FormControl>
+  );
+}

package/src/components/form/RequestStatusWrapper.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import RetryAlert from './RetryAlert';
+
+function RequestStatusWrapper({ children, requestStatus, retry }) {
+  if (requestStatus.status === 'success') {
+    return children;
+  }
+  if (requestStatus.status === 'loading') {
+    return <div>Loading...</div>;
+  }
+  if (requestStatus.status === 'error') {
+    return <RetryAlert onRetry={retry} sx={{ margin: 'auto', width: '80%', my: 2 }}>{requestStatus.message}</RetryAlert>;
+  }
+  return null;
+}
+
+export default RequestStatusWrapper;

package/src/components/form/RetryAlert.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Alert, Button } from '@mui/material';
+
+function RetryAlert({ onRetry, children, ...props }) {
+  return (
+    <Alert
+      severity="error"
+      action={(
+        <Button color="inherit" size="small" onClick={onRetry}>
+          Retry
+        </Button>
+      )}
+      {...props}
+    >
+      {children}
+    </Alert>
+  );
+}
+
+export default RetryAlert;

package/src/components/form/ServerErrorMessage.jsx

@@ -0,0 +1,10 @@
+import { Alert } from '@mui/material';
+import React from 'react';
+
+function ServerErrorMessage({ serverError }) {
+  return (
+    <Alert severity="error">{serverError}</Alert>
+  );
+}
+
+export default ServerErrorMessage;

package/src/components/form/SubmitButtonBackendAPI.jsx

@@ -0,0 +1,15 @@
+import { Alert, Button, CircularProgress } from '@mui/material';
+import React from 'react';
+
+function SubmitButtonBackendAPI({ requestStatus, children, ...other }) {
+  return (
+    <>
+      <Button fullWidth className="submit-backend-api" type="submit" variant="contained" style={{ height: '2.5em' }} {...other}>
+        {requestStatus.status !== 'loading' ? children : (<CircularProgress className="loading-progress" color="inherit" size="2em" />)}
+      </Button>
+      {requestStatus.status === 'error' && (<Alert sx={{ marginTop: '10px' }} severity="error">{requestStatus.message}</Alert>)}
+    </>
+  );
+}
+
+export default SubmitButtonBackendAPI;

package/src/components/form/SubmitToDatabaseDialog.jsx

@@ -0,0 +1,133 @@
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import React from 'react';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
+import useDatabase from '../../hooks/useDatabase';
+import { cloningActions } from '@opencloning/store/cloning';
+import { getSubState } from '@opencloning/utils/network';
+import IntermediatesDisclaimer from './intermediates_disclaimer.svg';
+
+function SubmitToDatabaseDialog({ id, dialogOpen, setDialogOpen, resourceType }) {
+  const dispatch = useDispatch();
+  const store = useStore();
+  const [submissionData, setSubmissionData] = React.useState(null);
+  const [errorMessage, setErrorMessage] = React.useState('');
+  const [disclaimerAccepted, setDisclaimerAccepted] = React.useState(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const database = useDatabase();
+
+  // Checks if there are parent sources that are not in the database
+  const hasUnsavedIntermediates = useSelector((state) => {
+    if (resourceType === 'primer') {
+      return false;
+    }
+    const substate = getSubState(state, id, true);
+    const immediateParent = substate.sources.find((source) => source.id === id);
+    return substate.sources.some((source) => (source.id !== immediateParent?.id) && !source.database_id);
+  });
+
+  const handleClose = () => {
+    setDialogOpen(false);
+    setErrorMessage('');
+    setDisclaimerAccepted(false);
+    setIsSubmitting(false);
+  };
+
+  if (hasUnsavedIntermediates && !disclaimerAccepted) {
+    return (
+      <Dialog open={dialogOpen} onClose={handleClose} sx={{ textAlign: 'center' }}>
+        <DialogTitle>Unsaved Intermediates</DialogTitle>
+        <DialogContent sx={{ fontSize: '1.2em' }}>
+          <p>There are intermediate sequences between the sequence being saved and its first ancestor in the database.</p>
+          <p>
+            Intermediate sequences will be stored in the history of the sequence you are saving, but not as separate entities
+            in the database.
+          </p>
+          <img style={{ marginTop: '10px' }} src={IntermediatesDisclaimer} alt="Intermediates Disclaimer" />
+        </DialogContent>
+        <DialogActions>
+          <Button color="success" onClick={() => setDisclaimerAccepted(true)}>I understand</Button>
+          <Button color="error" onClick={handleClose}>Cancel</Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={handleClose}
+      PaperProps={{
+        component: 'form',
+        sx: { width: '40%' },
+        onSubmit: async (event) => {
+          event.preventDefault();
+          if (isSubmitting) {
+            return;
+          }
+          // This should never happen
+          if (!database.isSubmissionDataValid(submissionData)) {
+            setErrorMessage('Submission data is invalid');
+            return;
+          }
+          try {
+            setIsSubmitting(true);
+            if (resourceType === 'primer') {
+              const oldPrimer = store.getState().cloning.primers.find((p) => p.id === id);
+              const primerDatabaseId = await database.submitPrimerToDatabase({ submissionData, primer: oldPrimer });
+              const newPrimer = { ...oldPrimer, database_id: primerDatabaseId };
+              batch(() => {
+                dispatch(cloningActions.editPrimer(newPrimer));
+                dispatch(cloningActions.addAlert({
+                  message: 'Primer created successfully',
+                  severity: 'success',
+                }));
+              });
+            } else if (resourceType === 'sequence') {
+              const substate = getSubState(store.getState(), id, true);
+              let databaseId;
+              let primerMappings;
+              try {
+                ({ databaseId, primerMappings } = await database.submitSequenceToDatabase({ submissionData, substate, id }));
+              } catch (error) {
+                console.error(error);
+                setErrorMessage(error.message);
+                setIsSubmitting(false);
+                return;
+              }
+              batch(() => {
+                primerMappings.forEach((mapping) => dispatch(cloningActions.addDatabaseIdToPrimer(mapping)));
+                dispatch(cloningActions.addDatabaseIdToSequence({ databaseId, id }));
+                dispatch(cloningActions.addAlert({
+                  message: 'Sequence created successfully',
+                  severity: 'success',
+                }));
+              });
+            }
+          } catch (error) {
+            console.error(error);
+            setErrorMessage(error.message);
+            setIsSubmitting(false);
+            return;
+          }
+          setIsSubmitting(false);
+          setDialogOpen(false);
+          setErrorMessage('');
+        },
+      }}
+    >
+      <DialogTitle>{`Save ${resourceType} to ${database.name}`}</DialogTitle>
+      <DialogContent>
+        <database.SubmitToDatabaseComponent id={id} submissionData={submissionData} setSubmissionData={setSubmissionData} resourceType={resourceType} />
+        {resourceType === 'sequence' && <database.PrimersNotInDatabaseComponent id={id} submissionData={submissionData} setSubmissionData={setSubmissionData} />}
+        {errorMessage && <Alert sx={{ marginTop: 2 }} severity="error">{errorMessage}</Alert>}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button type="submit" disabled={isSubmitting || submissionData === null || !database.isSubmissionDataValid(submissionData)}>Submit</Button>
+      </DialogActions>
+    </Dialog>
+
+  );
+}
+
+export default SubmitToDatabaseDialog;