@opencloning/ui 1.5.6 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @opencloning/ui
 
+## 1.7.0
+
+### Minor Changes
+
+- [#670](https://github.com/manulera/OpenCloning_frontend/pull/670) [`2943c1c`](https://github.com/manulera/OpenCloning_frontend/commit/2943c1c3a8b29a7081841d8ca9e2b36a2ad14a61) Thanks [@manulera](https://github.com/manulera)! - Fix import structure
+
+### Patch Changes
+
+- Updated dependencies [[`2943c1c`](https://github.com/manulera/OpenCloning_frontend/commit/2943c1c3a8b29a7081841d8ca9e2b36a2ad14a61)]:
+  - @opencloning/store@1.7.0
+  - @opencloning/utils@1.7.0
+
+## 1.6.0
+
+### Minor Changes
+
+- [#668](https://github.com/manulera/OpenCloning_frontend/pull/668) [`dd0df39`](https://github.com/manulera/OpenCloning_frontend/commit/dd0df39c5fbf65feaab09f90d123e3776efed6bd) Thanks [@manulera](https://github.com/manulera)! - Moved eLabFTW interface into a separate package
+
+### Patch Changes
+
+- [#668](https://github.com/manulera/OpenCloning_frontend/pull/668) [`dd0df39`](https://github.com/manulera/OpenCloning_frontend/commit/dd0df39c5fbf65feaab09f90d123e3776efed6bd) Thanks [@manulera](https://github.com/manulera)! - Added LICENSE to package.json
+
+- Updated dependencies [[`dd0df39`](https://github.com/manulera/OpenCloning_frontend/commit/dd0df39c5fbf65feaab09f90d123e3776efed6bd)]:
+  - @opencloning/store@1.6.0
+  - @opencloning/utils@1.6.0
+
 ## 1.5.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,7 @@
 {
+  "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.5.6",
+  "version": "1.7.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -11,8 +12,14 @@
     ".": "./src/index.js",
     "./components": "./src/components/index.js",
     "./components/assembler": "./src/components/assembler/index.js",
+    "./components/dummy": "./src/components/dummy/index.js",
+    "./components/form/GetRequestMultiSelect": "./src/components/form/GetRequestMultiSelect.jsx",
+    "./components/form/RetryAlert": "./src/components/form/RetryAlert.jsx",
+    "./components/form/RequestStatusWrapper": "./src/components/form/RequestStatusWrapper.jsx",
+    "./components/form/PostRequestSelect": "./src/components/form/PostRequestSelect.jsx",
     "./providers/ConfigProvider": "./src/providers/index.js",
-    "./hooks/useConfig": "./src/hooks/useConfig.js",
+    "./providers/DatabaseContext": "./src/providers/DatabaseContext.jsx",
+    "./hooks": "./src/hooks/index.js",
     "./standalone": "./src/StandAloneOpenCloning.js"
   },
   "repository": {
@@ -26,8 +33,8 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/x-data-grid": "^8.25.0",
-    "@opencloning/store": "1.5.6",
-    "@opencloning/utils": "1.5.6",
+    "@opencloning/store": "1.7.0",
+    "@opencloning/utils": "1.7.0",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/assembler/UploadPlasmidsButton.cy.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
-import { localFilesHttpClient } from '@opencloning/ui/hooks/useServerStaticFiles';
+import { localFilesHttpClient } from '@opencloning/ui/hooks';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
 

package/src/components/dummy/index.js

@@ -0,0 +1 @@
+export { default } from './DummyInterface.js';

package/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { useConfig } from './useConfig.js';
+export { default as useServerStaticFiles, localFilesHttpClient } from './useServerStaticFiles.js';

package/src/hooks/useDatabase.js

@@ -1,18 +1,3 @@
-import React from 'react';
-import { useConfig } from './useConfig';
-import eLabFTWInterface from '../components/eLabFTW/eLabFTWInterface';
-import dummyInterface from '../components/dummy/DummyInterface';
+import { useDatabase } from '../providers/DatabaseContext';
 
-export default function useDatabase() {
-  const { database: databaseName } = useConfig();
-
-  return React.useMemo(() => {
-    if (databaseName === 'elabftw') {
-      return eLabFTWInterface;
-    }
-    if (databaseName === 'dummy') {
-      return dummyInterface;
-    }
-    return null;
-  }, [databaseName]);
-}
+export default useDatabase;

package/src/providers/DatabaseContext.jsx

@@ -0,0 +1,15 @@
+import React, { createContext, useContext } from 'react';
+
+export const DatabaseContext = createContext(null);
+
+export function DatabaseProvider({ value, children }) {
+  return (
+    <DatabaseContext.Provider value={value}>
+      {children}
+    </DatabaseContext.Provider>
+  );
+}
+
+export function useDatabase() {
+  return useContext(DatabaseContext);
+}

package/src/version.js

@@ -1,2 +1,2 @@
 // Version placeholder - replaced at publish time via prepack script
-export const version = "1.5.6";
+export const version = "1.7.0";

package/vitest.config.js

@@ -1,16 +1,8 @@
 import { defineConfig } from 'vitest/config';
-import { resolve } from 'path';
 import { testConfig } from '../../vitest.common.config';
 
 export default defineConfig({
   test: {
     ...testConfig,
   },
-  resolve: {
-    alias: {
-      '@opencloning/ui': resolve(__dirname, './src'),
-      '@opencloning/store': resolve(__dirname, '../store/src'),
-      '@opencloning/utils': resolve(__dirname, '../utils/src/utils'),
-    },
-  },
 });

package/src/components/eLabFTW/ELabFTWCategorySelect.cy.jsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import ELabFTWCategorySelect from './ELabFTWCategorySelect';
-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.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({
-        data: [
-          { id: 1, title: 'Category 1' },
-          { id: 2, title: 'Category 2' },
-        ],
-      })
-      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
-        data: {
-          elabftw_version_int: 50200,
-        },
-      });
-    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 empty options if no categories are found', () => {
-    cy.mount(<ELabFTWCategorySelect fullWidth />);
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } }).resolves({
-        data: [],
-      })
-      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } }).resolves({
-        data: {
-          elabftw_version_int: 50200,
-        },
-      });
-    cy.get('.MuiAutocomplete-root').click();
-    cy.get('li').should('not.exist');
-  });
-
-  it('shows an error message if the request fails and can retry', () => {
-    cy.mount(<ELabFTWCategorySelect fullWidth />);
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' } })
-      .resolves({
-        data: {
-          elabftw_version_int: 50300,
-        },
-      }).as('eLabFTWHttpClientSpyInfo')
-      .withArgs('/api/v2/teams/current/resources_categories', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
-      .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
-    cy.get('button').contains('Retry').click();
-    cy.get('@eLabFTWHttpClientSpy').should('have.callCount', 2);
-    cy.get('@eLabFTWHttpClientSpyInfo').should('have.callCount', 1);
-  });
-});

