Merge branch 'master' of github.com:formio/formio.js into FIO-7208-mi…

…grate-tree-component-to-contrib
formio · Nov 7, 2023 · 301e4c8 · 301e4c8
2 parents 9a52d51 + 6627908
commit 301e4c8
Show file tree

Hide file tree

Showing 24 changed files with 709 additions and 409 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -28,6 +28,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-6370: Fixes issues with PasswordStrength Addon settings
  - FIO-7146: formiojs-circleci-to-ghactions
  - FIO-6859: update-s3-to-accept-headers-from-signer-presign
+ - FIO 7239: support for AWS S3 Multipart Upload
+ - FIO-7239: add polyfill and include token in abort and complete requests for multipart upload2
+ - FIO-7429: removed columns component settings(pull, offset, push)
+ - FIO-7466: fixed an issue where code inside tolltips will be executed
+ - FIO-7355: fixed issue with HTML5 select flickering on initial click
 
 ## 5.0.0-rc.26
 ### Changed

diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "@formio/core": "1.3.0-rc.16",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
+    "abortcontroller-polyfill": "^1.7.5",
     "autocompleter": "^8.0.4",
     "bootstrap": "^5.3.0",
     "browser-cookies": "^1.2.0",

diff --git a/src/Formio.js b/src/Formio.js
@@ -6,7 +6,7 @@ Formio.Providers = Providers;
 Formio.version = 'FORMIO_VERSION';
 
 const isNil = (val) => val === null || val === undefined;
-Formio.prototype.uploadFile = function(storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback) {
+Formio.prototype.uploadFile = function(storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {
   const requestArgs = {
     provider: storage,
     method: 'upload',
@@ -26,7 +26,7 @@ Formio.prototype.uploadFile = function(storage, file, fileName, dir, progressCal
               if (uploadStartCallback) {
                 uploadStartCallback();
               }
-              return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback);
+              return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);
             }
             else {
               throw ('Storage provider not found');

diff --git a/src/Wizard.js b/src/Wizard.js
@@ -897,30 +897,27 @@ export default class Wizard extends Webform {
   }
 
   setValue(submission, flags = {}, ignoreEstablishment) {
-    const changed = this.getPages({ all: true }).reduce((changed, page) => {
-      return this.setNestedValue(page, submission.data, flags, changed) || changed;
-    }, false);
-
-    if (!flags.sanitize ||
+    this._submission = submission;
+    if (
+      (flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
       (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
       (this.options.server && (this.prefixComps.length || this.suffixComps.length))
     ) {
-      this.mergeData(this.data, submission.data);
+      this._data = submission.data;
     }
 
+    if (!ignoreEstablishment) {
+      this.establishPages(submission.data);
+    }
+    const changed = this.getPages({ all: true }).reduce((changed, page) => {
+      return this.setNestedValue(page, submission.data, flags, changed) || changed;
+    }, false);
+
     if (changed) {
       this.pageFieldLogic(this.page);
     }
-
     this.setEditMode(submission);
 
-    submission.data = this.data;
-    this._submission = submission;
-
-    if (!ignoreEstablishment) {
-      this.establishPages(submission.data);
-    }
-
     return changed;
   }
 

diff --git a/src/Wizard.unit.js b/src/Wizard.unit.js
@@ -161,7 +161,7 @@ describe('Wizard tests', () => {
                   }, 'Should contain correct submission data');
 
                   done();
-                }, 500);
+                }, 200);
               }, 200);
             }, 200);
           }, 200);

diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
@@ -1223,7 +1223,7 @@ export default class Component extends Element {
           placement: 'right',
           zIndex: 10000,
           interactive: true,
-          content: this.t(tooltipText, { _userInput: true }),
+          content: this.t(this.sanitize(tooltipText), { _userInput: true }),
         });
       }
     });

