Add Tags modal to archived tags screen

[SCI-5274]

app/assets/javascripts/projects/canvas.js.erb

@@ -138,11 +138,16 @@ var hammertime;
  * Initializes page
  */
 function init() {
-  bindModeChange();
-  bindAjax();
-  bindWindowResizeEvent();
-  initializeGraph(".diagram .module-large");
-  initializeFullZoom();
+  if($('#module-archive').length) {
+    bindFullZoomAjaxTabs();
+    bindEditTagsAjax($("div.module-large"));
+  } else {
+    bindModeChange();
+    bindAjax();
+    bindWindowResizeEvent();
+    initializeGraph(".diagram .module-large");
+    initializeFullZoom();
+  }
 }
 
 jsPlumb.ready(function () {
@@ -2953,5 +2958,9 @@ var preventCanvasReloadOnSave = (function() {
     })
   }
 
+  function initArchivedView() {
+
+  }
+
   return function() { bindToCanvasSave(preventCanvasReload) };
 })();

app/assets/stylesheets/my_modules.scss

@@ -242,6 +242,13 @@
       .nav {
         border: 0;
       }
+
+      .tab-content {
+        background-color: $color-concrete;
+        .tab-pane > .text-center {
+          margin-top: 5px;
+        }
+      }
     }
   }
 }

app/controllers/my_module_tags_controller.rb

@@ -2,8 +2,8 @@ class MyModuleTagsController < ApplicationController
   include InputSanitizeHelper
 
   before_action :load_vars, except: :canvas_index
-  before_action :check_view_permissions, only: :index
-  before_action :check_manage_permissions, only: %i(create index_edit destroy destroy_by_tag_id)
+  before_action :check_view_permissions, only: %i(index index_edit)
+  before_action :check_manage_permissions, only: %i(create destroy destroy_by_tag_id)
 
   def index_edit
     @my_module_tags = @my_module.my_module_tags.order(:id)

app/views/canvas/full_zoom/_my_module.html.erb

@@ -12,15 +12,23 @@
   data-module-users-tab-url="<%=  index_old_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>"
   data-module-tags-url="<%= my_module_tags_experiment_path(my_module.experiment, format: :json) %>">
 
-  <% if can_manage_module?(my_module) %>
+  <div data-view-mode="active">
+    <% if can_manage_module?(my_module) %>
+      <a class="edit-tags-link pull-right" data-remote="true" href="<%= my_module_tags_edit_url(my_module, format: :json) %>">
+        <%= render partial: "canvas/tags.html.erb", locals: { my_module: my_module } %>
+      </a>
+    <% else %>
+      <span class="edit-tags-link pull-right">
+        <%= render partial: "canvas/tags.html.erb", locals: { my_module: my_module } %>
+      </span>
+    <% end %>
+  </div>
+
+  <div data-view-mode="archived">
     <a class="edit-tags-link pull-right" data-remote="true" href="<%= my_module_tags_edit_url(my_module, format: :json) %>">
       <%= render partial: "canvas/tags.html.erb", locals: { my_module: my_module } %>
     </a>
-  <% else %>
-    <span class="edit-tags-link pull-right">
-      <%= render partial: "canvas/tags.html.erb", locals: { my_module: my_module } %>
-    </span>
-  <% end %>
+  </div>
 
   <div class="panel-heading">
     <h3 class="panel-title">

app/views/experiments/module_archive.html.erb

@@ -23,4 +23,10 @@
       </div>
     </div>
   <% end %>
+
+  <!-- Manage tags modal -->
+  <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
+
 </div>
+
+<%= javascript_include_tag("projects/canvas") %>

app/views/my_module_tags/_index_edit.html.erb

@@ -10,7 +10,7 @@
           <div class="col-xs-6 col-lg-8">
             <h4><%= tag.name %></h4>
           </div>
-            <div class="pull-right">
+            <div class="pull-right" data-view-mode="active">
               <%= link_to "", remote: true, class: 'btn btn-link edit-tag-link', title: t("experiments.canvas.modal_manage_tags.edit_tag") do %>
                 <span class="fas fa-pencil-alt"></span>
               <% end %>
@@ -49,8 +49,8 @@
   </ul>
 <% end %>
 
-<hr>
-<div class="row">
+<hr data-view-mode="active">
+<div class="row" data-view-mode="active">
     <%= bootstrap_form_for [@my_module, @new_mmt], remote: true, format: :json, html: { class: 'add-tag-form' } do |f| %>
       <div>
         <div class="well well-sm">