Feature: update Widgets section design to remove thickbox

app/assets/javascripts/vendor.js

@@ -15,9 +15,7 @@
 //= require popper
 //= require bootstrap-sprockets
 // Other
-//= require jquery.blockUI
 //= require facebox
-//= require thickbox
 //= require jquery.dataTables
 //= require chosen.jquery
 //= require autocomplete

app/assets/stylesheets/application.css.scss.erb

@@ -14,7 +14,6 @@
  *= require facebox
  *= require jquery-ui-1.8.1.custom
  *= require jquery.autocomplete
- *= require thickbox
  *= require trumbowyg
  *= require flag-icon
  *= require theme-variables

app/components/widget_block_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class WidgetBlockComponent < ViewComponent::Base
+
+  renders_one :help_text
+  renders_one :widget
+
+  def initialize(id: , title:  , description:)
+    @id = id
+    @title = title
+    @description  = description
+  end
+end

app/components/widget_block_component/widget_block_component.html.haml

@@ -0,0 +1,26 @@
+%div.d-flex{data: {turbo: false}}
+  %div.w-50.mr-3
+    %div
+      %div.card-body
+        %h5.card-title
+          = @title
+        %p.card-text
+          = @description
+
+  %div.w-100.d-flex.justify-content-center
+    %div.card.py-3.px-2{style: "width: 600px"}
+      = render TabsContainerComponent.new(id: @id) do |t|
+        - t.item(title: 'Widget', selected: true)
+        - t.item(title: '') do
+          %span.mx-1
+            See code
+          = inline_svg_tag('json.svg')
+
+        - t.item_content do
+          %div.py-3.d-flex.justify-content-center
+            = widget
+        - t.item_content do
+          = help_text
+
+%hr.divider.w-100
+

app/helpers/application_helper.rb

@@ -102,69 +102,6 @@ def current_user_admin?
     session[:user] && session[:user].admin?
   end
 
-  def draw_note_tree(notes,key)
-    output = ""
-    draw_note_tree_leaves(notes,0,output,key)
-    return output
-  end
-
-  def draw_note_tree_leaves(notes,level,output,key)
-    for note in notes
-      name="Anonymous"
-      unless note.user.nil?
-        name=note.user.username
-      end
-      headertext=""
-      notetext=""
-      if note.note_type.eql?(5)
-        headertext<< "<div class=\"header\" onclick=\"toggleHide('note_body#{note.id}','');compare('#{note.id}')\">"
-        notetext << " <input type=\"hidden\" id=\"note_value#{note.id}\" value=\"#{note.comment}\">
-                  <span class=\"message\" id=\"note_text#{note.id}\">#{note.comment}</span>"
-      else
-        headertext<< "<div onclick=\"toggleHide('note_body#{note.id}','')\">"
-
-        notetext<< "<span class=\"message\" id=\"note_text#{note.id}\">#{simple_format(note.comment)}</span>"
-      end
-
-
-      output << "
-        <div style=\"clear:both;margin-left:#{level*20}px;\">
-        <div  style=\"float:left;width:100%\">
-          #{headertext}
-              <div>
-                <span class=\"sender\" style=\"float:right\">#{name} at #{note.created_at.strftime('%m/%d/%y %H:%M')}</span>
-                <div class=\"header\"><span class=\"notetype\">#{note.type_label.titleize}:</span> #{note.subject}</div>
-                              <div style=\"clear:both\"></div>
-              </div>
-
-          </div>
-
-          <div name=\"hiddenNote\" id=\"note_body#{note.id}\" >
-          <div class=\"messages\">
-            <div>
-              <div>
-               #{notetext}"
-      if session[:user].nil?
-        output << "<div id=\"insert\"><a href=\"\/login?redirect=/visualize/#{@ontology.to_param}/?conceptid=#{@concept.id}#notes\">Reply</a></div>"
-      else
-        if @modal
-          output << "<div id=\"insert\"><a href=\"#\"  onclick =\"document.getElementById('m_noteParent').value='#{note.id}';document.getElementById('m_note_subject#{key}').value='RE:#{note.subject}';jQuery('#modal_form').html(jQuery('#modal_comment').html());return false;\">Reply</a></div>"
-        else
-          output << "<div id=\"insert\"><a href=\"#TB_inline?height=400&width=600&inlineId=commentForm\" class=\"thickbox\" onclick =\"document.getElementById('noteParent').value='#{note.id}';document.getElementById('note_subject#{key}').value='RE:#{note.subject}';\">Reply</a></div>"
-        end
-      end
-      output << "</div>
-            </div>
-          </div>
-
-          </div>
-        </div>
-        </div>"
-      if(!note.children.nil? && note.children.size>0)
-        draw_note_tree_leaves(note.children,level+1,output,key)
-      end
-    end
-  end
 
   def child_id(child)
     child.id.to_s.split('/').last

app/javascript/controllers/class_search_auto_complete_controller.js

@@ -10,8 +10,6 @@ export default class extends OntoportalAutocompleteController {
     }
 
     onFindValue(li) {
-        jQuery.blockUI({ message: '<h1><img src="'+ this.spinnerSrcValue +'" /> Loading Class...</h1>', showOverlay: false });
-
         if (li == null) {
             // User performs a search
             let search = confirm("Class could not be found.\n\nPress OK to go to the Search page or Cancel to continue browsing");
@@ -26,12 +24,7 @@ export default class extends OntoportalAutocompleteController {
         // Appropriate value selected
         if (li.extra) {
             let sValue = jQuery("#jump_to_concept_id").val()
-            document.location = "/ontologies/" + jQuery(document).data().bp.ontology.acronym + "/?p=classes&conceptid=" + encodeURIComponent(sValue) + "&jump_to_nav=true";
-            jQuery.blockUI({
-                message: '<h1><img src="'+ this.spinnerSrcValue + '" /> Loading Class...</h1>',
-                showOverlay: false
-            });
-
+            Turbo.visit("/ontologies/" + jQuery(document).data().bp.ontology.acronym + "/?p=classes&conceptid=" + encodeURIComponent(sValue) + "&jump_to_nav=true")
         }
     }