Update shared tasks with new native tables helper [SCI-11245]

app/assets/stylesheets/shared/handson_table.scss

@@ -15,3 +15,49 @@
     border-color: var(--sn-light-grey) !important;
   }
 }
+
+.common-table-format {
+  page-break-inside: avoid;
+  width: 100%;
+
+  tr {
+    text-align: left;
+    vertical-align: top;
+
+    td,
+    th {
+      border: 1px solid $color-silver;
+      padding: 5px;
+
+      span {
+        display: inline-block;
+        min-height: 19px;
+      }
+
+      &.htCenter {
+        text-align: center;
+      }
+
+      &.htRight {
+        text-align: right;
+      }
+
+      &.htJustify {
+        text-align: justify;
+      }
+
+      &.htMiddle {
+        vertical-align: middle;
+      }
+
+      &.htBottom {
+        vertical-align: bottom;
+      }
+
+    }
+
+    th {
+      background: $color-concrete;
+    }
+  }
+}

app/views/shareable_links/my_module_protocol_show.html.erb

@@ -89,3 +89,4 @@
 <%= render 'shared/formulas_libraries' %>
 <%= javascript_include_tag 'shareable_links/my_module_protocol_show' %>
 <%= javascript_include_tag 'shareable_links/repositories' %>
+<%= javascript_include_tag 'vue_legacy_report_table'  %>

app/views/shareable_links/my_module_results_show.html.erb

@@ -54,3 +54,4 @@
 <%= javascript_include_tag 'shared/file_preview' %>
 <%= javascript_include_tag 'pdf_js' %>
 <%= stylesheet_link_tag 'pdf_js_styles' %>
+<%= javascript_include_tag 'vue_legacy_report_table' %>

app/views/shareable_links/my_modules/_left_navigation.html.erb

@@ -1,5 +1,5 @@
 <div class="block pl-2 pb-6 object-contain border-0 border-b border-solid border-sn-light-grey">
-    <%= image_tag "scinote_logo.svg" %>
+    <%= image_tag "scinote_logo.svg", class: "w-full" %>
 </div>
 <h3 class="my-4">
   <%= t("shareable_links.left_navigation.welcome")%>

app/views/shareable_links/my_modules/step_elements/_table.html.erb

@@ -8,8 +8,12 @@
     <% end %>
   </div>
   <div class="table-body group/table-body relative border-solid border-transparent view locked" tabindex="0">
-    <input type="hidden" class="hot-table-contents" value="<%= element.contents_utf_8 %>" />
+    <div class="report-native-table common-table-format" id="native-table-<%= element.id %>">
-    <input type="hidden" class="hot-table-metadata" value="<%= element.metadata.to_json %>" />
+      <native-table-renderer
-    <div class="hot-table-container"></div>
+        :contents="<%= element.contents %>"
+        :metadata="<%= element.metadata.to_json %>"
+      >
+      </native-table-renderer>
+    </div>
   </div>
 </div>