From 3fc5ac36b0c264fec055f764d7b967cea2c49ea5 Mon Sep 17 00:00:00 2001
From: wandji20 <wbertrand10@gmail.com>
Date: Mon, 14 Aug 2023 16:48:00 +0100
Subject: [PATCH] Set nonce for new and edit result asset inline javascript and
 fix image preview after editing [SCI-9058]

---
 app/assets/javascripts/my_modules/results.js         | 11 +++++++----
 .../javascripts/sitewide/active_storage_previews.js  |  6 ++++++
 app/assets/javascripts/sitewide/image_editor.js      | 12 ++++++++----
 app/views/result_assets/_edit.html.erb               |  4 ++--
 app/views/result_assets/_new.html.erb                |  2 +-
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/my_modules/results.js b/app/assets/javascripts/my_modules/results.js
index 7f1202292..d08dac060 100644
--- a/app/assets/javascripts/my_modules/results.js
+++ b/app/assets/javascripts/my_modules/results.js
@@ -1,7 +1,8 @@
+/* eslint-disable no-unused-vars */
 /*
  global Results ActiveStorage animateSpinner Comments ResultAssets FilePreviewModal
         TinyMCE getParam applyCreateWopiFileCallback initFormSubmitLinks textValidator
-        GLOBAL_CONSTANTS
+        GLOBAL_CONSTANTS ActiveStoragePreviews
 */
 
 (function(global) {
@@ -92,8 +93,9 @@
           // Handle the error
         } else {
           let formData = new FormData();
+          const assetId = form.find('#result_asset_attributes_id').val();
           formData.append('result[name]', form.find('#result_name').val());
-          formData.append('result[asset_attributes][id]', form.find('#result_asset_attributes_id').val());
+          formData.append('result[asset_attributes][id]', assetId);
           formData.append('result[asset_attributes][signed_blob_id]', blob.signed_id);
 
           $.ajax({
@@ -102,7 +104,7 @@
             data: formData,
             success: function(data) {
               animateSpinner(null, false);
-              $('.edit_result').parent().remove();
+              $('.edit-result-asset').parent().remove();
               $(data.html).prependTo('#results').promise().done(() => {
                 $.each($('#results').find('.result'), function() {
                   initFormSubmitLinks($(this));
@@ -113,13 +115,14 @@
                   ResultAssets.initNewResultAsset();
                   expandResult($(this));
                 });
+                ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${assetId}] .attachment-preview img`);
               });
 
               $('#results-toolbar').show();
             },
             error: function(XHR) {
               animateSpinner(null, false);
-              $('.edit_result').renderFormErrors('result', XHR.responseJSON.errors);
+              $('.edit-result-asset').renderFormErrors('result', XHR.responseJSON.errors);
             },
             processData: false,
             contentType: false
diff --git a/app/assets/javascripts/sitewide/active_storage_previews.js b/app/assets/javascripts/sitewide/active_storage_previews.js
index 2a7ddb6bf..b356474fe 100644
--- a/app/assets/javascripts/sitewide/active_storage_previews.js
+++ b/app/assets/javascripts/sitewide/active_storage_previews.js
@@ -27,6 +27,12 @@ var ActiveStoragePreviews = (function() {
     showPreview: function(ev) {
       $(ev.target).css('opacity', 1);
       $(ev.target).parent().removeClass('processing');
+    },
+    reloadPreview: function(target) {
+      $(target)
+        .one('error', (event) => this.reCheckPreview(event))
+        .one('load', (event) => this.showPreview(event))
+        .trigger('error');
     }
   });
 }());
diff --git a/app/assets/javascripts/sitewide/image_editor.js b/app/assets/javascripts/sitewide/image_editor.js
index b451b5a54..df60717bd 100644
--- a/app/assets/javascripts/sitewide/image_editor.js
+++ b/app/assets/javascripts/sitewide/image_editor.js
@@ -1,5 +1,6 @@
-/* global animateSpinner fabric PerfectScrollbar refreshProtocolStatusBar tui Uint8Array*/
-/* eslint-disable no-underscore-dangle */
+/* global animateSpinner fabric PerfectScrollbar refreshProtocolStatusBar tui Uint8Array ActiveStoragePreviews*/
+/* eslint-disable no-underscore-dangle no-unused-vars */
+
 
 var ImageEditorModal = (function() {
 
@@ -364,9 +365,12 @@ var ImageEditorModal = (function() {
         contentType: false,
         processData: false,
         success: function(res) {
-          $(`.asset[data-asset-id=${data.id}] .image-container img`).replaceWith($(res.html).find('.image-container img'));
-          $(`.asset[data-asset-id=${data.id}] .attachment-preview img`).replaceWith($(res.html).find('attachment-preview img'));
+          $(`.asset[data-asset-id=${data.id}] .image-container img`)
+            .replaceWith($(res.html).find('.image-container img'));
+          $(`.asset[data-asset-id=${data.id}] .attachment-preview img`)
+            .replaceWith($(res.html).find('.attachment-preview img'));
           $(`.asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder');
+          ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${data.id}] .attachment-preview img`);
           closeEditor();
         }
       });
diff --git a/app/views/result_assets/_edit.html.erb b/app/views/result_assets/_edit.html.erb
index 9d9fc8029..3747f849c 100644
--- a/app/views/result_assets/_edit.html.erb
+++ b/app/views/result_assets/_edit.html.erb
@@ -1,5 +1,5 @@
 <div class="well">
-  <%= form_with(model: @result, url: result_asset_path(format: :json), data: { remote: true }) do |f| %>
+  <%= form_with(model: @result, url: result_asset_path(format: :json), data: { remote: true }, html: {class: 'edit-result-asset'}) do |f| %>
     <%= f.text_field :name, style: "margin-top: 10px;" %><br />
     <%= f.fields_for :asset do |ff| %>
       <span><strong><%=t "result_assets.edit.uploaded_asset" %></strong></span>
@@ -18,5 +18,5 @@
                    class: 'btn btn-primary save-result' %>
     </div>
   <% end %>
-  <%= javascript_include_tag 'results/result_assets/edit' %>
+  <%= javascript_include_tag 'results/result_assets/edit', nonce: true %>
 </div>
diff --git a/app/views/result_assets/_new.html.erb b/app/views/result_assets/_new.html.erb
index 2ff3cb500..3d56c0f63 100644
--- a/app/views/result_assets/_new.html.erb
+++ b/app/views/result_assets/_new.html.erb
@@ -27,5 +27,5 @@
 
     </div>
   <% end %>
-  <%= javascript_include_tag 'results/result_assets/new' %>
+  <%= javascript_include_tag 'results/result_assets/new', nonce: true %>
 </div>