diff --git a/src/components/_classes/component/Component.unit.js b/src/components/_classes/component/Component.unit.js
@@ -9,6 +9,7 @@ import { comp1 } from './fixtures';
 import _merge from 'lodash/merge';
 import comp3 from './fixtures/comp3';
 import comp4 from './fixtures/comp4';
+import comp5 from './fixtures/comp5';
 
 describe('Component', () => {
   it('Should create a Component', (done) => {
@@ -356,4 +357,17 @@ describe('Component', () => {
       .catch(done);
     });
   });
+
+  it('Should not execute code inside Tooltips/Description', (done) => {
+    const formElement = document.createElement('div');
+    const form = new Webform(formElement);
+
+    form.setForm(comp5).then(() => {
+      setTimeout(() => {
+        assert.equal(window._ee, undefined, 'Should not execute code inside Tooltips/Description');
+        done();
+      }, 200);
+    })
+      .catch(done);
+  });
 });
diff --git a/src/components/_classes/component/fixtures/comp5.js b/src/components/_classes/component/fixtures/comp5.js
@@ -0,0 +1,24 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Text Field',
+      description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
+      tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
+      applyMaskOn: 'change',
+      tableView: true,
+      key: 'textField',
+      type: 'textfield',
+      input: true
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false
+    }
+  ],
+};
diff --git a/src/components/_classes/component/fixtures/index.js b/src/components/_classes/component/fixtures/index.js
@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };
diff --git a/src/components/columns/editForm/Columns.edit.display.js b/src/components/columns/editForm/Columns.edit.display.js
@@ -84,24 +84,6 @@ export default [
         key: 'width',
         defaultValue: 6,
         label: 'Width'
-      },
-      {
-        type: 'number',
-        key: 'offset',
-        defaultValue: 0,
-        label: 'Offset'
-      },
-      {
-        type: 'number',
-        key: 'push',
-        defaultValue: 0,
-        label: 'Push'
-      },
-      {
-        type: 'number',
-        key: 'pull',
-        defaultValue: 0,
-        label: 'Pull'
       }
     ]
   },

diff --git a/src/components/file/File.js b/src/components/file/File.js
@@ -789,6 +789,23 @@ export default class FileComponent extends Field {
             }
           }
 
+          // Prep for a potential multipart upload
+          let count = 0;
+          const multipartOptions = this.component.useMultipartUpload && this.component.multipart ? {
+            ...this.component.multipart,
+            progressCallback: (total) => {
+              count++;
+              fileUpload.status = 'progress';
+              fileUpload.progress = parseInt(100 * count / total);
+              delete fileUpload.message;
+              this.redraw();
+            },
+            changeMessage: (message) => {
+              fileUpload.message = message;
+              this.redraw();
+            },
+          } : false;
+
           fileUpload.message = this.t('Starting upload...');
           this.redraw();
 
@@ -814,6 +831,7 @@ export default class FileComponent extends Field {
               this.emit('fileUploadingStart', filePromise);
             },
             (abort) => fileUpload.abort = abort,