package/src/components/eLabFTW/ELabFTWCategorySelect.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import GetRequestMultiSelect from '../form/GetRequestMultiSelect';
-import { eLabFTWHttpClient, getELabFTWVersion, readHeaders } from './common';
-import RequestStatusWrapper from '../form/RequestStatusWrapper';
-
-function ELabFTWCategorySelect({ setCategory, label = 'Resource category', ...rest }) {
-  const [eLabFTWVersion, setELabFTWVersion] = React.useState(null);
-  const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
-  const [retry, setRetry] = React.useState(0);
-  React.useEffect(() => {
-    setRequestStatus({ status: 'loading' });
-    getELabFTWVersion().then(
-      (version) => {
-        setELabFTWVersion(version);
-        setRequestStatus({ status: 'success' });
-      }
-    ).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';
-  const getOptionsFromResponse = (data) => data;
-  const messages = { loadingMessage: 'retrieving categories', errorMessage: 'Could not retrieve categories from eLab' };
-  const onChange = (value) => setCategory(value);
-
-  return (
-    <RequestStatusWrapper requestStatus={requestStatus} retry={() => { setRetry(retry + 1); }}>
-      <GetRequestMultiSelect
-        getOptionsFromResponse={getOptionsFromResponse}
-        httpClient={eLabFTWHttpClient}
-        requestHeaders={readHeaders}
-        url={url}
-        requestParams={{ limit: 9999 }}
-        label={label}
-        messages={messages}
-        onChange={onChange}
-        getOptionLabel={(option) => (option === '' ? '' : option.title)}
-        multiple={false}
-        {...rest}
-      />
-    </RequestStatusWrapper>
-  );
-}
-
-export default ELabFTWCategorySelect;

package/src/components/eLabFTW/ELabFTWFileSelect.cy.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import ELabFTWFileSelect from './ELabFTWFileSelect';
-import { eLabFTWHttpClient } from './common';
-
-describe('<ELabFTWFileSelect />', () => {
-  it('shows the right options', () => {
-    const setFileInfoSpy = cy.spy().as('setFileInfoSpy');
-    // Stub the eLabFTWHttpClient similar to the pattern in eLabFTWInterface.test.js
-    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/items/1', { headers: { Authorization: 'test-read-key' }, params: {}  }).resolves({
-      data: {
-        uploads: [
-          { id: 1, real_name: 'file1.txt' },
-          { id: 2, real_name: 'file2.txt' },
-        ],
-      },
-    });
-    cy.mount(<ELabFTWFileSelect fullWidth itemId={1} setFileInfo={setFileInfoSpy} />);
-    cy.get('div.MuiSelect-select').click();
-    cy.get('li').contains('file1.txt').should('exist');
-    cy.get('li').contains('file2.txt').should('exist');
-    cy.get('li').contains('file1.txt').click();
-    cy.get('@setFileInfoSpy').should('have.been.calledWith', { id: 1, real_name: 'file1.txt' });
-  });
-  it('shows empty options if no files are found', () => {
-    cy.mount(<ELabFTWFileSelect fullWidth itemId={1} />);
-    cy.stub(eLabFTWHttpClient, 'get').withArgs('/api/v2/items/1', { headers: { Authorization: 'test-read-key' }, params: {} }).resolves({
-      data: {
-        uploads: [],
-      },
-    });
-    cy.get('div.MuiSelect-select').click();
-    cy.get('li').should('not.exist');
-  });
-
-  it('shows an error message if the request fails and can retry', () => {
-    cy.mount(<ELabFTWFileSelect fullWidth itemId={1} />);
-    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve attachment');
-    // Clicking the retry button makes the request again
-    cy.spy(eLabFTWHttpClient, 'get').as('eLabFTWHttpClientSpy');
-    cy.get('button').contains('Retry').click();
-    cy.get('@eLabFTWHttpClientSpy').should('have.been.calledWith', '/api/v2/items/1', { headers: { Authorization: 'test-read-key' }, params: {} });
-  });
-});

