From 230901772714cfb23f2c67e75c1431d83862f124 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 25 Nov 2019 14:17:04 +0100 Subject: [PATCH 1/5] javascript: add a window.fetch polyfill This allows the autosave to work on browsers that don't support fetch: - IE 11 - Edge < 14 - Safari < 11 --- app/javascript/packs/application.js | 1 + package.json | 3 ++- yarn.lock | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index c8952609c..aefdead6f 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -3,6 +3,7 @@ import Turbolinks from 'turbolinks'; import Rails from '@rails/ujs'; import * as ActiveStorage from '@rails/activestorage'; import '@rails/actiontext'; +import 'whatwg-fetch'; // window.fetch polyfill import Chartkick from 'chartkick'; import Highcharts from 'highcharts'; diff --git a/package.json b/package.json index bf3000f81..653db4844 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "react_ujs": "^2.6.0", "select2": "^4.0.11", "trix": "^1.2.1", - "turbolinks": "^5.2.0" + "turbolinks": "^5.2.0", + "whatwg-fetch": "^3.0.0" }, "devDependencies": { "babel-eslint": "^10.0.3", diff --git a/yarn.lock b/yarn.lock index e4b002337..13623df33 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8931,6 +8931,11 @@ websocket-extensions@>=0.1.1: resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29" integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg== +whatwg-fetch@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb" + integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q== + which-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f" From 64d96646a353f611c0446a8a09a76e61b865abf9 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 25 Nov 2019 14:18:50 +0100 Subject: [PATCH 2/5] javascript: autosave with explicit cookies settings Older browsers implemented a different default value for `window.fetch` credentials: it was omitted unless explicitely set. So we force the value for these older browsers: - Firefox 39-60 - Chrome 42-67 - Safari 10.1-11.1.2 See https://github.com/github/fetch#sending-cookies --- app/javascript/new_design/autosave-controller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/javascript/new_design/autosave-controller.js b/app/javascript/new_design/autosave-controller.js index 3d2c1acff..c0fed3c04 100644 --- a/app/javascript/new_design/autosave-controller.js +++ b/app/javascript/new_design/autosave-controller.js @@ -37,6 +37,7 @@ export default class AutosaveController { const fetchOptions = { method: form.method, body: formData, + credentials: 'same-origin', headers: { Accept: 'application/json' } }; From c6eab706798a7ddf7439c534e0443a6d4eabd7b0 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 25 Nov 2019 18:17:49 +0100 Subject: [PATCH 3/5] dossiers: autosave shouldn't send files being uploaded MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When a file is being uploaded asynchronosely, hidden input fields are created by DirectUpload to contain the result of the upload. However, before the upload finishes, the value of these inputs is not meaningful. Moreover, it makes the ActiveRecord signature invalid – thus preventing drafts from being saved. Exclude these fields from the auto-save. --- app/javascript/new_design/autosave-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/new_design/autosave-controller.js b/app/javascript/new_design/autosave-controller.js index c0fed3c04..3d15407a4 100644 --- a/app/javascript/new_design/autosave-controller.js +++ b/app/javascript/new_design/autosave-controller.js @@ -62,7 +62,7 @@ export default class AutosaveController { // exclude them from the draft (by disabling them). // (Also Safari has issue with FormData containing empty file inputs) const fileInputs = form.querySelectorAll( - 'input[type="file"]:not([disabled])' + 'input[type="file"]:not([disabled]), .editable-champ-piece_justificative input:not([disabled])' ); fileInputs.forEach(fileInput => (fileInput.disabled = true)); From 30b822b1356f4692ac84a5d34c6818a799290c21 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 25 Nov 2019 18:18:32 +0100 Subject: [PATCH 4/5] dossiers: don't trigger an autosave when an attachment is modified The draft autosave should not be triggered when attaching a file (as file inputs are handled separately). --- app/javascript/new_design/autosave.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/new_design/autosave.js b/app/javascript/new_design/autosave.js index 2e837491f..75e8db7d6 100644 --- a/app/javascript/new_design/autosave.js +++ b/app/javascript/new_design/autosave.js @@ -19,7 +19,7 @@ const autosaveController = new AutosaveController(); // Whenever a 'change' event is triggered on one of the form inputs, try to autosave. const formSelector = 'form#dossier-edit-form.autosave-enabled'; -const formInputsSelector = `${formSelector} input, ${formSelector} select, ${formSelector} textarea`; +const formInputsSelector = `${formSelector} input:not([type=input]), ${formSelector} select, ${formSelector} textarea`; delegate( 'change', From f58f9f99509f7e680340e38b18b748f90ad53f85 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 25 Nov 2019 18:23:43 +0100 Subject: [PATCH 5/5] dossiers: render a valid response after an autosave This helps Firefox DevTools to mark the request as valid and completed successfuly. --- app/controllers/users/dossiers_controller.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/controllers/users/dossiers_controller.rb b/app/controllers/users/dossiers_controller.rb index 575473a69..b476ad751 100644 --- a/app/controllers/users/dossiers_controller.rb +++ b/app/controllers/users/dossiers_controller.rb @@ -155,7 +155,7 @@ module Users respond_to do |format| format.html { render :brouillon } - format.json { head :ok } + format.json { render json: {}, status: :ok } end end