@opencloning/opencloning-elabftw 1.9.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @opencloning/opencloning-elabftw
 
+## 2.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`c8c46d4`](https://github.com/OpenCloning/OpenCloning_frontend/commit/c8c46d4dc36cb8741d1bd89816c7ca82b89996b3)]:
+  - @opencloning/ui@2.1.0
+  - @opencloning/utils@2.1.0
+
+## 2.0.0
+
+### Patch Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Only send the auth token to the backend, and rename the http client APIs.
+
+  - `@opencloning/utils`: `@opencloning/utils/httpClients` exports `getBackendHttpClient(backendUrl, { authenticated })`, a client that can only reach the backend (`allowAbsoluteUrls: false`) and is the only one carrying the auth token, and `getExternalHttpClient()` for whitelisted external urls. Replaces `@opencloning/utils/getHttpClient` (`getHttpClient`, `getAuthenticatedHttpClient`). `attachAuthInterceptors` refuses clients that could send the token elsewhere.
+  - `@opencloning/ui` (breaking): `useHttpClient` is renamed `useBackendHttpClient` and takes urls relative to `backendUrl`; `useBackendRoute` is removed; `useBackendAPI` is renamed `useSourceRequest` and `sendPostRequest` is renamed `sendSourceRequest`.
+  - `@opencloning/opencloningdb`, `@opencloning/opencloning-elabftw`: clients can no longer be pointed at other hosts.
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Encode values interpolated into request URL paths to prevent client-side path traversal. A sample UID such as `../workspaces/1/users/5` could make a user's own request hit a different endpoint, e.g. "delete UID" removing a workspace member.
+
+  - `@opencloning/utils`: new `encodePathSegment` (`@opencloning/utils/urlUtils`), which applies `encodeURIComponent` and rejects `.` and `..`.
+  - `@opencloning/opencloningdb`: all path parameters in `endpoints.js` are encoded.
+  - `@opencloning/opencloning-elabftw`: eLabFTW item and upload paths are encoded.
+  - `@opencloning/ui`: the `example`, `key` and `template` URL parameters are encoded when loading examples and templates.
+
+- Updated dependencies [[`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394)]:
+  - @opencloning/utils@2.0.0
+  - @opencloning/ui@2.0.0
+
+## 1.10.0
+
+### Patch Changes
+
+- [#776](https://github.com/OpenCloning/OpenCloning_frontend/pull/776) [`5f84aea`](https://github.com/OpenCloning/OpenCloning_frontend/commit/5f84aea004a24499a5634c17678696925ee780cf) Thanks [@manulera](https://github.com/manulera)! - Hotfix for issue where to load resources the template categories were shown instead
+
+- Updated dependencies [[`f7f376e`](https://github.com/OpenCloning/OpenCloning_frontend/commit/f7f376ee351d9b2da52413700836dc55ba54b5ea)]:
+  - @opencloning/ui@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/ui@1.9.5
+
+## 1.9.4
+
+### Patch Changes
+
+- [#769](https://github.com/OpenCloning/OpenCloning_frontend/pull/769) [`105210b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/105210b8149af71101f348967b3096636aeeea09) Thanks [@manulera](https://github.com/manulera)! - Fix request payloads. Drop support for eLabFTW < 5.3. Related to https://github.com/elabftw/elabftw/issues/7218.
+
+- Updated dependencies []:
+  - @opencloning/ui@1.9.4
+  - @opencloning/utils@1.9.4
+
+## 1.9.3
+
+### Patch Changes
+
+- Updated dependencies [[`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82)]:
+  - @opencloning/utils@1.9.3
+  - @opencloning/ui@1.9.3
+
 ## 1.9.2
 
 ### Patch Changes

package/package.json

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

package/src/ELabFTWCategorySelect.cy.jsx

@@ -5,34 +5,15 @@ import { eLabFTWHttpClient } from './common';
 describe('<ELabFTWCategorySelect />', () => {
   it('Allows to retry if the request fails', () => {
     cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).as('eLabFTWHttpClientSpy');
-    cy.mount(<ELabFTWCategorySelect fullWidth />);
+    cy.mount(<ELabFTWCategorySelect mode="resource_type" fullWidth />);
     cy.get('@eLabFTWHttpClientSpy.all').should('have.callCount', 1);
     cy.get('button').contains('Retry').click();
     cy.get('@eLabFTWHttpClientSpy.all').should('have.callCount', 2);
   });
-  it('shows the right options for eLabFTW version 50300', () => {
-    const setCategorySpy = cy.spy().as('setCategorySpy');
-    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
-      data: {
-        elabftw_version_int: 50300,
-      },
-    }).withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
-      data: [
-        { id: 1, title: 'Category 1' },
-        { id: 2, title: 'Category 2' },
-      ],
-    });
-    cy.mount(<ELabFTWCategorySelect fullWidth setCategory={setCategorySpy} />);
-    cy.get('.MuiAutocomplete-root').click();
-    cy.get('li').contains('Category 1').should('exist');
-    cy.get('li').contains('Category 2').should('exist');
-    cy.get('li').contains('Category 1').click();
-    cy.get('@setCategorySpy').should('have.been.calledWith', { id: 1, title: 'Category 1' });
-  });
   it('shows the right options', () => {
     const setCategorySpy = cy.spy().as('setCategorySpy');
     cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
+      .withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: {} }).resolves({
         data: [
           { id: 1, title: 'Category 1' },
           { id: 2, title: 'Category 2' },
@@ -43,7 +24,7 @@ describe('<ELabFTWCategorySelect />', () => {
           elabftw_version_int: 50200,
         },
       });
-    cy.mount(<ELabFTWCategorySelect fullWidth setCategory={setCategorySpy} />);
+    cy.mount(<ELabFTWCategorySelect mode="resource_type" fullWidth setCategory={setCategorySpy} />);
     cy.get('.MuiAutocomplete-root').click();
     cy.get('li').contains('Category 1').should('exist');
     cy.get('li').contains('Category 2').should('exist');
@@ -51,10 +32,32 @@ describe('<ELabFTWCategorySelect />', () => {
     cy.get('@setCategorySpy').should('have.been.calledWith', { id: 1, title: 'Category 1' });
   });
 
+  it('uses the items_types endpoint in template mode', () => {
+    const setCategorySpy = cy.spy().as('setCategorySpy');
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: {} }).resolves({
+        data: [
+          { id: 1, title: 'Template 1' },
+          { id: 2, title: 'Template 2' },
+        ],
+      })
+      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
+        data: {
+          elabftw_version_int: 50300,
+        },
+      });
+    cy.mount(<ELabFTWCategorySelect mode="template" fullWidth setCategory={setCategorySpy} />);
+    cy.get('.MuiAutocomplete-root').click();
+    cy.get('li').contains('Template 1').should('exist');
+    cy.get('li').contains('Template 2').should('exist');
+    cy.get('li').contains('Template 1').click();
+    cy.get('@setCategorySpy').should('have.been.calledWith', { id: 1, title: 'Template 1' });
+  });
+
   it('shows empty options if no categories are found', () => {
-    cy.mount(<ELabFTWCategorySelect fullWidth />);
+    cy.mount(<ELabFTWCategorySelect mode="resource_type" fullWidth />);
     cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
+      .withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: {} }).resolves({
         data: [],
       })
       .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
@@ -67,7 +70,7 @@ describe('<ELabFTWCategorySelect />', () => {
   });
 
   it('shows an error message if the request fails and can retry', () => {
-    cy.mount(<ELabFTWCategorySelect fullWidth />);
+    cy.mount(<ELabFTWCategorySelect mode="resource_type" fullWidth />);
     cy.stub(eLabFTWHttpClient, 'get')
       .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } })
       .resolves({
@@ -75,7 +78,7 @@ describe('<ELabFTWCategorySelect />', () => {
           elabftw_version_int: 50300,
         },
       }).as('eLabFTWHttpClientSpyInfo')
-      .withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: {} })
       .rejects(new Error('Connection error')).as('eLabFTWHttpClientSpy');
     cy.get('.MuiAlert-message').should('contain', 'Could not retrieve categories');
     // Clicking the retry button makes the request again

package/src/ELabFTWCategorySelect.jsx

@@ -3,7 +3,7 @@ import GetRequestMultiSelect from '@opencloning/ui/components/form/GetRequestMul
 import RequestStatusWrapper from '@opencloning/ui/components/form/RequestStatusWrapper';
 import { eLabFTWHttpClient, getELabFTWVersion, readHeaders } from './common';
 
-function ELabFTWCategorySelect({ setCategory, label = 'Resource category', ...rest }) {
+function ELabFTWCategorySelect({ setCategory, mode, label = 'Resource category', ...rest }) {
   const [eLabFTWVersion, setELabFTWVersion] = React.useState(null);
   const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
   const [retry, setRetry] = React.useState(0);
@@ -16,7 +16,14 @@ function ELabFTWCategorySelect({ setCategory, label = 'Resource category', ...re
       }
     ).catch(() => setRequestStatus({ status: 'error', message: 'Could not retrieve eLabFTW version' }));
   }, [retry]);
-  const url = eLabFTWVersion && eLabFTWVersion >= 50300 ? '/api/v2/teams/current/resources_categories' : '/api/v2/items_types';
+  let url;
+  if (mode === 'resource_type') {
+    url = '/api/v2/teams/current/resources_categories';
+  } else if (mode === 'template') {
+    url = '/api/v2/items_types';
+  } else {
+    throw new Error(`Invalid mode: ${mode}`);
+  }
   const getOptionsFromResponse = (data) => data;
   const messages = { loadingMessage: 'retrieving categories', errorMessage: 'Could not retrieve categories from eLab' };
   const onChange = (value) => setCategory(value);
@@ -28,7 +35,6 @@ function ELabFTWCategorySelect({ setCategory, label = 'Resource category', ...re
         httpClient={eLabFTWHttpClient}
         requestHeaders={readHeaders}
         url={url}
-        requestParams={{ limit: 9999 }}
         label={label}
         messages={messages}
         onChange={onChange}

package/src/ELabFTWFileSelect.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import GetRequestMultiSelect from '@opencloning/ui/components/form/GetRequestMultiSelect';
 import { eLabFTWHttpClient, readHeaders } from './common';
+import { encodePathSegment } from '@opencloning/utils/urlUtils';
 
 function ELabFTWFileSelect({ itemId, setFileInfo, ...rest }) {
-  const url = `/api/v2/items/${itemId}`;
+  const url = `/api/v2/items/${encodePathSegment(itemId)}`;
   const getOptionsFromResponse = ({ uploads }) => uploads;
   const label = 'File with sequence';
   const messages = { loadingMessage: 'retrieving attachments', errorMessage: 'Could not retrieve attachment from eLab' };

package/src/GetPrimerComponent.cy.jsx

@@ -11,7 +11,7 @@ describe('<GetPrimerComponent />', () => {
 
     // Stub both endpoints in a single stub
     cy.stub(eLabFTWHttpClient, 'get').callsFake((url) => {
-      if (url === '/api/v2/items_types') {
+      if (url === '/api/v2/teams/current/resources_categories') {
         return Promise.resolve({
           data: [
             { id: PRIMER_CATEGORY_ID, title: 'Primers' },
@@ -42,7 +42,7 @@ describe('<GetPrimerComponent />', () => {
 
     // Stub both endpoints in a single stub
     cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
-      if (url === '/api/v2/items_types') {
+      if (url === '/api/v2/teams/current/resources_categories') {
         return Promise.resolve({
           data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
         });
@@ -89,7 +89,7 @@ describe('<GetPrimerComponent />', () => {
 
     // Stub both endpoints in a single stub
     cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
-      if (url === '/api/v2/items_types') {
+      if (url === '/api/v2/teams/current/resources_categories') {
         return Promise.resolve({
           data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
         });
@@ -137,7 +137,7 @@ describe('<GetPrimerComponent />', () => {
     const setErrorSpy = cy.spy().as('setErrorSpy');
 
     cy.stub(eLabFTWHttpClient, 'get').callsFake((url) => {
-      if (url === '/api/v2/items_types') {
+      if (url === '/api/v2/teams/current/resources_categories') {
         return Promise.resolve({
           data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
         });
@@ -172,7 +172,7 @@ describe('<GetPrimerComponent />', () => {
 
     // Stub both endpoints in a single stub
     cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
-      if (url === '/api/v2/items_types') {
+      if (url === '/api/v2/teams/current/resources_categories') {
         return Promise.resolve({
           data: [{ id: PRIMER_CATEGORY_ID, title: 'Primers' }],
         });
@@ -218,7 +218,7 @@ describe('<GetPrimerComponent />', () => {
     let firstCallCategory = true;
     let firstCallPrimer = true;
     cy.stub(eLabFTWHttpClient, 'get').callsFake((url, config) => {
-      if (url === '/api/v2/items_types') {
+      if (url === '/api/v2/teams/current/resources_categories') {
         if (firstCallCategory) {
           firstCallCategory = false;
           return Promise.reject(new Error('Network error'));

package/src/GetPrimerComponent.jsx

@@ -37,6 +37,7 @@ function GetPrimerComponent({ primer, setPrimer, setError }) {
   return (
     <>
       <ELabFTWCategorySelect
+        mode="resource_type"
         setCategory={setCategory}
         fullWidth
       />

package/src/GetSequenceFileAndDatabaseIdComponent.cy.jsx

@@ -14,7 +14,7 @@ const OTHER_FILE_ID = newUniqueId();
 const TEST_FILE_CONTENT = 'test content';
 
 const commonStubHandler = (url, config) => {
-  if (url === '/api/v2/items_types') {
+  if (url === '/api/v2/teams/current/resources_categories') {
     return Promise.resolve({
       data: [
         { id: SEQUENCE_CATEGORY_ID, title: 'Sequences' },

package/src/GetSequenceFileAndDatabaseIdComponent.jsx

@@ -51,7 +51,7 @@ function GetSequenceFileAndDatabaseIdComponent({ setFile, setDatabaseId }) {
 
   return (
     <>
-      <ELabFTWCategorySelect fullWidth setCategory={setCategory} className="elabftw-category-select" />
+      <ELabFTWCategorySelect mode="resource_type" fullWidth setCategory={setCategory} className="elabftw-category-select" />
       {category && <ELabFTWResourceSelect fullWidth setResource={setResource} categoryId={category.id} className="elabftw-resource-select" />}
       {resource && <ELabFTWFileSelect fullWidth setFileInfo={setFileInfo} itemId={resource.id} className="elabftw-file-select" />}
       {fileLoadError && <RetryAlert severity="error" onRetry={() => setRetry((prev) => prev + 1)}>{fileLoadError}</RetryAlert>}

package/src/LoadHistoryComponent.jsx

@@ -3,9 +3,10 @@ import React from 'react';
 import { eLabFTWHttpClient, readHeaders } from './common';
 import RetryAlert from '@opencloning/ui/components/form/RetryAlert';
 import { getFileFromELabFTW } from './utils';
+import { encodePathSegment } from '@opencloning/utils/urlUtils';
 
 function LoadHistoryComponent({ databaseId, loadDatabaseFile }) {
-  const url = `/api/v2/items/${databaseId}`;
+  const url = `/api/v2/items/${encodePathSegment(databaseId)}`;
   const [error, setError] = React.useState(null);
   const [loading, setLoading] = React.useState(false);
   const [retry, setRetry] = React.useState(0);

package/src/PrimersNotInDatabaseComponent.cy.jsx

@@ -107,7 +107,7 @@ describe('<PrimersNotInDatabaseComponent />', () => {
   it('shows error when update fails', () => {
     let firstCall = true;
     cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: {} })
       .callsFake((url, config) => {
         if (url !== '/api/v2/items_types' || config.headers?.Authorization !== 'test-read-key') {
           throw new Error('Unexpected call to get method with these parameters');

package/src/PrimersNotInDatabaseComponent.jsx

@@ -40,6 +40,7 @@ function PrimersNotInDatabaseComponent({ id, submissionData, setSubmissionData }
       )}
 
       <ELabFTWCategorySelect
+        mode="template"
         setCategory={(c) => {
           setSubmissionData((prev) => ({ ...prev, primerCategoryId: c ? c.id : null }));
         }}

package/src/SubmitToDatabaseComponent.cy.jsx

@@ -26,7 +26,7 @@ const createTestStore = (cloningState) => configureStore({
 describe('<SubmitToDatabaseComponent />', () => {
   it('Primers: initializes with primer name and handles updates', () => {
     cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: {} })
       .resolves({
         data: [
           { id: PRIMER_CATEGORY_ID, title: 'Primers' },
@@ -81,7 +81,7 @@ describe('<SubmitToDatabaseComponent />', () => {
 
   it('Sequences: initializes with sequence name and handles updates', () => {
     cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: {} })
       .resolves({
         data: [
           { id: PRIMER_CATEGORY_ID, title: 'Primers' },
@@ -140,7 +140,7 @@ describe('<SubmitToDatabaseComponent />', () => {
 
     // Stub API to fail first time
     cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: {} })
       .callsFake(() => {
         if (firstCall) {
           firstCall = false;

package/src/SubmitToDatabaseComponent.jsx

@@ -40,6 +40,7 @@ function SubmitToDatabaseComponent({ id, setSubmissionData, resourceType }) {
         />
       </FormControl>
       <ELabFTWCategorySelect
+        mode="template"
         fullWidth
         label={`Save ${resourceType} as`}
         setCategory={setCategory}

package/src/common.js

@@ -7,6 +7,8 @@ export const writeHeaders = writeApiKey ? { Authorization: writeApiKey } : {};
 
 export const eLabFTWHttpClient = axios.create({
   baseURL: baseUrl,
+  // Every url is appended to baseURL, so requests (and the API key) only reach eLabFTW
+  allowAbsoluteUrls: false,
 });
 
 export const makeSequenceMetadata = (sequence) => JSON.stringify({

package/src/eLabFTWInterface.js

@@ -6,9 +6,10 @@ import GetPrimerComponent from './GetPrimerComponent';
 import { eLabFTWHttpClient, writeHeaders, readHeaders, baseUrl, getELabFTWVersion } from './common';
 import { getFileFromELabFTW, error2String } from './utils';
 import LoadHistoryComponent from './LoadHistoryComponent';
+import { encodePathSegment } from '@opencloning/utils/urlUtils';
 
 async function deleteResource(resourceId) {
-  const url = `/api/v2/items/${resourceId}`;
+  const url = `/api/v2/items/${encodePathSegment(resourceId)}`;
   // eLabFTW requires application/json for delete requests, axios seems to require a data field for it to work
   const resp = await eLabFTWHttpClient.delete(url, { data: {}, headers: { ...writeHeaders, 'Content-Type': 'application/json' } });
   return resp.data;
@@ -16,7 +17,7 @@ async function deleteResource(resourceId) {
 
 const linkToParent = async (childId, parentId) => {
   await eLabFTWHttpClient.post(
-    `/api/v2/items/${childId}/items_links/${parentId}`,
+    `/api/v2/items/${encodePathSegment(childId)}/items_links/${encodePathSegment(parentId)}`,
     {},
     { headers: writeHeaders },
   );
@@ -24,13 +25,7 @@ const linkToParent = async (childId, parentId) => {
 
 const createResource = async (categoryId) => {
   const eLabFTWVersion = await getELabFTWVersion();
-  let categoryKey
-  // 0 is for development (nightly image)
-  if (eLabFTWVersion >= 50300 || eLabFTWVersion === 0) {
-    categoryKey = 'template';
-  } else {
-    categoryKey = 'category_id';
-  }
+  const categoryKey = 'template';
   const createdItemResponse = await eLabFTWHttpClient.post(
     '/api/v2/items',
     {
@@ -42,7 +37,7 @@ const createResource = async (categoryId) => {
 };
 
 const patchResource = async (resourceId, title, metadata = undefined) => eLabFTWHttpClient.patch(
-  `/api/v2/items/${resourceId}`,
+  `/api/v2/items/${encodePathSegment(resourceId)}`,
   { title, ...(metadata !== undefined && { metadata }) },
   { headers: writeHeaders },
 );
@@ -82,7 +77,7 @@ async function uploadTextFileToResource(resourceId, fileName, textContent, comme
   const formData = new FormData();
   formData.append('file', blob, fileName);
   formData.append('comment', comment);
-  const response = await eLabFTWHttpClient.post(`/api/v2/items/${resourceId}/uploads`, formData, { headers: writeHeaders });
+  const response = await eLabFTWHttpClient.post(`/api/v2/items/${encodePathSegment(resourceId)}/uploads`, formData, { headers: writeHeaders });
   return Number(response.headers.location.split('/').pop());
 }
 
@@ -198,7 +193,7 @@ async function loadSequenceFromUrlParams(urlParams) {
   const { item_id: itemId, file_id: fileId } = urlParams;
 
   if (itemId && fileId) {
-    const url = `/api/v2/items/${itemId}/uploads/${fileId}`;
+    const url = `/api/v2/items/${encodePathSegment(itemId)}/uploads/${encodePathSegment(fileId)}`;
     let fileInfo;
     try {
       const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
@@ -215,7 +210,7 @@ async function loadSequenceFromUrlParams(urlParams) {
 }
 
 async function getPrimer(databaseId) {
-  const url = `/api/v2/items/${databaseId}`;
+  const url = `/api/v2/items/${encodePathSegment(databaseId)}`;
   try {
     const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
     resp.data.metadata = JSON.parse(resp.data.metadata);
@@ -230,7 +225,7 @@ async function getPrimer(databaseId) {
 }
 
 async function getSequenceName(databaseId) {
-  const url = `/api/v2/items/${databaseId}`;
+  const url = `/api/v2/items/${encodePathSegment(databaseId)}`;
   try {
     const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
     return resp.data.title;
@@ -247,7 +242,7 @@ async function getSequencingFiles(databaseId) {
   // This function should return an array of objects:
   // name: the name of the file
   // getFile: an async function that returns the file content
-  const url = `/api/v2/items/${databaseId}/uploads`;
+  const url = `/api/v2/items/${encodePathSegment(databaseId)}/uploads`;
   try {
     const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
     return resp.data.map((fileInfo) => ({

package/src/eLabFTWInterface.test.js

@@ -135,7 +135,10 @@ async function getScenario(method, url, data, config) {
   expect(nextScenario).toBeDefined();
   expect({ method: nextScenario.method, url: nextScenario.url, config: nextScenario.config }).toEqual({ method, url, config });
 
-  if (nextScenario.data instanceof FormData && data instanceof FormData) {
+  if (nextScenario.data instanceof FormData || data instanceof FormData) {
+    expect(data).toBeInstanceOf(FormData);
+    expect(nextScenario.data).toBeInstanceOf(FormData);
+
     const scenarioComment = nextScenario.data.get('comment');
     const requestComment = data.get('comment');
     expect(scenarioComment).toBe(requestComment);
@@ -152,6 +155,8 @@ async function getScenario(method, url, data, config) {
     } else if (scenarioFileText !== requestFileText) {
       expect(scenarioFileText).toBe(requestFileText);
     }
+  } else {
+    expect(data).toEqual(nextScenario.data);
   }
   return nextScenario;
 }
@@ -212,8 +217,7 @@ const mockCreateResource = {
   method: 'post',
   url: '/api/v2/items',
   data: {
-    category_id: MAIN_RESOURCE_CATEGORY_ID,
-    tags: [],
+    template: MAIN_RESOURCE_CATEGORY_ID,
   },
   config: { headers: {} },
   response: { headers: { location: `/api/v2/items/${MAIN_RESOURCE_DATABASE_ID}` } },
@@ -686,8 +690,7 @@ const submissionPayloadWithAncestors = {
 const mockCreateSecondaryResource = {
   ...mockCreateResource,
   data: {
-    tags: [],
-    category_id: SECONDARY_RESOURCE_CATEGORY_ID,
+    template: SECONDARY_RESOURCE_CATEGORY_ID,
   },
   response: { headers: { location: `/api/v2/items/${SECONDARY_RESOURCE_DATABASE_ID1}` } },
 };

package/src/utils.js

@@ -2,6 +2,7 @@
 // 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';
+import { encodePathSegment } from '@opencloning/utils/urlUtils';
 
 export function error2String(error) {
   if (error.code === 'ERR_NETWORK') { return 'Network error: Cannot connect to eLabFTW'; }
@@ -18,7 +19,7 @@ export function error2String(error) {
 }
 
 export const getFileFromELabFTW = async (itemId, fileInfo) => {
-  const url = `/api/v2/items/${itemId}/uploads/${fileInfo.id}?format=binary`;
+  const url = `/api/v2/items/${encodePathSegment(itemId)}/uploads/${encodePathSegment(fileInfo.id)}?format=binary`;
   try {
     const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders, responseType: 'blob' });
     // Convert blob to file