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

@@ -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

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');
     }
   });
 }());

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();
         }
       });

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>

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>