+            multipartOptions
           ).then((fileInfo) => {
               const index = this.statuses.indexOf(fileUpload);
               if (index !== -1) {

diff --git a/src/components/file/editForm/File.edit.file.js b/src/components/file/editForm/File.edit.file.js
@@ -21,6 +21,46 @@ export default [
       }
     }
   },
+  {
+    type: 'checkbox',
+    input: true,
+    key: 'useMultipartUpload',
+    label: 'Use the S3 Multipart Upload API',
+    tooltip: "The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).",
+    conditional: {
+      json: { '===': [{ var: 'data.storage' }, 's3'] }
+    },
+  },
+  {
+    label: 'Multipart Upload',
+    tableView: false,
+    key: 'multipart',
+    type: 'container',
+    input: true,
+    components: [
+      {
+        label: 'Part Size (MB)',
+        applyMaskOn: 'change',
+        mask: false,
+        tableView: false,
+        delimiter: false,
+        requireDecimal: false,
+        inputFormat: 'plain',
+        truncateMultipleSpaces: false,
+        validate: {
+          min: 5,
+          max: 5000,
+        },
+        key: 'partSize',
+        type: 'number',
+        input: true,
+        defaultValue: 500,
+      },
+    ],
+    conditional: {
+      json: { '===': [{ var: 'data.useMultipartUpload' }, true] }
+    },
+  },
   {
     type: 'textfield',
     input: true,

diff --git a/src/components/select/Select.js b/src/components/select/Select.js
@@ -943,7 +943,11 @@ export default class SelectComponent extends ListComponent {
       }
 
       this.focusableElement = input;
-      this.addEventListener(input, 'focus', () => this.update());
+
+      if (this.component.dataSrc === 'custom') {
+        this.addEventListener(input, 'focus', () => this.updateCustomItems());
+      }
+
       this.addEventListener(input, 'keydown', (event) => {
         const { key } = event;
 

diff --git a/src/providers/storage/azure.js b/src/providers/storage/azure.js
@@ -1,26 +1,28 @@
 import XHR from './xhr';
-const azure = (formio) => ({
-  uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {
-    return XHR.upload(formio, 'azure', (xhr, response) => {
-      xhr.openAndSetHeaders('PUT', response.url);
-      xhr.setRequestHeader('Content-Type', file.type);
-      xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
-      return file;
-    }, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback).then(() => {
-      return {
-        storage: 'azure',
-        name: XHR.path([dir, fileName]),
-        size: file.size,
-        type: file.type,
-        groupPermissions,
-        groupId,
-      };
-    });
-  },
-  downloadFile(file) {
-    return formio.makeRequest('file', `${formio.formUrl}/storage/azure?name=${XHR.trim(file.name)}`, 'GET');
-  }
-});
+function azure(formio) {
+  return {
+    uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {
+      return XHR.upload(formio, 'azure', (xhr, response) => {
+        xhr.openAndSetHeaders('PUT', response.url);
+        xhr.setRequestHeader('Content-Type', file.type);
+        xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
+        return file;
+      }, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback).then(() => {
+        return {
+          storage: 'azure',
+          name: XHR.path([dir, fileName]),
+          size: file.size,
+          type: file.type,
+          groupPermissions,
+          groupId,
+        };
+      });
+    },
+    downloadFile(file) {
+      return formio.makeRequest('file', `${formio.formUrl}/storage/azure?name=${XHR.trim(file.name)}`, 'GET');
+    }
+  };
+}
 
 azure.title = 'Azure File Services';
 export default azure;
diff --git a/src/providers/storage/base64.js b/src/providers/storage/base64.js
@@ -1,33 +1,35 @@
-const base64 = () => ({
-  title: 'Base64',
-  name: 'base64',
-  uploadFile(file, fileName) {
-    const reader = new FileReader();
+function base64() {
+  return {
+    title: 'Base64',
+    name: 'base64',
+    uploadFile(file, fileName) {
+      const reader = new FileReader();
 
-    return new Promise((resolve, reject) => {
-      reader.onload = (event) => {
-        const url = event.target.result;
-        resolve({
-          storage: 'base64',
-          name: fileName,
-          url: url,
-          size: file.size,
-          type: file.type,
-        });
-      };
+      return new Promise((resolve, reject) => {
+        reader.onload = (event) => {
+          const url = event.target.result;
+          resolve({
+            storage: 'base64',
+            name: fileName,
+            url: url,
+            size: file.size,
+            type: file.type,
+          });
+        };
 
-      reader.onerror = () => {
-        return reject(this);
-      };
+        reader.onerror = () => {
+          return reject(this);
+        };
 
-      reader.readAsDataURL(file);
-    });
-  },
-  downloadFile(file) {
-    // Return the original as there is nothing to do.
-    return Promise.resolve(file);
-  }
-});
+        reader.readAsDataURL(file);
+      });
+    },
+    downloadFile(file) {
+      // Return the original as there is nothing to do.
+      return Promise.resolve(file);
+    }
+  };
+}
 
 base64.title = 'Base64';
 export default base64;