@opencloning/ui 1.0.1 → 1.1.0-dev.4

package/src/components/primers/PrimerTableRow.cy.jsx

@@ -1,14 +1,21 @@
 import React from 'react';
 import PrimerTableRow from './PrimerTableRow';
 import { mockPrimerDetails, mockPCRDetails, mockPrimer } from '../../../../../tests/mockPrimerDetailsData';
+import { ConfigProvider } from '../../providers/ConfigProvider';
+
+const config = {
+  backendUrl: 'http://127.0.0.1:8000',
+};
 
 describe('<PrimerTableRow />', () => {
   it('displays the right information with PCR details', () => {
     cy.mount(
-      <PrimerTableRow
-        primerDetails={mockPrimerDetails}
-        pcrDetails={mockPCRDetails}
-      />,
+      <ConfigProvider config={config}>
+        <PrimerTableRow
+          primerDetails={mockPrimerDetails}
+          pcrDetails={mockPCRDetails}
+        />
+      </ConfigProvider>,
     );
 
     cy.get('.name').should('contain', 'Test Primer');
@@ -19,10 +26,12 @@ describe('<PrimerTableRow />', () => {
   });
   it('displays the right information without PCR details', () => {
     cy.mount(
-      <PrimerTableRow
-        primerDetails={mockPrimerDetails}
-        pcrDetails={[]}
-      />,
+      <ConfigProvider config={config}>
+        <PrimerTableRow
+          primerDetails={mockPrimerDetails}
+          pcrDetails={[]}
+        />
+      </ConfigProvider>,
     );
     cy.get('.melting-temperature').should('contain', '60');
     cy.get('.gc-content').should('contain', '50');
@@ -30,10 +39,12 @@ describe('<PrimerTableRow />', () => {
   });
   it('shows skeletons when info missing', () => {
     cy.mount(
-      <PrimerTableRow
-        primerDetails={mockPrimer}
-        pcrDetails={[]}
-      />,
+      <ConfigProvider config={config}>
+        <PrimerTableRow
+          primerDetails={mockPrimer}
+          pcrDetails={[]}
+        />
+      </ConfigProvider>,
     );
     cy.get('.melting-temperature .MuiSkeleton-root').should('exist');
     cy.get('.gc-content .MuiSkeleton-root').should('exist');
@@ -43,12 +54,14 @@ describe('<PrimerTableRow />', () => {
     // but if we mistakenly test for bool and the value is 0, nothing will show.
     // This test is to make sure that we are testing for undefined instead of bool.
     cy.mount(
-      <PrimerTableRow
-        primerDetails={{ ...mockPrimerDetails, melting_temperature: 0, gc_content: 0, length: 0 }}
-        pcrDetails={[
-          { ...mockPCRDetails[0], fwdPrimer: { ...mockPCRDetails[0].fwdPrimer, melting_temperature: 0, gc_content: 0, length: 0 } },
-        ]}
-      />,
+      <ConfigProvider config={config}>
+        <PrimerTableRow
+          primerDetails={{ ...mockPrimerDetails, melting_temperature: 0, gc_content: 0, length: 0 }}
+          pcrDetails={[
+            { ...mockPCRDetails[0], fwdPrimer: { ...mockPCRDetails[0].fwdPrimer, melting_temperature: 0, gc_content: 0, length: 0 } },
+          ]}
+        />
+      </ConfigProvider>,
     );
     cy.get('.melting-temperature').should('contain', '0 (0)');
     cy.get('.gc-content').should('contain', '0 (0)');

package/src/components/primers/PrimerTableRow.jsx

@@ -1,9 +1,6 @@
 import { IconButton, Tooltip } from '@mui/material';
 import React, { useState } from 'react';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import SaveIcon from '@mui/icons-material/Save';
-import ClearIcon from '@mui/icons-material/Clear';
+import { Delete as DeleteIcon, Edit as EditIcon, Clear as ClearIcon } from '@mui/icons-material';
 import SubmitToDatabaseDialog from '../form/SubmitToDatabaseDialog';
 import useDatabase from '../../hooks/useDatabase';
 import PrimerDetailsTds from './primer_details/PrimerDetailsTds';

package/src/components/primers/SelectPrimerForm.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormControl, InputLabel, Select, MenuItem, Box, Chip } from '@mui/material';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { AddCircle as AddCircleIcon } from '@mui/icons-material';
 
 function chipRenderer(selected, primers) {
   return (

package/src/components/primers/import_primers/ImportPrimersButton.jsx

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import Modal from '@mui/material/Modal';
-import Box from '@mui/material/Box';
+import { Button, Tooltip, Modal, Box } from '@mui/material';
 import useAlerts from '../../../hooks/useAlerts';
 import './styles.css';
 

package/src/components/primers/import_primers/ImportPrimersTable.jsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { Table, TableCell, TableRow, TableHead, TableBody } from '@mui/material';
-import Tooltip from '@mui/material/Tooltip';
-import CancelIcon from '@mui/icons-material/Cancel';
-import WarningIcon from '@mui/icons-material/Warning';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { Table, TableCell, TableRow, TableHead, TableBody, Tooltip } from '@mui/material';
+import { Cancel as CancelIcon, Warning as WarningIcon, CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 
 function CustomTableRow({ primer }) {
   const { name, sequence, error } = primer;

package/src/components/primers/import_primers/PrimerDatabaseImportForm.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
-import Alert from '@mui/material/Alert';
-import { Button, TextField } from '@mui/material';
+import { Alert, Button, TextField } from '@mui/material';
 
 import useDatabase from '../../../hooks/useDatabase';
 import { stringIsNotDNA } from '@opencloning/store/cloning_utils';

package/src/components/primers/primer_design/SequenceTabComponents/CollapsableLabel.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, FormLabel, IconButton, Collapse } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
 function CollapsableLabel({ label, className, children, open = false }) {
   const [show, setShow] = React.useState(open);

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesignForm.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import PrimerDesignStepper from './PrimerDesignStepper';
 import TabPanelSelectRoi from './TabPanelSelectRoi';
 import TabPannelSettings from './TabPannelSettings';

package/src/components/primers/primer_design/SequenceTabComponents/RestrictionSpacerForm.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormLabel, Box, FormControl, TextField, Tooltip, FormControlLabel, Checkbox } from '@mui/material';
-import InfoIcon from '@mui/icons-material/Info';
+import { Info as InfoIcon } from '@mui/icons-material';
 import { useStore } from 'react-redux';
 import { updateEditor } from '@teselagen/ove';
 import EnzymeMultiSelect from '../../../form/EnzymeMultiSelect';

package/src/components/primers/primer_details/PrimerInfoIcon.jsx

@@ -1,7 +1,6 @@
 import { Dialog, DialogContent, IconButton, Tooltip, Table, TableBody } from '@mui/material';
 import React from 'react';
-import InfoIcon from '@mui/icons-material/Info';
-import WarningIcon from '@mui/icons-material/Warning';
+import { Info as InfoIcon, Warning as WarningIcon } from '@mui/icons-material';
 import { formatGcContent, formatMeltingTemperature, formatDeltaG } from './primerDetailsFormatting';
 import Primer3Figure from './Primer3Figure';
 import TableSection from './TableSection';

package/src/components/settings/SettingsTab.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Card, CardContent, CardHeader, Stack, TextField, InputAdornment, Typography, IconButton, Box } from '@mui/material';
+import { Button, Card, CardContent, CardHeader, Stack, TextField, InputAdornment, IconButton, Box, Tooltip } from '@mui/material';
 import { cloningActions } from '@opencloning/store/cloning';
-import Tooltip from '@mui/material/Tooltip';
-import InfoIcon from '@mui/icons-material/Info';
+import { Info as InfoIcon } from '@mui/icons-material';
 
 const { setGlobalPrimerSettings } = cloningActions;
 

package/src/components/sources/CollectionSource.jsx

@@ -1,6 +1,6 @@
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import React from 'react';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { AddCircle as AddCircleIcon } from '@mui/icons-material';
 import { useDispatch, useStore } from 'react-redux';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';

package/src/components/sources/MultipleOutputsSelector.jsx

@@ -1,7 +1,6 @@
 import { SimpleCircularOrLinearView } from '@teselagen/ove';
 import React from 'react';
-import ArrowForward from '@mui/icons-material/ArrowForward';
-import ArrowBack from '@mui/icons-material/ArrowBack';
+import { ArrowForward, ArrowBack } from '@mui/icons-material';
 import { Button, IconButton } from '@mui/material';
 import { convertToTeselaJson } from '@opencloning/utils/readNwrite';
 import OverhangsDisplay from '../OverhangsDisplay';

package/src/components/sources/NewSourceBox.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import Tooltip from '@mui/material/Tooltip';
+import { AddCircle as AddCircleIcon } from '@mui/icons-material';
+import { Tooltip, IconButton } from '@mui/material';
 import { useDispatch } from 'react-redux';
-import { IconButton } from '@mui/material';
 import { cloningActions } from '@opencloning/store/cloning';
 
 // A component that is rendered on the side of the tree to add a new source

package/src/components/sources/PCRUnitForm.jsx

@@ -1,9 +1,7 @@
 import { Accordion, AccordionDetails, AccordionSummary, FormControl, InputLabel, ListItemText, MenuItem, Select, Tooltip } from '@mui/material';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import CancelIcon from '@mui/icons-material/Cancel';
+import { ExpandMore as ExpandMoreIcon, Cancel as CancelIcon } from '@mui/icons-material';
 import { cloningActions } from '@opencloning/store/cloning';
 import SingleInputSelector from './SingleInputSelector';
 import SelectPrimerForm from '../primers/SelectPrimerForm';

package/src/components/sources/Source.jsx

@@ -14,7 +14,6 @@ import SourceAnnotation from './SourceAnnotation';
 import SourceDatabase from './SourceDatabase';
 import SourcePolymeraseExtension from './SourcePolymeraseExtension';
 import CollectionSource from './CollectionSource';
-import KnownSourceErrors from './KnownSourceErrors';
 import useBackendAPI from '../../hooks/useBackendAPI';
 import MultipleOutputsSelector from './MultipleOutputsSelector';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -31,7 +30,6 @@ function Source({ sourceId }) {
   const { type: sourceType } = source;
   let specificSource = null;
   const templateOnlySources = ['CollectionSource', 'KnownGenomeCoordinatesSource'];
-  const knownErrors = useSelector((state) => state.cloning.knownErrors, isEqual);
   const { requestStatus, sendPostRequest, sources, sequences } = useBackendAPI();
   const { addSequenceAndUpdateItsSource, updateSequenceAndItsSource } = cloningActions;
   const [chosenFragment, setChosenFragment] = React.useState(null);
@@ -115,7 +113,6 @@ function Source({ sourceId }) {
   return (
     <>
       {!templateOnlySources.includes(sourceType) && (<SourceTypeSelector {...{ source }} />)}
-      {sourceType && knownErrors[sourceType] && <KnownSourceErrors errors={knownErrors[sourceType]} />}
       {specificSource}
       {sources.length > 1 && (<MultipleOutputsSelector {...{ sources, sequences, sourceId, onFragmentChosen: setChosenFragment }} />)}
     </>

package/src/components/sources/SourceBox.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch, useStore } from 'react-redux';
-import Tooltip from '@mui/material/Tooltip';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Tooltip } from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import { cloningActions } from '@opencloning/store/cloning';
 import './SourceBox.css';
 import VerifyDeleteDialog from './VerifyDeleteDialog';

package/src/components/sources/SourceFile.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import FormHelperText from '@mui/material/FormHelperText';
-import { Alert, Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, TextField } from '@mui/material';
+import { FormHelperText, Alert, Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, TextField } from '@mui/material';
 import { useDispatch, batch, useStore, useSelector } from 'react-redux';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import LabelWithTooltip from '../form/LabelWithTooltip';

package/src/components/sources/SourceGenomeRegion.cy.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import { AssemblyIdSelector, SpeciesPicker, SequenceAccessionPicker, } from './SourceGenomeRegion';
+import { ConfigProvider } from '../../providers/ConfigProvider';
+
+const config = {
+  backendUrl: 'http://127.0.0.1:8000',
+};
 
 describe('<AssemblyIdSelector />', () => {
   it('can propose a paired accession if the assembly has no annotation', () => {
@@ -43,11 +48,13 @@ describe('<AssemblyIdSelector />', () => {
     }).as('getPairedAssemblyInfo');
 
     cy.mount(
-      <AssemblyIdSelector 
-        setAssemblyId={setAssemblyId}
-        setHasAnnotation={setHasAnnotation}
-        onAssemblyIdChange={onAssemblyIdChange}
-      />
+      <ConfigProvider config={config}>
+        <AssemblyIdSelector 
+          setAssemblyId={setAssemblyId}
+          setHasAnnotation={setHasAnnotation}
+          onAssemblyIdChange={onAssemblyIdChange}
+        />
+      </ConfigProvider>
     );
     cy.get('input').type('GCA_000002945.3');
     cy.wait('@getAssemblyInfo');
@@ -62,7 +69,9 @@ describe('<AssemblyIdSelector />', () => {
     }).as('getAssemblyInfo');
 
     cy.mount(
-      <AssemblyIdSelector setAssemblyId={cy.spy()} setHasAnnotation={cy.spy()} onAssemblyIdChange={cy.spy()} />
+      <ConfigProvider config={config}>
+        <AssemblyIdSelector setAssemblyId={cy.spy()} setHasAnnotation={cy.spy()} onAssemblyIdChange={cy.spy()} />
+      </ConfigProvider>
     );
     cy.get('input').type('GCA_000002945.3', { delay: 0});
     cy.wait('@getAssemblyInfo');
@@ -76,7 +85,9 @@ describe('<SpeciesPicker />', () => {
     const setAssemblyId = cy.spy().as('setAssemblyId');
 
     cy.mount(
-      <SpeciesPicker setSpecies={setSpecies} setAssemblyId={setAssemblyId} />
+      <ConfigProvider config={config}>
+        <SpeciesPicker setSpecies={setSpecies} setAssemblyId={setAssemblyId} />
+      </ConfigProvider>
     );
     cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/taxonomy/taxon_suggest/**', {
       statusCode: 500,
@@ -101,7 +112,9 @@ describe('<SequenceAccessionPicker />', () => {
     }).as('getSequenceReports');
 
     cy.mount(
-      <SequenceAccessionPicker assemblyAccession={assemblyAccession} sequenceAccession={''} setSequenceAccession={setSequenceAccession} />
+      <ConfigProvider config={config}>
+        <SequenceAccessionPicker assemblyAccession={assemblyAccession} sequenceAccession={''} setSequenceAccession={setSequenceAccession} />
+      </ConfigProvider>
     );
     cy.contains('Could not load chromosomes').should('exist');
   });
@@ -115,7 +128,9 @@ describe('<SequenceAccessionPicker />', () => {
     }).as('getSequenceReports');
 
     cy.mount(
-      <SequenceAccessionPicker assemblyAccession={assemblyAccession} setSequenceAccession={setSequenceAccession} />
+      <ConfigProvider config={config}>
+        <SequenceAccessionPicker assemblyAccession={assemblyAccession} setSequenceAccession={setSequenceAccession} />
+      </ConfigProvider>
     );
     cy.wait('@getSequenceReports');
     cy.get('label').siblings('div').first().click();

package/src/components/sources/SourceGenomeRegion.jsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import TextField from '@mui/material/TextField';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import { Alert, Box, FormHelperText, FormLabel } from '@mui/material';
+import { InputLabel, MenuItem, TextField, FormControl, Select, Alert, Box, FormHelperText, FormLabel } from '@mui/material';
 import PostRequestSelect from '../form/PostRequestSelect';
 import { getReferenceAssemblyId, taxonSuggest, geneSuggest, getInfoFromAssemblyId, getInfoFromSequenceAccession } from '@opencloning/utils/ncbiRequests';
 import TextFieldValidate from '../form/TextFieldValidate';

package/src/components/sources/SourceRepositoryId.jsx

@@ -1,13 +1,6 @@
 import React from 'react';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import ClearIcon from '@mui/icons-material/Clear';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import TextField from '@mui/material/TextField';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import { Alert, Autocomplete, Table, TableBody, TableCell, TableRow } from '@mui/material';
+import { IconButton, InputAdornment, InputLabel, MenuItem, TextField, FormControl, Select, Alert, Autocomplete, Table, TableBody, TableCell, TableRow } from '@mui/material';
+import { Clear as ClearIcon } from '@mui/icons-material';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import getHttpClient from '@opencloning/utils/getHttpClient';

package/src/components/sources/SourceTypeSelector.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
+import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import { cloningActions } from '@opencloning/store/cloning';
 import useDatabase from '../../hooks/useDatabase';
+import { useConfig } from '../../hooks/useConfig';
 
 const { replaceSource } = cloningActions;
 
@@ -15,8 +13,7 @@ function SourceTypeSelector({ source }) {
   const dispatch = useDispatch();
   const database = useDatabase();
   const sourceIsPrimerDesign = useSelector((state) => Boolean(state.cloning.sequences.find((e) => e.id === source.id)?.primer_design));
-  const noExternalRequests = useSelector((state) => state.cloning.config.noExternalRequests);
-  const enablePlannotate = useSelector((state) => state.cloning.config.enablePlannotate);
+  const { noExternalRequests, enablePlannotate } = useConfig();
 
   const onChange = (event) => {
     // Clear the source other than these fields

package/src/components/verification/SequencingFileRow.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DownloadIcon from '@mui/icons-material/Download';
+import { Delete as DeleteIcon, Download as DownloadIcon } from '@mui/icons-material';
 import {
   TableCell,
   TableRow,

package/src/components/verification/VerificationFileDialog.cy.jsx

@@ -4,8 +4,14 @@ import store from '@opencloning/store';
 import { cloningActions } from '@opencloning/store/cloning';
 import { loadDataAndMount } from '../../../../../cypress/e2e/common_funcions_store';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+import { Provider } from 'react-redux';
 
-const { setFiles, setConfig } = cloningActions;
+const { setFiles } = cloningActions;
+
+const config = {
+  backendUrl: 'http://127.0.0.1:8000',
+};
 
 const dummyFiles = [
   { file_name: 'file1.txt', sequence_id: 1, file_type: 'Sequencing file' },
@@ -22,7 +28,13 @@ describe('<VerificationFileDialog />', () => {
   it('renders and calls setDialogOpen with false when clicking close button', () => {
     // see: https://on.cypress.io/mounting-react
     const setDialogOpenSpy = cy.spy().as('setDialogOpenSpy');
-    cy.mount(<VerificationFileDialog id={1} dialogOpen setDialogOpen={setDialogOpenSpy} />);
+    cy.mount(
+      <Provider store={store}>
+        <ConfigProvider config={config}>
+          <VerificationFileDialog id={1} dialogOpen setDialogOpen={setDialogOpenSpy} />
+        </ConfigProvider>
+      </Provider>
+    );
 
     // Click close button
     cy.get('button').contains('Close').click();
@@ -41,7 +53,13 @@ describe('<VerificationFileDialog />', () => {
     dummyFiles.forEach((file) => {
       sessionStorage.setItem(getVerificationFileName(file), base64str);
     });
-    cy.mount(<VerificationFileDialog id={1} dialogOpen setDialogOpen={() => {}} />);
+    cy.mount(
+      <Provider store={store}>
+        <ConfigProvider config={config}>
+          <VerificationFileDialog id={1} dialogOpen setDialogOpen={() => {}} />
+        </ConfigProvider>
+      </Provider>
+    );
     // Even though there are two files with the same name, only one should be displayed
     cy.get('table td').filter(':contains("file1.txt")').should('have.length', 1);
     cy.get('table').contains('file2.txt');
@@ -64,13 +82,17 @@ describe('<VerificationFileDialog />', () => {
   });
 
   it('can submit files and aligns them', () => {
-    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
-
     loadDataAndMount(
       'cypress/test_files/sequencing/cloning_strategy_linear.json',
       store,
       () => {
-        cy.mount(<VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />);
+        cy.mount(
+          <Provider store={store}>
+            <ConfigProvider config={config}>
+              <VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />
+            </ConfigProvider>
+          </Provider>
+        );
       },
     ).then(() => {
       cy.get('button').contains('Submit files').click();
@@ -118,12 +140,17 @@ describe('<VerificationFileDialog />', () => {
       });
   });
   it('handles errors', () => {
-    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
     loadDataAndMount(
       'cypress/test_files/sequencing/cloning_strategy_linear.json',
       store,
       () => {
-        cy.mount(<VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />);
+        cy.mount(
+          <Provider store={store}>
+            <ConfigProvider config={config}>
+              <VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />
+            </ConfigProvider>
+          </Provider>
+        );
       },
     ).then(() => {
       // Error if submitting non-allowed files

package/src/hooks/useBackendRoute.js

@@ -1,7 +1,8 @@
-import { useSelector } from 'react-redux';
+import { useConfig } from './useConfig';
 
 export default function useBackendRoute() {
-  const configBackendUrl = useSelector((state) => state.cloning.config.backendUrl);
+  const { backendUrl: configBackendUrl } = useConfig();
+  
   if (!configBackendUrl) {
     return () => {};
   }

package/src/hooks/useConfig.js

@@ -0,0 +1,2 @@
+// Re-export useConfig from ConfigProvider for convenience
+export { useConfig } from '../providers/ConfigProvider';

package/src/hooks/useDatabase.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useConfig } from './useConfig';
 import eLabFTWInterface from '../components/eLabFTW/eLabFTWInterface';
 import dummyInterface from '../components/dummy/DummyInterface';
 
 export default function useDatabase() {
-  const databaseName = useSelector((state) => state.cloning.config.database);
+  const { database: databaseName } = useConfig();
 
   return React.useMemo(() => {
     if (databaseName === 'elabftw') {

package/src/hooks/useHttpClient.js

@@ -1,12 +1,18 @@
-import { useSelector } from 'react-redux';
 import React from 'react';
 import getHttpClient from '@opencloning/utils/getHttpClient';
+import { useConfig } from './useConfig';
 
 export default function useHttpClient() {
-  const backendUrl = useSelector((state) => state.cloning.config.backendUrl);
+  const { backendUrl } = useConfig();
 
   // Memoize the client creation and interceptor setup
-  const apiClient = React.useMemo(() => getHttpClient([backendUrl]), [backendUrl]);
+  const apiClient = React.useMemo(() => {
+    if (!backendUrl) {
+      // Return a client without backend URL if config not loaded yet
+      return getHttpClient([]);
+    }
+    return getHttpClient([backendUrl]);
+  }, [backendUrl]);
 
   return apiClient;
 }

package/src/hooks/useInitializeApp.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to initialize application-level concerns
+ * - Clears session storage
+ */
+export default function useInitializeApp() {
+
+  useEffect(() => {
+    // Clear session storage
+    // eslint-disable-next-line no-undef
+    sessionStorage.clear();
+  }, []);
+}
+