@opencloning/ui 1.9.2 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @opencloning/ui
 
+## 2.0.0
+
+### Major Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Only send the auth token to the backend, and rename the http client APIs.
+
+  - `@opencloning/utils`: `@opencloning/utils/httpClients` exports `getBackendHttpClient(backendUrl, { authenticated })`, a client that can only reach the backend (`allowAbsoluteUrls: false`) and is the only one carrying the auth token, and `getExternalHttpClient()` for whitelisted external urls. Replaces `@opencloning/utils/getHttpClient` (`getHttpClient`, `getAuthenticatedHttpClient`). `attachAuthInterceptors` refuses clients that could send the token elsewhere.
+  - `@opencloning/ui` (breaking): `useHttpClient` is renamed `useBackendHttpClient` and takes urls relative to `backendUrl`; `useBackendRoute` is removed; `useBackendAPI` is renamed `useSourceRequest` and `sendPostRequest` is renamed `sendSourceRequest`.
+  - `@opencloning/opencloningdb`, `@opencloning/opencloning-elabftw`: clients can no longer be pointed at other hosts.
+
+### Patch Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Encode values interpolated into request URL paths to prevent client-side path traversal. A sample UID such as `../workspaces/1/users/5` could make a user's own request hit a different endpoint, e.g. "delete UID" removing a workspace member.
+
+  - `@opencloning/utils`: new `encodePathSegment` (`@opencloning/utils/urlUtils`), which applies `encodeURIComponent` and rejects `.` and `..`.
+  - `@opencloning/opencloningdb`: all path parameters in `endpoints.js` are encoded.
+  - `@opencloning/opencloning-elabftw`: eLabFTW item and upload paths are encoded.
+  - `@opencloning/ui`: the `example`, `key` and `template` URL parameters are encoded when loading examples and templates.
+
+- Updated dependencies [[`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394)]:
+  - @opencloning/utils@2.0.0
+  - @opencloning/store@2.0.0
+
+## 1.10.0
+
+### Minor Changes
+
+- [#773](https://github.com/OpenCloning/OpenCloning_frontend/pull/773) [`f7f376e`](https://github.com/OpenCloning/OpenCloning_frontend/commit/f7f376ee351d9b2da52413700836dc55ba54b5ea) Thanks [@manulera](https://github.com/manulera)! - Handle failed NCBI request to `dataset_report` in `SourceGenomeRegion`.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.10.0
+  - @opencloning/utils@1.10.0
+
+## 1.9.5
+
+### Patch Changes
+
+- Updated dependencies [[`73363e7`](https://github.com/OpenCloning/OpenCloning_frontend/commit/73363e7a7f7e494e20a54bd87e5dba97f8a9197e)]:
+  - @opencloning/utils@1.9.5
+  - @opencloning/store@1.9.5
+
+## 1.9.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.9.4
+  - @opencloning/utils@1.9.4
+
+## 1.9.3
+
+### Patch Changes
+
+- [#762](https://github.com/OpenCloning/OpenCloning_frontend/pull/762) [`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82) Thanks [@manulera](https://github.com/manulera)! - Fix QuotaExceededError when adding more than ~10 AB1/sequencing files (OpenCloning/OpenCloning#82). The raw contents of the verification files used to be persisted in Web Storage (localStorage, later sessionStorage), which has a quota of ~5 MB, so submitting around 10+ AB1 files failed with `QuotaExceededError` and the files/alignments disappeared. The contents are now kept in an in-memory store for the duration of the tab session, which has no quota.
+
+- Updated dependencies [[`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82)]:
+  - @opencloning/utils@1.9.3
+  - @opencloning/store@1.9.3
+
 ## 1.9.2
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.9.2",
+  "version": "2.0.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,8 +25,7 @@
     "./hooks/useAlerts": "./src/hooks/useAlerts.js",
     "./hooks/useCloningAlerts": "./src/hooks/useCloningAlerts.js",
     "./hooks/useSequencingAlignment": "./src/hooks/useSequencingAlignment.js",
-    "./hooks/useBackendRoute": "./src/hooks/useBackendRoute.js",
-    "./hooks/useHttpClient": "./src/hooks/useHttpClient.js",
+    "./hooks/useBackendHttpClient": "./src/hooks/useBackendHttpClient.js",
     "./components/SequenceViewer": "./src/components/SequenceViewer.jsx",
     "./standalone": "./src/StandAloneOpenCloning.js"
   },
@@ -41,14 +40,14 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@mui/x-data-grid": "^8.28.5",
-    "@opencloning/store": "1.9.2",
-    "@opencloning/utils": "1.9.2",
+    "@opencloning/store": "2.0.0",
+    "@opencloning/utils": "2.0.0",
     "@teselagen/bio-parsers": "^0.4.38",
     "@teselagen/ove": "^0.8.42",
     "@teselagen/range-utils": "^0.3.20",
     "@teselagen/sequence-utils": "^0.3.42",
     "@zip.js/zip.js": "^2.8.26",
-    "axios": "^1.16.0",
+    "axios": "^1.20.0",
     "lodash-es": "^4.18.1",
     "react-draggable": "^4.5.0"
   },

package/src/components/CloningSpeedDial.jsx

@@ -7,8 +7,7 @@ import { getSequencesNotInDatabase } from '@opencloning/utils/network';
 import { cloningActions } from '@opencloning/store/cloning';
 import useCloningAlerts from '../hooks/useCloningAlerts';
 import { cloneDeep } from 'lodash-es';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 const { setState: setCloningState } = cloningActions;
 
@@ -17,9 +16,8 @@ function useLocateSequencesInDatabaseAction() {
   const database = useDatabase();
   const store = useStore();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
-  const url = backendRoute('normalize_cloning_strategy');
+  const httpClient = useBackendHttpClient();
+  const url = 'normalize_cloning_strategy';
 
   const { addAlert } = useCloningAlerts();
   const main = React.useCallback(async () => {

package/src/components/EditSequenceNameDialog.jsx

@@ -4,16 +4,14 @@ import { useDispatch, useSelector, useStore } from 'react-redux';
 import { isEqual } from 'lodash-es';
 import { cloningActions } from '@opencloning/store/cloning';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
   const [name, setName] = React.useState('');
   const [originalName, setOriginalName] = React.useState('');
   const [error, setError] = React.useState('');
   const store = useStore();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const { updateSequenceAndItsSource } = cloningActions;
   const dispatch = useDispatch();
@@ -23,7 +21,7 @@ function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
     const source = sources.find((s) => s.id === id);
     const sequence = sequences.find((s) => s.id === id);
     setError('');
-    const url = backendRoute('rename_sequence');
+    const url = 'rename_sequence';
     try {
       const { data: newSequence } = await httpClient.post(url, sequence, { params: { name } });
       const newSource = { ...source, output_name: newName };

package/src/components/ExternalServicesStatusCheck.jsx

@@ -1,8 +1,7 @@
 import { Alert, Button, CircularProgress } from '@mui/material';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 import { cloningActions } from '@opencloning/store/cloning';
 import { version } from '../index';
 
@@ -14,8 +13,7 @@ function ExternalServicesStatusCheck() {
   const [loading, setLoading] = React.useState(false);
   const [successMessage, setSuccessMessage] = React.useState('');
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   React.useEffect(() => {
     dispatch(updateAppInfo({ frontendVersion: version }));
     setLoading(true);
@@ -23,7 +21,7 @@ function ExternalServicesStatusCheck() {
       const services = [
         {
           message: 'Backend server is down',
-          url: backendRoute('version'),
+          url: 'version',
           check: (resp) => {
             if (resp.status === 200) {
               const { backend_version: backendVersion, schema_version: schemaVersion } = resp.data;

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { batch, useDispatch, useStore } from 'react-redux';
 import useCloningAlerts from '../hooks/useCloningAlerts';
-import useBackendRoute from '../hooks/useBackendRoute';
 import useCloningHistoryLoader from '../hooks/useCloningHistoryLoader';
 import { getEmptyPlaceholderSource } from '@opencloning/store/cloning_utils';
 import { cloningActions } from '@opencloning/store/cloning';
 import HistoryLoadedDialog from './HistoryLoadedDialog';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 const { deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
 
-async function processSequenceFiles(files, backendRoute, httpClient) {
+async function processSequenceFiles(files, httpClient) {
   const allSources = [];
   const allSequences = [];
   const allWarnings = [];
@@ -27,7 +26,7 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
         'content-type': 'multipart/form-data',
       },
     };
-    const url = backendRoute('read_from_file');
+    const url = 'read_from_file';
     try {
       const { data: { sources, sequences }, headers } = await httpClient.post(url, formData, config);
       // If there are warnings, add them to the list of warnings
@@ -57,9 +56,8 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
 function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
   const { addAlert } = useCloningAlerts();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
   const store = useStore();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { loadHistoryFromFile, loadSnapgeneHistory } = useCloningHistoryLoader();
   const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
 
@@ -117,7 +115,7 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
         }
       }
       try {
-        const { sources, sequences, warnings } = await processSequenceFiles(files, backendRoute, httpClient);
+        const { sources, sequences, warnings } = await processSequenceFiles(files, httpClient);
         batch(() => {
           // If there is only one source and it is empty, delete it
           const emptyPlaceholder = getEmptyPlaceholderSource(cloningState.sources);

package/src/components/assembler/Assembler.jsx

@@ -19,8 +19,7 @@ import useCombinatorialAssembly from './useCombinatorialAssembly';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
 import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler, getDefaultAssemblyOutputName, MAX_OUTPUT_NAME_LENGTH, sanitizeOutputName } from './assembler_utils';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import useCloningAlerts from '../../hooks/useCloningAlerts';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import { useConfig } from '../../providers';
@@ -376,12 +375,11 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
 
 function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { staticContentPath } = useConfig();
-  const backendRoute = useBackendRoute();
   const { addAlert } = useCloningAlerts();
   const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
-    const url = backendRoute('validate_syntax');
+    const url = 'validate_syntax';
     try {
       await httpClient.post(url, syntax);
       setSyntax(syntax)
@@ -393,7 +391,7 @@ function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
         severity: 'error',
       });
     }
-  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, backendRoute, addAlert])
+  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
-import getHttpClient from '@opencloning/utils/getHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
 import { normalizeSyntaxEnzymes } from '@opencloning/utils/normalizeSyntax';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
-const httpClient = getHttpClient();
+const httpClient = getExternalHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
 httpClient.defaults.baseURL = baseURL;
 

package/src/components/assembler/useAssembler.js

@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions'
-import useBackendRoute from '../../hooks/useBackendRoute'
-import useHttpClient from '../../hooks/useHttpClient'
+import useBackendHttpClient from '../../hooks/useBackendHttpClient'
 import { arrayCombinations } from './assembler_utils'
 
 
@@ -28,8 +27,7 @@ function formatLoadedFile(plasmid, id) {
 }
 
 export const useAssembler = () => {
-  const httpClient = useHttpClient();
-  const backendRoute = useBackendRoute();
+  const httpClient = useBackendHttpClient();
 
   const requestSources = useCallback(async (assemblerOutput) => {
     const processedOutput = []
@@ -41,7 +39,7 @@ export const useAssembler = () => {
             processedOutput[pos].push(formatLoadedFile(plasmid, pos + 1))
           } else {
             const { source } = plasmid;
-            const url = backendRoute(classNameToEndPointMap[source.type])
+            const url = classNameToEndPointMap[source.type]
             const {data} = await httpClient.post(url, source)
             if (data.sources.length !== 1) {
               console.error('Expected 1 source, got ' + data.sources.length)
@@ -59,7 +57,7 @@ export const useAssembler = () => {
       }
     }
     return processedOutput
-  }, [ httpClient, backendRoute ])
+  }, [ httpClient ])
 
 
   const requestAssemblies = useCallback(async (requestedSources, enzymes=['BsaI']) => {
@@ -67,7 +65,7 @@ export const useAssembler = () => {
     const assemblies = arrayCombinations(requestedSources);
     const output = []
     for (let assembly of assemblies) {
-      const url = backendRoute('restriction_and_ligation')
+      const url = 'restriction_and_ligation'
       const config = {
         params: {
           circular_only: true,
@@ -102,7 +100,7 @@ export const useAssembler = () => {
       }
     }
     return output;
-  }, [ httpClient, backendRoute ])
+  }, [ httpClient ])
 
   return { requestSources, requestAssemblies }
 }

package/src/components/domesticate/DomesticateDialog.jsx

@@ -19,8 +19,7 @@ import {
   TextField,
 } from '@mui/material';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import { featureToGenbankLocationString, mergeStates } from '@opencloning/utils';
 import { useDispatch, useStore } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -77,8 +76,7 @@ function categoryPrefixSuffixValid(category, prefix, suffix) {
 }
 
 export default function DomesticateDialog({ open, onClose, initialContext, mainSequenceId }) {
-  const httpClient = useHttpClient();
-  const backendRoute = useBackendRoute();
+  const httpClient = useBackendHttpClient();
   const store = useStore();
 
   const location = React.useMemo(() => featureToGenbankLocationString(initialContext.annotation), [initialContext]);
@@ -131,7 +129,7 @@ export default function DomesticateDialog({ open, onClose, initialContext, mainS
       enzymes,
     };
     try {
-      const url = backendRoute('batch_cloning/domesticate');
+      const url = 'batch_cloning/domesticate';
       const { data } = await httpClient.post(url, body);
 
       const { mergedState, idShift } = mergeStates(data, store.getState().cloning);

package/src/components/form/EnzymeMultiSelect.jsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import GetRequestMultiSelect from './GetRequestMultiSelect';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 
 function EnzymeMultiSelect({ setEnzymes, label = 'Enzymes used', multiple = true }) {
-  const backendRoute = useBackendRoute();
-  const url = backendRoute('restriction_enzyme_list');
+  const url = '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();
+  const httpClient = useBackendHttpClient();
 
   return (
 

package/src/components/navigation/MainAppBar.jsx

@@ -15,7 +15,10 @@ import DownloadCloningStrategyDialog from '../DownloadCloningStrategyDialog';
 import LoadCloningHistoryWrapper from '../LoadCloningHistoryWrapper';
 import useCloningHistoryLoader from '../../hooks/useCloningHistoryLoader';
 import GithubCornerRight from './GithubCornerRight';
-import useHttpClient from '../../hooks/useHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
 
 const { setCurrentTab } = cloningActions;
 
@@ -28,7 +31,6 @@ function MainAppBar() {
   const [openVersionDialog, setOpenVersionDialog] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const openMenu = Boolean(anchorEl);
-  const httpClient = useHttpClient();
 
   const dispatch = useDispatch();
   const { addAlert } = useCloningAlerts();

package/src/components/navigation/SelectTemplateDialog.jsx

@@ -2,14 +2,16 @@ import { Accordion, AccordionDetails, AccordionSummary, Alert, Button, CircularP
 
 import React from 'react';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import useHttpClient from '../../hooks/useHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
 
 function SelectTemplateDialog({ onClose, open }) {
   const [templates, setTemplates] = React.useState(null);
   const [connectAttempt, setConnectAttemp] = React.useState(0);
   const [error, setError] = React.useState(null);
   const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';
-  const httpClient = useHttpClient();
 
   React.useEffect(() => {
     const fetchData = async () => {

package/src/components/primers/primer_design/SequenceTabComponents/hooks/useDesignPrimers.js

@@ -1,7 +1,6 @@
 import { useState, useCallback } from 'react';
 import { batch, useDispatch, useStore } from 'react-redux';
-import useBackendRoute from '../../../../../hooks/useBackendRoute';
-import useHttpClient from '../../../../../hooks/useHttpClient';
+import useBackendHttpClient from '../../../../../hooks/useBackendHttpClient';
 import useStoreEditor from '../../../../../hooks/useStoreEditor';
 import error2String from '@opencloning/utils/error2String';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -19,8 +18,7 @@ export default function useDesignPrimers({
 
   const store = useStore();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { updateStoreEditor } = useStoreEditor();
 
   const designPrimers = useCallback(async () => {
@@ -43,7 +41,7 @@ export default function useDesignPrimers({
     });
 
     requestData.settings = globalPrimerSettings;
-    const url = backendRoute(`primer_design/${endpoint}`);
+    const url = `primer_design/${endpoint}`;
 
     try {
       const resp = await httpClient.post(url, requestData, { params });
@@ -55,7 +53,7 @@ export default function useDesignPrimers({
       setError(error2String(thrownError));
       return true;
     }
-  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, backendRoute, handleNext, isAmplified]);
+  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, handleNext, isAmplified]);
 
   const addPrimers = useCallback(() => {
     const pcrSources = store.getState().cloning.sources.filter((source) => source.type === 'PCRSource');

package/src/components/primers/primer_details/usePrimerDetailsEndpoints.js

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import useBackendRoute from '../../../hooks/useBackendRoute';
-import useHttpClient from '../../../hooks/useHttpClient';
+import useBackendHttpClient from '../../../hooks/useBackendHttpClient';
 import { isEqual } from 'lodash-es';
 import { useSelector } from 'react-redux';
 
@@ -16,15 +15,14 @@ export function makeHeterodimerCacheKey(sequence1, sequence2, globalPrimerSettin
   return `${pairKey}::${settingsKey}`;
 }
 export function usePrimerDetailsEndpoints() {
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const globalPrimerSettings = useSelector((state) => state.cloning.globalPrimerSettings, isEqual);
 
   // Caches are keyed by both the input sequence(s) and the current globalPrimerSettings,
   // so we don't need to clear them on settings change.
 
-  const url = backendRoute('primer_details');
-  const heterodimerUrl = backendRoute('primer_heterodimer');
+  const url = 'primer_details';
+  const heterodimerUrl = 'primer_heterodimer';
 
   const getPrimerDetails = useCallback(async (sequence) => {
     const cacheKey = makePrimerDetailsCacheKey(sequence, globalPrimerSettings);

package/src/components/sources/CollectionSource.jsx

@@ -7,7 +7,7 @@ import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';
 import ObjectTable from '../ObjectTable';
 import { cloningActions } from '@opencloning/store/cloning';
 
-function CollectionSource({ source, requestStatus, sendPostRequest }) {
+function CollectionSource({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId, options, image: imageInfo, title, description } = source;
   const [image, imageWidth] = imageInfo || [null, null];
   const [selectedOption, setSelectedOption] = React.useState(null);
@@ -34,7 +34,7 @@ function CollectionSource({ source, requestStatus, sendPostRequest }) {
       const reverseOligo = primers.find((primer) => primer.id === selectedSource.input[1].sequence);
       requestData = { source: { id: sourceId, ...selectedSource }, primers: [forwardOligo, reverseOligo] };
     }
-    sendPostRequest({ endpoint, requestData, source, modifySource });
+    sendSourceRequest({ endpoint, requestData, source, modifySource });
   };
 
   const onChange = (event) => {

package/src/components/sources/Source.jsx

@@ -14,7 +14,7 @@ import SourceAnnotation from './SourceAnnotation';
 import SourceDatabase from './SourceDatabase';
 import SourcePolymeraseExtension from './SourcePolymeraseExtension';
 import CollectionSource from './CollectionSource';
-import useBackendAPI from '../../hooks/useBackendAPI';
+import useSourceRequest from '../../hooks/useSourceRequest';
 import MultipleOutputsSelector from './MultipleOutputsSelector';
 import { cloningActions } from '@opencloning/store/cloning';
 import SourceCopySequence from './SourceCopySequence';
@@ -31,7 +31,7 @@ function Source({ sourceId }) {
   const { type: sourceType } = source;
   let specificSource = null;
   const templateOnlySources = ['CollectionSource', 'KnownGenomeCoordinatesSource'];
-  const { requestStatus, sendPostRequest, sources, sequences } = useBackendAPI();
+  const { requestStatus, sendSourceRequest, sources, sequences } = useSourceRequest();
   const { addSequenceAndUpdateItsSource, updateSequenceAndItsSource } = cloningActions;
   const [chosenFragment, setChosenFragment] = React.useState(null);
   const dispatch = useDispatch();
@@ -49,67 +49,67 @@ function Source({ sourceId }) {
   switch (sourceType) {
     /* eslint-disable */
     case 'UploadedFileSource':
-      specificSource = <SourceFile {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceFile {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'LocalFileSource':
-      specificSource = <SourceServerStaticFile {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceServerStaticFile {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RestrictionEnzymeDigestionSource':
-      specificSource = <SourceRestriction {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRestriction {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RepositoryIdSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'AddgeneIdSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'SnapGenePlasmidSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'EuroscarfSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'WekWikGeneIdSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'OpenDNACollectionsSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'LigationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'GibsonAssemblySource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'OverlapExtensionPCRLigationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'InFusionSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'InVivoAssemblySource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'GatewaySource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CreLoxRecombinationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RecombinaseSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'HomologousRecombinationSource':
-      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'PCRSource':
-      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RestrictionAndLigationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'GenomeCoordinatesSource':
-      specificSource = <SourceGenomeRegion {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceGenomeRegion {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'KnownGenomeCoordinatesSource':
-      specificSource = <SourceKnownGenomeRegion {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceKnownGenomeRegion {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'ManuallyTypedSource':
-      specificSource = <SourceManuallyTyped {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceManuallyTyped {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CRISPRSource':
-      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'OligoHybridizationSource':
-      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'PolymeraseExtensionSource':
-      specificSource = <SourcePolymeraseExtension {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourcePolymeraseExtension {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'DatabaseSource':
-      specificSource = <SourceDatabase {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceDatabase {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CollectionSource':
-      specificSource = <CollectionSource {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <CollectionSource {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CopySequence':
       specificSource = <SourceCopySequence {...{ source }} />; break;
     case 'AnnotationSource':
-      specificSource = <SourceAnnotation {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAnnotation {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'ReverseComplementSource':
-      specificSource = <SourceReverseComplement {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceReverseComplement {...{ source, requestStatus, sendSourceRequest }} />; break;
     default:
       break;
     /* eslint-enable */