package/src/components/eLabFTW/ELabFTWFileSelect.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import GetRequestMultiSelect from '../form/GetRequestMultiSelect';
-import { eLabFTWHttpClient, readHeaders } from './common';
-
-function ELabFTWFileSelect({ itemId, setFileInfo, ...rest }) {
-  const url = `/api/v2/items/${itemId}`;
-  const getOptionsFromResponse = ({ uploads }) => uploads;
-  const label = 'File with sequence';
-  const messages = { loadingMessage: 'retrieving attachments', errorMessage: 'Could not retrieve attachment from eLab' };
-  const onChange = (realName, options) => setFileInfo(options.find((option) => option.real_name === realName));
-
-  return (
-    <GetRequestMultiSelect
-      getOptionsFromResponse={getOptionsFromResponse}
-      httpClient={eLabFTWHttpClient}
-      requestHeaders={readHeaders}
-      url={url}
-      label={label}
-      messages={messages}
-      onChange={onChange}
-      getOptionLabel={(option) => (option === '' ? '' : option.real_name)}
-      multiple={false}
-      autoComplete={false}
-      {...rest}
-    />
-  );
-}
-
-export default ELabFTWFileSelect;

package/src/components/eLabFTW/ELabFTWResourceSelect.cy.jsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import ELabFTWResourceSelect from './ELabFTWResourceSelect';
-import { eLabFTWHttpClient } from './common';
-
-describe('<ELabFTWResourceSelect />', () => {
-  it('shows the right options when searching', () => {
-    const setResourceSpy = cy.spy().as('setResourceSpy');
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items', {
-        headers: { Authorization: 'test-read-key' },
-        params: { cat: 1, extended: 'title:test', limit: 9999 },
-      })
-      .resolves({
-        data: [
-          { id: 1, title: 'Test Resource 1' },
-          { id: 2, title: 'Test Resource 2' },
-        ],
-      });
-
-    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} setResource={setResourceSpy} />);
-
-    // Type in the search field
-    cy.get('.MuiAutocomplete-input').type('test');
-
-    // Check if options are displayed
-    cy.get('li').contains('Test Resource 1').should('exist');
-    cy.get('li').contains('Test Resource 2').should('exist');
-
-    // Select an option
-    cy.get('li').contains('Test Resource 1').click();
-    cy.get('@setResourceSpy').should('have.been.calledWith', { id: 1, title: 'Test Resource 1' });
-  });
-
-  it('shows empty options if no resources are found', () => {
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items', {
-        headers: { Authorization: 'test-read-key' },
-        params: { cat: 1, extended: 'title:nonexistent', limit: 9999 },
-      })
-      .resolves({
-        data: [],
-      });
-
-    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} />);
-    cy.get('.MuiAutocomplete-input').type('nonexistent');
-    cy.get('li').should('not.exist');
-  });
-
-  it('handles API errors gracefully', () => {
-    let firstCall = true;
-    cy.stub(eLabFTWHttpClient, 'get')
-      .withArgs('/api/v2/items', {
-        headers: { Authorization: 'test-read-key' },
-        params: { cat: 1, extended: 'title:test', limit: 9999 },
-      })
-      .callsFake(() => {
-        if (firstCall) {
-          firstCall = false;
-          return Promise.reject(new Error('API Error'));
-        }
-        return Promise.resolve({ data: [
-          { id: 1, title: 'Test Resource 1' },
-          { id: 2, title: 'Test Resource 2' },
-        ] });
-      });
-
-    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} />);
-    cy.get('.MuiAutocomplete-input').type('test');
-    // The component should handle the error gracefully
-    cy.get('.MuiAlert-message').should('contain', 'Could not retrieve data');
-    // Clicking the retry button makes the request again
-    cy.get('button').contains('Retry').click();
-    // Verify the second call was made
-    cy.get('div.MuiInputBase-root').click();
-    cy.get('li').contains('Test Resource 1').should('exist');
-    cy.get('li').contains('Test Resource 2').should('exist');
-  });
-
-  it('updates search results when categoryId changes', () => {
-    const getStub = cy.stub(eLabFTWHttpClient, 'get');
-
-    // First category results
-    getStub.withArgs('/api/v2/items', {
-      headers: { Authorization: 'test-read-key' },
-      params: { cat: 1, extended: 'title:test', limit: 9999 },
-    }).resolves({
-      data: [{ id: 1, title: 'Category 1 Resource' }],
-    });
-
-    // Second category results
-    getStub.withArgs('/api/v2/items', {
-      headers: { Authorization: 'test-read-key' },
-      params: { cat: 2, extended: 'title:test', limit: 9999 },
-    }).resolves({
-      data: [{ id: 2, title: 'Category 2 Resource' }],
-    });
-
-    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={1} />);
-    cy.get('.MuiAutocomplete-input').type('test');
-    cy.get('li').contains('Category 1 Resource').should('exist');
-
-    // Change category and verify new results
-    cy.mount(<ELabFTWResourceSelect fullWidth categoryId={2} />);
-    cy.get('.MuiAutocomplete-input').type('test');
-    cy.get('li').contains('Category 2 Resource').should('exist');
-  });
-});

package/src/components/eLabFTW/ELabFTWResourceSelect.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import PostRequestSelect from '../form/PostRequestSelect';
-import { eLabFTWHttpClient, readHeaders } from './common';
-
-function ELabFTWResourceSelect({ setResource, categoryId, ...rest }) {
-  const url = '/api/v2/items';
-
-  const resourcePostRequestSettings = React.useMemo(() => ({
-    setValue: setResource,
-    getOptions: async (userInput) => {
-      const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders, params: { cat: categoryId, extended: `title:${userInput}`, limit: 9999 } });
-      return resp.data;
-    },
-    getOptionLabel: (option) => (option ? option.title : ''),
-    isOptionEqualToValue: (option, value) => option?.id === value?.id,
-    textLabel: 'Resource',
-  }), [setResource, categoryId]);
-  return (
-    <PostRequestSelect {...resourcePostRequestSettings} {...rest} />
-  );
-}
-
-export default ELabFTWResourceSelect;