Fix Safari bug with updating IndexedDB records that contain files (bl…

…obs) (#1189)

babel.config.js

@@ -2,11 +2,16 @@ const isTargetWeb = api =>
   api.caller((caller) => caller && caller.target === 'web');
 
 module.exports = (api) => {
-  const targets = isTargetWeb(api) ? {
-    esmodules: true
-  } : {
-    node: 'current'
+  const babelPresetEnvOptions = {
+    // debug: true, // <-- Enable if you want to debug what babel is doing
+    useBuiltIns: 'usage',
+    corejs: 3.39,
+    modules: false
   };
+  if (!isTargetWeb(api)) {
+    // change babel compile target for node
+    babelPresetEnvOptions.targets = { node: 'current' };
+  }
 
   return {
     presets: [
@@ -15,23 +20,18 @@ module.exports = (api) => {
       }],
       '@babel/typescript',
       [
-        '@babel/env',
-        {
-          useBuiltIns: 'usage',
-          corejs: 3.26,
-          modules: false,
-          targets
-        }
+        '@babel/preset-env',
+        babelPresetEnvOptions
       ]
     ],
     env: {
       test: {
         presets: [
           [
-            '@babel/env',
+            '@babel/preset-env',
             {
               useBuiltIns: 'usage',
-              corejs: 3.26
+              corejs: 3.39
             }
           ]
         ]

src/content/app/tools/vep/services/vepStorageService.ts

@@ -70,6 +70,23 @@ export const updateVepSubmission = async (
     return;
   }
 
+  // The if block below is a hack due to IndexedDB (mis)behaviour in Safari.
+  // Safari seems to dislike it when you store a record one of whose fields is a file (i.e. a blob),
+  // and when you then retrieve that record from the db, change one of the fields that is not the file field,
+  // and save it back to the db.
+  // In such cases, IndexedDB in Safari (as recent as Safari 18) fails with an error:
+  // 'UnknownError: Error preparing Blob/File data to be stored in object store'
+  //
+  // The if block below clones the stored file into a new one. This is silly additional CPU work and memory pressure.
+  // TODO: observe in newer Safaris if this remains a problem, and remove this hack if no longer is.
+  if (storedSubmission.inputFile) {
+    const fileClone = await storedSubmission.inputFile.arrayBuffer();
+    storedSubmission.inputFile = new File(
+      [fileClone],
+      storedSubmission.inputFile.name
+    );
+  }
+
   const updatedSubmission = {
     ...storedSubmission,
     ...fragment

src/content/app/tools/vep/state/vep-form/vepFormSlice.ts

@@ -240,24 +240,16 @@ export const onVepFormSubmission = createAsyncThunk(
     const inputText = vepFormState.inputText;
     const parameters = vepFormState.parameters;
 
-    const requestPayload = await prepareRequestPayload({
-      submissionId,
-      species,
-      inputText,
-      parameters
-    });
-
     // "Detach" the submission from the VEP form by assigning it another temporary id.
     // The id will be eventually finalized to a permanent one after the server response
     const updatedSubmissionId = createInFlightSubmissionId();
-    requestPayload.submission_id = updatedSubmissionId;
 
     await updateVepSubmission(submissionId, {
       id: submissionId,
-      species: vepFormState.selectedSpecies,
       submissionName: vepFormState.submissionName,
-      inputText: vepFormState.inputText,
-      parameters: vepFormState.parameters,
+      species,
+      inputText,
+      parameters,
       submittedAt: Date.now(),
       status: 'SUBMITTING'
     });
@@ -271,6 +263,13 @@ export const onVepFormSubmission = createAsyncThunk(
       addSubmission(updatedStoredSubmission as VepSubmissionWithoutInputFile)
     );
 
+    const requestPayload = await prepareRequestPayload({
+      submissionId: updatedSubmissionId,
+      species,
+      inputText,
+      parameters
+    });
+
     dispatch(vepFormSubmit.initiate(requestPayload, { track: false }));
   }
 );