Merge pull request #1264 from dradis/liquid/async

Liquid/async

app/assets/javascripts/tylium.js

@@ -51,6 +51,7 @@
 //= require tylium/modules/export
 //= require tylium/modules/fileupload
 //= require tylium/modules/issues
+//= require tylium/modules/liquid_async
 //= require tylium/modules/nodes
 //= require tylium/modules/search
 //= require tylium/modules/sidebar

app/assets/javascripts/tylium/modules/liquid_async.js

@@ -0,0 +1,22 @@
+document.addEventListener('turbolinks:load', function () {
+  $('[data-behavior~=liquid-async]').each(function () {
+    const that = this,
+      data = { text: $(that).attr('data-content') },
+      $spinner = $(that).prev().find('[data-behavior~=liquid-spinner');
+
+    fetch($(that).attr('data-path'), {
+      method: 'POST',
+      headers: {
+        Accept: 'text/html',
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
+      },
+      body: JSON.stringify(data),
+    })
+      .then((response) => response.text())
+      .then(function (html) {
+        $(that).html(html);
+        $spinner.addClass('d-none');
+      });
+  });
+});

app/assets/stylesheets/tylium/modules.scss

@@ -149,6 +149,7 @@
 }
 
 .header-underline {
+  align-items: center;
   border-bottom: 1px solid $borderColor;
   display: flex;
   margin-bottom: 0.5em;

app/helpers/application_helper.rb

@@ -1,5 +1,5 @@
 module ApplicationHelper # :nodoc:
-  def markup(text, options={})
+  def markup(text, options = {})
     return unless text.present?
 
     context = {}
@@ -38,8 +38,8 @@ def render_view_hooks(partial, locals: {}, feature: :addon)
     ;nil
   end
 
-  def spinner_tag(spinner_class: 'text-primary')
-    content_tag :div, class: 'd-flex align-items-center justify-content-center spinner-container' do
+  def spinner_tag(spinner_class: 'text-primary', align: 'center', inline: false)
+    content_tag :div, class: "#{inline ? 'd-inline-flex' : 'd-flex' } align-items-center justify-content-#{align} spinner-container" do
       content_tag :div, nil, class: "spinner-border #{spinner_class}"
     end
   end

app/views/evidence/show.html.erb

@@ -30,11 +30,11 @@
             <div class="note-text-inner">
               <h4 class="header-underline">
                 <span class="text-truncate" title="Evidence for this instance">Evidence for this instance</span>
+                <%= render partial: 'shared/liquid_loading' %>
                 <%= render partial: 'actions' %>
               </h4>
-
-              <div class="content-textile" data-behavior="content-textile">
-                <%= markup(@evidence.content, liquid: true) %>
+              <div class="content-textile" data-behavior="content-textile liquid-async" data-path="<%= preview_project_node_evidence_path(current_project, @evidence.node, @evidence) %>" data-content="<%= @evidence.content %>" >
+                <%= markup(@evidence.content) %>
               </div>
               <div class="author-info">
                 <span class="ms-auto">Author: <%= @evidence.author || 'n/a' %></span>

app/views/issues/show.html.erb

@@ -33,10 +33,11 @@
             <div class="note-text-inner">
               <h4 class="mb-4 header-underline">
                 <span class="text-truncate" title="<%= @issue.title %>"><%= @issue.title %></span>
+                <%= render partial: 'shared/liquid_loading' %>
                 <%= render partial: 'actions' %>
               </h4>
-              <div class="content-textile" data-behavior="content-textile">
-                <%= markup(@issue.text, liquid: true) %>
+              <div class="content-textile" data-behavior="content-textile liquid-async" data-path="<%= preview_project_issue_path(current_project, @issue) %>" data-content="<%= @issue.text %>" >
+                <%= markup(@issue.text) %>
               </div>
               <div class="author-info">
                 <span class="ms-auto">Author: <%= @issue.author || 'n/a' %></span>

app/views/notes/show.html.erb

@@ -21,10 +21,11 @@
             <div id="<%= dom_id(@note) %>" class="note-text-inner">
               <h4 class="header-underline">
                 <span class="text-truncate" title="<%= @note.title %>"><%= @note.title %></span>
+                <%= render partial: 'shared/liquid_loading' %>
                 <%= render partial: 'actions' %>
               </h4>
-              <div class="content-textile" data-behavior="content-textile">
-                <%= markup(@note.text, liquid: true) %>
+              <div class="content-textile" data-behavior="content-textile liquid-async" data-path="<%= preview_project_node_note_path(current_project, @note.node, @note) %>" data-content="<%= @note.text %>" >
+                <%= markup(@note.text) %>
               </div>
               <div class="author-info">
                 <span class="ms-auto">Author: <%= @note.author || 'n/a' %></span>

app/views/qa/issues/show.html.erb

@@ -21,6 +21,7 @@
         <div class="note-text-inner">
           <h4 class="mb-4 header-underline align-items-center">
             <span class="text-truncate" title="<%= @issue.title %>"><%= @issue.title %></span>
+            <%= render partial: 'shared/liquid_loading' %>
             <span class="actions">
               <span class="action">
                 <%= link_to edit_project_qa_issue_path(current_project, @issue) do %>
@@ -29,8 +30,8 @@
               </span>
             </span>
           </h4>
-          <div class="content-textile" data-behavior="content-textile">
-            <%= markup(@issue.text, liquid: true) %>
+          <div class="content-textile" data-behavior="content-textile liquid-async" data-path="<%= preview_project_issue_path(current_project, @issue) %>" data-content="<%= @issue.text %>" >
+            <%= markup(@issue.text) %>
           </div>
           <div class="author-info">
             <span class="ms-auto">Author: <%= @issue.author || 'n/a' %></span>

app/views/shared/_liquid_loading.html.erb

@@ -0,0 +1,8 @@
+<div 
+  class="d-inline-flex align-items-center fs-6 fw-light" 
+  data-behavior="liquid-spinner"
+>
+  <span class="mx-2">-</span>
+  <%= spinner_tag spinner_class: 'spinner-border-sm text-primary', align: 'start', inline: true %>
+  <span class="ms-2 text-nowrap">Loading liquid dynamic content</span>
+</div>

spec/support/liquid_shared_examples.rb

@@ -9,14 +9,15 @@
     visit @path
   end
 
-  it 'dynamically renders item properties' do
+  it 'dynamically renders item properties', js: true do
+    expect(page).to have_no_css('span.text-nowrap', text: 'Loading liquid dynamic content', wait: 10)
+
     expect(find('.note-text-inner')).to have_content("Liquid: #{record.title}")
     expect(find('.note-text-inner')).not_to have_content("Liquid: {{#{item_type}.title}}")
   end
 end
 
 shared_examples 'liquid preview' do |item_type, node_association|
-
   before do
     @path = if node_association
       polymorphic_path([:edit, current_project, record.node, record])

spec/support/qa_shared_examples.rb

@@ -78,7 +78,9 @@
       visit polymorphic_path([current_project, :qa, record])
     end
 
-    it 'parses liquid content' do
+    it 'parses liquid content', js: true do
+      expect(page).to have_no_css('span.text-nowrap', text: 'Loading liquid dynamic content', wait: 10)
+
       expect(find('.note-text-inner')).to have_content("Liquid: #{record.title}")
       expect(find('.note-text-inner')).not_to have_content("Liquid: {{#{item_type.to_s}.title}}")
     end